1分でわかる！ブログカスタマイズ【経験談】

ブログのデザインを変更する方法として、「HTML編集」があります。
文字にラインを引いたり色を変えたり、自分好みにカスタマイズすることができます。

HTMLとは、言葉のようなもので、英語などの外国語を習得するのに似ています。
初めてみる外国語は「なんじゃこれ？」って感じになると思いますが、HTMLも同じようなものです。

でも安心してください。すでに先人たちが用意してくれたHTMLのテンプレートを貼り付けるだけで、お好みのデザインに変更することができます。

どこに貼り付ければいいのか？それだけわかれば、まずは十分です。

見出しの構成

概念を掴むのに重要なので繰り返しますが、HTMLとは単なる言葉です。

例文を出しましょう。
この言葉を表示するために、HTML編集画面では、次のようになっています。

<div>例文を出しましょう</div>

<h3>見出しの構成</h3>

記事の文章は<div>...</div>で囲まれた場所に表示され、
見出しの文章は<h3>...</h3>で囲まれた場所に表示されています。

h3とは、heading 3という見出しを表す言葉です。
h3の他に、h1~h6まであり、いろんなデザインの見出しをつけることができます。

CSS

CSSとは、デザインを指定する言葉で、HTMLと同じだという認識で問題ありません。

例えばこの見出しのデザイン ”CSS"
のHTMLは、次のようになっています。

entry-content h3 {
  padding: 0.25em 0.5em;
  color: #494949;
  background: transparent;/
  border-left: solid 5px #7db4e6;

これを日本語に翻訳すると、

entry-content h3 {
     padding: 0.25em 0.5em;/*上下 左右の余白を0.25em 0.5emにする*/
  color: #494949;/*文字色を白にする*/
  background: transparent;/*背景を透明にする*/
  border-left: solid 5px #7db4e6;/*左に5pxの線を引き、色は水色*/

色を指定するときは、
#494949 のように、#と数字で表します。
線の太さや余白の大きさは "px" ピクセルで表示します。

やることはコードを貼り付けるだけ

CSSテンプレートで検索すると、様々なテンプレートが出てきます。
サルワカさんのサイトにおしゃれなデザインがあるので参考にしてみてください。

デザインが決まったら、コード（言葉）をコピーして、上記のように、"h3{"  以降に書いてある該当箇所に貼り付けるだけで、デザインが変更できます。

見出しはh1~h6までありますので、自分が使用している見出しがどれに該当するか、一度HTML編集画面を見て確認してみてください。

まずはこれだけ知っておけば、HTMLという外国語を理解するのに十分です。