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

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>のようになっています。

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