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

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

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

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

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

ねこまる
ねこまる

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

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

スポンサーリンク

スマホの方はメニューボタンからも目次が見れるよ!

モバイルのデザイン整理

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

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

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

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

ねこまる
ねこまる

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

モバイルメニューの追加

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

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

クリックで拡大
追加項目

❶ヘッダー:スライドでのグローバルメニューの追加
❷    :ロゴと検索ボタン、サイドバーボタンの追加
❸フッター:ホームボタンの追加

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

クリックで拡大

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

/************************************
** モバイルメニュー設定
************************************/
.mobile-menu-buttons{
background: #5ac965;
color: #fff;
}
.mobile-menu-buttons .menu-button > a {
color: #fff;
}
.logo-menu-button.menu-button{
background-color: #5ac965;
}

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

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

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

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

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

ねこまる
ねこまる

うーん…なんか寂しい?

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

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

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

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

おすすめカードの追加

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

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

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

①おすすめカード用の新しいメニューの作成
②おすすめカードの表示設定

この2ステップで簡単に設定できます!

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

クリックで拡大

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

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

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

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

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

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

クリックで拡大

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

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

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

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

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

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

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

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

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

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

クリックで拡大
【Cocoon設定→インデックス】から設定の変更が可能です。

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

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

コメント

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