アルメモ

アルフレートのアレやコレやメモ

トップ > はてなブログカスタマイズ > このブログのデザインをカスタマイズしてみた件 ②線と影と角丸め編

このブログのデザインをカスタマイズしてみた件 ②線と影と角丸め編

はてなブログカスタマイズ

角なんて食らって丸くしてしまえ！

今回はバランスを整えるようなカスタマイズ

前回は絵文字とフォントなカスタマイズを紹介。

almemo.hateblo.jp

絵文字は手軽に彩りを加えられ、フォントはコンテンツ全体の雰囲気を変えてくれる。

今回は線と影を使って見た目のバランスを整えるようなカスタマイズを。

カスタマイズ内容は完全にぼくの好みなので、今のデザインの主流とか色彩的な正解とかそういうのはあまり考えていません。

この先読むにあたっての注意事項

この先はWeb開発についての知識がある程度必要です。

HTML Standard、CSS4（一部５)、ブラウザの開発ツールで文書構造を読み取るなど、Web開発についてはある程度分かっている前提で書き進めてる。

ただ、ぼくのCSS知識はそんなに高度ではないので、とりあえず動くレベルの非効率なコードだったり、無意味にややこしい記載にになっているかもしれないです。

はてなブログでCSSカスタマイズする前に

前回も書いたんですが、はてなブログのカスタマイズは既存のデザインCSSに追記する形で行うので、最初に記載されていたCSSは必ずバックアップを取っておくこと。

これさえ確保しておけばとりあえず何とかなる。

まずは見出しに線を入れてみる

大見出しの下線が弱くない？

このブログで使ってるテーマの既定の見出しはこんなデザイン。

薄い下線がある。

なんか弱い。

緑っぽいテーマカラーにしたいんで、鮮やかな緑の線にして、頭の部分にも見出しと分かるような意匠を付けたい！

Chromeの開発者ツールでコンテンツの構造を見たところ、コンテンツはクラス「entry-contet」の中にあり、大見出しはH3になっていた。

これに対してこのCSSをセット。

.entry-content h3 {
  padding: 6px;
  border-left: 10px solid #119e4d;
  border-bottom: 3px solid #119e4d;
  border-radius: 6px 0px 0px 6px;
}

padding で文字と線を離す。

border-left で左側に幅広の縦線。

border-bottom で下に横線。

border-radius で左上と左下に丸みをつける。

フォントを丸文字にしたんで見出しのデザインも丸みを持たせた。

中見出しは下線すらなかった

中見出しは文字が大きいだけだったので細めの線を引いてみた。

CSSはこんな感じ。

.entry-content h4 {
  padding: 3px;
  border-bottom: 2px solid #119e4d;
  border-left: 2px solid #119e4d;
  border-radius: 0px 0px 0px 3px;
}

基本は大見出しと同じなので説明略。

これで何となく見た目は整った。

モノタリナイ

文章構造は見やすくなったもののペッタリ感がある。

今風ではあるんだけどなんか物足りないなーということで影を足すことに。

上で書いた H3 と H4 にこれを追記。

box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);

最終的にこんな感じになった。

影は好みが分かれるので難しいところ。

過剰な立体感は古臭い感じも出ちゃうのよねぇ。

気が向いたら変えるかもです。

線と影を他の要素にも使ってみる

他にもなんか寂しかった要素に線と影を足してみた。

まずは画像

このブログのコンテンツ内にはアイキャッチ画像にも使われている先頭の大きな画像と、コンテンツ内の各所に貼られた画像の二種類がある。

先頭画像だけ大きくデザインしたかったので、個別に設定してみた。

.entry-content > p:first-of-type > img:first-of-type {
  border-radius: 20px !important;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .2) !important;
}

.entry-content p:not(.blog-ranking) img {
  border-radius: 4px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .2);
  margin: 10px 0;
}

最初の定義は先頭の大きな画像。

最初の画像だからと特別なIDやクラスが設定されるわけではないので、コンテンツの直下（.entry-content >）にある最初の段落の直下（p:first-of-type >）にある最初の画像（img:first-of-type）という形で特定。

角丸を大きくし、大き目の影を付けた感じ。

二つ目の定義はその他の画像。

ブログランキング用の画像には適用させたくなかったので、その定義（:not(.blog-ranking)）だけが特殊な感じ。

ブログランキング用画像の段落はクラス「.blog-ranking」を含むようにして定型文化しておいた。

引用は凹ませてみた

引用は別ものであることを表現したかったんで引っ込ませてみた。

.entry-content blockquote {
  border: 1px solid silver;
  border-radius: 8px;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, .2);
}

影の設定を「inset」にすることで引っ込んだような影に。

際に表示するとこう。

引用です。

満足。

Twitter引用は凹無理だった

Twitter引用は構造の関係で凹ませることできなかったので、画像と同様な設定に。

.entry-content .twitter-tweet {
  border-radius: 12px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
}

角丸は中身に合わせてみた。

他にも気になったところ

ブログランキングは中央に表示して上下に空白を入れてみた。

.entry-content p.blog-ranking {
  margin-top: 2rem;
  text-align: center;
}


ドラゴンクエストX(ドラクエ10)ランキング

定型文の方にCSSを書こうかと思ったけど、文書構造とは切り離したいよねということで。

サイドバーは見出しの下線と背景程度。

.hatena-module-title {
  border-bottom: 2px solid #119e4d;
}

#box2 {
  border: 1px solid #f0f1f1;
  background-color: rgb(255,255,255,.75);
}

クラス「hatena-module-title」はサイドバーモジュールのタイトル部分。

ID「box2」はサイドバーのベース部分。

ちょっと手を入れるだけでもそれなりに締まる感じになるかなと。

今風のデザインに合ってるかは分からんけども。

まとめ

太めの線と角の丸めを組み合わせるだけでも色んなデザインができる。

そこに影を組み合わせればなんかいい感じになったりすることもあるかもしれない。

デザインは流行もあるし好みもあるしでほんと難しいんですが、自分のブログなので自分の好みにして満足するのは良きことと思います。

なお、この記事を書いた後もちょこちょこCSSいじってるんで、既にここに書いてる以上のカスタマイズになっているかもです。

 

次はCSSのコードを表示するのに使ってるやつあたりを。

外から機能を持ってくるとアレコレできるよねというところで。

 

「このブログのデザインをカスタマイズしてみた件」まとめはこちら。

almemo.hateblo.jp

アイキャッチ画像はスキマナースから使わせていただきました。

nurse-web.jp