ブログのデザインを変更したのでカスタマイズのまとめとその備忘録
あんまりブログのデザインを変更しすぎるのは良くないなとは思っていますが、以前のデザイン変更したよって記事から2ヶ月経たない間にデザインを大きく変更しました。
とは言っても、「めっちゃ変更した」って感じではなく、「ブラッシュアップ」って言い方が近いと思います。
今回はその備忘録になります。前書きが長いと読む気がなくなる人が多いと思いますし、詳しくは後ほど(´・ω・｀)
よかったらおつきあいよろしくお願いします。
完成形
トップページはこんな感じになりました。記事ページ等も貼ろうとしたのですが、重いのと見づらいので色々大変なので各自見てくれ（放棄）
そんなんだからいつまで経っても読者増えねえんだよ
ブログのテーマ
前回の記事に引き続き、今回もZENO-TEALを使用しています。本当に素晴らしいテーマです。orefolderさん本当にありがとうございます。
余談になりますが、個人的には Under shirtも気になっています。かなり理想に近いテーマではあるのですが、カスタマイズがし辛いかなと思い、現在は断念しております。
テーマを下敷きにしてカスタマイズ
僕は、現在オリジナルテーマ風のものを使っています。
前回は、ZENO-TEALをインストールし、その上からCSSを記述していましたが、今回はZENO-TEAL自体を書き換えています。
以前のカスタマイズ記事をZENO-TEALの作者さんである、orefolderさんが見てくださり、言及までしてくださりました。マジ感謝。乱反射。
今まで見たZENO-TEALのカスタマイズで一番カッコいいかも。でもここまでやるならもうテーマは単なる下敷きにしてオリジナルで書き直してしまったほうがいい気も。 / “お知らせ：ブログのデザインを大幅に変更しました - 宇宙時代…” https://t.co/EGDq3rMaVV
— orefolderの中の人 (@orefolder) 2017年12月14日
というわけで、結構がっつりいじらせていただきました。
1．1カラムは継続
以前から行なっている1カラム化ですが、以前継続しております。
詳しくは後日記事にしようと思っていますが、1カラムにしてから直帰率は90%前後→85〜81%に下がっており、ページ滞在時間も上昇傾向にあります。
というわけで 、引き続きはてなブログではかなりマイナーではありますが、1カラマートして頑張っていきます。
記事幅の見直し
以前までは適当に記事幅を設定していましたが、今回は様々な1カラムのブログやサイトを執拗に調べ上げ、ベストであろうサイズに設定しました。
また、以前まで背景はグレーだったのですが（画像参照）、多くの1カラムサイトが記事と余白部分の色を統一してる印象を受けたので、それに習って白にしました。
以前の画像と比べるとかなりシンプルになったと思います。（左の画像の背景が白なので分かりづらいですが）
記事下とサイドバーを充実
記事下にはシェアボタン、関連記事、この記事が気に入ったらフォローを実装し、サイドバーにはカテゴリ一覧に加え、別の関連記事、プロフィールを実装しています。
関連記事はまたしてもサルワカくんのカスタマイズに、orefolferさんのカスタマイズを合わせてPCでは二列で表示しています。もっとかっこよくカスタマイズできるのでは？と思っているので、まだまだいじりたい。
シェアボタンを限定
シェアボタンは、Facebook, はてなブックマーク,Twitterの三つのみです。
大量に実装しているブログもたまに見かけますが、基本的にはPCの機能からやる人の方が多いのでは…？とか、僕Feedlyとか使ってないしなあとか色々思ったので、現在は三つのみ。
今回もサルワカさんにお世話になりました。
この記事が気に入ったらフォローをカスタマイズ
またしてもorefolderさんにお世話になりました。今回はSANGOを意識してカスタマイズしています。ただ、あまりにもパクリな気がするので変えねば。とは思っています。
変えねば。
Profileは個別にカスタマイズ
正直ハチャメチャなHTMLを書いてるので今のところ公開予定はありません。
フォローボタン系はこどみすさんの記事を参考にしました。
2．記事を見やすくするためのカスタマイズ【文字編】
うまい表現が見つからず、「色々な」と表記しております。己の稚拙な文章力に嘆かざるを得ない。
こんな稚拙な文章力をカバーしてくれるカスタマイズを多数実施しました。
文字サイズを全体的に大きく
文字サイズを全体的に大きくしました。特にPCの場合は1カラムということもあり、文字サイズをかなり大きめに設定しております。
スマホ版でも16pxにしており、全体的に見やすくなったんじゃないかなと思っています。
また当ブログはメディアクエリで三段階に渡って設定しております。家電量販店のPC売り場に行ったときは、自分のブログを開いて確認したりしてます。
モバイルファーストも大事ですが、タブレットも意識していきたい。
宇宙魚くんすごい（自画自賛）
Webフォントを使用
読み込みが遅くなるのは嫌だなあとは思っていますが、Webフォントにはこだわりました。こちらのサイトを参考に設定させていただきました。
癖のあるフォントは使わず、見やすいを意識しました。
個人的には英字だけ癖のあるフォントを使う手法に憧れがあるので、また変えるかもしれません。
line-height, letter-spacingに拘りました
文字サイズ、文字そのものが綺麗になっても、それが適切な余白の元に設定されていなければNoGOODということで、line-height, letter-spacingに拘りました。
前回のカスタマイズからCSS, HTMLについて学び始めたので、今回こういう概念も理解できるようになったわけです。
"蛍光ペン太字"と"太字"を使い分け
今となっては有名な蛍光ペン太字ですが、使いすぎると非常に見づらい。かと言えば、ちょっと目立たせたい部分もあるのも事実なので、太字と蛍光ペン太字を使い分けしております。
こちらの記事を参照。
3．文字を囲むボックスを多数用意
リンクを目立たせたり、他の文章と差別化したりと、用途に分けて使い分けるために記事を囲むボックスを多数実装しました。
文章だけだと読む気が無くなる、でも画像を使いすぎると重くなるので、ボックスは是非他のブログにも実装していただきたい。
サルワカくんのボックスデザインが"使える"
状況に応じて使い分けたいなと思い、文字を囲むボックスを多数用意しました。主にサルワカさんのおかげです。
この記事でもいくつか出てきていますね。
ただ、
使いすぎると見づらいので効果的に使っていきたい。
拡張機能を導入
シロマ (id:shiromatakumi)さんによる拡張機能を導入しました。
控えめにいって神
個人的に吹き出しが大のお気に入りです。
この拡張機能が出る前ってすごいめんどくさい方法で導入したいのといけなかったんですよね。
HTMLと見たままを往復するのは正直めんどくさいので、本当に導入して良かったです。
見出しをカスタマイズ
改めて見出しをカスタマイズしました。こだわったのは余白。marginのトップとボトムをかなり広めにとって、余白を意識しました。
また、見出しをシンプルなデザインに変更しました。最近のキュレーションサイトなんかはかなり見出しがシンプルなので、それに習った形ですね。
5．マテリアルデザインを意識
マテリアルデザインを意識したサイト作りを行いました。が、正直マテリアルデザインのガイドラインって従うだけだと分かりづらいなあと思っているのも事実です。
天下のグーグルさんが推奨しているとは言え、ハンバーガーメニューなんかはまだ認知度が低いなと思ったりもします。
だから、あくまで意識した程度です。
6．どぎつい色の使用を控えた
なんか気持ち悪いなって色あるじゃないですか。そういう色は使わないように意識しています。
僕のブログは以前までメインカラーを二色使っていたのですが、今回は一色にしました。たまにメインカラーの明度をあげたサブカラーを使用する程度です。
#000を使わない
#000（黒）はあまりデザイン的によろしくないという話を聞いたので、基本的には#444とかを使っています。確かに見やすくなった気がします。
心地いいカスタマイズを心がけていきたい
参考にしたブログ
基本的には過去記事に載せたようなブログを参考にしておりますが、代表的なものも含めて掲載させていただきます。本当に感謝しかないです。
LOGzeudon
ろくぜうどんさんのブログはめちゃくちゃ参考にさせてもらっています。左上のハンバーガーメニューとか丸パクリです。本当に勝手で申し訳ないです…
letter-spacingやline-heightなんかも参考にさせてもらっています。あと、蛍光ペン風の太字（こういうやつ）が綺麗だったので、参考にさせていただきました。
SANGO
WordPressテーマであるSANGOも参考にしました。（なんか韻踏んでる感ある）
余白の取り方、CSSアニメーション 、色使い等、何から何まで学ばせてもらっています。
後々詳しく書きますが、サルワカくんのカスタマイズは当ブログに豊富に取り入れられています。本当に感謝です。
FontAwesome
最近サイトデザインが一層されたFont Awesome。愛用させてもらっていますが、サイトのデザインがすんごいおしゃれ。
グレーの使い方が非常に上手だなあと思います。今までは結構色々な部分に色を使っていたのですが、Font Awesomeのサイトを見てからは黒とグレーを上手く使って色の面積を小さくしています。
まとめ
ただの運営報告のつもりがすごく長い記事になってしまった。
ブログに実装した具体的なカスタマイズについて全然述べていませんが、CSS全然整理してないし、かなりハチャメチャな状態なので、後日記事にしようとは思っています。
あと1カラムおすすめです。
