モッピー!お金がたまるポイントサイト

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

2015/02/16

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

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

[adsense]

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

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

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

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

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

 

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

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

ユーザーフロー

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

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

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

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

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

[adsense]

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

WordPress[Stinger3] 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 alt="LINEで送る" src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" /></a>

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

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

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

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

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

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

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

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

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のボタンを追加しているので、下記のような表示になっています。

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

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

      <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>タグの間のコードは先程作った文字列です。最終的にこのような見栄えになると思います。

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

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

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

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

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

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

img.borderless {
	border: 0;
}

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

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

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

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

[adsense]

29行目から37行目までの実際のコードはこちら

<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>

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

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

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

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

この記事を書いた人

ディーエムガジェット 

非IT系エンジニア。日々の出来事や自分の好きな物などの紹介をメインに色々発信していきます。2012 年から禁煙を開始して68キロぐらいだった体重が2012年6月には75キロまで増加。ヤバい!と感じてダイエットを開始。一回65キロまで落としましたが、2018年8月現在また72キロまで増加。こんな身体でもトライアスロンに出場予定「プロフィールはこちら

このエントリーをはてなブックマークに追加

WORDPRESS

Posted by dmgadget