photo credit: poodle_mom2002 via photopin cc
朝と夜は風が少し涼しくなってきましたね。凛(@rin_wan)です。
Stingerをカスタマイズしている時、SNSボックスのカスタマイズは毎回悩む所です。今回はそんなお話です!
SNSボックス
SNSボックスと呼んでいるのはこちらTwitterやFacebook等各種SNSが集まったエリアの事ですよー。
Stingerでは記事の下お呼びスクロールについてくる部分の2箇所です。
このSNSをどう配置するかもブログの醍醐味なので、色々と好きなようにカスタマイズしちゃいましょーヾ(o´∀`o)ノ
表示するSNSのカスタマイズ
それではまずは表示させるSNSの種類をカスタマイズしてみますよー!
種類を減らす
○○は欲しいけど○○はいらないんだよなーっていう気持ちってありますよねぇ@ ‘ェ’ @
そんな時はまずはSNSの種類を減らして好きにしましょー!まずは個別ページのSNSボックスからです。
触るのはsingle.phpです!デフォルトですと52行目あたり、snsbox03を目印に探してみて下さい!
このまとまりの中、「li」と「/li」で囲まれた部分が各SNSの部分です!
それぞれのliのまとまりの中に「twitter」とか「facebook」とか書いてあるので何となく分かると思います。
どれか1つだけ削除したい時は必ず「li」から「/li」までをセットで消して下さいねー。これ間違えるとデザイン崩れますw
Pocketを追加
次は私が大好きなPocketボタンを追加したいと思います!
まずはWebでもアプリでもいいのでPocketを開きます。プルダウンメニューからOptionを選んで下さいねー(*´ω`*)
何か英語のページが表示されるので、一番下までスクロール!!Publishersを探して下さい!
次に表示された画面の左側、色々と並んでいる左側「Tool」の中に「Pocket Button」があります。
英語ですが分かりやすいので気にしない!スタイル選んでコードをコピーするだけ〜(。・ω・)ノ゙
ただしこれをいきなりソースコードに貼り付けると色々大事なコードを消してしまうことがあるので、一度テキストエディタに貼り付けておきますよ。
そしてテキストエディタでこんな形にして下さいね。
こんな形が出来たらコピーして、SNSボックスの中でPocketボタンを表示させたい場所に貼り付けて出来上がりー☆・゚:*(´ω`*人)
あら簡単〜♪
ちなみにこの便利なPublisherツール。英語のヘルプが気になった方はこちらに訳した記事があるのでご利用下さい(。・ω・)ノ゙
【Blog】あなたの知らないPocket for Publishers ヘルプの世界。
追尾型SNSボックスカスタマイズ
さてお次はStingerシリーズに標準装備されている追尾型SNSボックスです。これ自分で1から作るのって大変なのでとても嬉しい機能の1つです( ●´艸`)
搭載されている場所はStinger3であればfooter.phpの42行目あたりから。snsboxを目印に探してみて下さい!
表示SNSを変更する
表示するSNSを変更する方法は上で説明した手順と同じでOKです。
1点注意点としては今回のコードはTOPページを表示した時とそうじゃないページを表示した時の2つのケースが書いてあるので、2箇所変更する必要があること。
例えばTwitterを消したいと思ったらコードは2箇所あるので忘れずに〜!!
SNS追尾を消したい
このSNSボックス気軽に記事をシェアしてほしい!と思うと設置したいのがブロガー心理。
でも意外と苦手な人が多いものまた事実。消してみたくなったら上のコードを丸ごと削除しましょ。それだけで追尾は消えます。あら簡単( ●´艸`)
Stinger3ではスマートフォン版の表示を見やすくする為に色々と変更があったのですが、このSNSボックスがiPhoneの横幅一杯に広がるようになりました。
あったら便利なのですが、あそこまで大きいとちょっと記事をスクロールしにくいとか4Sだと画面が見難いといった意見もチラホラ。
でもあれだけ存在感があるとつい押しちゃうかもしれないのもまた事実。気軽にシェアしてもらえる確率があがる可能性はあります!
消したり出したり。色々検討して見てくださーい!
個人的に1回読んでも理解出来ない残念な子なので、後で何度も読み返す用にPocketボタンあると超絶助かります。色々なBlogで重宝しています(*´ω`*)
凛的まとめ
・SNSはブログの大事な部分!
・作りを理解すればカスタマイズお手の物!!
・Pocketボタンがあると私が喜びます!!!
いかがでしたかー?後でやらなきゃなーと思いつつ後伸ばしにしていた方はぜひこの記事をPocketに登録して週末あたりに挑戦してみて下さーいヾ(o・ω・)ノ
こんなSNSボックスのカスタマイズだってあるんだよー!という方いらっしゃいましたらぜひ凛(@rin_wan)まで教えてやって下さいませ♪
次の記事もお楽しみに〜(*`・ω・)ゞ