Nano's blog

ドイツでデータサイエンスの修士課程を行うにあたって準備したこと、経験したことを中心に書きます

【はてなブログカスタマイズ】両端の丸い左線の見出しを設定する

このブログのデザインは、はてなブログの人気テーマInnocentを導入し、カスタマイズして作られました。その際、見出しや色使いなど色々なウェブサイトを参考にしながらこだわって作ったため、その作業を一つの記事にまとめます。

今回紹介する内容に限らず、デザインCSSのコードを編集する際は、元のCSSのバックアップを取ってから編集するようにしてください!

ブログカラーを一括指定するカスタムプロパティの活用について書いた記事はこちらです。

white-tea.hatenablog.jp

ブログテーマ

このブログはテーマ"Innocent"を使用しています。

Innocent カテゴリーの記事一覧 - MoonNote

Innocent - テーマ ストア

テーマを選んだ基準

シンプルでカスタマイズが容易であるかどうかと、拡張性が高いかどうかです。また、もともとのデザインが非常に洗練されていて(私の好みに合っていてい)、後からデザインCSSで編集する箇所が少ないと思いました。具体的には、サイドバーと記事の幅や、何も加工されていない見出し(あらかじめデザインが入っているとそれをリセットして新たにデザインを加える必要がある)、カテゴリや記事の日付のデザインがクセがなかったところを気に入りました。将来的には、テーマ作成者が追加してくださっている、おすすめの記事一覧をヘッダー下に挿入するなどの機能を実践してみたいです。

はてなブログテーマ「Innocent」に「おすすめ記事リスト機能」を追加しました - MoonNote

丸みのある左ボーダー見出し

このブログの大見出し・中見出しは、最もこだわった部分の一つです。どうしても、左側のみのボーダーを使用し、フラットデザインっぽく、ボーダーの両端を丸めたかったのです。

このブログでは、大見出しにh2を使用しています。デフォルトのまま使っている方はh3が大見出しとして設定されているはずなので、以下のコードをh2からh3に書き換えてご利用ください。

border-leftでやってみた

まず、シンプルにborder-leftをborder-radiusで左ボーダーを丸められるのではないかと思ってやってみました。

すると、ボーダーの左側は丸くなっているのに対し、右側は角のままでした。どうにか、両側を丸めたボーダーを表示できないかと考え、ネットで調べたところ以下の二つの記事が見つかりました。

参考にした記事

カスタマイズにあたり以下の二つの記事を参考にさせていただきました。
一つ目の記事:
CSSだけでborderの端を丸くする | q-Az.

二つ目の記事:
複数行になっても崩れないlistのCSSアレンジメモ | yanagi's memo.

初め、一つ目の記事のみ読んで見出しを作ろうとしたところ、見出しを改行すると表記がずれてしまうという問題が起こりました。二行にわたって左側のボーダーを表示したかったので、二つ目の記事を読んで、複数行にわたって左側のボーダーが表示されるように、コードを改良しました。

一つ目の記事を実践した仕上がり

以下のようになりました。

コード中では、border-leftを設定するのではなく、見出しの直前に縦に細長い長方形の擬似要素を挿入し、その両端を丸めることで、両端の丸いボーダーに見えるようになっています。ソースコードは以下です。 一つ目の記事を参考に記述しています。

.entry-content h2 {
  color: #000000;
  padding: 6px 8px;
  margin-bottom: 10px;
  padding-left: 20px;
  font-size:22px;
}
.entry-content h2:before {
    background-color: #B61919; /* 線色 */
    border-radius: 3px; /* 線幅の半分 */
    content: "";
    display: inline-block;
    height: 40px; /* 線の長さ */
    margin-right: 10px; /* 線右の余白 */
    vertical-align: middle;
    width: 6px; /* 線幅 */
}

一つ目に加えて、二つ目の記事に書かれていることも実践した仕上がり

以下のようになりました。

一つ目の記事と同様に、細長い長方形の擬似要素を見出しの直前に挿入していますが、top: 0; bottom: 0; left: 0;と指定することにより、見出しが複数行にわたっても、左ボーダーが複数行の高さで表示されるようになっています。ソースコードは以下です。 二つ目の記事を参考に記述しています。

.entry-content h2 {
  position: relative;
  color: #000000;
  padding: 6px 8px;
  margin-bottom: 10px;
  padding-left: 20px;
  font-size:22px;
}
/* 左ボーダーを記述(細長い長方形の擬似要素を挿入する) */
.entry-content h2:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: #B61919; /* 線色 */
    border-radius: 3px; /* ボーダーの両端を丸める 線幅の半分 */
    content: "";
    display: inline-block;
    width: 6px; /* 線幅 */
}

可愛い見出しに仕上がりました。

最後に

ほとんどデフォルトの設定のままですが、Innocent本来の持つシンプルさを残しつつ、主にブログカラーを一括指定するカスタムプロパティの活用と、左ボーダーの丸みのある見出しに力を入れてアレンジしました。個人的に気に入っているので、(そしてブログデザインに終わりはないということがわかったので、)特に問題がなければしばらくこのままこのデザインを使い続けようと思っています。ここまで読んでくださりありがとうございました。

ブログ村ランキングに参加しています!
にほんブログ村 大学生日記ブログへ
にほんブログ村