yuichi.co

ゆういちのノートブック

簡単!Stinger7でパンくずリストをコピペでカスタマイズ

 2485

Stinger7 パンくずリストカスタマイズ

@yuichico_です。カスタマイズしがいのあるWordpressで有名なStinger7のパンくずリストのカスタマイズCSSを書きます。コピペでできますので、みなさんすぐに試してみてください。それと当方デザインは独学で勉強しましたため、間違っている可能性があります。個人的にシンプルなデザインが好きですので、色とりどりの好きな方は以下は見なくても問題ございませんので、戻るボタンを押してください。

まずは子テーマをインストールしてアップロードしてください。

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



ショートカットするための目次

CSSをカスタマイズ

以下のコードを子テーマの外観→テーマ編集→style.cssの一番下へコピペしてください。参考にしてください。

div#breadcrumb a {
     background: #f3f3f3;
     color: #333;
     padding: 2px 4px 1px 7px;
     border-radius: 2px;
     margin-right: 5px;
}
div#breadcrumb a:hover { 
    background: #f4f4f4;
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

これを実装すると、単一記事と固定記事のパンくずリストが薄い灰色の背景色で文字色が黒(完全なる黒ではないですが。)になり外枠を少し丸くなります。またパンくずリストへカーソルを乗っけると少し光る(薄くなる)hoverの実装をしました。

Stinger7パンくずリストをカスタマイズ 単一記事 実装前

Stinger7パンくずリストをカスタマイズ 単一記事 実装後

 

Stinger7パンくずリストをカスタマイズ 固定記事 実装後

Stinger7パンくずリストをカスタマイズ 固定記事 実装後

 

 

まとめ

背景を薄い色にすることによって、優しい色使いになり、シンプルなデザインになります。参考にしてみてください。

Stinger7 カスタマイズ