はてなブログ・カスタマイズ前のご確認

2019年11月17日はてなブログ

※当ブログは現在、はてなブログからWordPressに移行しています。

デザインテーマ・レスポンシブデザイン

このブログの記事の「はてなブログのカスタマイズ」はレスポンシブデザインのテーマを前提に書いています。

レスポンシブデザインというのは、パソコン、スマホ、タブレットなどの異なるデバイスでも自動で見やすい表示に切り替えてくれるものです。

お使いのデザインテーマが、レスポンシブデザイン対応か確認するには「ダッシュボード」→「デザイン」→「スマートフォン(アイコン)」で確認できます。

レスポンシブデザインモードにするには「詳細設定」の「レスポンシブデザイン」のチェックボックスをオンにしてください。

設定する箇所

「ダッシュボード」→「デザイン」→「カスタマイズ(アイコン)」にある「ヘッダ(→タイトル下)」「記事(→記事上、記事下)」「フッタ」「デザインCSS」で各設定を行います。

各設定の箇所にコードを書き込んでいきます。

表示させたい順番

「ヘッダ(→タイトル下)」「記事(→記事上、記事下)」「フッタ」に書くコードは順番があります。

上から読み込まれていくので複数のコードがある場合は、表示したい順番に上からコードを書き込むようにしてください。

デザインCSS

「デザインCSS」も上から順番にコードが読み込まれていきます。

「デザインCSS」の場合は適切な順番にしないとうまく表示できないことがあるみたいですが、気にせずコードを書き込んでいって表示がうまくいかないときはコードの順番を上にしたり入れ替えたりしてください。

アドバイス

設定はテキストエディタで

デザインCSSなどの文字が小さかったりして設定しにくい場合は、「テキストエディタ」で設定してから貼り付けるようにしてください。

コードは分かりやすく

デザインCSSなどにたくさんコードを貼り付けていくと、どれがどの設定か分からなくなってくるのでそのコードがどの設定か分かるようにしておきましょう。

  • 「コメントアウト」という方法で行います。
    • HTMLでは<!– –>、CSSでは/* */、この間に記述した文字はブラウザには表示されませんので自由にコメントを書き込めます。
    • 「ヘッダ(→タイトル下)」「記事(→記事上、記事下)」「フッタ」はHTML<!– –>で書き込みます。
    • 「デザインCSS」はCSS/* */で書き込みます。

何を設定しているコードなのか、分かりやすくコードの上に書き込んでください。
こういう感じで。(CSS)

/* ヘッダ背景画像 */
body{background:#ddeaed;}

  • 「コメントアウト」の中で改行しても大丈夫です。
    • HTMLの「コメントアウト」<!– –>の中に「ー(ハイフン)」はできたら使わないようにしてください。
      「コメントアウト」なのか「ー(ハイフン)」なのかややこしくなるみたいなので。
  • 「コメントアウト」は一時的にコードを非表示にするときにも使えます。

バックアップを忘れずに

設定し終えたらデザインCSSなどのコードをコピーしてメモ帳などに貼り付けてバックアップしてください。

はてなブログ側のシステムに何があっても大丈夫なようにしておくのと、自分で間違った設定をしてもすぐに戻せるようにしておくためです。

できれば設定をするたびにバックアップしておきましょう。