「Simplicity2」の見出し(H2~H4)をカスタマイズ

BLOG型のクッキー

 このブログで使用しているWordPressテーマ「Simplicity2」の見出しをカスタマイズしました。

 参考にさせていただいたのは、シロマティさんのこちらの記事です。

リンクコピペで簡単!CSSではてなブログの見出しをカスタマイズ! – NO TITLE

 あらかじめSimplicity2の子テーマをダウンロード、有効化しておき、実際に記述するのは子テーマの「Style.css」です。

カスタマイズをする際には、必ずバックアップを取ってから作業を行ってください。

「Simplicity2」子テーマのダウンロード・インストールについてはこちら。

リンクSimplicity2の子テーマ

 先ずは、デフォルトのデザインの枠線を消します。

.article h2,
.article h3,
.article h4 {
    border: none;
}

「h2」見出し

 吹き出し付きの見出しに変更します。

H2 見出し

.article h2 {
    position: relative;
    color: #fff;
    padding: 10px 15px;
    background-color: #003399;
    border-radius: 6px;
}
.article h2::before{
    position: absolute;
    top: 100%;
    left: 32px;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent;
    border-top-color: #003399;
    content: '';
}

 このブログでは「瑠璃紺」スキンを使用していますので、見出しの背景色に「#003399」を指定しました。

「h3」見出し

 左と下に紺色の枠線、背景にグレーを指定した見出しです。

H3 見出し

.article h3 {
    padding: 5px 10px;
    background-color: #f0f0f0;
    border-left: 8px solid #003399;
    border-bottom: 1px solid #003399;
}

「h4」見出し

 左側に紺色の線のみを指定した見出しです。

H4 見出し

.article h4 {
    padding: 5px 10px;
    border-left: 8px solid #003399;
}

色見本はこちら

CCSでカラーコードを指定する際には、こちらのサイトが便利です。

リンクWEB色見本 原色大辞典 – HTMLカラーコード

 原色だけでなく、和色・洋色・WEBセーフカラーのコードが色見本付きで紹介されています。

 今回「#003399」としている部分を、このサイトで紹介されているコードに変更すると、好みの色に変更できます。

 どなたかの参考になれば。

スポンサーリンク

シェアする

フォローする