【カスタムCSS等】ねこまるブログの作り方

こんにちは、ねこまるです。

読みやすいブログを作る為に心がけたこと、勝手にシリーズ化しちゃいました笑

【簡単設定】読みやすいブログを作る為に

あなたのブログ、他人から見たら見づらくなってるかも?!ページの離脱率を下げるためにある程度のブログのデザイン・仕様変更は必要となってきます。今回は簡単にできるデザインの変更点について紹介していきたいと思います。

nekomaru-funtouki.com

2021.02.14

前回は基本的なデザインの設定変更や文字のデザインについて書いたんですが、

あれからまた変更点が増えたのでそれについて紹介していきたいと思います。

ねこまる

今回は変更点少なめです！

本サイトはCocoonテーマを使用していますので、同じテーマを使用している方の参考になれば嬉しいです。

モバイルのデザイン整理

前回のデザイン変更では、PC表示だけを確認しながら変更を加えていました。

というのも最初は、読者の割合がPC:モバイル=7:3くらいだったからです。

その後twitterから見てくださる人が増えたからなのか、全く逆の割合になってました。

慌ててモバイル版のデザインを整えることにしましたね。

ねこまる

最初からやっとけよって話なんですが…

モバイルメニューの追加

トップページがヘッダーロゴと新着記事しかないという状態だったので、モバイルメニューを追加することにしました。

完成形はこんな感じです。

モバイルメニュー自体は【Cocoon設定→モバイル】から設定変更可能です。

私はヘッダー・フッター両方使用したかったので、一番下のボタンを選択しました。

❶スライドでのグローバルメニューの追加

ブログサーフィンをしてて、ヘッダーにスライドできるメニューがあるのをちらほら見かけました。

便利だなと感じたので、当ブログでも導入することに。

スライドメニューというのはこんな感じになってます。

モバイル表示でもトップページからカテゴリー別のページへ飛ぶのが楽になったように感じます。

こちらはカスタムCSSで作成できるのですが、やり方はこちらの記事を参考にしました。

【Cocoon】スマホメニューを横スクロールできるようにする方法！

Cocoonのスマホ(モバイル)メニューのカスタマイズです。スマホでもメニューをヘッダー下に表示させ、横スクロールをできるようにします。その他にもアイコンを入れたり、英語を入れるカスタマイズ方法も紹介します！

ponhiro.com

記事内のコードを参考にして、メニューの色や文字色は自分のサイトに合った色に変更しました。

❷、❸ヘッダーとフッターに各種ボタンの追加

ヘッダーメニューに検索、サイドバーボタンとロゴ画像の追加、

フッターメニューにホームボタンを追加しました。

それぞれのメニューの作成方法、ボタンのカスタマイズの仕方はこちらの記事を参考にしてみてください。

ヘッダーモバイルボタンの設定方法

スマホ画面でヘッダーに操作ボタンを表示させる設定方法です。

wp-cocoon.com

ここまで設定して、大体こんな感じのデザインになりました。

メニューの背景色が設定されてないので、真っ白でロゴが認識できなくなってました。

PC表示と同じ色合いにしたかったため、いつもの【緑背景、白文字】にするため追加のCSSを編集。

CSSに関してはこちらの記事を参考にさせていただきました。

【Cocoon】ヘッダーモバイルボタン（スマホメニュー）をカスタマイズ

Cocoonのいいところ。それは「とても便利」なところ。他のテーマは使ったことがないので分かりませんが、Cocoonは今まで「やりたいけどできない」ことは殆どありませんでした。たとえば、これです。スマホのメニューが出てきたり、隠れたりするや

ikuzoblog.com

フッターメニュー分の色指定CSSだけなかったので自分で追加してみました。

初心者なのでスマートかどうかは分からないですが、これで問題なく表示されています。

トップページのカスタマイズ

カスタマイズ前のトップページ(pc表示)はこんな感じでした。

ねこまる

うーん…なんか寂しい？

寂しいっていうかなり感覚的な感想も持ちましたが、何よりトップページに新着記事しかない！

記事が増えるにつれて以前投稿したものが埋もれていってしまって…

読んで欲しいものいろいろあるのに！って思ってました。

というわけで、トップページからページ遷移なしにおすすめの投稿やカテゴリー記事を表示するために色々とデザインの変更をしました。

おすすめカードの追加

まずは変更後のサイト表示を見てください。

トップページの寂しさが少しましになったのと、読んで欲しい記事が分かりやすくなったかなと思います。

特に続き物はPART1が埋もれがちなので、おすすめカードに表示させています。

この２ステップで簡単に設定できます！

まず新しいメニューの作成から説明します。

①【外観→メニュー】から新しいメニューを作成します。

②自分で分かりやすいように好きなメニュー名を打ち込みます。

③【メニュー項目を追加→投稿】から自分が表示させたい記事を選択して追加します。

④表示するタイトルを変更したい場合は、編集で設定し直してください。

⑤最後にメニューを保存して次の設定へ進みます。

次におすすめカードの表示設定をしていきます。

①【Ｃocoon設定→おすすめカード】から設定できます

②5項目ほど表示設定がありますので、自身の好きなように設定してみてください。

③最後に設定を保存して完了です。

これでおすすめカードの表示設定は終了です。

もう少し記事が増えて、おすすめカードを増やしたいってなったら、

カルーセル(スクロールでブログカードを表示できる)導入しようかなーと考えております。

トップページにカテゴリー欄を追加

変更前、グローバルメニューにカテゴリー欄は表示させてたのですが、

スクロールだけで大体どういう記事が投稿されているのかも見れるようにしたくてインデックスの設定を変更しました。

設定後はこんな感じになりました。

設定項目はたくさんあるのですが、表示形式や、表示カテゴリーの種類・順番、表示カード数の設定などができます。

都度確認しながら、お好みの設定にしてみてください。