ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

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

      2015/02/16

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

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

スポンサーリンク

今回、「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サイトから引用させて頂きました。

スポンサーリンク

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

スポンサーリンク

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

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

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

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

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

 - WORDPRESS

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

WordPressテーマ「Stinger3」記事タイトルのフォントカスタマイズ
WordPressテーマ「Stinger3」記事タイトルのフォントカスタマイズ
WordPress iPhone,iPad,Macのアプリ紹介に最適な「App Store Insert」を導入
WordPress iPhone,iPad,Macのアプリ紹介に最適な「App Store Insert」を導入
WordPress[Stinger3用 子テーマ] サイトマップ(目次)を設置する方法
WordPress[Stinger3用 子テーマ]サイトマップ(目次)を設置する方法
WordPress[TwitterCards] ツイッターに概要を表示させる方法
WordPress[TwitterCards] ツイッターに概要を表示させる方法
WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法
WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法
WordPress Popular PostをStinger5と同じ表示にカスタマイズ
WordPress Popular PostをStinger5と同じ表示にカスタマイズ
WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法
WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法
WordPress[Stinger3]Amazonアソシエイトの自動ランキングを導入
WordPress[Stinger3] Amazonアソシエイトの自動ランキングを導入
WordPressテーマ「Stinger3」のトップページの記事の間に区切り線を入れる方法
WordPressテーマ「Stinger3」のトップページの記事の間に区切り線を入れる方法
WordPressテーマ「Stinger3」に子テーマを導入する方法
WordPressテーマ「Stinger3」に子テーマを導入する方法