I Found It!

今日はこのサイトのPC版のサイドバーコンテンツタイトルにも使用しているアイコンフォント「Font Awesome」をこのファンブログで利用する方法など紹介したいと思います。２行変更するだけでサイドバーコンテンツタイトルにアイコンが表示できるので、カスタマイズのお手軽さの点でもおすすめです。この方法でアイコンを表示できるのは「記事へのリンク」にあるコンテンツ（ピンクのコンテンツ）のみです。 アイコンフォントについて アイコンフォントは通常文字が割り当てられる文字コードにアイコンイメージが割り当てられているため、画像を用意しなくても絵文字感覚でアイコンを使用できます。形は「絵」ですが、扱いは「文字」なので、色も大きさも自由に変えられます。というか、何もしなくても前後の文字と同じ大きさ、色になってくれて、位置もぴったり！ 今回紹介するFont Awesomeなら、634種類（バージョン4.6.3の場合）のアイコンが使えるのでとっても便利です。以前タイトルに好きなWebフォントを使うで紹介したWebフォントとしても公開されているので、フォントファイルを用意する必要もありません。iPhoneやWindows8以降で採用されてるようなフラットデザインにぴったりの素敵アイコンがいっぱいです。夢のようです。 ただ一つ残念なのが、このファンブログのスマホ版で表示させる方法がまだ見つかっていないということ。記事にアイコン用のタグを使うと、PCでは表示されるけどスマホでは何も表示されないので注意が必要です。いい方法をご存知の方、コメントいただけるとありがたいです。 というわけで、PC版のhtmlや自由形式のコンテンツの中でも、使ってみてくださいね。 Font Awesome 設置方法 「デザイン > html」からhtmlを編集します..

今日はタイトルにちょっと個性的なWebフォントを使ってみようと思います。今回はGoogle Webフォントを使用します。 Google Webフォントとは、その名の通り、Googleが提供しているWebフォントです。Webフォントはサーバーからフォントファイルをダウンロードして使うので、フォントファイルをアップロードできない、このファンブログでも使えます！ 今回使用するGoogle Webフォント、初めてサイトを見たときはそのフォントの種類の多さに感動しました。フォントなので、文字の大きさ、色、シャドウなどの装飾もcssで好きなようにできるんです。便利！ Google Webフォント、まだ見たことない方はぜひ見てみてください。 Google Fonts 最近リニューアルされて、グレーとピンクの画面になりました。 2016/9/8現在、808種類！なかなか全部をチェックするのは大変ですが、海外サイトやテンプレートでいい感じのフォントを見つけたら、F12で使用フォントをチェックしてみると、案外Google Webフォントだったりしますよ。ご覧の通り、ほとんど英字フォントなんですが…。 筆者はGoogle Webフォントを使いたいがために、ブログタイトルを英語にしました。 一応「Noto Sans Japanese」という今のところ唯一の日本語フォントがあるにはあるんですが、日本語は文字種が多く、フォントファイルのダウンロードに時間がかかるということなので、特におすすめはしません。 カスタム01のデフォルトフォントは font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; となっています。「ヒラギノ」はMa..