Stinger7の右サイドバー見出しをコピペでオシャレにカスタマイズ

   

右サイドバー見出しをコピペでおしゃれにカスタマイズ

@yuichico_です。Stinger7に関わらず、ブログをサイト訪問者に見せるのに、右サイドバー必要は場所です。自身のプロフィールやSNSへのリンク、HPへのリンク、メールアドレスの明記、新着記事、人気記事、カテゴリー、タグクラウドなどを掲載するのに必要なスペースです。そんな右サイドバーの見出しを参考リンク先を元に、文字左に新たに丸いCSSを装飾してカスタマイズしてみました。個人的には非常に気に入っているカスタマイズですので、参考にしてください。完成図はこちら。

右サイドバー見出しカスタマイズ 完成図

スポンサードリンク

ダウンロードしてインストール

リンク Stinger7親テーマと子テーマのダウンロードとインストールのやり方

子テーマは大事ですので、必ずインストールしてください。

カスタマイズ

外観→テーマ編集→style.css の一番下に以下をコピペしてください。PC、スマホともに反映されます。

CSS

順をおってわかりやすく説明します。なお、この場面で特徴的なもののみを、厳選して説明します。他は記述は割愛します。

border-bottom

文字下の細い線を示します。pxの数字を大きくすると、下線が太くなり、小さくすると下線が細くなります。色は #3498db にしました。

border-radius

50%にすることで、見出し文字左の丸を表現します。小さくすればするほど、四角に。大きくすればするほど丸くなります。

height

縦の比率を示します。上の場合だとpxを大きくすると丸が縦に大きくなり、pxを小さくすると丸が小さくなります。heightとwidthがどちらかがわからなくなったら、英語で文章を作ってみるといいかもしれません。What's your height?(身長いくつ?)身長 = 縦 (正確にはイコールではありませんが。。)ですので、わからなくなったらこれとイメージすると良いです。

width

横の比率です。pxを大きくすると丸が横に大きくなり、pxを小さくすると丸が小さくなります。

top

上からの距離を指定します。この場合だと、見出し文字の少し左上の距離を測ります。

left

本来は見出しの最初の文字、(プロフィールでいうと「プ」の文字)にかぶさってしまうのですが、leftを記述することで最初の文字より左へ、距離を指定することができます。

opacity

0.5にすることで色を薄めます。小さくてわかりずらいですが、本来である色と比べるとわかりやすいです。

まとめ

いかがでしたか?以下のURLは、他CSS見出しについて詳しく書かれています。参考にしてください。

参考URL CSSで作る見出しデザイン

シェアしていただけると助かります。

 - Stinger7, カスタマイズ ,