未来を変える日記

毎朝4時起床で人生を変える

タイトルと見出しデザインを変更した話

f:id:corgi-eric:20200206061018p:plain

https://saruwakakun.com/html-css/basic/tools

他のブログを巡っておりますと、その綺麗な装飾に驚くことがあります。上のスクショも今回参考にさせて頂いたブログ。対する当方のブログは、はてなブログに「Minimalism」というカスタムテーマを適用しただけ。方々を調べつつ、デザインを変更してみたので、その内容を共有致します。

変更箇所

今回の作業では、次の3か所を変更しています。

  1. サイドバーにTwitterのタイムラインを表示させる
  2. ブログ上部にグローバルメニューを加える
  3. タイトルと見出しのデザインを変更する

箇条書きの数字に対応させたイメージ図を下に貼りつけています。上記3件から3番のタイトルと見出しデザインの変更について次に記載致します。

f:id:corgi-eric:20200206062926p:plain

①サイドバーと②グローバルメニュー
f:id:corgi-eric:20200206063420p:plain
f:id:corgi-eric:20200206063547p:plain
③タイトルと見出しのデザイン(左:変更前 ⇔ 右:変更後)

管理画面から

はてなブログの管理画面からデザイン ⇒ カスタマイズ ⇒ デザインCSSへと進みます。ここにCSSコードを追加してやると、タイトルや見出しなどのデザインを変更できました。

f:id:corgi-eric:20200206064735p:plain

CSSとは?

HTMLがブログ本文を記述するための言語。CSSは、Cascading Style Sheetの略で、HTMLと組み合わせて使うことでブログのデザインを変更したりできる。

CSSは、HTMLと組み合わせて使用する言語です。 HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。

CSSとは?-CSSの基本 

CSSのコードサンプルを入手する

ゼロから書くのは手間ですが、ネットは便利なものでコードのサンプルが沢山提示されています。今回は、こちら2件のブログからサンプルを入手致しました。

実際に追加したコード

サンプルをベースに実際に追加したコードがこちらになります。

強調表示を蛍光ペン風に

ブログ本文を記述するHTMLでは<strong>というタグで強調表示を指示しますが、CSSにて、その<strong>タグに背景(background)、線の太さと色(linear-gradient (transparent 60%, #ffff66 60%) (=太さ60%で透明から黄色へ)を指定しています。

タイトルに左線と塗りを

タイトルは<h1>タグになりますが、ブログタイトルも<h1>タグですので、サンプルコードをそのまま適用すると、次のようになります。。。

f:id:corgi-eric:20200206071550p:plain

そのため、本文(content)の領域にある<h1>タグの装飾を変更することを明示するため、以下のように #content を左側に追加してやります。他は、サンプルコードをそのまま流用できました。

#content h1 {

見出し1~3に下線を付ける

はてなブログの見出し1~3は、HTMLタグですと<h3>~<h5>に対応しています。それぞれ、番号を変えてサンプルコードを追加すれば良さそうですが、一点問題がありました。

f:id:corgi-eric:20200206072320p:plain

サンプルコードのままですと、上の画像の赤文字のように下線が右端まで引かれてしまいます。でも、当方としては、下線は文字の下だけにしたい。そこで、サンプルのborder-bottom(下線)に加えて以下のコードを追加しました。

display: inline-block

displayは、要素の表示形式を指定するプロパティで、inline-blockは、要素を横に並べつつ、揃えるという指定の仕方。以下を参考までに。

saruwakakun.com

まとめ

と言う訳で、今回は、はてなブログのタイトルと見出しデザインを弄ってみました!Wordpressでなくてもそれなりに弄れるということも分かりました。当方のブログスキルは、まだまだ発展途上ですが、こうしてやってみると、知識も増えますし、何より少しづつ成長している感も出てきて楽しいです。

本記事が、何かの参考になれば幸いです。