アメブロで使われているWEBフォントを使ってみた件

この記事のURLとタイトルをコピーする

この記事を読むのに必要な時間は約 13 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

アメブロではWEBフォントやアイコンフォントが使えないかなって思うこともありましたが、アメブロのサイト内や管理画面などではWEBフォントを使ったアイコンフォントなるものが使われています。
アメブロのアイコンフォント
公に公開されていないのですが、HTMLソースを調べてみると使えそう
そして再確認したのですが、禁止タグにも入ってない
ということで早速使ってみました。

 

 目 次 

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

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

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

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

 

使う場所によっての違い

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

 

使えたアイコンの種類

アメブロの記事の文中で使えたアイコンフォントは、以下の通りです。
 
ポイント

下記のアイコンフォントのHTMLタグをInsert TextClippingsもしくは、Amecareに登録しておくと簡単に利用できるようになります。
アイコン 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の中にアメブロが用意しているアイコンフォントに関する記述があります。
そのおかげでエディターに記述するだけで使えるアイコンフォントがありますということです。
head内の記述は、下記を参考にしてください。

 

使えなかったアイコン

表示できなかったアイコン
すべて試したわけではないですが、表示できなかったアイコンは上記の通りですね。
InstagramYouTubeなどについては使いたいアイコンではあるのですが・・・
原因などについてはわからないですが、現段階では使えるものを有効に使って文中のアクセントにしようと思っています。
また、SVGによるアイコンも表示できませんでした。
おそらくファイルが相対パスのままだったからかもしれませんが・・・

 

まとめ:使った場合に注意しておきたいこと

スマホ表示
上記は、スマホ(iPhone)での表示ですがアプリで開くとアイコンフォントが表示されません。
しかし、ブラウザから開くとちゃんと表示してます。

アメブロ パソコンエディター
上記は、1度保存した記事をパソコンの編集画面で開いた状態です。
アイコンが表示されていません。

プレビュー
保存時のプレビューでは上記のように表示していましたが・・・
原因はわかりませんが、再編集しなければ記事ではちゃんと表示しています。
今回わかったことは、上記の2点です。

  • スマホアプリではアイコンフォントを表示しない
  • 記事編集画面では1度保存するとHTMLタグが消える

上記の2点の中で「スマホアプリでアイコンフォントが表示しない」というのは仕方ないとして「記事編集画面で1度保存するとHTMLタグが消える」と言う場合は、記事上げができなくなりますね。
記事上げというのは、再編集で時間だけを変更して投稿する方法なのですが・・・
対策としては、記事完成時点でのHTMLをテキストエディタなどに保存しておくと記事上げする時にコピペで戻すことが可能になります。
筆者アメブロも今は約半分がスマホで見られています。
その半分の多くは、おそらくアプリからのアクセスだと思いますが、アメブロで用意されている絵文字では代替できないものもありスマホアプリでの表示は一旦、あきらめるしかなさそうです。

 


 

チャンネル登録

 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
LINEスタンプ
LINE@友だち追加
Vektor WordPress Solutions
Vektor WordPress Solutions

くまはちLABのご利用ありがとうございます!
くまはちLABの最新情報をフォローしてゲットしてください!