どうもおはようポテト(@ohayoupoteto22)です。
サイドバーの見出しがなんかパッとしないんだよね…
というわけで今回は
- サイドバーの見出しをもっとオシャレにしたい
- Cocoonを使っていて、デフォルトのデザインでは物足りない
という方に向けて「サイドバーの見出しを可愛くカスタマイズする方法」をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
ブログ主
お品書き
サイドバーの見出しの完成イメージ
この記事に沿ってカスタマイズすると上のようになります。
画像を見出し前に配置できるので、他のサイトとデザインが被ることなく差別化を図ることができます。(※画像は各自用意していただく必要があります)
というわけで早速カスタマイズしていきましょう⸝⸝- ̫ -⸝⸝
カスタマイズ手順
大きく分けて3つの手順です。
ブログ主
バックアップを忘れずに
早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。
「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。
【WordPress】CSSをカスタマイズする際のバックアップの取り方ブログ主
Cocoonのサイドバーの見出しのカスタマイズ方法
CSSをコピぺする
「追加CSS」に追加
「テーマエディター」を使って追加
FTPソフトを使って追加
以上のどれかの方法でカスタマイズコードをコピペします。
ブログ主
「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。
【初心者向け】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%;
}くるみ
画像のURLを取得する
メディアを追加する
「メディア」から「新規追加」を選択。
画像をアップロードする
使いたい画像をドラッグ&ドロップします
画像のURLを取得する
アップし終わると、右の方らへんにURLが表示されるのでメモしておきます
ウィジェットにコピペ
要素をコピー
<div class="midasi">
<span>
<img src="画像のURL">
見出しの文字をここに入力
</span>
</div>“画像のURL”のところに先程メモしたURLを、「見出し…」のところにカスタマイズしたい見出しのタイトルを入れ、これをまずコピーします。
(※画像を使わない方は<img…>の部分は省いて大丈夫です。
くるみ
ウィジェット
「外観」→「ウィジェット」を開き、サイドバーのエリアに”カスタム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のおしゃれなカスタマイズ総まとめ参考になれば幸いです！では⸝⸝- ̫ -⸝⸝
