【STORK】浮いてるブログランキングボタンをCSSで表現してSNSボタンに混ぜてみた!

ブログランキングバナーが記事で悪目立ちしている

孤独なWordPress生活から脱するべく、記事毎にブログランキングへのリンクを貼ることにしたおまんじゅう。

おまんじゅう
ここかな? うーん、こっちかな?

どうやら設置場所に困っている様子。
各記事の最後に貼りたいものの、どこに置いてもブログランキング用のバナーが浮いてしまうのが悩みとのこと。

途方に暮れたおまんじゅうは潔くバナー設置を諦め、CSSでボタンでリンクすることにしました。

物は試し。早速おまんじゅうの手順を見ていきましょう。

おまんじゅう
やるぞー!

ブログランキングへのリンクをSNSボタンに追加する手順

では、WordPressのメニューから、外観→テーマの編集の順に進んでください。
今回編集するのは下記の二つ。

  • スタイルシート(style.css)
  • parts_sns.php
テーマをアップデートした時にソースコードが消えないよう、customで編集してください(おまんじゅうは仮的に元になるCSSをいじっています。よい子は真似しないでね)。

スタイルシート(style.css)の編集

ランキングボタンの色や形なといった装飾を決めていきます。スタイルシートを開いて下さい。

SNSボタンの記述を探そう

スタイルシートのテキストエリアをクリックしてください。
Ctrl + Fで「SNSの部分」というキーワードで検索し、Enterを押します。

この時、勢い余ってもう一度Enterキーを押すと、検索したキーワードが消えてしまうのでご注意を。

このようなソースコードが出てくるまでCtrl + Fで「SNSの部分」で検索を繰り返して下さい。なお、一度キーワードを入力すると、次は省略できます!

必要なソースコードをコピペしよう

さて、そこからスクロールしていくと、/* Twitter */や/* Facebook */という行が出てくると思います。
ここにはSNSボタンの装飾設定が書かれています。ボタンを赤色にするとか、影の色は暗い色とかですね。

どれでもよいので一つのまとまりをコピーします。
今回は例としてTwitterをコピーしますよ。

コピーできましたね。
では、コピーしたソースコードを、今コピーしたTwitterのまとまりの上か、あるいは下に貼り付けてください。後で自分でみてわかりやすい場所であればこれに限らず、どこでも構いません。
そして、Twitterの部分をすべて任意の名前に書き替えます。例として今回は「blogvillage」にしてみます。

こんな感じ。クラスの名前がblogvillageでもよければこちらのソースをコピペしていただいても構いません。

parts_sns.phpの編集

続きまして、どこにリンクするかを設定していきます。テーマフッターを開いてくださいね。

必要なソースコードをコピペしよう

こちらは検索するまでもないと思いますので、一番下までスクロールしてみてください。するとfeedlyのソースが出てきますね。

この下に改行してブログランキングへのリンクを設定するのが、あとで見たときにわかりやすいと思います。
では早速貼り付けます。

↑このコードを貼り付けると、リンク名の前に付くアイコンが家のマークになります。
「参加ランキング用のURL」、「参加ランキングの名前」は適宜書き換えてくださいね。

作業はこれで完了です。お疲れ様でした!

ブログランキングのバナーをCSSボタンに変えてみた結果

無事にブログランキングへの入り口がなじみました!

おまんじゅう
やったー!

ということでおまんじゅうのブログランキングボタンが浮いてる悩みは解決したのでした。めでたしめでたし。

おまんじゅう
今度は二つとも左に寄ってるのが気になる…。
Sponsored Link




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です