【WordPress.com】 サイドバー等にソーシャルアイコンを設置する方法についての検討

最終更新日:2015-04-21

ここでは、WordPress.com のブログ・サイトから Twitter や Facebook 等へアイコン付きのリンクをはる方法について考えてみました。

Fictive | Making it personal at WordPress.com
Fictive | Making it personal at WordPress.com

テーマにもともと備わっているソーシャルアイコンの設置機能を使う

一昔前までは一部のプレミアムテーマ(有料テーマ)にしかソーシャルアイコンの設置機能はついていませんでしたが、最近では、「Fictive」、「Edin」等、無料のテーマにもそういった機能が備わるようになりました。設置する方法はいくつかありますが、最近、メジャーになってきているかなと感じているのは、WordPress のメニュー機能を使った方法です。

以下のようにメニュー機能に twitter 等へのリンクを含むメニューセットを作成し、フッター等のメニューエリアに設置すると、

メニュー ‹ t demo — WordPress

以下のような感じでソーシャルアイコンが設置されます。概ね、URL の特定の文字に対応させてソーシャルアイコンが切り替わるようになるしくみのようですが、テーマの種類によってはラベル等に対応させているものもあるようです。

t demo | WordPress.com のデモ用-1

about.me ウィジェットを使う

about.me というサービスの方で、twitter 等を登録し、

about.me | your personal homepage
about.me | your personal homepage

About.me ウィジェットを使うと、

ウィジェット ‹ t demo — WordPress

例えば、以下のような感じで表示されます。

Yusaku Hamajima Blog | 浜島裕作のブログ:メモ以上ドラフト未満
Yusaku Hamajima Blog | 浜島裕作のブログ:メモ以上ドラフト未満 (2015-03-07現在は表示されていないことを確認済み)

Gravatar プロフィールウィジェットを使う

Gravatar プロフィールウィジェット 1 を使うと、以下のような感じでソーシャルアイコンを表示させることができます。ちょっと小さめです。

t demo | WordPress.com のデモ用-2

「SNS アイコン」ウィジェットを使う.

ウィジェット「SNS アイコン」の管理画面は以下のような感じで、

2015-04-21 at 10.59

実際にブログに設置すると以下のような感じで表示されます。

2015-04-21 at 11.07

ユーザー名の入力欄にユーザー名等を入力してもうまくいかない場合は、開きたいページを一旦、表示させて、そのページの URL のうしろの方をコピペするとうまくいくかもしれません。例えば、Facebook ページの場合ですと、以下の部分をコピペしたら、ちゃんとリンク付けできました。

2015-04-21 at 11.15

テキストウィジェットを使う

たとえば、以下のような記述をテキストウィジェットに追加すると、

<div class="noticon" style="font-size:12px;color:#777;max-width:100%;width:auto;height:100%;overflow:visible;white-space:pre-wrap;word-wrap:break-word;"><span class="noticon noticon-facebook"><span style="display:none;">.</span></span><a href="https://www.facebook.com/pages/Comemo/300930233266055?ref=hl"> Facebook</a>|<span class="noticon noticon-twitter"><span style="display:none;">.</span></span><a href="https://twitter.com/asazuki508"> Twitter</a></div>

以下のような感じで、テキスト付きでソーシャルアイコンを表示されます。

comemo | WordPress.com のまとめサイト(私家版)

ウェブフォント Noticons ではなく、画像のアイコンを使う場合には、以下のページで説明されいているとおりにすれば OK です。


  1. Gravatar ウィジェットとは別に Gravatar プロフィールウィジェットというのがあります。