アメブロではWEBフォントやアイコンフォントが使えないかなって思うこともありましたが、アメブロのサイト内や管理画面などではWEBフォントを使ったアイコンフォントなるものが使われています。

公に公開されていないのですが、HTMLソースを調べてみると使えそう>
そして再確認したのですが、禁止タグにも入ってない>
ということで早速使ってみました。

 

 

 

アメブロで使われてるWEBフォントを使った記事

きっかけは、わざめーばさんの2015年の記事だったのですが・・・

 

 

筆者もアメブロの２つの記事で使ってみました。

 

 

 

実際に使ってみるとちゃんと表示しますが、困ったことも浮き彫りになりましたね。
それは後で対策を掲載しますが・・・

 

使う場所によっての違い

筆者は、アメブロの記事の文中だけでなくメッセージボードやグローバルナビ(フリースペース)でも使ってみました。
その結果、意外な事実がわかりました。
メッセージボードやグローバルナビ(フリースペース)では普通に使えて問題ないのですが、記事を書くエディターでは1度保存した後に消えるという現象があります。
知らずに記事上げとかするとアイコンフォントが消えた状態になってしまうので要注意ですね。

 

使えたアイコンの種類

アメブロの記事の文中で使えたアイコンフォントは、以下の通りです。
スマホアプリやTwitterから見られているとアイコンフォントが見えないのでブラウザから見てください。

アイコン	HTMLタグ	説明
	<i class="s s-triangle-right _2gegkeDF"></i>	右矢印の記号
	<i class="s s-arrow_paging_right _3v-r_Z2P"></i>	右矢印の三角
	<i class="s s-ranking-b _2JeCjrAk"></i>	ランキング
	<i class="s s-favorite _2JeCjrAk"></i>	お気に入り
	<i class="s s-user-admin"></i>	ユーザー
	<i class="s s-blog"></i>	えんぴつ
	<i class="s s-edit-delete"></i>	編集
	<i class="s s-blog-neta"></i>	ブログネタ
	<i class="s s-access-count"></i>	アクセス解析
	<i class="s s-nice"></i>	いいね
	<i class="s s-comment"></i>	コメント
	<i class="s s-reblog"></i>	リブログ
	<i class="s s-design-setting"></i>	パレット
	<i class="s s-setting"></i>	設定
	<i class="s s-theme"></i>	テーマ編集
	<i class="s s-userlist"></i>	フォロー
	<i class="s s-amember"></i>	アメンバー
	<i class="s s-camera"></i>	カメラ
	<i class="s s-koeblog"></i>	こえ
	<i class="s s-genre"></i>	ジャンル
	<i class="s s-as-messageboard-old">></i>	メッセージボード
	<i class="s s-message">></i>	メール
	<i class="s s-sns-connect"></i>	SNS
	<i class="s s-ping_transmission"></i>	PING
	<i class="s s-as-access-link"></i>	リンク
	<i class="p-analysisSummary__access__arrow s s-ranking-stay"></i>	右矢印
	<i class="BlockHeadline__icon--3oBuc s s-news"></i>	記事
	<i class="BlockHeadline__icon--3oBuc s s-pickup"></i>	ピックアップ
	<i class="p-analysisSummary__access__arrow s s-ranking-up"></i>	ランクアップ
	<i class="p-analysisSummary__access__arrow s s-ranking-down"></i>	ランクダウン
	<i class="p-realtimeAccess__loadIcon s s-refresh"></i>	更新
	<i class="s s-search"></i>	検索
	<i class="aside-register-button__icon s s-twitter"></i>	Twitter
	<i class="aside-register-button__icon s s-facebook_b"></i>	Facebook
	<i class="aside-register-button__icon s s-facebook"></i>	Facebook
	<i class="aside-register-button__icon s s-bookmark"></i>	bookmark
	<i class="s-line"></i>	LINE

 

アイコンフォントは、HTML内のheadの中にアメブロが用意しているアイコンフォントに関する記述があります。 そのおかげでエディターに記述するだけで使えるアイコンフォントがありますということです。

 

 

 

 

 

 

アメブロ関連ツール

• アメブロ目次付きテンプレート(メルマガ購読者プレゼント)
• アメブロ用グローバルメニュー作成ツール
• シンプルな見出し付き囲み枠作成
• アメブロ記事紹介タグ作成
• WEB色見本

WordPress Tool

 

 

アメブロ 目次付きテンプレート使っている記事紹介