【Cocoon】サイドバーの見出しの前に画像をつけるカスタマイズ

【Cocoon】サイドバーの見出しの前に画像をつけるカスタマイズ

くるみ

サイドバーの見出しがなんかパッとしないんだよね

というわけで今回は

  • サイドバーの見出しをもっとオシャレにしたい
  • Cocoonを使っていて、デフォルトのデザインでは物足りない

という方に向けて「Cocoonのサイドバーの見出しを可愛くカスタマイズする方法」をまとめました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

サイドバーの見出しの完成イメージ

Cocoonのサイドバーの見出しの完成イメージ

この記事に沿ってカスタマイズすると上のようになります。

画像を見出し前に配置できるので、他のサイトとデザインが被ることなく差別化を図ることができます。(※画像は各自用意していただく必要があります)

というわけで早速カスタマイズしていきましょう⸝⸝- ̫ -⸝⸝

カスタマイズ手順

大きく分けて3つの手順です。

手順
step1
CSSをコピペ
step2
画像をアップロード
step3
ヴィジェットにコピペ

手順は上の通り。画像を使わない方は手順2はスルーして大丈夫です。

バックアップを忘れずに

早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。

「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。

WordPressでのCSSのバックアップの取り方【カスタマイズ時に必須】WordPressでCSSのバックアップをとる方法
備えあれば何とやらだね

くるみ

Cocoonのサイドバーの見出しのカスタマイズ方法

CSSをコピぺする

  • 「追加CSS」に追加
  • 「テーマエディター」を使って追加
  • FTPソフトを使って追加

以上のどれかの方法でカスタマイズコードをコピペします。

「追加CSS」が最もお手軽にできるよ

くるみ

「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。

WordPressでCSSコードを追加する方法【初心者向け】WordPressでCSSを編集する方法を徹底解説

コードはこちら

/************************************
** サイドバーの見出し
************************************/
.midasi{
  position: relative;
  margin:0 2.5%;
  text-align: center;
  margin-bottom: 5px;
  margin-top: 25px;
}
.midasi:before {
  position: absolute;
  content: "";
  border-bottom: 3px solid #f8c678;/*好きな色に*/
  top: 47%;
  left: 0;
  z-index:0;
  width: 100%;
}
.midasi span{
  font-weight: 700;
  color: #f8c678;/*好きな色に*/
  font-family: "Avenir","Arial",sans-serif;
  display: inline-block;
  padding: 1em;
  letter-spacing: .05em;
  font-size: 18px;
  background-color:#fff;
  position:relative;
  line-height: 2px;
  padding-right: 9px;/*要調整*/
}
.widget-title{
  display:none;/*ヴィジェットのタイトル消す*/
}
/************************************
** ここから下は画像使う場合
************************************/
.midasi img{
  max-width:40px;/*要調整*/
  position: absolute;
  top:-2px;
  right:90%;/*要調整*/
}

.midasi{
  position: relative;
  margin:0 2.5%;
  text-align: center;
  margin-bottom: 5px;
  margin-top: 25px;
}
.midasi:before {
  position: absolute;
  content: "";
  border-bottom: 3px solid #f8c678;
  top: 47%;
  left: 0;
  z-index:0;
  width: 100%;
}
.midasi span{
  font-weight: 700;
  color: #f8c678;
  font-family: "Avenir","Arial",sans-serif;
  display: inline-block;
  padding: 1em;
  letter-spacing: .05em;
  font-size: 18px;
  background-color:#fff;
  position:relative;
  line-height: 2px;
  padding-right: 9px;
}
.widget-title{
  display:none;
}
.midasi img{
  max-width:40px;
  position: absolute;
  top:-2px;
  right:90%;
}
「要調整」とあるところは画像のサイズや個人の好みで変える必要があるかもです。

ちなみにウチが使った画像のサイズは190×179pxでした

くるみ

画像のURLを取得する

メディアを追加する

メディアを追加する

「メディア」から「新規追加」を選択。

画像をアップロードする

画像をアップロードする

使いたい画像をドラッグ&ドロップします

画像のURLを取得する

画像のURLを取得する

アップし終わると、右の方らへんにURLが表示されるのでメモしておきます

ウィジェットにコピペ

要素をコピー

<div class="midasi">
<span>
<img src="画像のURL">
見出しの文字をここに入力
</span>
</div>

“画像のURL”のところに先程メモしたURLを、「見出し…」のところにカスタマイズしたい見出しのタイトルを入れ、これをまずコピーします。

(※画像を使わない方は<img…>の部分は省いて大丈夫です。

見出しのタイトルってのは例えば「新着記事」とかだよ

くるみ

ウィジェット

「外観」→「ウィジェット」を開き、サイドバーのエリアに”カスタムHTML”を挿入します。

新着記事の見出しの場合、新着記事のヴィジェットの前に挿入します。

カスタムHTMLに挿入

そして先程のコピーした要素を、内容にペーストして保存すればOK!

そして見出しの数ぶん、カスタムHTMLを挿入すれば完成です!

お疲れ様!

くるみ

余談

この方法は本来のサイドバーの見出しである「.widget_title」を「display:none」で非表示にして、「midasi」という新しい要素を挿入しています(›´ω`‹ )

正直「.widget_title」をCSSでいじいじしてあげてもよかったのですが、今回作ったmidasi」はウィジェットの見出しに限らず色んなところで使えるので、そういう意味では良さげかなと!

CSSの変更が反映されない場合

「あれ…?CSSが反映されないぞ…」となった場合は、キャッシュが原因であることが多いので以下の2つの方法を試してみてください。

キャッシュ系プラグイン

「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。

プラウザのキャッシュを削除

お使いのブラウザのキャッシュを削除してみてください。

Chromeをお使いの場合は以下のショートカットキーで削除できます。

Windows[Shift]+[Ctrl]+[Delete]キー
Mac[shift]+[command]+[delete」キー

まとめ

以上、Cocoonのサイドバーの見出しを可愛くカスタマイズする方法でした。

他にもCocoonカスタマイズの記事書いてるのでぜひ。

Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝

1 COMMENT

いちご

こんにちは!とても為になりました。
この記事のサイドバー見出しのように
フロントページの
「新着記事」やカテゴリー名(例えば「恋愛」・「趣味」)も
したいのですが、何かやり方はありますか?
フロントページは2からむの、カテゴリごとで表示しています。

返信する

コメントを残す

この記事を書いた人
おはようポテトのプロフィール画像
おはようポテト

22年4月から自社開発企業のWebエンジニアとして働く大学生。このサイトでは主にプログラミングやWordPressカスタマイズについて発信しています。他に運営しているのは宅配冷凍弁当の特化ブログなど。お問い合わせはこちらよりどうぞ。