キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

これでスッキリ!コピペだけで綺麗に統一した SNS ボタンをトップページにも設置する方法

      2014/11/05

ハニーナッツクランチにハマってるキャリコ( @calicocatxyz )です。

イギリスでは Golden Honey Nut Flakes って名前で売ってるんだけど、麻薬か何か入ってる?ってくらい依存性が強くて毎日食べちゃってます ^^;

さて、今日は昨日のエントリーの応用編と言いますか、単一記事の投稿で表示したものをトップページにも表示させます。それじゃラテ、よろしくね♪

こんにちは、ラテにゃ。

そういや SNS ボタンはトップページにもあったにゃと… せっかく単一記事に表示させてるからトップページにもという感じで実装してみたにゃ。

キャリコ
これでスッキリ!SNS ボタンのデザインをコピペだけで綺麗に統一する方法

Ads by Google

トップページに SNS ボタンを実装する

sns.php をコピペする

トップページにある SNS ボタンは home.php を見れば sns-top.php から呼び出してることがわかるにゃ。

昨日のエントリーで書き換えた sns.php を丸ごとコピペして sns-top.php に貼り付けるにゃ。

HTML ソースを書き換える

トップページを確認すると見た目は実装されたように見えるけど、このままだと記事一覧の一番下にある記事の URL が SNS ボタンに読み込まれてしまうにゃ。試しにツイートボタンを押してみると記事のタイトルと URL が入ってることに気付くにゃ。これをトップページの URL にするには PHP のショートコードを呼び出す記述を変更するにゃ。

Twitter とはてなブックマークの場合

↓記事の URL を呼び出すコードを

トップページを呼び出すコードに変更、そして

↓記事のタイトルを呼び出すコードを

ブログ名を呼び出すコードに変更するにゃ。

Facebook と Google+ の場合

↓記事の URL を呼び出すコードを

トップページを呼び出すコードに変更するだけにゃ。

Feedly の場合

そのままでオッケーにゃ。

これでトップページにも単一記事ページと同じく、綺麗に統一した SNS ボタンが実装されたにゃ。

まとめ

綺麗に統一した SNS ボタンをトップページにも配置できたかにゃ? sns-top.php を呼び出せばトップページや単一記事の上部、サイドバーなんかにも表示させることが出来るにゃ。あとは… 吹き出しの数字が増えるのを待つだけにゃ!

今日はここまで、じゃあにゃ~

ライター紹介

ラテ Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

 - STINGER5 , ,

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

1
STINGER5 の記事下にダブルレクタングルをキレイに表示させる方法

絶賛求職中のキャリコ( @calicocatxyz )です。 就職難なんて言葉ど …

header.php を子テーマに作ってファビコンをオリジナル画像に設定する

絶賛入院中のキャリコ( @calicocatxyz )です。 入院中の何がイヤっ …

キャリコのこれはさすがに気づかれる自己満足カスタマイズ
キャリコのこれはさすがに気づかれる自己満足カスタマイズ

もうないかなって思ったけど意外とすぐの更新、キャリコ( @calicocatxy …

STINGER5 の誰にも気づかれない自己満足カスタマイズ

Hello, キャリコ( @calicocatxyz )です。 そろそろ STI …

キャリコの誰にも気づかれない3つの自己満足カスタマイズ
キャリコの誰にも気づかれない3つの自己満足カスタマイズ

STINGER5 のカスタマイズも終わって手持無沙汰のキャリコ( @calico …

STINGER5 の原型を崩さずに細かい部分をカスタマイズしてみた

1日に心電図と血圧と採血が3回もあって、げんなり中のキャリコ( @calicoc …

STINGER5 にアドセンスを入れると、スマホのみ右に寄ってしまう現象の応急処置

旅ブログ移行中のキャリコ( @calicocatxyz )です。 約400ページ …

Photo credit : instagram, muradosmann
STINGER5 で各 SNS のフォローボタンを美しく綺麗に配置する方法

Instagram デビュー迷い中のキャリコ( @calicocatxyz )で …

STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法
STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法

体重がどんどん落ちていく、キャリコ( @calicocatxyz )です。 何も …

STINGER5 でファビコンを導入するときの注意点
STINGER5 でファビコンを導入するときの注意点

いよいよ帰国が5日後に迫ってきたキャリコ( @calicocatxyz )です。 …