ヒトデブログを参考にブログデザインを弄ってみた。その2

ブログデザイン

どうも、taigaです。

昨日に引き続き、今日もヒトデさんの動画を参考にブログデザインを弄っていきます。

今日は、ヘッダーの下におすすめカードの表示をしていこうと思います。

(以降では、ヒトデさんの言葉を借りてピックアップコンテンツと呼称します。)

ブログの現状。

昨日色々と弄ったので、現在こんな感じになっています。

このヘッダー画像と記事の間にピックアップコンテンツを表示しようというのが今回の試みです!

カテゴリーの編集。

ピックアップコンテンツにはカテゴリーを表示したいと思ったので、まずカテゴリーを作ることにします。

今までの記事、全部「Uncategorized」になってたからね。

どうにかしないととは思ってたので、ちょうど良かった。

作成の仕方としては、まずダッシュボードから「投稿」→「カテゴリー」を選択。

そうすると、下のような画面になりますので、新規カテゴリーの名前に好きな名称を入力し、「新規カテゴリーを追加」をクリックするだけで、カテゴリーが作成されます。

スラッグとか説明は入力しなくても作成できるので、特に入力はしなくて大丈夫です!

僕はとりあえずで、今後使いそうな「アイテム」「ブログ」「書評」「雑記」の4つを作成しました!

半分が記事ないカテゴリーなんだけどね?

メニューの編集。

カテゴリーができたからすぐにピックアップコンテンツを表示できるわけではなく、その下準備でメニューの編集が必要になります。

とは言ってもめちゃくちゃ簡単でした。

ダッシュボードから「外観」→「メニュー」を選択。

こんな感じの画面が開かれるので、赤矢印のガイドに従って

①メニュー名の入力(今回は「ピックアップ」としています)

②カテゴリーの選択

③「メニューに追加」をクリック

をします。

以上の手順を踏むと、画面が切り替わります。

赤枠で囲った部分に自分が選択した項目が表示されてるのを確認したら、何もチェックをせずに保存をクリックします。

これでメニューの完成です!

おすすめカード(ピックアップコンテンツ)の設定。

いよいよピックアップコンテンツの設定に移ります。

まず、「cocoon設定」から「おすすめカード」を選択。

以下の画像のような画面になりますので、「メニュー選択」で先ほど作成したメニュー名を選択し(今回はピックアップ)、保存をクリックします。

表示スタイルやカード余白はサンプルがお洒落だった物を選択していますが、ここは好みで大丈夫です!

途中経過。

サイトを表示したらこうなりました。

ア、アイキャッチがない…。

思い返せば、アイキャッチを設定した記憶がなかったので、表示されなくて当然ですね。

ということで、カテゴリーのアイキャッチを設定します。

アイキャッチの設定。

ダッシュボードの「投稿」→「カテゴリー」を選択。

作成したカテゴリーにカーソルを合わせると「編集」が表示されるので、そこをクリックします。

開いた編集画面で、少し下にスクロールすると「アイキャッチ」という項目があるので、好きな画像をアップロードします。

これを全てのカテゴリーで行えば完了です。

完成!

そして完成したブログがこれです!

元々のブログデザインがこれ↓

個人的には結構良くなったかなと思います。

いや、元が何もしてなかったから当たり前なんだけどね?

ヒトデさんの動画だとこれで終わりなのですが、個人的にヘッダーの文字の大きさやフォントが気に入らないので、明日はその辺りを弄ろうと思います。

以上!

コメント

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