【WordPress.com】アイコンフォント「Genericons」を使ってブログにソーシャルアイコンを設置する

!

2014-05-15現在、まだ、はっきりしたことはわかりませんが、私自身の観測範囲においては「Noticons」だとすべてのテーマかつログアウト時でも、ウィジェットやメニュー、記事中に表示させることができるようになったようです。

2014-04-18現在、テーマ「Twenty Eleven」に設定している別のブログでは、記事中に Genericons がちゃんと表示されました。
Genericons の表示テスト | t demoまた、このブログでも、ウィジェット部では Genericons のアイコンが表示されていることを確認しました(個別表示のページを除く)。
comemo | WordPress.com のまとめサイト(私家版)-1以上から、本来はすべてのテーマで Genericons が使えるはずのところ、何らかの原因で Genericons のフォントを読み込めないケースがあるのではないかと推測しています。

とりあえず、記事中に Genericons が表示されていない現状を記録しておきます。

【WordPress.com】アイコンフォント「Genericons」を使ってブログにソーシャルアイコンを設置する | comemo

どうやら、当初の認識どおり、「Genericons」の適用されているテーマだけで、Genericons を使うことができるようです。このブログでは「Twenty Eleven」を使っていますが、このテーマでは Genericons は使えないようです(2014-04-01 現在)。例えば、Genericons がテーマで使われいると思われるテーマ「Hemingway Rewritten 」の場合、以下のような感じで Genericons のアイコンが表示されます。Genericons の表示テスト | t demo

以前、記事「WordPress.com での アイコン表示についての考察 | comemo」において、WordPress.com の方でブログのデザインに使える「Genericons」というアイコンが準備されていることについて触れましたが、そのときは、すべてのテーマでは使えないとの認識だったのでそのまま放置していたのですが、最近、改めてチェックをかけてみたところ、すべてのテーマで使えそうな感じだったので、とりあえず、Twitter や Facebook 等のソーシャルアイコンの設置方法について検討してみました。あれこれと検討した結果、CSS 等の追加ができなくても(私自身は、汎用性の高くない箇所については HTML タグだけで済ませてしまっても OK との考え方です。)、そのまま使えそうな HTML の記述は以下のとおりです。

