うえのブログ

気になったこと、思い立ったこと、調べてみたことなどを書き留める場として使っています。

見出しデザイン変更のやり方(初心者向け)

f:id:uenoyou111:20170910172744j:plain

上野(id:uenoyou111)です。どうやらデザインをいじるのが好きなようです。

 

記事を書くのも好きです。

 

最近デザインをいじりまくっていて、見出しに関してはちょっと落ち着いたのでここらでまとめを。

 

 

※私自身が見出しってなんぞ?ってところから始めたので、かなり初心者向けになります。

 

 

1.そもそも見出しって?

 

記事の内容をまとめたもの、そのタイトルだけでどんなことが書かれているか分かるものって感じですね。

 

ここなら、見出しって何なの?ってとこで区切っています。

 

見出しのデザインを変えることにより見やすさが格段にUPします。

 

というのも

 

 

f:id:uenoyou111:20170910222559j:plain

 

 

という風に文字を並べるより

 

 

f:id:uenoyou111:20170910222614j:plain

 

 

こっちのほうが見やすいという視覚的なアレです。まぁ適切な改行とかも必要ですが。

 

※初期設定だと文字が大きくなるだけっぽいので、文中で文字を大きくしたり太文字にすると見分けがつかなくなります。

 

2.見出しの作り方

 

実際にやってみて投稿してみましょう。見出しにしたい文字をマウスでクリックしながら引っ張って選択します。

 

f:id:uenoyou111:20170910224621j:plain

 

 

そしたらタイトルと書かれた文字の下に、見出しがあるのでこちらをポチ。大見出しを選択します。

 

 

f:id:uenoyou111:20170910224659j:plain

 


するとでっかくなります。

 

 

f:id:uenoyou111:20170910224144j:plain

 

 

これで大見出しが出来上がりです。このまま更新するだけです。

 

 

f:id:uenoyou111:20170910224406j:plain

 


初期設定だと、ただ文字がでかくなってるだけだと思われます。

 

このデザインを設定しておくと、上の画像のように設定しておいたデザイン通りの見出しが出来上がるわけです。

 

もちろん見出し全部共通でもいいし、大中小で別々にするのも自在です。

 

余談ですが。大中小と見出しを分ける基準としては、大見出しで大まかな説明をした後に補足説明が必要なものは中見出しへ。

 

更に補足や蛇足がある場合は小見出しへ、と言った具合に進んでいきます。

 

2-1.見出しのタグを覚えておくと便利

 

見出しってHTMLタグというものが割り振られていて、単純に記号で覚えてもらうと分かりやすいかも。

 

 

f:id:uenoyou111:20170910225219j:plain

 

 

これを覚えておくと、後々デザインを編集するときにh3(大見出し)をどのデザインにするかとかが選べます。

 

3.見出しデザイン変更の具体的なやり方

 

まず、以下のコードをそのままコピーして見ましょう。大見出し(h3)用のコードです。

 

.entry-content h3 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #1056a2;
border-bottom: 1px solid #1056a2;
}

 

それから自分のはてなID書いてるとこクリックしてデザインを選択。

 

 

f:id:uenoyou111:20170910225920j:plain

 

 

スパナマークを押して、デザインCSSをクリック。

 

f:id:uenoyou111:20170910230143j:plain

 

 

そんでここに貼り付けます。

 

 

f:id:uenoyou111:20170910230310j:plain

 

 

そのまま変更を保存、あとは投稿した記事を見てみましょう。

 

 

f:id:uenoyou111:20170910230757j:plain

 

 

このデザインが反映されるようになっています。しかしデザインだけでアイスの食べたさがこんなにも変わるとは。

 

デザインとか、色とかは後述します。

 

基本はこのデザインCSSの下にどんどん書き込んでいくスタイルです。

 

4.デザインから選ぶ

 

上野が参考にしたコピペコードを紹介してくださったブログ様たちです。いいデザインがあったらコピーしましょう。

 

www.notitle-weblog.com

 

saruwakakun.com

 

実は私が説明するよりも丁寧に書かれておりますので、なげーよ!と思われた方は上のブログ様を参考に設定してください。

 

色が気に食わない場合は、後でカラーコードを変更することが出来ます。

 

4-1.色を変更する

 

まず、色についてはカラーコードを指定することで変更できるようになります。

 

その前に自分のメインカラーを選びましょう。私はオレンジが好きなのでオレンジ、サブカラーをブルーにしました。

 

blogsmart.hatenablog.com

 

お気に入りのデザインを見つけたら、その中で半角♯から始まる3桁もしくは6桁の番号コードを探しましょう。

 

実際に当ブログで使われているデザインを例に取ってみます。

 

 

f:id:uenoyou111:20170910231522j:plain

 

このコードでこのデザインになります↓

 

f:id:uenoyou111:20170910231729j:plain

 

 

これで変更したい色にとにかく変えてみます。色コードが3ヶ所ありますね、よく分からないから全部オレンジにしてみましょう。

 

 

 

f:id:uenoyou111:20170910232846j:plain

 ↓

f:id:uenoyou111:20170910232205j:plain

 

うん、求めてるものはこれじゃない。

 

 

ここで元々ついていた色コードを検索する術を覚えた。すると、#111が黒だということに初めて気がついた。

 

てことは、文字色か。変更する必要なし。オレンジ一色じゃなくて左上の■はサブカラーの青にしよう。どこかわかんないけど変えてみる。

 

f:id:uenoyou111:20170910233047j:plain

f:id:uenoyou111:20170910232641j:plain

 

はいビンゴォ!!!!(歓喜)

 

というように、よく分からないけど試行錯誤して変更しました。

 

4-2.適用したい見出しを選択

 

コピペしたコードのh1とかh3とか書かれている部分を、変更したい見出しに変えます。

 

  • 大見出し→h3
  • 中見出し→h4
  • 小見出し→h5

 

大見出しのデザインにしたいならh3中見出しのデザインにしたいならh4という感じにコード単位で変更していきます。


私はわからなくなって何度もやり直す愚行を犯してしまいました。

 

初めてやる方はメモ帳に貼り付けて、h3ならh3とか、見出し単体で全部変えるといいかもしれません。

 

並べると、複雑なデザインのものはh3から始まる記述のコードが数か所あるんですよ。

 

コードの意味がわからないから、全部並べたら全部h3になってるマジック。あれ、これどないするんだ……?オロオロ


こんなことしてるから、何日もいじって苦労するハメになるわけですね。納得。

 

まとめ

 

とにかく試行錯誤しながらやっていくと、なにげに出来るようになります。

 

だってもう、あんなに苦労してたシェアボタンなんて余裕のよっちゃんですよ。ふふん。

 

www.uenoyou.net


 

わかる方は、簡単にコピペして終わるだけのようです。私のように無知だと一つ覚えるのにも時間がかかってしゃあないですね。

 

ということで、以上になります。

 

次回は変更したテーマとかもまとめていきます。