ブログの記事下に自分のプロフィールとRSS購読ボタンを設置する

カテゴリー:WordPress    |    タグ:

ブログの記事下に自分のプロフィールとRSS購読ボタンを設置する

このブログの記事したにある購読スペース(RSS登録とかTwitter、Facebook、Google+などのフォローをボタンを設置)というのいいなぁと言って頂いたのですこしアレンジをしたバージョンをカスタマイズ記事としてここに残しておこうと思います。

実装したいカスタマイズ

Stinger Advent Calendar 2013 17日目担当のなべこう(@fukujion)さんのこの記事がきっかけ。

こちらで、実際にやってみたいというカスタマイズが3点ほど

  • 記事下の購読スペース
  • 文字装飾CSS
  • 記事の最後に画像と吹き出し

自分のプロフィールとRSS購読ボタンを設置する

この中の記事下の購読スペースと、記事の最後に画像と吹き出しを合わせて図のような感じにしてみました。

出来上がりの図

出来上がりの図

実際の出来上がりは下のリンクからご覧ください

サンプルをみる

実装

場所は、お好きなところへ。
以下の内容をテンプレートへ記述します。

フィードのURLFeedlyのURLはここでは割愛しますが、
それぞれご自身のものに置き換えてください。
画像はStingerならimagesフォルダ(テーマ内の)に入れてください。


次にCSSで装飾をします。

と、これでPC版の方は出来上がりです!
プロフィール欄のところはお好きな言葉などに書き換えてください。

モバイル版実装

モバイルの方は、実はこのブログでは表示させないようにしています。
ここでは、モバイルでは表示させない方法

wp_is_mobile関数

WordPress3.4からこの関数を使ってモバイルとPCを振り分けることができるようになりました。

ですが、この関数はiPadをモバイルとして扱ってしまいます。
iPadをPCとして認識させるための関数をfunctions.phpへ書きます。

これで、iPadをPCとして認識させることができたので、次にテンプレートには以下のように書きます。

これで完成です!

最後、すこし駆け足できてしまいました。
とっても長くなってしまったので、あとの残りの文字装飾CSSと吹き出しは、また次回に書きたいと思います。

少しでも参考になれば幸いです。


※ 追記
吹き出しの記事を書きました。

こちらカスタムフィールドを使って記事下にまとめや今日の一言などいろいろと表示させてみよう!

よろしければこちらも合わせてお読みください。

ADVERTISEMENT

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

published:2013/12/18    Written by:
カテゴリー:WordPress,      タグ:

最後まで読んでくれた方へ。

閲覧頂きありがとうございました!
お気に召しましたら是非RSS登録やフォローをお願いします!

Twitter

関連記事

cat

ブログタイトルをロゴにしてみるブログカスタマイズ

Stinger5 for Ladysでは、テーマカスタマイザーがないから、ブログタイトルをロゴにでき

記事を読む

Wordpress1

カスタムフィールドを使って記事下にまとめや今日の一言などいろいろと表示させてみよう!

前回このような記事 ブログの記事下に自分のプロフィールとRSS購読ボタンを設置する を書いたのですが

記事を読む

youtube

埋め込んだYouTubeなどの動画をスマホ用にCSSで最適化する方法

ブログに紹介したい動画を貼り付けて載せる場合には、埋め込みコードを使ってブログにコピペしますよね?

記事を読む

jet

バージョンアップしたJetpackがマークダウン対応されたので使ってみた

待ちに待っていた! Jetpackバージョンアップ(バージョン 2.8)でMarkdownが新しく

記事を読む

jQuery

記事内の外部リンクを別窓で開き、画像などをつけて(CSS装飾して)わかりやすくする【jQuery】

外部リンク(他のサイト)は別窓(新しいタブで表示)。そして、外部リンクですよ!というのをアイコンをつ

記事を読む

コメントを残す

1件のトラックバック

ADVERTISEMENT
nijisan

Written by niji_sansan

生まれ落ちた地は神戸。
鉄成分入ってるものに興味あり!
キイロイトリが好き!
感動すると「ほぅ」と言いますw

  • 2019年1月
    « 12月    
     123456
    78910111213
    14151617181920
    21222324252627
    28293031  
電子書籍ストア BookLive!
PAGE TOP ↑