<div class="genericon" style="font-size:30px;color:gray;max-width:90%;width:auto;height:100%;overflow:visible;white-space:pre-wrap;word-wrap:break-word;"><span class="genericon-aside"></span><span class="genericon-image"></span><span class="genericon-gallery"></span><span class="genericon-video"></span><span class="genericon-status"></span><span class="genericon-quote"></span><span class="genericon-link"></span><span class="genericon-chat"></span><span class="genericon-audio"></span><span class="genericon-dribbble"></span><span class="genericon-twitter"></span><span class="genericon-facebook"></span><span class="genericon-facebook-alt"></span><span class="genericon-wordpress"></span><span class="genericon-googleplus"></span><span class="genericon-linkedin"></span><span class="genericon-linkedin-alt"></span><span class="genericon-pinterest"></span><span class="genericon-pinterest-alt"></span><span class="genericon-flickr"></span><span class="genericon-vimeo"></span><span class="genericon-youtube"></span><span class="genericon-tumblr"></span><span class="genericon-instagram"></span><span class="genericon-codepen"></span><span class="genericon-polldaddy"></span><span class="genericon-googleplus-alt"></span><span class="genericon-path"></span><span class="genericon-skype"></span><span class="genericon-digg"></span><span class="genericon-reddit"></span><span class="genericon-stumbleupon"></span><span class="genericon-pocket"></span><span class="genericon-category"></span><span class="genericon-tag"></span><span class="genericon-time"></span><span class="genericon-user"></span><span class="genericon-day"></span><span class="genericon-week"></span><span class="genericon-month"></span><span class="genericon-pinned"></span><span class="genericon-unzoom"></span><span class="genericon-zoom"></span><span class="genericon-show"></span><span class="genericon-hide"></span><span class="genericon-close"></span><span class="genericon-close-alt"></span><span class="genericon-trash"></span><span class="genericon-star"></span><span class="genericon-home"></span><span class="genericon-mail"></span><span class="genericon-edit"></span><span class="genericon-reply"></span><span class="genericon-feed"></span><span class="genericon-warning"></span><span class="genericon-share"></span><span class="genericon-attachment"></span><span class="genericon-location"></span><span class="genericon-checkmark"></span><span class="genericon-menu"></span><span class="genericon-refresh"></span><span class="genericon-minimize"></span><span class="genericon-maximize"></span><span class="genericon-404"></span><span class="genericon-summary"></span><span class="genericon-cloud"></span><span class="genericon-key"></span><span class="genericon-dot"></span><span class="genericon-next"></span><span class="genericon-previous"></span><span class="genericon-expand"></span><span class="genericon-collapse"></span><span class="genericon-dropdown"></span><span class="genericon-dropdown-left"></span><span class="genericon-top"></span><span class="genericon-draggable"></span><span class="genericon-phone"></span><span class="genericon-send-to-phone"></span><span class="genericon-plugin"></span><span class="genericon-cloud-download"></span><span class="genericon-cloud-upload"></span><span class="genericon-external"></span><span class="genericon-document"></span><span class="genericon-book"></span><span class="genericon-cog"></span><span class="genericon-unapprove"></span><span class="genericon-cart"></span><span class="genericon-pause"></span><span class="genericon-stop"></span><span class="genericon-skip-back"></span><span class="genericon-skip-ahead"></span><span class="genericon-play"></span><span class="genericon-tablet"></span><span class="genericon-send-to-tablet"></span><span class="genericon-info"></span><span class="genericon-notice"></span><span class="genericon-help"></span><span class="genericon-fastforward"></span><span class="genericon-rewind"></span><span class="genericon-portfolio"></span><span class="genericon-heart"></span><span class="genericon-code"></span><span class="genericon-subscribe"></span><span class="genericon-unsubscribe"></span><span class="genericon-subscribed"></span><span class="genericon-reply-alt"></span><span class="genericon-reply-single"></span><span class="genericon-flag"></span><span class="genericon-print"></span><span class="genericon-lock"></span><span class="genericon-bold"></span><span class="genericon-italic"></span><span class="genericon-picture"></span><span class="genericon-rightarrow"></span><span class="genericon-downarrow"></span><span class="genericon-leftarrow"></span></div>

そのまま記事に貼り付けると以下のような感じになります。


適宜、大きさや


色を変更できます。


最初の方の「 `ont-size:30px;color:gray;` 」のところで大きさと色を調整すれば OK です。

ソーシャルアイコンとして使うときには、以下の様な感じで「 “ 」で genericons のアイコンの部分を囲って Twitter 等へジャンプできるようにしたり、文字を追加したりすればいいと思います。

<div class="genericon" style="font-size: 16px;color: #333;max-width: 100%;width: auto;height: 100%;overflow: visible;white-space: pre-wrap;word-wrap: break-word;"><a href="https://twitter.com/asazuki508"><span class="genericon-twitter"> Twitter</span></a>  <a href="https://www.facebook.com/pages/Comemo/300930233266055?ref=hl"><span class="genericon-facebook"> Facebook</span></a>  <a href="http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fcomemo508.wordpress.com%2Ffeed%2F"><span class="genericon-feed"> Feedly</span></a></div>

上記の HTML タグをテキストウィジェットに貼り付けたら、ブログ上では以下のような感じで表示されます。

AccessMenuBarApps-7

なお、レンタルサーバ等にインストールして使うタイプの WordPress で Genericons を使う場合には、プラグイン「[Genericon’d](http://wordpress.org/plugins/genericond/)」をインストールすれば、とりあえず genericons を使えるようになりますが、私の認識だと、そのままだと ie8 等では表示されませんので、そのあたりが気になる方はテーマのディレクトリ(ルート?)のところに「font」フォルダ(ダウンロード先:[http://genericons.com/](http://genericons.com/) )をアップロードすればうまくいくかもしれません。

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。