WordPress.com での アイコン表示についての考察

最終更新日:2016-02-26

sdfsfsdf
 

ブログ等でアイコンを追加する場合、私の場合は

自分で作ったり、

adfadsf
 

画面の一部をそのまま切り取って使ったり、

adfasdf-2
 

クリエイティブ・コモンズ(大雑把に言うと制作元をはっきりと明示した上で使えるもの)のアイコンを使ったりしています。

safdafds
GLYPHICONS – library of precisely prepared monochromatic icons and symbols.

私自身は使っていませんが、「Gravatar プロフィール」ウィジェット等を使う方法もあります。

sadfafasd
 

一方、「Web フォント」と呼ばれているものを使う方法もあるようですが、今のところ、使用の方は一部のテーマに限られているようです。

WordPress.com で表示可能な Web フォントには2種類あるようで、ひとつは「Noticons」、もうひとつは「Genericons」と呼ばれているようです。

Noticons
Noticons

Noticons の方は、WordPress.com の著作権マークが付いているので、誰でも自由に使えるものではないようです。

Noticons-1
 

こんな断り書きもあります。

Use Genericons for themes and other projects.

Noticons

一方、WordPress.com のフォーラムの方を見てみると、Noticons は管理画面での使用を想定しており、そのせいかログインしている状態でしか表示されないようです。

At this time, Noticons are only used for system-level items at WordPress.com (The Dashboard, Notifications, Reader, Stats, admin bar, etc), so they are only loaded for logged in users.

Noticons « WordPress.com Forums

一方、Genericons というのは「GPL」と書いてあるので、使用の際にその旨コード等に記載しておけば、誰でも自由に使えるもののようです。

sdfsfsdf
Genericons – a free, GPL, flexible icon font for blogs!

これら2つの Web フォントをテーマ「BonPress 」で表示するとこんな感じです(noticons の方は1個だけ)。

sadfsdfds
 

記事の方にはこんな感じのものを追加し、

<h4>genericon</h4>
/* Post formats */
<div style="font-family: 'Genericons';">
<div class="genericon-standard"></div>
<div class="genericon-aside"></div>
<div class="genericon-image"></div>
<div class="genericon-gallery"></div>
<div class="genericon-video"></div>
<div class="genericon-status"></div>
<div class="genericon-quote"></div>
<div class="genericon-link"></div>
<div class="genericon-chat"></div>
<div class="genericon-audio"></div>
/* Social icons */
<div class="genericon-github"></div>
<div class="genericon-dribbble"></div>
<div class="genericon-twitter"></div>
<div class="genericon-facebook"></div>
<div class="genericon-facebook-alt"></div>
<div class="genericon-wordpress"></div>
<div class="genericon-googleplus"></div>
<div class="genericon-linkedin"></div>
<div class="genericon-linkedin-alt"></div>
<div class="genericon-pinterest"></div>
<div class="genericon-pinterest-alt"></div>
<div class="genericon-flickr"></div>
<div class="genericon-vimeo"></div>
<div class="genericon-youtube"></div>
<div class="genericon-tumblr"></div>
<div class="genericon-instagram"></div>
/* Meta icons */
<div class="genericon-comment"></div>
<div class="genericon-category"></div>
<div class="genericon-tag"></div>
<div class="genericon-time"></div>
<div class="genericon-user"></div>
<div class="genericon-day"></div>
<div class="genericon-week"></div>
<div class="genericon-month"></div>
<div class="genericon-pinned"></div>
/* Other icons */
<div class="genericon-search"></div>
<div class="genericon-unzoom"></div>
<div class="genericon-zoom"></div>
<div class="genericon-show"></div>
<div class="genericon-hide"></div>
<div class="genericon-close"></div>
<div class="genericon-close-alt"></div>
<div class="genericon-trash"></div>
<div class="genericon-star"></div>
<div class="genericon-home"></div>
<div class="genericon-mail"></div>
<div class="genericon-edit"></div>
<div class="genericon-reply"></div>
<div class="genericon-feed"></div>
<div class="genericon-warning"></div>
<div class="genericon-share"></div>
<div class="genericon-attachment"></div>
<div class="genericon-location"></div>
<div class="genericon-checkmark"></div>
<div class="genericon-menu"></div>
<div class="genericon-top"></div>
<div class="genericon-minimize"></div>
<div class="genericon-maximize"></div>
<div class="genericon-404"></div>
<div class="genericon-spam"></div>
<div class="genericon-summary"></div>
<div class="genericon-cloud"></div>
<div class="genericon-key"></div>
<div class="genericon-dot"></div>
<div class="genericon-next"></div>
<div class="genericon-previous"></div>
<div class="genericon-expand"></div>
<div class="genericon-collapse"></div>
<div class="genericon-dropdown"></div>
<div class="genericon-dropdown-left"></div>
<div class="genericon-top"></div>
<div class="genericon-draggable"></div>
<div class="genericon-phone"></div>
<div class="genericon-send-to-phone"></div>
<div class="genericon-plugin"></div>
<div class="genericon-cloud-download"></div>
<div class="genericon-cloud-upload"></div>
<div class="genericon-external"></div>
<div class="genericon-document"></div>
<div class="genericon-book"></div>
/* Generic shapes */
<div class="genericon-uparrow"></div>
<div class="genericon-rightarrow"></div>
<div class="genericon-downarrow"></div>
<div class="genericon-leftarrow"></div>
</div>

