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

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

ここあです。

 

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

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

 

わたしも最初はあまり気にならなかったのですが

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

 

サイドバーウィジェットの見出しもカスタマイズしたい」と

思うようになりました。

 

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

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

 

応用編」といっても

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

ぜひやってみてください。

 

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

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

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

 

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

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

 

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

ダッシュボードメニューから「外観」→「カスタマイズ」をクリックし

ダッシュボードメニュー

 

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

追加CSS画面

 

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

 

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

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

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

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

 

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

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

 

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

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

 

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

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

#sidebar1 .widgettitle {
background: none; /* 背景色を消す */
border: solid 1px #999999;/* 線の種類 線の太さ 色 */
color: #333;/* 文字の色 */
font-size: 16px;/* 文字の大きさ */
}

 

 

上下線のある見出し

上下線のある見出し

 

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

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

#sidebar1 .widgettitle {
background: none; /* 背景色を消す */
border-top: solid 4px #333333; /* 上線 */
border-bottom: solid 4px #333333; /* 下線 */
color: #333;/* 文字の色 */
font-size: 16px;/* 文字の大きさ */
}

 

 

下線のみの見出し

下線のみの見出し

 

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

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

#sidebar1 .widgettitle {
background: none; /* 背景色を消す */
border-bottom: solid 3px #000000; /* 線の種類 線の太さ 色*/
color: #333;/* 文字の色 */
font-size: 16px;/* 文字の大きさ */
}

このコードは…

border-bottom: solid 3px #000000;solid

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

 

 

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

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

 

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

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

#sidebar1 .widgettitle {
color: #010101; /*文字色*/
background: #eaf3ff; /*背景色*/
border-bottom: solid 3px #516ab6; /* 線の種類 線の太さ 色*/
}

 

 

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

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

 

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

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

#sidebar1 .widgettitle {
color: #494949;/*文字色*/
background: #fffaf4;/*背景色*/
border-left: solid 8px #ffaf58;/*左線(実線 太さ 色)*/
}

 

 

立体感のある見出し

立体感のある見出し

 

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

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

#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」の使い方をやさしく解説

 

 

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

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

 

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

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

#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; /*アイコン色*/
}

 

 

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

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

 

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

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

#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コードを紹介しています。

 

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

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

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

 

設定でよく分からないことがあれば

いつでも気軽にご相談くださいね!

「ここあ」に問い合わせをする

 

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

 

合わせて読みたい!

 

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

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。