ブログデザインをリニューアルしました #2019春
「わたしをもてなす暮らし方」を書いているアサダです。
この度、ブログデザインを整えました!
理由は、前のデザインがダサいと感じるようになったです(笑)
Before
「可愛くシンプルに」という感じでデザインしていました。
↓ ↓ ↓
After
今回は、ちょっぴり大人っぽくシンプルにオシャレを意識してデザインしてみました。
どうでしょ~!
かなりシンプルで、よりブログのテーマに近づけたかなと思います。
+ + + + +
ここから先は変更した項目を挙げていきます。
はてなブロガーさん向けの内容になるので、すっとばしてくれてOK!
自分の備忘録として、書きました。
- ブログのテーマカラーを決定
- はてなブログのテーマを変更
- タイトル画像を作成
- スマホ表示のタイトル画像を調整
- アイコンの変更
- サイドバーのプロフィール変更
- カテゴリの再編成
- グローバルメニュー設置
- シェアボタンのカスタマイズ
- シェアボタンを記事のすぐ下に移動
- プライバシーポリシーと免罪事項を作成
- フッターをつける
- @LINEをはじめた
- CONTACTページをリニューアル
- まとめ
- 追記2019.04.29
ブログのテーマカラーを決定
シンプルでスポーティで、ちょっと大人可愛さのある雰囲気にしたかったです。
ベージュ、白、黒が今回のテーマカラーです。
基本は3色決めるとデザインが整いやすいですね。
ただ、ブログの性質上どうしてもグレーが必要でした。
ブログの性質上、グレーは色であって色じゃないかな~(←いいわけ)
はてなブログのテーマを変更
今回使用させてもらったのはUnderShirtというテーマです。
主な理由
- グレーのシンプルなデザイン
- サイドバーのタイトルが左寄せ
- 記事のアイキャッチがカード風に並ぶ
作ってくださった方のブログ
作ってる方のブログもヌメヌメしたデザインですごくかっこいいです。素敵。
タイトル画像を作成
タイトルもいじりました。
ブログ名「わたしをもてなす暮らし方」に変更はありませんが、
遊び心で、略称WMKをつけてみました。
「ワタシを」「モテナス」「クラシカタ」アルよ。
中抜きって言ったらいいんでしょうか。
アウトラインだけのアルファベットフォントにハマっています。
こなれた印象で、む~~ちゃ可愛くないですか!?
読者の皆さんに興味があれば
タイトル画像の作り方も記事にしようと思うので教えてくれるとありがたいです。
ちなみに、今回のタイトル画像はPhotoshop使ってないよ。
タダで、誰もできるよ!
スマホ表示のタイトル画像を調整
スマホ側の表示だとタイトル画像が切れしまっていたので、
下記のコードを追加。
@media (max-width:480px) {
.header-image-only #blog-title {
height: 100px;
}
.header-image-only #blog-title #blog-title-inner {
background-size: cover;
height: 55px;
}
}
最後の表のheightの数字をいじるといいです。
私の画像の場合は55pxがちょうどよかったです。
ただ、欲を言えばもう少しスマホのヘッダー画像を大きく表示させたいです。
試行錯誤してみましたが上手くいかなかったので放置しています。
アイコンの変更
アサダのアイコンがかわりました!
→→→
より、実際のアサダに近づきました!
リスからヒトになった!
最近服の趣味も変わったので、それもイラストに反映させてみました。
シンプルで、カジュアルになりすぎないスポーティさのある服が好きです。
サイドバーのプロフィール変更
はてなブログのサイドバーには公式のプロフィールがあるのですが、
私はそれを使っていません。
HTMLとCSSを使っています。
コメントの部分とFollow Meの部分はHTMLのみで作っています。
ブログ記事から作ってそれをコピペしています。
HTMLの知識がなくても、簡単にできます。
それと、「はてなフォントアイコン」を使用しています。
プロフィールの画像はCSSを使っていて、
それはこちらのブログを参考にさせていただきました。
カテゴリの再編成
カテゴリを編成し直しました。
できるだけ最初限の分類分けにしています。
以前のカテゴリ
- シンプルライフ
- 断捨離
- 心地よく暮らす
- 本
- ABOUT
↓
変更後のカテゴリ
- ミニマリスト
- 心地よく暮らす
- わたしの趣味
- ブログのこと
断捨離のカテゴリ:
ミニマリストのカテゴリに含めました。
本のカテゴリ:
趣味について書いた記事が一部あったので、わたしの趣味としました。読書やカメラ、イラスト、ゲームなどが趣味なんです。興味があれば読んでみてね。
ABOUTのカテゴリ:
内容的にはブログの運営に関することが記事が多いので、「ブログのコト」に変更しました。ブログ運営も楽しくやっています。素人ですが、今では月間3万PVほどのブログに成長しました。このカテゴリの記事を読んでもらえば、「まぁ素人が試行錯誤してテキトーにやってきたんだな~」ってことがわかると思います。勇気づけになれば幸いです(笑)
グローバルメニュー設置
Yukihyさんのブログを参考にグローバルメニューを設置しました。
4つだけのカテゴリーなので、びよ~~んと横に長い!
www.yukihy.com本家様のCSSから下記の点を変更していいます。
- カラーをグレー×ベージュ×白に変更
- グローバルメニューの横幅を短く&中央揃え
- スマホのメニューアイコンを右上
シェアボタンのカスタマイズ
このデザインにしました。
ちょっと余白のバランスが気になるのですが・・・
まぁいいやっカンジです。
導入方法はまたまたYukihyさんのこちらの記事を参考にしました。
シェアボタンを記事のすぐ下に移動
記事のすぐ下にシェアボタンが入るようにしました。
Before:記事→関連記事→シェアボタン
After :記事→シェアボタン→関連記事
文章のすぐ下にシェアボタン!
こっちの方が流れ的にキレイかな~と思いました。
順番の入れ替えは
コチラの記事にあるCSSを張るのみでとてもお手軽でした。
プライバシーポリシーと免罪事項を作成
Googleアドセンスしているので、以前からプライバシーポリシーは載せておりました。
しかしめんどくさくて、プロフィールのページに末尾に適当に張り付けていただけでした。
今回はきちんと1枚のページとして作り直しました。
ついでに免責事項のページも作りました。
そして、それらのページのリンクはフッターに置きました。
↓
フッターをつける
フッターです。
- サイドバーと同じHTMLを利用してフォローボタン
- プライバシーポリシーと免罪事項
- コピーライト
作り方は、minimalgreenさんの紹介を参考にしました。
こちらでは3段組みでしたが、私は2段組で使いました。
@LINEをはじめた
@LINEをはじめました!
LINEで更新お知らせするので、よかったら友達追加してください^^
このボタンでできます↓
こんな風に気軽にチャットもできるよ^^
↑この画像、冷静に考えてみれば、自作自演でウケるw
CONTACTページをリニューアル
CONTACTページもリニューアルしました。
以前はGoogleのメッセージフォームを設置していました。
しかし、自分が利用者側なら「敷居が高いかな~」と気になっていたので、廃止しました。
CONTACTページにはメッセージ方法を3パターン載せています。
よかったら使ってみてね。
いつも、メッセージを丁寧な言葉で長文でくださる方が多いです。
とてもとてもありがたいことです。
ただ、「大変かな?」って思うので(笑)
もっと気軽なメッセージでもウェルカム!だってことお伝えしたかったのです。
@LINEを始めたのもその意図があったからです。
まとめ
そんな感じで、大きくブログが変わりました!
ブログデザインは、モチベーションに直結するので、お気に入りのデザインにできて良かったです。
もっとミニマリストな感性を磨いていきたいと思っているので、これからもよろしくお願いします^^
追記2019.04.29
日本語タイトルにもどしました!
シンプルに四角で囲ったデザインにしました。
ロゴも合わせて作ってみました。
ブログアイコンで使用されています。