Cocoonのサイドバーをカスタマイズしてみた!
初めましての方も、そうでない方も、訪問ありがとうございます!
こたか(@kotacalog)です!
Cocoonカスタマイズ、サイドバー編です!
前回はトップページをいじり倒しましたので、まずはそちらから確認してみてくださいね!
サイドバーは何を置くか人によってかなり悩む場所。逆に言えば、個性がでる場所でもありますよね!
私はコンパクトかつ利便性を求めるサイドバーが好み。ですので、理想に叶うサイドバーにカスタマイズをしてみました!
基本的にはググれば多く出てくる内容ではありますが、誰かの役にたてば幸いです。
サイドバーのカスタマイズ
ここからはカスタマイズの内容を個別に紹介しますが、あくまでも一例です。
カスタマイズを行う際は、ご自身で必ずスタイルシートのバックアップを取得したり、ある程度CSSの知識を勉強し、自己責任でお願いします。
サイドバーの見出しを装飾
サイドバーに設定されている見出しを記事内の見出しと差別化するために装飾しました。
アイコンの配置と下線をグラデーションにした感じですね。サイドバーの見出しは全てH3になっているので、記事で使用するH3に抵触しないようにサイドバーであることを指定してあげましょう。
デザインについてはサルワカさんを参考にするといいと思います。
検索ボックスをGoogleに
フォロワーさんの記事をたまたま目にして、標準の検索ボックスをGoogleさんのものにしました。
コードを取得し、ウィジェットでHTMLを貼りつけるだけで利用ができるのですが、Adsenseを連携していないと利用できないので注意です。
プロフールをカスタマイズ
フレちゃんのスクショを背景にしたらかっこよく見えませんか?ちょっとオシャレにしてみました。
プロフィールを有料テーマで人気なSANGO風してみましたが、極力シンプルかつコンパクトにしました。
うぇぶあしびさんのコードをそのまま使うと、SNSアイコンが丸型になるのでプロフィールボックスに1行に収まるようサイズ調整と、角丸アイコンに変更してみました。
SNSアイコンは他でも使われてるので、カスタマイズしようとするとデザインが崩れる可能性もあるので、必ず使用している部品のクラス指定をしてあげましょう。
CTAボックスを装飾
Cocoonの標準機能にCTAボックスがあります。
CTAボックス自体はウィジェットで追加が可能ですが、標準機能だとボタンの色くらいしか指定できません。
私はボックス影を付ける・ボックスの背景色と文字色の変更・ボタンの装飾・ボタン押下時のアクション(キラキラ・沈む)の変更をしました。
装飾関係については、難しいことではないので割愛します。
ボタン押下時のアクション…特にキラキラ光るヤツについてはでざなりさんがロジックとコードを説明しています。簡単に説明すると、キラキラするアクションを定義する→拡大や透過指定して呼び出すという仕組みになってます。
プログラミングに詳しい人であれば、さほど難しくないロジックかと思います。
人気記事や関連記事などウィジェットで表示される記事をマテリアルデザイン化しました。トップページの装飾とほぼ同じです。
カテゴリのカスタマイズ
カテゴリのカスタマイズはマテリアル化・アイコンの設定・ボーダーの装飾って感じですね。
ゆずゆろぐ。さんを見れば簡単に設定できるので、説明は割愛します。
タグの装飾
タグは触れると色が反転するように設定しました。hoverで色指定すればいだけなので簡単ですよ。
記事編に続く
以上、サイドバーに関するカスタマイズの紹介になります。
サイドバーとはいうモノの、配置する部品はウィジェットになりますので、ウィジェットで使用している部品のクラス名さえわかれば簡単にカスタマイズすることが出来ると思います。
いろんなカスタマイズをしていれば、どのようなコードを追加すればいいか分かってくると思うので、積極的にチャレンジしてみてくださいね!
低コストでブログを始めるならスターサーバーがオススメ![PR]
当サイトはスターサーバー
- 月額200円~(税抜)からWordPressが使える。
- 初期設定費無料キャンペーンが定期的に行われている。
- サーバーと一緒にドメインの契約・管理も可能。
- 大きな不具合もなく常に安定して稼働している。
- A8.net
のセルフバック対象。
ブログの収益化を目指すためにはランニングコストを抑えるのも大切です。
2週間のお試し期間もあるので、有料サーバーの契約に悩んでいる人は一度試してみてはいかがでしょうか?
趣味として楽しむ人にとってもコスパが抜群です!
Comment