キャリコ

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

  関連記事

STINGER5 のカテゴリ名と件数をカスタマイズする方法

ちょいちょい英語の勉強をしてるキャリコ( @calicocatxyz )です。 …

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

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

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

イビサの夏が恋しいキャリコ( @calicocatxyz )です。 EDM を聴 …

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

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

ファビコンを設定したならアップルタッチアイコンも作ろう

iPhone の Safari に自分のブログをブックマークしたキャリコ( @c …

STINGER5 のブログ説明文の重要性について

誰にも気づかれない自己満足カスタマイズ続行中のキャリコ( @calicocatx …

Stinger5 for Ladys のダウンロード数と採用サイトを調べてわかったこと
Stinger5 for Ladys のダウンロード数と採用サイトを調べてわかったこと

決して暇人ではない、キャリコ( @calicocatxyz )です。 新しいブロ …

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

いつの間にかシリーズ化、キャリコ( @calicocatxyz )です。 自己満 …

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

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

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

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