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

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

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

背景色を付けたり
枠を付けたりできます。
 
枠のデザインは下記サイトが参考になります。

枠の角が丸いものや、2重線の枠などいろいろあります。

色を変えてブログに合った枠や背景にしてください。

HTML編集

コードに文字を入力

設置の方法は「記事を書く」の「HTML編集」にCSSのコードを書き込みます。

まず、コードの中の「ここに文字を入力する」のところに表示させたい文字を入力していきます。

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

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

文字入力の注意点

1、行の先頭にスペースを入れたい場合は全角スペースで入れてください。

2、文字の間には半角スペースが1つだけ入ります。

文字の間に複数スペースを入れたい場合は全角スペースで入れてください。

コードの場合は半角スペースでなければいけませんので注意が必要です。

3、改行させたい場合は<br />で改行させます。

改行
改行
改行
この場合のコードは
 
<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;">

改行<br />

改行<br />

改行

<div>

となります。

改行させたい文字の後ろに<br /> を入れてください。

preタグを使えば改行も半角スペースもそのまま表示されるのですが、枠内の文字が小さくなったり、枠内にもう1つ枠が表示されてしまいます。

4、上記サイトの気に入った枠や背景色のコードをテキストファイルで保存しておいてください。

そうしておけばテキストディタですぐに文字が入力できます。

HTML編集に貼り付け

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

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

見出しは<h3>「HTML編集」に貼り付け</h3>

標準の文字は<p>標準の文字</p>のようになっています。

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