はじめに

メインブログサイトとして用意した「キミマチラボ」を見栄えがいい、居心地のいいデザインにしたい。

これはブログを運用するにあたって当然の発想でしょう！（確信）

特に自由度の高いWordPressでは、こだわりがある方も多いと思います。

しかし、デザインセンスなんて私にあるのだろうか…。

まぁ、深く考えず現状のキミマチブログのコンテンツでデザインできる要素を探ってみよう！

はい、ということで、この記事が始まった理由の思考がありました。

少しずつではありますが、

・サイトデザインが変わった点
・デザイン変更の方法

などを記事にして行けたらなと考えています。

・WordPressテーマのデフォルトデザインではテンションが上がらない。
・自分のテンションが上がらないなら、読者の方のテンションが上がるわけがない。
・SEOを高めて、サイトに来てくれる人を増やしたい。
・ブランド力を高めたい。

そう思う方の参考になれば幸いです。

変更点①

最初に気になった部分は、

WordPressテーマ「Lightning」のデフォルトデザインにて配置されているヒーロースライダー言われるこの部分

これがいらない。消そう。

ただ、そのものを消す方法が分からない。だから、表示を消そう。

WordPress管理画面

外観 → カスタマイズ → 追加CSS

そこへCSSを投下

/* トップページ ヒーロースライダー（FVスライダー）非表示 */
.home .swiper,
.home .vk-swiper,
.home .vk-slider,
.home .vk-front-page-pr-content,
.home .siteContent .swiper {
display: none !important;
}

これで

ヒーロースライダーが表示されなくなりました。（既に他のデザインも変わってしまっている画像で申し訳ないです）

変更点②

次に気になったのはカラーテーマです。

まだ変更の余地はあるのですがまず、

メインカラー

私自身の要所にあるオレンジのライン、この色をメインに据えたいと考え

--main-color: #FFB833;

ベースカラー

特に背景色として取り入れたいので、ほとんど白で構わないのですが、少し落ち着いた印象が良いかと思い

--base-color: #f5f6f7;

簡単に言うと、ごくわずかに青紫のニュアンスを含んだ非常に明るいライトグレー（ほぼ白に近い色）です。

アクセントカラー

名前通りアクセントになるカラーとして、オレンジ色と対比になるように

--accent-color: #6ec6ff;

少しだけ緑みを含んだような、明るく爽やかなスカイブルー（空色）です。

適用範囲

このテーマの適用範囲は、記事ページのみにしました。

ホーム画面はのちのち、そもそもいらないという判断になるかもと考えたからです。

その他、ページ全体の色を統一するために、テキストやボーダー（枠線・区切り線）も指定して

こちらも追加CSSへ投下

/* =========================
▼記事ページのみ適用
========================= */
.single-post {
--main-color: #FFB833;
--base-color: #f5f6f7;
--accent-color: #6ec6ff;
--text-color: #333;
--border-color: #e6e6e6;

/* =========================
▼文字色を設定
========================= */

color: var(--text-color);

/* =========================
▼背景色を設定
========================= */
background-color: var(--base-color);
}

落ち着いた印象はあれど、殺風景ではなくなりました。

---

最後に

ここまで読んでいただき、ありがとうございます。

サイトデザインの記事を書くにあたって、カテゴリー分けをさせていただき、今後カテゴリー「メインサイトも見栄えよくしたい話」にて更新していきたいと思います。

また、変更点がまとまってきたら投稿させていただきます。

参考や暇つぶしにでも、ご一読いただければと思っております。よろしくお願いいたします。