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

【コピペだけ!】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コードを紹介しています。

 

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

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

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

 

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

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

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

 

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

 

合わせて読みたい!

 

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

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●「デザインばか」のここあが半年で収益化したネットビジネスのノウハウ
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●ここあが副業にネットビジネスをすすめる理由
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●パソコン音痴でもパソコン一台で年収1000万円稼ぐ手法
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
●副業解禁の時代をナメているとこれからどうなってしまうのか?

などなど、掲載できるものだけをピックアップしてみました。

無料メール講座本編では、もっと秘匿性の高い内容もたくさん出していきます。

また、私がこれまで100万円以上投資して学んだ有料セミナーでしか手に入らない情報もコッソリ無料メール講座でお伝えしていきます。

※この無料メール講座は、有料講座で聞いた内容も多数含まれており、予告なく募集を終了する可能性があります。

ですので、募集している今のうちにプレゼントを受け取ってくださいね。

下記のボタンをクリックして

・「あなたのお名前
・「メールアドレス

を入力してご登録お願いします。

ここあ公式「LIFE DESIGN通信

お名前
メールアドレス

ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年に独立。現在はネットとデザインのスキルを活かし幅広い分野で活動中。己を磨き誠実に対応すれば、仕事や人脈、そして人生までも大きく変えることができる「ネットビジネスの素晴らしさ」、そして会社に頼らず「自分らしく生きる方法」をこのブログを通じて発信しています。「一度きりの人生」あなたも私と一緒に謳歌しませんか?