講師のじょうまさふみのブログです。まとめFC2ブログの文字や色テンプレート自体は好きなんだけど、記事やサイドメニューの文字の大きさが「もっと小さい方が良いな」とか、「文字の色が好みじゃない」などありますよね。Webページの文字サイズや文字の色によって、読みやすさも変わってきます。FC2ブログの文字の大きさと色を変更して、もっとカスタマイズしてみましょう。テンプレートを編集するFC2ブログにログインしたら管理画面より「テンプレート」を押します。テンプレートを複製テンプレートを編集するときには、必ず「複製」を行い、元テンプレートの状態を保持したうえで編集するようにしましょう。編集したいテンプレートの「複製」を押します。複製元テンプレートと区別がつくようにテンプレート名を変更しておくと良いでしょう。名称を変更したら、「更新」を押します。複製し名前を変更したテンプレートを編集していきます。「編集」を押しましょう。文字の大きさ、文字の色を変更するには「スタイルシート(CSS)」を編集して行きます。スタイルシートはプロパティと値の組み合わせで定義されます。編集していきましょう。テンプレート管理画面の下に「スタイルシート編集」という箇所があります。編集する主な箇所は、文字の大きさがfont-sizeプロパティ、文字の色がcolorプロパティと呼ばれる部分です。キーボードの「Ctrlキー」と「Fキー」を同時に押すと、検索窓が左下に表示されます。そこに「font-size」「color」で検索すると、スタイルシート内でいくつかヒットすると思います。テンプレートによって表示が違う場合があります。Color」としてまとめて指定している箇所がありました。どこを編集すれば、どの場所の文字が変わるかはテンプレートによって書かれている場所が違うので、慣れるまで大変ですが変更するプロパティは同じです。このテンプレートの場合は、次のようなキーワードで指定されていました。参考にしてみてください。ヘッダー部分の文字サイズ:header記事部分の文字サイズ:mainサイドメニューの文字サイズ:sidemenuフッター部分の文字サイズ:footer文字の大きさを変更する例として、記事部分の文字の大きさを変更してみます。別の表現にしたものです。ここでの説明がわかり易いように%指定ではなく、px指定を使っています。これで、文字の大きさがどれくらい変わったのか見てみます。14pxとしたほうが全体的に小さくなったことがわかりますね。font-size」で検索してみてください。先ほど使ったものがわかり易い指定の仕方なので紹介しておきます。px指定ピクセル指定の意味です。どれくらいのサイズで表示するかを直接指定します。親要素を基準に比率で大小を指定します。親要素となるのは文字サイズを頻繁に変更しているようなテンプレートだと複雑ですが、多くはブラウザ標準の大きさだったり、上記のような記事部分の文字サイズだったりします。文字の大きさについて変更の仕方がわかりましたが、実際に読みやすい文字の大きさはどれくらいでしょうか。一般的には読みやすいとされる文字の大きさは13pxから16pxです。大手のニュースサイトや、多くのブラウザの標準サイズが16pxです。参考に文字の大きさを指定してみます。これが18pxの文字サイズです!これが16pxの文字サイズです!これが14pxの文字サイズです!これが12pxの文字サイズです!読みやすいサイズがありましたか?自分自身でも試してみてください。ここで、大事なことを言っておきます。文字サイズはブラウザごとに標準となるサイズが異なっていますし、文字の大きさもフォントの種類で変わってきます。指定通りのサイズで完全に表示してくれるかというと、それもブラウザに次第です。最小フォントサイズなどが決まっていて、このサイズ以下になるとすべて同じ大きさで表示していたり。PCでもスマホでも表示デバイスが違えば、ディスプレイのピクセルサイズは変わるので、ピクセル指定を使ってもすべて同じに見えるわけではありません。何が言いたいのかというと、一生懸命にこだわってサイズを調整しても、ブログを見た人が全員が同じように見えるわけではありません。「だいたい同じ表示」程度で考えておくことが一番です。文字の色を変えるこのテンプレートでは基本的な文字の色はグレーっぽい感じです。}緑色にしてみましょう。}文字の色が変わったのか見てみます。カラーコードは、Google検索などで「カラーコード」と検索すると一覧表を見つけることができます。「#」で始まる3桁または6桁が色を表すコードになります。単純なテキストの文字の色だけではなく、リンクを貼っている文字の色も変更できます。colorプロパティを変更してみてください。{...}まとめテンプレートによって編集箇所が異なりますが、変更点となるスタイルシートのプロパティと値については同じです。Pocketこの記事を書いた人じょうまさふみ城雅文(じょうまさふみ)。フリーランス7年目です。職業:アフィリエイター、ワードプレス講師。今回は、FC2ブログのサイドバーにバリューコマースのバナー広告を貼る方法について紹介します。【3分で解決】iSPEEDで米国株が検索できない?見れない?表示されない?楽天証券投資歴8ヶ月のじょうまさふみです。今回は、スマホ用FC2ブログの記事一覧に忍者Admaxのネイティブ広告を貼る方法について紹介します。