サイトデザインを若干変えてみました

WordPress

前回までの内容

noteからWordPressに移行したのは良いものの、
noteのあのシャレオツな雰囲気がなくなってなんかやだ!
と思い立った私。

「この違いは文字の大きさや!」
と閃いてnoteの文字サイズに合わせようとしたところ、
なんとすでに同じだったことが判明。

では一体何が違うんだ…?と考えた結果、
noteのおしゃれさの要因、それは余白なのでは?
と思い至ったのであった。

サイトの文字の大きさを変えてみる
サイトの文字の大きさを変えてみる 先日晴れてnoteからWordPressにお引っ越ししたのですが、 noteに慣れているからか、今のテーマの初期設定のままだと、 なんかダサい! 何がどうとか専門的なことは一切わからないんだけど...

本記事の内容

昨日の反省を踏まえ、考えを巡らせた結果、
いくつかの変更をしたのでその内容を記載しておこうと思います。

具体的には

・サイドバーの非表示
・グローバルメニューの設置
・横幅の変更

を行いました。

ビフォーアフターを載せておきますね。
(ビフォー→アフター)

変更したこと

サイドバーの非表示

まずやったことは、サイドバーの非表示です。

なぜなら、
noteにはサイドバーがない!

やったことはシンプルで、
Cocoon設定>全体>サイドバーの表示状態>「全てのページで非表示」を選択
以上って感じでした。

グローバルメニューの設置

サイドバーがないと色々な記事を見てもらえなくなるぞ、ということで
グローバルメニューを設置しました。

設置方法はこちら。

グローバルナビのメニューを設定する方法
主にパソコンなどで表示されるグローバルナビメニューの設定方法です。サブキャプション機能で補足説明を入力することも可能です。

私の場合、
雑記ブログということでかなり多ジャンルに渡って
記事を書いてきたのですが、
大きくまとめるとこれじゃねえ?というものにしました。

・自己紹介
・ブログ運営
・丁寧な暮らし
・趣味
・仕事

丁寧な暮らしって自分で言ってちょっとわらけますが、
今絶賛Youtuberのin living.さんにハマっておりまして、
その影響で丁寧な暮らしに憧れているので、
「自炊」「掃除」「早起き」とかそういうのについて書いた記事は
ここに入れておこうかなと思います。はい。

きっとやっていく中でやっぱり違うな、とか
色々変えていくかと思います。はい。

あと、グローバルメニューの色については、
ぐぐったら出てきたこのサイトを使って決めました。

#80C9C0 | 澄んだ水色(#80C9C0)をもとに配色を作成します
#80C9C0の色情報と配色の提案を表示します。#80C9C0は澄んだ水色で、構成成分はRGB(128 201 192)です。補色となる色は#C98089です。水色は、自由や孤独を示す色です。水を連想させるため、透明感や涼しさをイメージさせる色です。デザインする上では青や緑やグレーとの相性がよいでしょう。

元の色に合う配色を教えてくれる。すごい。

横幅の変更

サイドバーをなくしたことですっきりはしたのですが、
横全体に記事が広がっているのが違うなーと思ったので、
横幅を限界まで狭くしました。

変更方法はこちら。

Cocoon設定の「カラム幅変更」で変わる場所の説明。
カラム幅設定により太さなどが変更される位置を詳しく説明。

最小の600pxにしたのですが、
noteだともっと狭いですよね〜。
本当はnoteと同じ幅にしたいのですが。。
そこは断念。

まとめ

私がnote的なおしゃれ洗練ページにするためにやったことをまとめると、

・サイドバーの非表示
・グローバルメニューの設置
・横幅の変更

の3つです。

一旦はこれで良いのですが、
今後記事が増えていったときに、
過去の記事に遡るのが大変だったりするので、
月別アーカイブなんかもどこかにつけたいなと思っています。

あと各所の文字の大きさもまだ最適ではないと思っているので、
それも様子見て変えていきたいです。

また変更があれば記事にします!
ここまでお読みいただきありがとうございました。

 

in living.さん、知らなかった方はぜひ観てみてね。

一人暮らし女子のモーニングルーティン(冬の休日編)morning routine.
タイトルとURLをコピーしました