【コピペだけ!】STORK(ストーク)のウィジェットの見出しをカスタマイズ!

ここあです。

 

サイドバーウィジェットの見出しデザイン

カスタマイズしたいと思ったことはありませんか?

 

私はSTORKを使い出しの頃は

あまり気にならなかったのですが

少しずつカスタマイズしていくうちに

 

サイドバーウィジェットの見出しも

カスタマイズしたいと思うようになりました^^;

 

前回、記事中の見出しを変更する方法をご紹介しましたが

今回はそれの応用編になります。

 

応用編とはいっても

CSSコードをコピーするだけで簡単にできるので

ぜひ試してみてください。

 

サイドバーウィジェットの見出しをカスタマイズ

まずは、サイドバーウィジェットの

カスタマイズの仕方から説明します。

 

基本的にデザインのカスタマイズは

全てCSSコードを書き加えることで変更が可能です。

 

CSSコードを貼り付ける場所は

ダッシュボードメニューから

外観 → カスタマイズをクリックし

ダッシュボードメニュー

 

追加CSSの画面を表示させます。

追加CSS画面

 

コードはここに貼り付けましょう。

 

サイドバーウィジェットの見出し例

それはな、あなたがコピーするだけで簡単に設置できる

サイドバーウィジェットのCSSコードを

いくつかご紹介いたします。

 

お気に入りの見出しデザインが見つかったら

コピーして貼り付けてみてくださいね。

 

罫線のみのシンプルな見出し

罫線のみのシンプルな見出し

 

私と同じ罫線のみのシンプルな見出しです。

※ 罫線の色や太さ、文字の色はお好みで調整してください。

クリックでCSSコードを表示
#sidebar1 .widgettitle {
background: none;
border: solid 1px #999999;
color: #333;
font-size: 16px;
}

 

上下線のある見出し

上下線のある見出し

 

上下線のみのシンプルな見出しです。

※ 罫線の色や太さ、文字の色はお好みで調整してください。

クリックでCSSコードを表示
#sidebar1 .widgettitle {
background: none;
border-top: solid 4px #333333;
border-bottom: solid 4px #333333;
color: #333;
font-size: 16px;
}

 

下線のみの見出し

下線のみの見出し

 

さらにシンプルな下線のみの見出し。

※ 罫線の色や太さ、文字の色はお好みで調整してください。

クリックでCSSコードを表示
#sidebar1 .widgettitle {
background: none;
border-bottom: solid 3px #000000;
color: #333;
font-size: 16px;
}

このコードは…

border-bottom: solid 3px #000000;solid

dottedに変えると点線にできます。

 

背景色と下線のある見出し

背景色と下線のある見出し

 

シンプルな下線に背景色をプラス。

※ 罫線の色や太さ、文字の色、背景色はお好みで調整してください。

クリックでCSSコードを表示
#sidebar1 .widgettitle {
color: #010101;
background: #eaf3ff;
border-bottom: solid 3px #516ab6;
}

 

左にボーダーと背景色のある見出し

左にボーダーと背景色のある見出し

 

左にボーダーと背景色のある見出しです。

※ 罫線の色や太さ、文字の色、背景色はお好みで調整してください。

クリックでCSSコードを表示
#sidebar1 .widgettitle {
color: #494949;
background: #fffaf4;
border-left: solid 8px #ffaf58;
}

 

立体感のある見出し

立体感のある見出し

 

上記コードに影を入れるだけで立体感が出ます。

※ 罫線の色や太さ、文字の色、背景色はお好みで調整してください。

クリックでCSSコードを表示
#sidebar1 .widgettitle {
color: #494949;
background: #f4f4f4;
border-left: solid 5px #7db4e6;
border-bottom: solid 3px #d7d7d7;
}

 

Webアイコンフォントを使った見出し例

Webアイコンフォントである

Font Awesomeのサービスを使った見出し例です。

 

Font Awesomeの使い方はこちらに記載しています。

Webアイコンフォント「Font Awesome」の使い方をやさしく解説

 

シンプルなアイコンフォントの見出し

シンプルなアイコンフォントの見出し

 

アイコンフォントを使ったシンプルな見出しです。

※ 罫線の色や太さ、文字の色、アイコンの色はお好みで調整してください。

クリックでCSSコードを表示
#sidebar1 .widgettitle {
position: relative;
background-color: #fff;
color: #000;
border-bottom: solid 3px gray;
padding-left: 0.7em;
line-height: 20px;
}
#sidebar1 .widgettitle:before{ font-family: "Font Awesome 5 Free";
content: "\f00c";
position: absolute;
font-size: 1em;
left: 0;
top: 12px;
color: #5ab9ff;
}

 

アイコンフォントに影を入れたの見出し

アイコンフォントに影を入れたの見出し

 

アイコンフォントに背景の図形に影を入れた見出し例です。

※ 罫線の色や太さ、文字の色、アイコンの色はお好みで調整してください。

クリックでCSSコードを表示
#sidebar1 .widgettitle {
position: relative;
background: #fff;
font-size: 18px;
padding: 0 0 0 35px;
color: #474747;
border-bottom: solid 4px #999;
}
#sidebar1 .widgettitle:before {
font-family: "Font Awesome 5 Free";
content: "\f024";
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #ff6363;
width: 40px;
height: 40px;
text-align: center;
top: 50%;
left: 0px;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}

 

サイドバーウィジェットの見出しは簡単にカスタマイズできる!

ウィジェットの見出しはコピーで簡単にカスタマイズできる!

 

今回はサイドバーウィジェットの

見出しをカスタマイズするための

CSSコードを紹介しました。

 

冒頭で説明した通り、見出しのデザインは

CSSコードで簡単にカスタマイズできます。

 

しかし、ワードプレスのCSSコードは

詳しく知らない人が指定の仕方を間違えると

思わぬところに反映されたり、正しく表示されなかったりします。

 

なので、実際にカスタマイズを行うにしても

それなりに検証しながらカスタマイズしているので

コードを調整するのは意外と大変です^^;

 

しかし、せっかくおしゃれな有料テーマを購入した以上は

あなたにも、もっとSTORKのことを

好きになって欲しいと思います。

 

だからこそ、いろいろと検証を重ねながら

あなたでもコピーすれば簡単にできる

CSSコードを紹介しています。

 

なので、もしサイドバーウィジェットの見出しを

他のブロガーと差別化したいという場合は

ぜひコピーしてカスタマイズしてみてください。

 

最後までお読みいただきありがとうございました!

 

>ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
など、無料メール講座本編では、決して表には出せない秘匿性の高い情報もたくさん提供していきます。※この無料メール講座は、私が有料セミナーで直接成功者たちから聞いた内容も多数含まれているため、予告なく募集を終了する可能性があります。

CTR IMG