アメブロで使われているWEBフォントを使ってみた件
この記事のURLとタイトルをコピーする
この記事を読むのに必要な時間は約 13 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)
アメブロではWEBフォントやアイコンフォントが使えないかなって思うこともありましたが、アメブロのサイト内や管理画面などではWEBフォントを使ったアイコンフォントなるものが使われています。
公に公開されていないのですが、HTMLソースを調べてみると使えそう
そして再確認したのですが、禁止タグにも入ってない
ということで早速使ってみました。
目 次
アメブロで使われてるWEBフォントを使った記事
きっかけは、わざめーばさんの2015年の記事だったのですが・・・
それは後で対策を掲載しますが・・・
使う場所によっての違い
筆者は、アメブロの記事の文中だけでなくメッセージボードやグローバルナビ(フリースペース)でも使ってみました。
その結果、意外な事実がわかりました。
メッセージボードやグローバルナビ(フリースペース)では普通に使えて問題ないのですが、記事を書くエディターでは1度保存した後に消えるという現象があります。
知らずに記事上げとかするとアイコンフォントが消えた状態になってしまうので要注意ですね。
使えたアイコンの種類
アメブロの記事の文中で使えたアイコンフォントは、以下の通りです。
| アイコン | 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> | ||
| <i class=”aside-register-button__icon s s-facebook_b”></i> | ||
| <i class=”aside-register-button__icon s s-facebook”></i> | ||
| <i class=”aside-register-button__icon s s-bookmark”></i> | bookmark | |
| <i class=”s-line”></i> | LINE |
アイコンフォントは、HTML内のheadの中にアメブロが用意しているアイコンフォントに関する記述があります。
そのおかげでエディターに記述するだけで使えるアイコンフォントがありますということです。
head内の記述は、下記を参考にしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 |
<style media="screen,print"> @font-face{font-family:ameba-symbols;src:url(https://c.stat100.ameba.jp/ameblo/symbols/v3.20.1/fonts/ameba-symbols.woff2) format('woff2'),url(https://c.stat100.ameba.jp/ameblo/symbols/v3.20.1/fonts/ameba-symbols.woff) format('woff'),url(https://c.stat100.ameba.jp/ameblo/symbols/v3.20.1/fonts/ameba-symbols.ttf) format('truetype');font-style:normal;font-weight:400;font-display:block} .s{display:inline-block;font-family:ameba-symbols;font-style:normal;font-weight:400;line-height:1} .s-send-failure:before{content:"\EA01"} .s-beginner:before{content:"\EA02"} .s-coin:before{content:"\EA03"} .s-ranking:before{content:"\EA04"} .s-design-setting:before{content:"\EA05"} .s-arrow-down:before{content:"\EA06"} .s-timeline:before{content:"\EA07"} .s-history:before{content:"\EA08"} .s-new:before{content:"\EA09"} .s-plus:before{content:"\EA0A"} .s-edit-delete:before{content:"\EA0B"} .s-nodata:before{content:"\EA0C"} .s-peta:before{content:"\EA0D"} .s-event:before{content:"\EA0E"} .s-loading:before{content:"\EA0F"} .s-no1:before{content:"\EA10"} .s-no2:before{content:"\EA11"} .s-no3:before{content:"\EA12"} .s-ranking-up:before{content:"\EA13"} .s-ranking-stay:before{content:"\EA14"} .s-ranking-down:before{content:"\EA15"} .s-blog:before{content:"\EA16"} .s-ametomo_cancel:before{content:"\EA17"} .s-save-blog:before{content:"\EA18"} .s-caution:before{content:"\EA19"} .s-arrow-back:before{content:"\EA1A"} .s-triangle-left:before{content:"\EA1B"} .s-arrow-forward:before{content:"\EA1C"} .s-question:before{content:"\EA1D"} .s-abema:before{content:"\EA1E"} .s-popular:before{content:"\EA1F"} .s-trash:before{content:"\EA20"} .s-photo-edit:before{content:"\EA21"} .s-movie:before{content:"\EA22"} .s-game:before{content:"\EA23"} .s-home:before{content:"\EA24"} .s-news:before{content:"\EA25"} .s-pause:before{content:"\EA26"} .s-play:before{content:"\EA27"} .s-stop:before{content:"\EA28"} .s-menu-hamburger:before{content:"\EA29"} .s-notification:before{content:"\EA2A"} .s-official-group-top_blogger:before{content:"\EA2B"} .s-camera:before{content:"\EA2C"} .s-service:before{content:"\EA2D"} .s-refresh:before{content:"\EA2E"} .s-setting:before{content:"\EA2F"} .s-comment:before{content:"\EA30"} .s-user-admin:before{content:"\EA31"} .s-pc-checklist:before{content:"\EA32"} .s-official-group-stampcard:before{content:"\EA33"} .s-close:before{content:"\EA34"} .s-trophy:before{content:"\EA35"} .s-stamp-side:before{content:"\EA36"} .s-sns-connect:before{content:"\EA37"} .s-gruppo:before{content:"\EA38"} .s-now:before{content:"\EA39"} .s-amegold:before{content:"\EA3A"} .s-pigg:before{content:"\EA3B"} .s-all:before{content:"\EA3C"} .s-bbs:before{content:"\EA3D"} .s-message-comment:before{content:"\EA3E"} .s-speaker-on:before{content:"\EA3F"} .s-speaker-off:before{content:"\EA40"} .s-favorite:before{content:"\EA41"} .s-ametomo-add:before{content:"\EA42"} .s-nice-old:before{content:"\EA43"} .s-amember:before{content:"\EA45"} .s-secret-group:before{content:"\EA46"} .s-message:before{content:"\EA47"} .s-magicwand:before{content:"\EA48"} .s-pickup:before{content:"\EA49"} .s-circle:before{content:"\EA4A"} .s-album:before{content:"\EA4B"} .s-qr:before{content:"\EA4C"} .s-reply:before{content:"\EA4D"} .s-search:before{content:"\EA4E"} .s-ametomo:before{content:"\EA4F"} .s-profile:before{content:"\EA50"} .s-checkbox:before{content:"\EA51"} .s-address-book:before{content:"\EA52"} .s-tv-cm:before{content:"\EA53"} .s-ametomo_done:before{content:"\EA54"} .s-stamp:before{content:"\EA55"} .s-menu-vertical:before{content:"\EA56"} .s-access-count:before{content:"\EA57"} .s-menu-horizotal:before{content:"\EA58"} .s-withdrawal-complete:before{content:"\EA59"} .s-ownd:before{content:"\EA5A"} .s-refresh-b:before{content:"\EA5B"} .s-ranking-b:before{content:"\EA5C"} .s-night:before{content:"\EA5D"} .s-nice:before{content:"\EA5E"} .s-blog-neta:before{content:"\EA5F"} .s-web-view:before{content:"\EA60"} .s-right-drawer:before{content:"\EA61"} .s-triangle-up:before{content:"\EA62"} .s-triangle-right:before{content:"\EA63"} .s-triangle-under:before{content:"\EA64"} .s-error-loading:before{content:"\EA65"} .s-nice-done:before{content:"\EA66"} .s-dotmoney:before{content:"\EA67"} .s-line:before{content:"\EA68"} .s-facebook:before{content:"\EA69"} .s-twitter:before{content:"\EA6A"} .s-hatenablog:before{content:"\EA6B"} .s-draft:before{content:"\EA6C"} .s-comment _reject:before{content:"\EA6D"} .s-html_tag_edit:before{content:"\EA6E"} .s-reblog:before{content:"\EA6F"} .s-reblog_reject:before{content:"\EA70"} .s-arrow_paging_left:before{content:"\EA71"} .s-arrow_paging_right:before{content:"\EA72"} .s-facebook_b:before{content:"\EA73"} .s-fresh_screen_full:before{content:"\EA74"} .s-fresh_screen_inline:before{content:"\EA75"} .s-hashtag:before{content:"\EA76"} .s-community:before{content:"\EA77"} .s-as-pc-checklist:before{content:"\EA78"} .s-as-comment:before{content:"\EA79"} .s-as-star:before{content:"\EA7A"} .s-as-hot:before{content:"\EA7B"} .s-as-messageboard-old:before{content:"\EA7C"} .s-as-access-link:before{content:"\EA7D"} .s-as-access-page:before{content:"\EA7E"} .s-as-checklist:before{content:"\EA7F"} .s-as-circle-arrow-left:before{content:"\EA80"} .s-as-circle-arrow-right:before{content:"\EA81"} .s-as-circle-arrow-up:before{content:"\EA82"} .s-as-circle-arrow-under:before{content:"\EA83"} .s-as-arrow-paging-up:before{content:"\EA84"} .s-as-arrow-paging-under:before{content:"\EA85"} .s-as-deca-triangle-left:before{content:"\EA86"} .s-as-deca-triangle-right:before{content:"\EA87"} .s-as-deca-triangle-up:before{content:"\EA88"} .s-as-deca-triangle-under:before{content:"\EA89"} .s-as-deca-triangle-left-end:before{content:"\EA8A"} .s-as-deca-triangle-right-end:before{content:"\EA8B"} .s-as_sp_reply:before{content:"\EA8C"} .s-as-no1:before{content:"\EA8D"} .s-as-present:before{content:"\EA8E"} .s-nanagogo:before{content:"\EA8F"} .s-editor_align:before{content:"\EA90"} .s-editor_emoticon:before{content:"\EA91"} .s-editor_font_color:before{content:"\EA92"} .s-editor_font_style:before{content:"\EA93"} .s-editor_keyboard:before{content:"\EA94"} .s-editor_link:before{content:"\EA95"} .s-editor_voice:before{content:"\EA96"} .s-editor_youtube:before{content:"\EA97"} .s-blog-entry:before{content:"\EA98"} .s-arrow-up:before{content:"\EA99"} .s-dot_new:before{content:"\EA9A"} .s-userlist:before{content:"\EA9B"} .s-embed:before{content:"\EA9C"} .s-instagram:before{content:"\EA9D"} .s-genre:before{content:"\EA9E"} .s-img-sort-tile:before{content:"\EA9F"} .s-img-sort-feed:before{content:"\EAA0"} .s-add-genre:before{content:"\EAA1"} .s-add-genre-done:before{content:"\EAA2"} .s-kantangame:before{content:"\EAA3"} .s-abematv:before{content:"\EAA4"} .s-dokusho:before{content:"\EAA5"} .s-device:before{content:"\EAA6"} .s-ping_transmission:before{content:"\EAA7"} .s-theme:before{content:"\EAA8"} .s-hashtag_official:before{content:"\EAA9"} .s-play_clip:before{content:"\EAAA"} .s-flag_ranking:before{content:"\EAAB"} .s-filter:before{content:"\EAAC"} .s-share_imglost:before{content:"\EAAD"} .s-share_imgunable:before{content:"\EAAE"} .s-share_entrylost:before{content:"\EAAF"} .s-editor_onedari:before{content:"\EAB0"} .s-editor_facemark:before{content:"\EAB1"} .s-requ:before{content:"\EAB2"} .s-clipblog:before{content:"\EAB3"} .s-pr_info:before{content:"\EAB4"} .s-open_cl:before{content:"\EAB5"} .s-flip_vertical:before{content:"\EAB6"} .s-open_blank:before{content:"\EAB7"} .s-alert:before{content:"\EAB8"} .s-fit:before{content:"\EAB9"} .s-premium:before{content:"\EABA"} .s-koeblog:before{content:"\EABB"} .s-edit-entry:before{content:"\EABC"} .s-add-image:before{content:"\EABD"} .s-bookmark:before{content:"\EABE"} .s-transcript-off:before{content:"\EABF"} .s-transcript-on:before{content:"\EAC0"} </style> |
使えなかったアイコン
すべて試したわけではないですが、表示できなかったアイコンは上記の通りですね。
InstagramやYouTubeなどについては使いたいアイコンではあるのですが・・・
原因などについてはわからないですが、現段階では使えるものを有効に使って文中のアクセントにしようと思っています。
また、SVGによるアイコンも表示できませんでした。
おそらくファイルが相対パスのままだったからかもしれませんが・・・
まとめ：使った場合に注意しておきたいこと
上記は、スマホ(iPhone)での表示ですがアプリで開くとアイコンフォントが表示されません。
しかし、ブラウザから開くとちゃんと表示してます。
上記は、1度保存した記事をパソコンの編集画面で開いた状態です。
アイコンが表示されていません。
保存時のプレビューでは上記のように表示していましたが・・・
原因はわかりませんが、再編集しなければ記事ではちゃんと表示しています。
今回わかったことは、上記の2点です。
- スマホアプリではアイコンフォントを表示しない
- 記事編集画面では1度保存するとHTMLタグが消える
上記の2点の中で「スマホアプリでアイコンフォントが表示しない」というのは仕方ないとして「記事編集画面で1度保存するとHTMLタグが消える」と言う場合は、記事上げができなくなりますね。
記事上げというのは、再編集で時間だけを変更して投稿する方法なのですが・・・
対策としては、記事完成時点でのHTMLをテキストエディタなどに保存しておくと記事上げする時にコピペで戻すことが可能になります。
筆者のアメブロも今は約半分がスマホで見られています。
その半分の多くは、おそらくアプリからのアクセスだと思いますが、アメブロで用意されている絵文字では代替できないものもありスマホアプリでの表示は一旦、あきらめるしかなさそうです。
WEBのことならくまはちＬＡＢにお任せください。
 |
 |
 |
 |
くまはちLABのご利用ありがとうございます！ |
Evernoteに保存