スポンサーリンク

【Stinger3】「LINEで送る」と「Pocket」の機能をブログに追加!「LINEで送る」ボタン設置方法

現在、ブログを試行錯誤してカスタマイズ中ですので、「ブログ運営」のカテゴリーから連投記事となります。

そして、今回新たに追加した機能は「LINEで送る」と「Pocket」です。

もはや「LINEで送る」機能をつけることはユーザビリティ的にもマストですが、実は「Pocket」の利用者もかなり多いようですね。

この機能をつけた途端、「Pocket」のカウンターが幾つか上がったことに驚きました。

ということは、今までこのブログに訪問して、「Pocketないのかー」って思ったひとも多かったのではないかと思われます。

もっと早く装備しておけばよかったですねm(_ _)m

では、まず今回のエントリーでは「LINEで送る」ボタンの追加設置方法をまとめます。

 

スポンサーリンク

「LINEで送る」ボタンを記事下に追加する方法(Stinger3)

スクリーンショット 2015-03-24 10.31.18

▲まずはhttps://media.line.me/howto/ja/」にアクセスします。

アクセスしたら、ページの下の方にある「ボタン画像をダウンロード」から、画像をダウンロードします。

 

スクリーンショット 2015-03-24 10.38.31

▲次いで、同じページにあるコード記述例(WordPressのテンプレートに記述する場合)をコピーします。

コピーしたコードは、「外観」>「テーマの編集」>「sns.php」に貼り付けます。(一応貼り付ける前にバックアップをとっておきましょう)

コードの前後に <li>今回のコード</li> を記述したら、どのSNSボタンの前後に設置するのかを考えて貼り付け、保存しましょう。

↓こんな感じです。

<li>
<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>
</li>

 

あとは、はじめにダウンロードした画像を、「メディア」>「新規追加」からアップして、アップした画像のURLを、さっき貼り付けたコードの[ボタン画像のURL]の部分に貼り付けます。

最後に、[ボタン幅]、[ボタン高さ]に数字を入力して、保存すれば完了となります。

 

管理人のひとこと

備忘録も兼ねた記事ですが、ぼくはPHPとかCSSとか初心者なので、説明がわかりにくかったらスミマセン。

おかしな点があればご指摘ください。

また、当ブログでは追従するSNSBOXはありませんので、そこへのボタン追加方法は記載していません。

追従するSNSBOXに追加する場合は、「footer.php」の編集を行ってください。

初心者でも、自分でここまでカスタマイズできるWordPressって素敵ですね。

ではまた!

スポンサーリンク