Webデザインhttps://saruwakakun.com/html-css/basic/tools他のブログを巡っておりますと、その綺麗な装飾に驚くことがあります。上のスクショも今回参考にさせて頂いたブログ。対する当方のブログは、はてなブログに「Minimalism」というカスタムテーマを適用しただけ。方々を調べつつ、デザインを変更してみたので、その内容を共有致します。今回の作業では、次の3か所を変更しています。サイドバーにTwitterのタイムラインを表示させるブログ上部にグローバルメニューを加えるタイトルと見出しのデザインを変更する箇条書きの数字に対応させたイメージ図を下に貼りつけています。上記3件から3番のタイトルと見出しデザインの変更について次に記載致します。デザインCSSへと進みます。ここにCSSコードを追加してやると、タイトルや見出しなどのデザインを変更できました。CSSとは?HTMLがブログ本文を記述するための言語。Sheetの略で、HTMLと組み合わせて使うことでブログのデザインを変更したりできる。CSSは、HTMLと組み合わせて使用する言語です。HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。CSSとは?-CSSの基本CSSのコードサンプルを入手するゼロから書くのは手間ですが、ネットは便利なものでコードのサンプルが沢山提示されています。今回は、こちら2件のブログからサンプルを入手致しました。実際に追加したコードサンプルをベースに実際に追加したコードがこちらになります。(=太さ60%で透明から黄色へ)を指定しています。タイトルに左線と塗りをタイトルは<h1>タグになりますが、ブログタイトルも<h1>タグですので、サンプルコードをそのまま適用すると、次のようになります。左側に追加してやります。他は、サンプルコードをそのまま流用できました。{見出し1~3に下線を付けるはてなブログの見出し1~3は、HTMLタグですと<h3>~<h5>に対応しています。それぞれ、番号を変えてサンプルコードを追加すれば良さそうですが、一点問題がありました。サンプルコードのままですと、上の画像の赤文字のように下線が右端まで引かれてしまいます。当方としては、下線は文字の下だけにしたい。そこで、サンプルのborder-bottom(下線)に加えて以下のコードを追加しました。inline-blockdisplayは、要素の表示形式を指定するプロパティで、inline-blockは、要素を横に並べつつ、揃えるという指定の仕方。saruwakakun.comまとめと言う訳で、今回は、はてなブログのタイトルと見出しデザインを弄ってみました!Wordpressでなくてもそれなりに弄れるということも分かりました。当方のブログスキルは、まだまだ発展途上ですが、こうしてやってみると、知識も増えますし、何より少しづつ成長している感も出てきて楽しいです。本記事が、何かの参考になれば幸いです。