ズブの素人がH2,H3をカスタマイズしてみました

こんにちは、ゆんつです。

今日も今日とてブログをいじくろうと思います。

僕はブログ初心者なのでベテランの人なら当たり前の事でも、ちょっとブログに変化があるだけでとても感動します。

ブログをいじって少しでも見た目が変わると楽しくてなりません。

部屋の模様替えは全然しない僕ですが、ブログの模様替えはゲームをしているような感覚でとても楽しいです。

すこしでもブログのデザインを自分でいじれるように勉強できればとKindleでこういう本まで買いました。

いちばんやさしいHTML5&CSS3の教本人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ)

posted with ヨメレバ

赤間公太郎,大屋慶太,服部雄樹インプレス 2016-03-18

今までの僕には全く縁が無かったような本です。

今日は投稿記事の見出し部分、いわゆるH2とH3と言われる部分をいじろうと思います。

使っているテーマはSimplicityです。

現状の確認
実際に変えてみる
まとめ

現状の確認

今はSimplicityのデフォルトの状態で、H2は文字のサイズが文章の文字のサイズより大きく文頭に黒の縦棒が入っています。

H3は文字のサイズが文章の文字のサイズより大きく灰色の下線が入っています。

どちらもシンプルで悪くないんですが、このままでは少しだけ地味すぎるというか寂しいような気がします。

なのでこの部分を多少見栄えがするように変更したいと思います。

今のH2とH3のcss状態を調べるとこんな感じのようです。

ちなみにcssとはブログのレイアウトや装飾を行なう言語です。

H2はこんな感じ

.article h2 {
    border-left: 1px solid #000;
    margin: 40px -29px 20px;
    padding: 25px 30px;
    font-size: 26px;
}

H3はこんな感じです

.article h3 {
    font-size: 18px;
    border-bottom: 5px solid #e7e7e7;
    padding: 10px 0;
}

これらのcssを自分の好みに合うように変更してやれば僕の思うデザインになります。

その前にそれぞれの意味合いを今の僕に解る範囲内で理解しようと思います。

border-leftというのが文頭の縦棒ですね。pxが線の太さ、solidが線の種類、#000は黒色です。

marginとpaddingは余白。

font-sizeは文字の大きさです。

H3もほぼ同じような考え方ですね

border-bottomが下線を表しているので、ここの数値などをいじれば下線の見た目を変えることが出来そうです。

実際に変えてみる

僕はあまりゴテゴテした感じは好きではないので、あくまでもシンプルにH2は文頭の縦棒の色を黒からオレンジ系の色に変えて太くし、細い下線を付け背景に淡い色をつけようと思います。

さらに現在縦棒がぴったり外枠に貼りついているのでこれを少し離したいです。

そして文字は少し小さくして余白も少し縮めます。

ダッシュボードで外観→テーマの編集からSimplycity2 childを選んで適当な場所にcssを書いていきます。

cssをいじるときは子テーマであるSimplycity2 childをいじりましょう。

僕は前回cssの編集作業した下から書くことにしました。

前回の作業内容はこちら。

ズブの素人がSimplicityで記事と記事の間に区切りの線を入れる

こんにちは、ゆんつです。最近の僕は遅まきながら少しでも見やすいブログが作れるように日々勉強をしています。僕のこれまでのブログはこんな感じで記事と記事の間に区切り線がありません。この辺りは好き嫌いに

H2はこんな感じにしてみました。

.article h2 {
    border-left: 5px solid #ffaf00;
    margin: 40px 0px 20px;
    padding: 20px 13px;
    font-size: 20px;
    border-bottom: 1px solid #ffaf00;
    background-color: #FDF5E6;
}

border-leftを5pxにして行頭の線を太くして色を変更します。

marginをの左右を0にすることで、今までぴっちり外枠にひっついていた縦棒を枠線から少し離します。

paddingを調整して余白を今までより狭くします。

font-sizeは26pxから20pxに変更して文字を小さくします。

border-bottomで縦棒と同じ色で細めの下線も引きます。

「ファイルを更新」を押下したのち、ちゃんとカスタマイズされているかブログを確認してみます。

おおっ、変わってる変わってる。

この調子でH3も変更します

H3の下色の色はH2と同じで今よりも少しだけ線を細くしたいです。

そして文字の大きさはH2より小さくします。

余白はいじりません。

こんな感じに変更します。

.article h3 {
    font-size: 18px;
    border-bottom: 3px solid #ffaf00;
    padding: 10px 0;
}

として、ブログを確認してみます

おお、変わっとる変わっとる。

以前の画面と比べるとこんな感じです。

変更前　　　　　　　　　　　　　　　　　変更後

ちょっと大き過ぎに感じていた文字が小さくなって線や背景に色がついたことで、少しだけ軽く明るい感じになった気がします。

これからはこのデザインでブログを進めていきます。

まとめ

H2,H3を変更するだけでもブログのイメージがガラッと変わることが解りました。

少しだけ僕のブログも華やいだ気がします。

cssを編集するとガラッと見た目が変わるので楽しいですね。

これから空き時間に本を読んでブログのデザインが上達できるように頑張ります。

ブログをいじってるとあっという間に時間が経って、この作業が終わったのは深夜の2時過ぎでした。

それでは、またですー。

現状の確認

実際に変えてみる

まとめ

コメント