CSS スタイルシートエディタ-の方には、こういう CSS を追加したら、上記のようなアイコンが表示されるようになりました。

/* genericon css 2013年6月9日 */
.entry-content div[class^=&quot;genericon&quot;] {
display: inline-block;
width: 16px;
height: 16px;
-webkit-font-smoothing: antialiased;
font-size: 16px;
line-height: 1;
font-family: 'Genericons';
text-decoration: inherit;
font-weight: normal;
font-style: normal;
vertical-align: top;
}

/**
* Individual icons
*/
/* Post formats */
.entry-content .genericon-standard:before {
content: '\f100';
}

.entry-content .genericon-aside:before {
content: '\f101';
}

.entry-content .genericon-image:before {
content: '\f102';
}

.entry-content .genericon-gallery:before {
content: '\f103';
}

.entry-content .genericon-video:before {
content: '\f104';
}

.entry-content .genericon-status:before {
content: '\f105';
}

.entry-content .genericon-quote:before {
content: '\f106';
}

.entry-content .genericon-link:before {
content: '\f107';
}

.entry-content .genericon-chat:before {
content: '\f108';
}

.entry-content .genericon-audio:before {
content: '\f109';
}

/* Social icons */
.entry-content .genericon-github:before {
content: '\f200';
}

.entry-content .genericon-dribbble:before {
content: '\f201';
}

.entry-content .genericon-twitter:before {
content: '\f202';
}

.entry-content .genericon-facebook:before {
content: '\f203';
}

.entry-content .genericon-facebook-alt:before {
content: '\f204';
}

.entry-content .genericon-wordpress:before {
content: '\f205';
}

.entry-content .genericon-googleplus:before {
content: '\f206';
}

.entry-content .genericon-linkedin:before {
content: '\f207';
}

.entry-content .genericon-linkedin-alt:before {
content: '\f208';
}

.entry-content .genericon-pinterest:before {
content: '\f209';
}

.entry-content .genericon-pinterest-alt:before {
content: '\f210';
}

.entry-content .genericon-flickr:before {
content: '\f211';
}

.entry-content .genericon-vimeo:before {
content: '\f212';
}

.entry-content .genericon-youtube:before {
content: '\f213';
}

.entry-content .genericon-tumblr:before {
content: '\f214';
}

.entry-content .genericon-instagram:before {
content: '\f215';
}

/* Meta icons */
.entry-content .genericon-comment:before {
content: '\f300';
}

.entry-content .genericon-category:before {
content: '\f301';
}

.entry-content .genericon-tag:before {
content: '\f302';
}

.entry-content .genericon-time:before {
content: '\f303';
}

.entry-content .genericon-user:before {
content: '\f304';
}

.entry-content .genericon-day:before {
content: '\f305';
}

