人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

エキサイト編集画面のアレンジ(51) 編集アイコンをWebフォントで描画する

2017年 08月 19日
編集アイコンのデザインは、アレンジを何度か繰り返して現在に至ります。 当初は、その数にしり込みしていましたが、取り組んでみるとそう多いと感じる事はなくなりました。

アイコン配置位置の組み換え、スプライト画像の改造、枠線のCSS描画化、スプライト画像の位置調整と進み、最近はスプライト画像からフォント描画への切り替えに進んでいます。

フォント描画に手を着けたのが以下の(47)からです。

しかし、アイコンに使える適当なフォントが複数にわたり、また「左寄せ」「右寄せ」「中央寄せ」に適したフォントがない、YouTube、インスタグラム等のグラフィックに適したフォントが無い、等の点で限界を感じて、中途半端なままでした。

しかし、エキサイトブログが「FontAwesome」というWebフォントを利用していることを先日発見しました。

このWebフォントのデザインは、現状のフォントニーズに良くマッチしていて、しかも、エキサイトの編集画面やブログスキン上で、このフォントが利用できる事が判りました。 このフォントを詳しく調べると、編集アイコンのほぼ全てが、このフォントで実現出来そうです。

以下が、このフォントの一覧です。

そこで今回は、全ての編集アイコンのフォント描画を試して見ました。

実際のフォントの指定は、下の例の様に、この「FontAwesome」特有のフォントコードを擬似要素のプロパティ「conent:""」内に指定します。

#exbtn_bold::before {
background: #fff;
content: "\f032";
font: 16px /22px FontAwesome;
padding: 3px 4px; }

以下がその試みの結果です。

エキサイト編集画面のアレンジ(51) 編集アイコンをWebフォントで描画する_a0349576_15475287.png

❶➌❹❺ は「::before」「::after」を併用して、「FontAwesome」による「絵」と「Tahoma」による「文字」を組み合わせています。 また、フォント大小指定の「F」に「Tahoma」を指定して、結果としてこの2種のフォントだけで、編集アイコンを構成しました。

は少し苦労しましたが、背景色に「-webkit-gradient」を使っています。 しかし、こればかりは画像のアイコンにかないません。

下の「自動改行」のアイコンも、「FontAwesome」で描画しています。 これは「transform: rotate(90deg); 」で文字を回転する必要がありました。 どういうわけか良い「Enterマーク」を用意したフォントは少ないです。

#exbtn_autoeol.activeBtn::before {
background: red;
content: "\f149";
font: 18px /21px FontAwesome;
color: #fff;
padding: 0px 5px;
display: block;
transform: rotate(90deg); }

エキサイト編集画面のアレンジ(51) 編集アイコンをWebフォントで描画する_a0349576_16304941.png

スプライト画像の呼び込みを指定しなかったので、 の部分などにはグレーアウト画像が無く、完全なプランクになっています。

編集アイコンの「hr」(水平線)は非推奨になりつつあり、現実にも余り使用されていない様なので、上段に移動しました。(上段は2行アイコンオプションを使用しないと表示されません) インスタグラムのアイコンが追加され、アイコン列の幅が増えて来ているので、整理したわけです。 また、同時に右側の各種機能アイコンの並びを改め、使用頻度の高そうなものを中央に寄せています。 これらアイコンデザインと配置変更は草案で、実装は先に考えています。




この記事はカテゴリ「スキン編集」にトラックバックしています。



by Ataron | 2017-08-19 16:58 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。