...

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

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

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

本ブログでも利用しているCocoon。

というわけで今回は

「サイドバーの見出しをもっとオシャレにしたい」

「Cocoonを使っていて、デフォルトのデザインでは物足りない」

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

 

↓完成系はこんな感じで、ウチのサイトもこのデザインにしています。

 

画像さえ用意できれば、そこの部分も自分好みのものにできます!

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

ブログ主

レッツゴー!

サイドバーのカスタマイズ手順

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

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

ブログ主

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

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

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%;/*要調整*/
}

「要調整」とあるところは画像のサイズや個人の好みで変える必要があるかもです(›´ω`‹ )

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

ソロモン

 

画像をアップロード

メディアを追加

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

画像をアップ

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

画像の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」はウィジェットの見出しに限らず色んなところで使えるので、そういう意味では良さげかなと!

最後に

以上になります。

サイドバーもかなり目に入りやすい箇所なので、可愛いくカスタマイズしておくと見てくれる方の目の保養にもなりますし(?)

何より自分の場合はサイトが可愛いと自分の記事を書くモチベーションも上がるので一石二鳥です⸜( ´ ꒳ ` )⸝

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

ソロモン

Cocoonの関連記事をカスタマイズする方法【Cocoon】記事下の関連記事一覧をおしゃれにカスタマイズする方法

 

Cocoonの目次のカスタマイズする方法【コピペでOK】Cocoonの目次を見やすくカスタマイズする方法

 

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

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

コメントを残す

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

CAPTCHA