【Gush2】サイドバーにSNSアイコンを追加 ①画像を作る

   2015/12/03   icon-clock-o読了時間:約7分11秒

Gush2のサイドバーに設置されているSNSアイコン。
Gush2の初期状態ではTwitter、Facebook、Google+、RSS の4つのボタンが並んでいます。
SNSボタン
せっかくだしもうちょっとボタンを追加したいなあと思って
yahoo!ブックマーク
はてなブックマーク
Pocket

この3つをどうにかこうにか追加しましたので、自分の備忘録も兼ねて
設置の手順をご紹介したいと思います。
私と同じようにどこをどう書き換えるか悩んでいる方のお役に立てれば幸いです。

設置前にご注意

なんかおかしくなっちゃった時や、過去のファイルを確認したい時のために
PHPファイルなどの編集を行う前には必ずバックアップを取り、
自己責任にて編集していただくようお願いいたします。

デフォルトの状態や、一番最初の設定方法などは作者であるEllora様の記事
SNSボタン初期設定とカスタマイズ方法に説明がありますので確認してみてくださいね。
この記事内の 各SNSの特徴と記述の解説 の項目でも
URLの書き換えについて説明していますので合わせてご覧ください。

また、今回ご紹介するように画像でアイコンを設置したり、SNSアイコンを追加したことによって
WordPressの表示速度が遅くなることがあります。
Gush2では作者さんが高速化の一助としてアイコン画像ではなくアイコンフォントを使ってくださっているので
せっかく高速化してくれてるんだし、サクサク表示させたいからSNSアイコンは最低限でいいや、という方は
アイコン追加を行わないほうが良いかと思います。
アイコンは追加したいけど遅いのは困るし・・・という場合は
【WordPress】 高速化プラグイン おすすめ3つ 【ページ表示速度アップ】をご参考に
WordPress全体の高速化を考えてみてください。
また、CSSによってボタン風の装飾を作って設置すれば画像よりも動作が軽くなります。
ご自分のお好みに合わせて設置方法を選んでください。

サイドバーの幅とアイコンの大きさ

サイドバーのSNSアイコンの領域では、アイコンが均等に並ぶようにCSSが設定されています。
そのためサイドバーの幅の内であれば、ボタンを追加しても自動で綺麗に並んでくれます。
しかしそれぞれのアイコンの幅の合計がサイドバーの幅を超えてしまうと
横にはみ出したり、一個だけポツンと下の行に回されたりとレイアウトが崩れてしまうので、
あらかじめ設置したいボタンの数と、適したサイズを考えてから設置してください。

私が設定している状態はこちら。
SNSアイコン追加
追加したアイコン画像は 32×32px のサイズです。

アイコン画像を作る

今回設置するボタンは意匠としては簡単なので、ペイントなどの描画ソフトで簡単に作ることができます。
yahoo!ブックマークが『Y!』、はてなブックマークが『B!』、Pocketがポケットのマーク。
SNSアイコンを描く
YやBは普通にテキストを入れるだけですし、
ポケットも適当に四角と丸をくっつけて、白色にしたペンで icon-angle-down の部分をにょっと描くだけ。
ペイントではちょっと描きづらい、という時は無料の描画ソフトなども試してみてください。
 ⇒無料ペイントツール FireAlpaca

全部のアイコンを自作してみるも良し、ちょうど良く使える無料素材のアイコンがあったならそれを使うも良し。
画像の準備ができたらFTPソフトで任意のフォルダにアップロードしてURLを確認しておいてください。

各SNSのカラーコード

画像作りのご参考に各SNSのカラーコードを載せておきます。
また、私が作ったアイコン画像も下に置いておきますので使えそうならご遠慮なくどうぞ(=ФωФ=)ノ

Twitterのカラーコード

#55acee
R:85 G:172 B:238
Twitterアイコン

Facebookのカラーコード

#3b5998
R:59 G:89 B:152
Facebookアイコン

Google+1のカラーコード

#dd4b39
R:221 G:75 B:57
Google+1アイコン

RSSのカラーコード

#f26522
R:242 G:101 B:34
RSSアイコン

Yahoo!のカラーコード

#ff0033
R:255 G:0 B:51
Yahoo!アイコン
一応カラーコードがありますが、小さなアイコンを作るくらいなら普通の赤でも大丈夫かと思います。

ちなみに英語版Yahoo!の場合、ロゴは同じですが公式カラーは紫です。
#400191
R:64 G:1 B:145
Yahoo!アイコン2

はてなのカラーコード

#008fde
R:0 G:143 B:222
アイコン

Pocketのカラーコード

#d3505a
R:211 G:80 B:90
Pocketアイコン

feedlyのカラーコード

私はいまだにfeedlyを使ったことがないのですが、ついでなのでご紹介。
#6cc655
R:108 G:198 B:85
feedlyアイコン

SNSアイコン素材

私が勢いに任せて作ったものなので拡大すると雑さが浮き彫りになりますが、
小さいままなら使えなくもない・・・かもしれない U・x・U
もし使えるようでしたら【 右クリック⇒画像を保存 】してご自由にお使いください。

【 一応ご注意 】
※ご自身のサイトやブログでのご利用に限ります。二次配布は禁止です。
※下記サイトでの使用は禁止とさせていただきます。
  ・法令、公序良俗、一般常識に反する内容のサイト
  ・特定の個人・企業・団体を誹謗・中傷する内容のサイト
  ・当サイトおよび当サイトからのリンク先に不利益を与えるサイト
※個人利用・商用利用を問わず、ご連絡やリンク表記も必要ございません。
 でももしリンクしてもらえたら私が個人的にすごく喜びます。
要するに普通の方が普通に使う分には何の制約も問題もありません d(´▽`*)





こちらのピンクのアイコンは全て透過(=背景が透ける)画像になっています。



 icon-hand-o-right 【Gush2】サイドバーにSNSアイコンを追加 ②PHPファイルを編集に続きます。

<2015年9月7日追記>
Googleのロゴが新しくなり、Google+1ボタンのデザインも変わったので新しいアイコンを作りました。
合わせてご覧ください。 icon-hand-o-right 【SNSボタン素材】 Google+の新しいアイコン

 良かったら押してみてください♥

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