サクッと3分で!stinger3のSNSボタンにpocketを追加するやり方

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

10485282_642779799125614_8251155603957286180_n

どーもです!

最近、適当な画像素材を組み合わせてつくった画像がブログに結構使えるんじゃないかと思い始めました。

マイブームです。

いつまでマイブームは続くのでしょうか?

とみやすです。

先日ブログを少しいじりました。

防備録。stinger3を6箇所カスタマイズしてみた

僕は、phpもcssもほとんど分からないので、WEBサイトのカスタマイズとか

やるのがおっくうになるのですが、調べながらやってみると以外と難易度の高いもの低いものあり

簡単な部分から仕組みが理解できるようになってくると思います。

というわけで、僕が経験したカスタマイズのやり方はアウトプットしていきます。

  1. ヘッダー
  2. 記事下
  3. pocket
  4. google+
  5. プロフィール写真
  6. 関連記事

 

と6箇所ほどじりましたが本日は3、のpocketの追加の仕方についてです。

簡単だった!SNSボタンにpocketを追加する方法

気になる記事を後で読む機能

pocket、というSNSボタンの追加方法についてです!

これは思いのほか簡単でした!

スクリーンショット 2014-06-19 22.22.07

stinger3は初期設定では、赤枠で囲ったSNSボタンが表示されています。

4つ、に設定していますがこれは簡単に減らしたり増やすことができます。

以外と簡単!3分でできます!

では具体的なやり方をご説明します。

以外と簡単です。

HTMLとCSSもろくに理解してない僕でも、できたので間違いないです。

まず

スクリーンショット 2014-06-19 22.07.41

まず、外観からテーマ編集を選択。

スクリーンショット 2014-06-19 22.08.06

次に、phpやCSSを編集できる画面に。

その中で、sns.phpを選択します。

スクリーンショット 2014-06-19 22.18.49

すると、このコードが記載された画面になります。

赤線は僕が加えたので、出てこないですよ!

<li></li>の間にコードを入れることで、横並びにボタンが並ぶ仕組みになっています。

既にフェイスブックボタンやTwitterボタンが記載されているのがわかると思います。

Pocketボタンを追加したい箇所に、コードボタンを追加記入します。

ここの僕が赤線を加えた箇所に入れればOKです。

例えば、僕であればSNSボタンの最後尾に追加したいので

スクリーンショット 2014-06-19 22.15.24

ここに、Pocketのコードを入れます。

コードがこちら!

<li><a href=”https://getpocket.com/save”class=”pocket-btn”
data-lang=”en”
data-save-url=”<?php get_permalink(); ?>”
data-pocket-count=”vertical”
data-pocket-align=”left” >Pocket</a>
<script type=”text/javascript”>!function(d,i){if(!d.getElementById(i)){var j=d.createElement(“script”);j.id=i;j.src=”https://widgets.getpocket.com/v1/j/btn.js?v=1″;var w=d.getElementById(i);d.body.appendChild(j);}}(document,”pocket-btn-js”);</script>
</li>

このコードはそのまま使用いただけます。

<li></li>このHTMLがリスト表示をしてくれる機能をします。

ですので<li></li>に挟まれたSNSボタンが横並びで表示されています。

僕のように、SNSボタンの中でも最後尾にPocketボタンを追加した場合。

スクリーンショット 2014-06-19 22.15.24

に先ほどのコードを加えるわけです。

スクリーンショット 2014-06-19 22.23.30

このコードを加えたら、ファイルを更新します。

これで作業は終了です。

そうすると

スクリーンショット 2014-06-19 22.27.15

上記のようにPocketボタンが追加されます。

結構簡単!

すごく難しいイメージを持っていたのですが、思ったよりも簡単にできました!

同時に見よう見まねでいじっていると、徐々に仕組みが分かってきます。

ブログでは読んでもらうための仕組みを整えることも大事だと思いますので、僕も色々と実験していきます!

ハウツー系の記事が増えますねw

とりあえず、今回のPocketボタンを追加するのにかかる時間は

10485282_642779799125614_8251155603957286180_n

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

SNSでもご購読できます。

スポンサードリンク







この記事を書いている人について


最後まで読んで頂きありがとうございました!
北海道夕張市から更新してますので気が向いたら、またよろしくお願いします(^^)
 とみやすについての詳細はこちら



follow us in feedly







コメントを残す

*