MENU
アーカイブ
ゆみ
本気でネットビジネスで稼ぐことを決意し奮闘中のママ◆電気電子工学科を卒業→ウェブアプリ開発会社に就職→WEB制作会社に転職→出産を機に在宅ワークに→フリーランスとして活動中◆WEBサイト構築10年以上|ブログを一ヵ月で収益化◆ネットビジネス 快適ライフに役立つ情報を発信◆ドラマ大好き

【Cocoon】サイドバーの見出しのデザインをオシャレに!

Cocoonのテーマでサイドバーの見出し部分のデザインを自分好みに変更する方法を紹介します。

そのままのサイドバー見出しは単色の四角で囲われたシンプルなデザイン。

これをこんな感じにしてみます!

CSSのコードをそのままご紹介しますのでコピペで簡単に実現できますよ!

目次

CSSのコードを追加する方法

CSSのコードを追加する方法はいくつかあるのですが、誤ったコードを書いてブログ全体のレイアウトが崩れるなんてこともあります。
一番リスクの少ない方法が「追加CSS」を使う方法です。

「追加CSS」を使うメリットは以下の2点。

追加CSSのメリット
  • 「追加CSS」は反映前にプレビュー画面で表示を確認することができる
  • テーマの更新があっても追加したCSSのコードが消えない

ここでは「追加CSS」を使ったCSSのコードを追加する方法をご紹介します。

  1. WordPressのメニューから【外観】→【カスタマイズ】の順にクリックします。
  2. カスタマイズ画面の左のメニューから【追加CSS】をクリックします。
  3. 追加CSSの画面のこの部分にデザインを変更するためのコードを追加します。
  4. コードを追加すると右のプレビュー画面で結果を確認することができます。
  5. 問題なければ左上の【公開】ボタンをクリックして完了です。

【色別】このデザインを実現するCSSコード

ブルー系、レッド系、グリーン系のコードを準備しました。

ブルー系

追加CSSに以下のコードをコピペして追加してください。

/*サイドバー見出し*/
.sidebar h3{
color: #1e73be;
text-shadow: 0 0 5px white;
border-left: solid 7px #1e73be;
background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

レッド系

追加CSSに以下のコードをコピペして追加してください。

/*サイドバー見出し*/
.sidebar h3{
color: #be1d56;
text-shadow: 0 0 5px white;
border-left: solid 7px #be1d56;
background: -webkit-repeating-linear-gradient(-45deg, #ffccee, #ffccee 3px,#ffe7f3 3px, #ffe7f3 7px);
background: repeating-linear-gradient(-45deg, #ffccee, #ffccee 3px,#ffe7f3 3px, #ffe7f3 7px);
}

グリーン系

追加CSSに以下のコードをコピペして追加してください。

/*サイドバー見出し*/
.sidebar h3{
color: #1dbe56;
text-shadow: 0 0 5px white;
border-left: solid 7px #1dbe56;
background: -webkit-repeating-linear-gradient(-45deg, #ccffd7, #ccffd7 3px,#e7ffee 3px, #e7ffee 7px);
background: repeating-linear-gradient(-45deg, #ccffd7, #ccffd7 3px,#e7ffee 3px, #e7ffee 7px);
}

\ こちらの記事もおすすめです /

あわせて読みたい
【Cocoon】LINEやFirefoxで表示されるブログの画像を変更する方法 初めて作ったブログはWordPressの無料テーマ「Cocoon」を利用していました。 動作確認のためスマホでも表示をチェックしていると・・・そこで気になることが! LINEのメ...

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

目次
閉じる