Fonsカスタマイズ

カスタマイズ:OK、NG

カスタマイズでOKなこと



  1. 文字色・リンク色・文字サイズ・フォントの種類の変更 *1

  2. 左右カラムの変更

  3. カラムの増減

  4. コンテンツの幅を変更

  5. 日付・コメントなど記事に関する情報や、プラグインの位置を変更

  6. 余白の変更

  7. 寄せの変更 *2

  8. ヘッダー画像の変更(ある場合のみ)

  9. コンテンツを追加(ヘッダー部分に画象を置きたいなど)

  10. HTML、CSS、JavaScriptを追加または削除*3


*1 フォントに関してはサイズを変更すると素材にズレが生じる場合もあります。そのような場合はご自身で調整してください

*2 センタリングする場合はcenterタグを使用しないでください。詳しくはこちら

*3 CSSにある「▼基本設定」の「リセット」はよく分からない場合はいじらないでください。これは各ブラウザとの差異をなくす為です

カスタマイズでNGなこと



  1. 背景色、背景画像の変更

  2. テンプレート内の画像の変更(背景画像を差し替えるなど。ヘッダー画像は除きます)

  3. テンプレート内の画像の加工、再配布

  4. 他所様の素材サイトと組み合わせること*1

  5. カスタマイズ後の再配布、共有テンプレートへの登録、FC2ブログ以外での使用

  6. 広告表示と当ブログへのリンクを削除



*1 サイトによっては併用を可としている方もいますがそうでもない方も居ます。たまに素材サイトの規約を守らず利用している方を見ますが、こちらとしては面倒事を背負い込むのは嫌ですので基本的には使用しないでください。相手側の方は私が規約を守らずにテンプレートを作っていると勘違いされても困りますので…

カスタマイズ:注意点

個人的にカスタマイズ後のソースを見て気になった点など

文字が小さい


小さめの文字を好んで8pxなど10px以下に設定する方が見受けられます。正直、見づらいです。最低限でも10px~12pxぐらいがいいと思われます。

コンテンツの幅が大きい


まれに#wrapperのサイズを1500pxなど大きめのサイズに設定している方を見受けます。ご自身のPCの解像度が大きい為にそのようなサイズになったと思われます。

幅を変更するのは自由ですが、見ている方が同じ解像度とは限りません。あまりにも大きすぎると小さめの解像度で見ている方からすれば横にスクロールバーが出て非常に見づらく感じます。

id、classの使い方


id(#="id名")を重複して使用している方がいましたが、原則としてidは1度しか使えません。逆にclass(class="class名")は何度でも使うことが可能です。

またid・class名に日本語を使用している方がいましたが半角英数字を利用してください。試してみると反映はしましたが文法的にいいとは言えません。

記事本文をセンタリングする際にcenterタグを使用している


これがもっとも見かけるやり方です。centerタグは使用ないでください。HTML5では廃止されたタグとなっています。その他にも、big、font、uなどいくつかのタグは廃止となっています。詳しくは廃止された要素とバリデーションをご覧ください。

画像のように記事本文をセンタリングしたい場合は、以下の部分にコードを追加してください。当方のテンプレートでの例です。

centering.jpg

テンプレートによって違いますが、HTMLの記事の部分に

  • <section class="content"><%topentry_body></section>
  • <!--△記事本文 -->

というのがあります。この場合、本文にあたる部分はcontentというクラスに囲まれています。なので、CSSの▼記事(個別)にある

  • .content {
  • margin: 15px 0;
  • padding: 8px 15px;
  • }

の部分に

  • .content {
  • margin: 15px 0;
  • padding: 8px 15px;
  • text-align: center;
  • }

「text-align:center;」を追加すれば文章がセンタリングされます。

廃止されてるといってもブラウザがサポートしているかぎりは反映はします。ですが、HTML5に限らず元々centerタグなどは非推奨のタグとなっています。出来るだけCSSを使用してください。