ハイリンクス

WordPressのプラグインやオススメツール・ソフト、その他実際に使ってみて「コレだ!」というものをご紹介

Stinger5「購読する」ボタンと同じようにソーシャル関連ボタンも表示!

   

stinger5

Stinger5のサイドバーに「購読する」っていうボタンありますよね?

画像としてのボタンじゃなくCSSを使ってのボタンで見栄えが良くてステキだなーって思ってたんです。

でも「購読する」だけじゃ物足りないのでfacebookやtwitterなど他のソーシャル関連のボタンも表示してみました!

スポンサーリンク

ソーシャル関連ボタンを追加

141115_1803

<画像引用元>STINGER5 – WordPressのはじめ方や使い方

この「購読する」がステキ。

これに

facebook
twitter
google+
feedly
mail(お問い合わせフォームへのリンク)

を追加してみました。こんな感じとなります。

141115_1801

PC表示(高解像度)

141115_1802

タブレット表示(低解像度)

 

functions.phpをイジリます

この「購読する」の色合いはテーマカスタマイザーによるものです。このテーマカスタマイザーを解除するしてCSSで任意の色にするにはfunctions.phpにある下記のソースを削除。

これを削除することでテーマカスタマイザーによる影響はありません。

 

sidebar.phpをイジリます

sidebar.phpにRSS関連のソースがあります。

これを参考にfacebook他のも作成してみました。

xxxは各URLを記載しましょう。

facebookとかの前にあるアイコンはコチラのサイトを参考にして下さい。
<参考元>Font Awesome Icons

ちなみにfeedlyのアイコンがなかったので頭文字が同じく「f」であるfacebookの「f」を使用してます。

あと、メールもなかったので「返信する・転送する」マークを使用しました。

 

CSSをイジリます

最後にCSSでボタンの色付けやサイズを調整します。「購読する」とほぼ同じで背景のみボタンに関連する色にすればOKです。

コチラがデフォルトの設定です。

これをこうしました。

 

完成品

先程も見せましたが、これが完成品です。

141115_1801

141115_1802

 

まとめ

各ボタンの配置はsidebar.phpで、フォントはFont Awesome Iconsで、背景色はCSSでイジれば自分なりのボタンが完成します。

ぜひぜひ試してみてください。

 - サイト運営


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

Message

メールアドレスが公開されることはありません。

関連記事

141122_2101
Font AwesomeアイコンをCSSを使ってWordPressサイトに表示させる

Stinger5では記事公開日やカテゴリーなどのアイコンがデフォルトでFont …

small__2872919132
独自ドメインをサーバーに設定する方法(お名前ドットコム+エックスサーバー)

エックスサーバーでサーバー契約を済ませ、お名前ドットコムで独自ドメインを取得した …

medium_4773457853
Xserver(エックスサーバー)の契約方法

当サイトはレンタルサーバーのエックスサーバーを使用して運営しています。今回はこの …

medium_5598172
WordPressでの記事の投稿方法を簡単にまとめました!

WordPressでの記事投稿方法をご説明していきます。 今まで無料ブログで記事 …

origin_4848301878
お名前ドットコムで独自ドメインを取得する方法

エックスサーバーの契約ができたらお次はレジストラで独自ドメインの取得をしていきま …

140105_1803
WordPressにテーマ(テンプレート)をインストールする方法!

WordPressの初期インストールされているテンプレートってちょっとだけ見栄え …

3534516458_48e4e8595f
質問メールをもらうけど「ん?」と感じる困ったメールの特徴

ここ最近、数は少ないですが記事のコメント欄にコメントを残してくれる方がいらっしゃ …

small__503686514
独自ドメインをサーバーに設定する方法(お名前ドットコム+ロリポップ)

ロリポップでサーバーの契約を無事に終了させて、お名前ドットコムにて独自ドメインを …

medium_3462607995
月額缶コーヒー以下からの超低価格のレンタルサーバーロリポップ!の契約方法

FC2やseesaaなどの無料ブログでブログを運営していて、これからさぁレンタル …

medium_4167966264
初心者さん必読!サーバー契約から記事投稿(WordPress)までの流れ

ウェブサイトを全く作ったことがない人にとっては何から始めていいのか?わからないこ …