ディーエムガジェット

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[Stinger5] プラグインなしで背景を画像にする
WordPress[Stinger5] プラグインなしで背景を画像にする
WordPress[Contact Form 7] ブログにお問い合わせフォームを設置
WordPress[Contact Form 7] ブログにお問い合わせフォームを設置
WordPress[Simple Local Avatars] Gravatarに登録不要!プラグインでアバター画像を変更
WordPress[Simple Local Avatars] Gravatarに登録不要!プラグインでアバター画像を変更
WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法
WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法
WordPress サイドバーにFacebookのいいねボックスを表示する方法
WordPress サイドバーにFacebookのいいねボックスを表示する方法
WordPress[XML Sitemap Generator] 時刻設定を日本時間に修正する方法
WordPress[XML Sitemap Generator] 時刻設定を日本時間に修正する方法
WordPress[Stinger3用 子テーマ]サイドバーのNEW ENTRYを削除する方法
WordPress[Stinger3用 子テーマ]サイドバーのNEW ENTRYを削除する方法
WordPress[Yet Another Related Posts Plugin] RSSに関連記事を追加
WordPress[Yet Another Related Posts Plugin] RSSに関連記事を追加
WordPress[さくらサーバーでCloudFlare] 管理画面にログイン出来ない問題
WordPress[さくらサーバーでCloudFlare] 管理画面にログイン出来ない問題
WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法
WordPressテーマ「Stinger3」のfavicon(ファビコン)を変更する方法