りんろぐ。

女子でも分かるぷちまにあっく話。

Wordpress テーマカスタマイズ

Stinger3のSNSボックスをカスタマイズ!

2013/09/10

Intro_to_grass
photo credit: poodle_mom2002 via photopin cc

朝と夜は風が少し涼しくなってきましたね。凛(@rin_wan)です。

Stingerをカスタマイズしている時、SNSボックスのカスタマイズは毎回悩む所です。今回はそんなお話です!



SNSボックス

SNSボックスと呼んでいるのはこちらTwitterやFacebook等各種SNSが集まったエリアの事ですよー。
slooProImg_20130908234523.jpg

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を選んで下さいねー(*´ω`*)
Pocket : Queue 2013-09-09 22-17-56

何か英語のページが表示されるので、一番下までスクロール!!Publishersを探して下さい!
Pocket: Options 2013-09-09 22-19-32

次に表示された画面の左側、色々と並んでいる左側「Tool」の中に「Pocket Button」があります。
Pocket for Publishers: Dashboard 2013-09-09 22-21-32

英語ですが分かりやすいので気にしない!スタイル選んでコードをコピーするだけ〜(。・ω・)ノ゙
Pocket for Publishers: Pocket Button 2013-09-09 22-25-03

ただしこれをいきなりソースコードに貼り付けると色々大事なコードを消してしまうことがあるので、一度テキストエディタに貼り付けておきますよ。

そしてテキストエディタでこんな形にして下さいね。

  • さっきコピーしたコード
  • こんな形が出来たらコピーして、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)まで教えてやって下さいませ♪

    次の記事もお楽しみに〜(*`・ω・)ゞ

    スポンサードリンク

    スポンサードリンク

    CATEGORIES & TAGS

    Wordpress, テーマカスタマイズ,

    Author:

    iPhoneアプリ/語学学習/間取り図/ガジェットが大好きです!手帳と宇宙画像が最近の癒しです。WorkFlowyが好きでスマホから操作ができるアプリHandyFlowyとMemoFlowy絶賛オススメ中♡

    スポンサードリンク