「サイドバーって、何を並べるのが正解なの？」
「ただ項目を置くだけじゃなくて、もっとオシャレに見せたい！」
サイドバーは、記事を読み終わった読者が最初に見る「次の案内板」です。
18年目デザイナーの視点で、読者がついつい回遊したくなるサイドバーの整え方を分かりやすく解説します。
サイドバー設定の「基本の場所」を確認
Cocoonでサイドバーをいじる場所は、主に以下の2箇所です。まずはここを開くところからスタートしましょう！
ウィジェット画面（項目の並べ替え）
「外観 ＞ ウィジェット」を開きます。「サイドバー」という枠の中に、使いたい項目を左側からドラッグ＆ドロップで入れていきましょう。
赤枠で囲った「サイドバー」エリアが、実際にブログの横に表示される順番になります。
Cocoon設定（幅や余白の調整）
「Cocoon設定 ＞ カラム」を開き、下の方にある「サイドバー設定」を確認します。ここではサイドバーの幅や余白を細かく調整できます。
画像のように「カラム」タブの中にサイドバーの詳細設定が隠れています。ここで全体のバランスを整えるのがプロの仕上げです。
読者がファンになる「おもてなし3点セット」
サイドバーに置くべき「基本の3つ」を、プロの視点で深掘りします。
① プロフィール：安心感の入り口
「どんな人が書いているか」は読者が一番気にするポイントです。まずは「ユーザー一覧」からあなたの名前をクリックしましょう。
次に、自己紹介文や写真を登録します。
写真は丸く切り抜くと柔らかい印象になります。Cocoonのプロフィールウィジェットを使えば、SNSリンクも綺麗に並べられますよ。
② 検索窓：迷子防止の窓口
「この記事、さっきの続きかな？」と思ったときに、すぐに検索できる場所にあると親切です。一番上か、プロフィールのすぐ下に置くのが鉄則！
③ おすすめカード：次の一歩へのエスコート
「人気記事」だけでなく、あなたが一番読んでほしい「渾身の記事」をカード形式で並べましょう。まずは「外観 ＞ メニュー」で、おすすめしたい記事を選んで保存します。
スマホで見ている読者のことも忘れずに！
スマホではサイドバーは記事の下に表示されます。あまり詰め込みすぎると、読者が下までたどり着く前に離脱してしまうことも。「本当に大切なもの」を厳選するのが、スッキリ見せる秘訣です。
サイドバーを可愛く整える「ひと工夫」
標準のままでも綺麗ですが、CSSを使って少し手を加えるだけで「あなたらしさ」が際立ちます。18年目デザイナーが実践している設定方法を解説しますね。
見出しのデザインを統一する
サイドバーの見出しに色や線を加えると、サイト全体のクオリティがぐっと上がります。お好みのデザインをコピーして使ってみてください。
.sidebar h3 {
color: #51465C; /* 文字の色 */
padding: 8px 15px;
border-left: 5px solid #80748F; /* 左線の色 */
border-bottom: 1px solid #eee; /* 下線の色 */
font-size: 1.1em;
font-weight: bold;
}.sidebar h3 {
color: #80748F; /* 文字の色 */
padding: 10px 0;
border-bottom: 2px dotted #8ECFB5; /* ドット線の色 */
font-size: 1.1em;
position: relative;
}
.sidebar h3::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 50px;
border-bottom: 2px solid #80748F; /* 太線の色 */
}CSSの追加方法
上で選んだコードを貼り付ける画面の開き方を、実際の画面で確認しましょう。
① 外観 ＞ カスタマイズ を開く
管理画面の「外観」メニューから「カスタマイズ」をクリックします。
②「追加 CSS」を選択する
左側メニューにある「追加 CSS」をクリックして開きます。
③ コードを貼り付ける
一番下の白い枠（入力エリア）に、コピーしたコードを貼り付けて「公開」を押せば完了です！
18年以上の現場経験から思うのは、最初はシンプルに「コピペでできた！」という成功体験を積むことが大切だということです。ここから少しずつ、自分の好きな色（カラーコード）に書き換えて、自分だけのデザインを楽しんでみてくださいね。
Comments