ココナラでドット絵アイコンの制作してます

【Cocoonカスタマイズ】CSSと標準機能だけでサイドバーをカスタマイズしてみた!

カスタマイズ
スポンサーリンク
スポンサーリンク
スポンサーリンク
スポンサーリンク

Cocoonのサイドバーをカスタマイズしてみた!

初めましての方も、そうでない方も、訪問ありがとうございます!
こたか(@kotacalog)です!

 

Cocoonカスタマイズ、サイドバー編です!

前回はトップページをいじり倒しましたので、まずはそちらから確認してみてくださいね!

 

サイドバーは何を置くか人によってかなり悩む場所。逆に言えば、個性がでる場所でもありますよね!

私はコンパクトかつ利便性を求めるサイドバーが好み。ですので、理想に叶うサイドバーにカスタマイズをしてみました!

基本的にはググれば多く出てくる内容ではありますが、誰かの役にたてば幸いです。

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

ここからはカスタマイズの内容を個別に紹介しますが、あくまでも一例です。

カスタマイズを行う際は、ご自身で必ずスタイルシートのバックアップを取得したり、ある程度CSSの知識を勉強し、自己責任でお願いします。

サイドバーの見出しを装飾

サイドバーに設定されている見出しを記事内の見出しと差別化するために装飾しました。

アイコンの配置と下線をグラデーションにした感じですね。サイドバーの見出しは全てH3になっているので、記事で使用するH3に抵触しないようにサイドバーであることを指定してあげましょう。

デザインについてはサルワカさんを参考にするといいと思います。

使用クラス
sidebar h3:サイドバー(ウィジェット)の見出し設定されてるクラス名

検索ボックスをGoogleに

フォロワーさんの記事をたまたま目にして、標準の検索ボックスをGoogleさんのものにしました。

コードを取得し、ウィジェットでHTMLを貼りつけるだけで利用ができるのですが、Adsenseを連携していないと利用できないので注意です。

プロフールをカスタマイズ

フレちゃんのスクショを背景にしたらかっこよく見えませんか?ちょっとオシャレにしてみました。

プロフィールを有料テーマで人気なSANGO風してみましたが、極力シンプルかつコンパクトにしました。

うぇぶあしびさんのコードをそのまま使うと、SNSアイコンが丸型になるのでプロフィールボックスに1行に収まるようサイズ調整と、角丸アイコンに変更してみました。

SNSアイコンは他でも使われてるので、カスタマイズしようとするとデザインが崩れる可能性もあるので、必ず使用している部品のクラス指定をしてあげましょう。

使用クラス
sidebar.author-box:サイドバーのプロフィールボックス設定されてるクラス名
author-box .sns-follow-buttons a.follow-button :プロフィールボックスのSNSボタンに設定されてるクラス名

CTAボックスを装飾

Cocoonの標準機能にCTAボックスがあります。

CTAボックス自体はウィジェットで追加が可能ですが、標準機能だとボタンの色くらいしか指定できません。

私はボックス影を付ける・ボックスの背景色と文字色の変更・ボタンの装飾・ボタン押下時のアクション(キラキラ・沈む)の変更をしました。

装飾関係については、難しいことではないので割愛します。

ボタン押下時のアクション…特にキラキラ光るヤツについてはでざなりさんがロジックとコードを説明しています。簡単に説明すると、キラキラするアクションを定義する→拡大や透過指定して呼び出すという仕組みになってます。

プログラミングに詳しい人であれば、さほど難しくないロジックかと思います。

使用クラス
.sidebar .cta-box:サイドバーのCTAボックスのクラス名
.sidebar .cta-button .btn-l :サイドバーのCTAボックスに使用されているボタンに設定されてるクラス名

ウジェットの記事をマリアルデザイン化

人気記事や関連記事などウィジェットで表示される記事をマテリアルデザイン化しました。トップページの装飾とほぼ同じです。

使用クラス
widget-entry-cards .a-wrap:ウィジェットで表示される記事に設定されてるクラス名

カテゴリのカスタマイズ

カテゴリのカスタマイズはマテリアル化・アイコンの設定・ボーダーの装飾って感じですね。

ゆずゆろぐ。さんを見れば簡単に設定できるので、説明は割愛します。

使用クラス
.widget_categories:ウィジェットのカテゴリに設定されてるクラス名

タグの装飾

タグは触れると色が反転するように設定しました。hoverで色指定すればいだけなので簡単ですよ。

使用クラス
widget_tag_cloud .tagcloud:ウィジェットのタグに設定されてるクラス名

記事編に続く

以上、サイドバーに関するカスタマイズの紹介になります。

サイドバーとはいうモノの、配置する部品はウィジェットになりますので、ウィジェットで使用している部品のクラス名さえわかれば簡単にカスタマイズすることが出来ると思います。

いろんなカスタマイズをしていれば、どのようなコードを追加すればいいか分かってくると思うので、積極的にチャレンジしてみてくださいね!

次は記事の装飾のカスタマイズについてまとめたいと思います。
低コストでブログを始めるならスターサーバーがオススメ![PR]

当サイトはスターサーバー を使用しています。

スターサーバーの魅力
  1. 月額200円~(税抜)からWordPressが使える。
  2. 初期設定費無料キャンペーンが定期的に行われている。
  3. サーバーと一緒にドメインの契約・管理も可能。
  4. 大きな不具合もなく常に安定して稼働している。
  5. A8.net セルフバック対象。

ブログの収益化を目指すためにはランニングコストを抑えるのも大切です。

2週間のお試し期間もあるので、有料サーバーの契約に悩んでいる人は一度試してみてはいかがでしょうか?

趣味として楽しむ人にとってもコスパが抜群です!

\ Check /

Comment

タイトルとURLをコピーしました