.entry-content .genericon-week:before {
content: '\f306';
}

.entry-content .genericon-month:before {
content: '\f307';
}

.entry-content .genericon-pinned:before {
content: '\f308';
}

/* Other icons */
.entry-content .genericon-search:before {
content: '\f400';
}

.entry-content .genericon-unzoom:before {
content: '\f401';
}

.entry-content .genericon-zoom:before {
content: '\f402';
}

.entry-content .genericon-show:before {
content: '\f403';
}

.entry-content .genericon-hide:before {
content: '\f404';
}

.entry-content .genericon-close:before {
content: '\f405';
}

.entry-content .genericon-close-alt:before {
content: '\f406';
}

.entry-content .genericon-trash:before {
content: '\f407';
}

.entry-content .genericon-star:before {
content: '\f408';
}

.entry-content .genericon-home:before {
content: '\f409';
}

.entry-content .genericon-mail:before {
content: '\f410';
}

.entry-content .genericon-edit:before {
content: '\f411';
}

.entry-content .genericon-reply:before {
content: '\f412';
}

.entry-content .genericon-feed:before {
content: '\f413';
}

.entry-content .genericon-warning:before {
content: '\f414';
}

.entry-content .genericon-share:before {
content: '\f415';
}

.entry-content .genericon-attachment:before {
content: '\f416';
}

.entry-content .genericon-location:before {
content: '\f417';
}

.entry-content .genericon-checkmark:before {
content: '\f418';
}

.entry-content .genericon-menu:before {
content: '\f419';
}

.entry-content .genericon-top:before {
content: '\f420';
}

.entry-content .genericon-minimize:before {
content: '\f421';
}

.entry-content .genericon-maximize:before {
content: '\f422';
}

.entry-content .genericon-404:before {
content: '\f423';
}

.entry-content .genericon-spam:before {
content: '\f424';
}

.entry-content .genericon-summary:before {
content: '\f425';
}

.entry-content .genericon-cloud:before {
content: '\f426';
}

.entry-content .genericon-key:before {
content: '\f427';
}

.entry-content .genericon-dot:before {
content: '\f428';
}

.entry-content .genericon-next:before {
content: '\f429';
}

.entry-content .genericon-previous:before {
content: '\f430';
}

.entry-content .genericon-expand:before {
content: '\f431';
}

.entry-content .genericon-collapse:before {
content: '\f432';
}

.entry-content .genericon-dropdown:before {
content: '\f433';
}

.entry-content .genericon-dropdown-left:before {
content: '\f434';
}

.entry-content .genericon-top:before {
content: '\f435';
}

.entry-content .genericon-draggable:before {
content: '\f436';
}

.entry-content .genericon-phone:before {
content: '\f437';
}

.entry-content .genericon-send-to-phone:before {
content: '\f438';
}

.entry-content .genericon-plugin:before {
content: '\f439';
}

.entry-content .genericon-cloud-download:before {
content: '\f440';
}

.entry-content .genericon-cloud-upload:before {
content: '\f441';
}

.entry-content .genericon-external:before {
content: '\f442';
}

.entry-content .genericon-document:before {
content: '\f443';
}

.entry-content .genericon-book:before {
content: '\f444';
}

/* Generic shapes */
.entry-content .genericon-uparrow:before {
content: '\f500';
}

.entry-content .genericon-rightarrow:before {
content: '\f501';
}

.entry-content .genericon-downarrow:before {
content: '\f502';
}

.entry-content .genericon-leftarrow:before {
content: '\f503';
}

テーマ「Twenty Twelve」にすると Genericons の方は表示されなくなることから、Genericons の方はすべてのテーマで使えるものではないことが推察されます。

sfsdfsdf
 

一方、Noticons の方はどのテーマでも表示されますが、ログアウトすると表示されなくなります。

image
 

以上、WordPress.com でのアイコン表示についての考察でした。

参考

投稿者: comemo

WordPress.com での記事の作成方法など

 

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

WordPress.com ロゴ

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

Google フォト

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

Twitter 画像

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

Facebook の写真

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

%s と連携中

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