WordPress[Stinger3] LINEで送るボタンを設置

今までdmgadget（ディーエムガジェット）で行ってきたSNSボックスのカスタマイズは、WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法や、
WordPressの人気テーマ「Stinger3」の追尾型SNSボックスを削除する方法だったり、
WordPress[Stinger3] 記事下のSNSボックスの背景色を変更する方法などです。

今回、「LINEで送るボタンは設置してなかったなぁ」とふと思ったので設置してみることにしました。完成するとこのようになります。

今回も備忘録として残そうと思います。

SNSボックスにLINEで送るボタンを設置

まずは、LINEのサイトで貼付けるコードを入手してきます。下記のリンクから飛びましょう！

設置方法｜LINEで送るボタン

LINEのサイトに行くとまず「ガイドライン」を確認してください！とのことなのでなんとなく読みます。そしてその下に「LINEで送るボタンとは？」の説明文があります。

LINEで送るボタンは、スマートフォンWebサイト、またはアプリから簡単にLINEで情報をシェアすることができるボタンです。

ユーザーフロー

LINEで送るボタンは、LINEユーザーが用途に合わせてさまざまな情報を友だちに簡単にシェアできるように設計されています。 LINEで送るボタンのユーザーフローは次のとおりです。

1. ユーザーがLINEで送るボタンをタップ
2. LINEがインストールされている場合、LINEアプリが起動し、シェア先を選択します。

(1) トーク : 友だち(複数選択可)や参加しているグループにトークで投稿できます。
(2) ホーム : 送信先の選択画面の右上のボタンから、自分のホームに送ることができます。

ホームへの投稿は、タイムラインでLINEの友だち全員が見ることができます。

LINEのWEBサイトから引用させて頂きました。

LINEのWEBサイトの中段ぐらい「技術仕様」の下「記述例」にWEBサイトに設置する場合の文字列があるのでそれをコピーして置きます。

下記にも記載しておきます。

<a href="//line.me/R/msg/text/?LINE%E3%81%A7%E9%80%81%E3%82%8B%0D%0Ahttp%3A%2F%2Fline.me%2F"><img alt="LINEで送る" src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" /></a>

次にページ下の「デザイン」からボタンの画像をダウンロードします。「ボタン画像をダウンロード」のボタンからダウンロードしてください。

ダウンロードしたボタンをメディアにアップロード

先程ダウンロードしたボタンを解凍して、自分が使用したいボタンを自分のWordPressのメディアにアップします。

管理画面　→　メディア　→　新規追加からボタン画像をアップしてURLを入手していください。

メディアのアップロードにファイルをドロップまたはファイルを選択してアップロードした後、右下の編集に行きます。次のページの右側のサイドバーに「ファイルのURL」が表示されるので、

https://dmgadget.net/wp-content/uploads/2014/03/linebutton_36x60.png

こちらをコピーしておきます。（このコードはサンプルです。）

そして先程、LINEのサイトで入手したこちらのコードの、

<a href="//line.me/R/msg/text/?LINE%E3%81%A7%E9%80%81%E3%82%8B%0D%0Ahttp%3A%2F%2Fline.me%2F"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>

img src=”[ボタン画像のURL]” の部分にアップしたメディアのURLを入れます。ボタン幅とボタン高さにも表示したい数字を入れます。最終的な文字列はこうなります。

<a href="//line.me/R/msg/text/?LINE%E3%81%A7%E9%80%81%E3%82%8B%0D%0Ahttp%3A%2F%2Fline.me%2F"><img src="https://dmgadget.net/wp-content/uploads/2014/03/linebutton_36x60.png" width="40" height="64" alt="LINEで送る" /></a>

最終的に仕上がったこのコードをStinger3のsns.phpにコピペします。

sns.phpを開きます

管理画面　→　外観　→　テーマ編集　→　sns.phpで開いても大丈夫です。自分はTransmitを使用しているのでそちらで説明をして行きます。

Transmit
カテゴリ: ユーティリティ
現在の価格: ¥3,400

sns.phpを開きます。前回、WordPress「Stinger」のSNSボタンにPocketとFeedlyを追加する方法でPocketとFeedlyのボタンを追加しているので、下記のような表示になっています。

ここの３２行目以降に下記のコードを足します。

      <li><a href="//line.me/R/msg/text/?LINE%E3%81%A7%E9%80%81%E3%82%8B%0D%0Ahttp%3A%2F%2Fline.me%2F"><img src="https://dmgadget.net/wp-content/uploads/2014/03/linebutton_36x60.png" width="40" height="64" alt="LINEで送る" /></a>
	</li>

＜li＞と＜/li＞タグの間のコードは先程作った文字列です。最終的にこのような見栄えになると思います。

それでは記事下のSNSボックスを確認してみましょう。

画像に囲み線が表示されてしまっています

自分のStinger3は画像に囲み線が表示されるようになってしまっているので、表示しないように変更します。もっと簡単な方法をご存知の方は教えて頂きたいです！自分のやり方では、スタイルシート(style.css)に下記のコードを記述します。（画像に囲み線が入らないようにする設定）

/*-----------------------------
borderless
------------------------------*/

img.borderless {
	border: 0;
}

そしてさっきのコードに「class=”borderless”」を追加します。

最終的に下記のようになります。

feedlyの画像にも囲み線が入っていたので、「class=”borderless”」を追加しました。下記に実際のコードも残しておきます。

２９行目から３７行目までの実際のコードはこちら

<div id="feedly-followers">
<span id="feedly-count" class="fdly-count"><?php echo $subscribers; ?></span>
<a href='//cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fdmgadget.info%2Frss'  target='blank'><img id='feedlyFollow' src='//s3.feedly.com/img/follows/feedly-follow-rectangle-volume-small_2x.png' alt='follow us in feedly' width='66' height='20' class="borderless"></a></div>
	</li>
      <li><a href="//line.me/R/msg/text/?LINE%E3%81%A7%E9%80%81%E3%82%8B%0D%0Ahttp%3A%2F%2Fline.me%2F"><img src="https://dmgadget.net/wp-content/uploads/2014/03/linebutton_36x60.png" width="40" height="64" alt="LINEで送る" class="borderless"/></a>
	</li>
    </ul>
  </div>
</div>

となります。これで囲み線が消えたはずです、確認してみましょう。

LINEで送るボタンが設置出来ました

現状、この方法でしか囲み線の消し方はわかりませんが、もっと簡単でわかりやすい情報が手に入ったらここで更新したいと思います。読んで頂いてありがとうごさいました。