はてなブログ・強調したい部分に背景色や枠を付ける

2019年11月17日はてなブログのカスタマイズ

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

記事内で強調したい部分に背景色や枠を付けるカスタマイズです。

コードに文字を入力

上記サイトのお好きなデザインのコードの中の、「ここに文字を入力する」のところに表示させたい文字を入力していきます。

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;">
ここに文字を入力する。
</div>

テキストエディタにコードをコピーして、そこで文字を入力してください。

文字入力の注意点

  • 行の先頭にスペースを入れたい場合は全角スペースで入れてください。
  • 文字の間には半角スペースが1つだけ入ります。
    • 文字の間に複数スペースを入れたい場合は全角スペースで入れてください。
    • コードの場合は半角スペースでなければいけませんので注意が必要です。
  • 改行させたい場合は<br />で改行させます。
    • 改行させたい文字の後ろに<br /> を入れてください。
  • 上記サイトの気に入った枠や背景色のコードを、テキストファイルで保存しておいてください。
    • そうしておけばテキストディタですぐに文字が入力できます。

HTML編集に貼り付け

設置の方法は「記事を書く」の「HTML編集」で行います。

文字を入力したコードをコピーして、「HTML編集」の中で表示させたい箇所に貼り付けます。

表示させたい箇所を探すのは大変ですが、前後の文字を探してそこに貼り付けてください。

見出しは<h3>「HTML編集」に貼り付け</h3>、標準の文字は<p>標準の文字</p>のようになっています。

表示させたい箇所にそのつど書き込まないといけないので、少し面倒ですが枠や背景色を付ければ、より見やすい記事になると思います。