...

【Cocoon】サイドバーの見出しを可愛くカスタマイズする方法!コピペで簡単!

Cocoonのサイドバーのカスタマイズ

どうもおはようポテト(@ohayoupoteto22)です。

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

というわけで今回は

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

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

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

ブログ主

早速いってみよう!

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

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

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

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

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

カスタマイズ手順

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

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

ブログ主

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

バックアップを忘れずに

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

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

WordPressでのCSSのバックアップの取り方【WordPress】CSSをカスタマイズする際のバックアップの取り方

ブログ主

備えあれば何とやらだね

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

CSSをコピぺする

「追加CSS」に追加

「テーマエディター」を使って追加

FTPソフトを使って追加

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

ブログ主

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

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

WordPressでCSSコードを追加する方法【初心者向け】WordPressでCSSを編集する3つの方法

コードはこちら

/************************************
** サイドバーの見出し
************************************/
.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のおしゃれなカスタマイズ総まとめ

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

参考になったらシェアしよう

コメントを残す

メールアドレスが公開されることはありません。