【初級編】はてなブログのデザイン変更時に取り敢えず見るべき記事とCSSまとめ
先日夜遅くまで起きてたのが祟ってはてなブログproに加入してしまいました。
飲み会キャンセルして金が浮いたしちょっと散財₍₍(ง˘ω˘)ว⁾⁾とか思ってたらいつの間にかこんなことに。加入した時はちょっと後悔(月費1000円は高すぎだろ○ソが）。
まぁ、せっかく課金勢になったので、ちょっとブログのデザインとか変えて、心機一転ブログを真面目に更新していこうと思ったわけですよ。
バイトもやめて暇になっちゃったしね。
Before After
Before
After
シンプルかつオシャレにするために：目標のブログを決める
http://matome.naver.jp/odai/2141458641261463801
色んなブログを参考にしましたが、僕は基本的にこれらの4つのブログを参考にしました。
やっぱりしっかり人気のあるブログはオシャレです。自分がよく読むブログ、特にデザインが気になったブログをいくつかピックアップしておいて、そういうサイトないしはブログを参考にして自分のブログをデザインするのが一番いいのかなって思います。
こちらのブログで「要素を検証」を使ったデザイン変更の手引が乗ってます
自分の現在の「ブログがシンプルかつおしゃれ」かどうかは置いておきます。なんでかって？センスがないからだよ！！
まあ僕みたいにセンスのない人は基本的にモノトーンでまとめるのがいいと思います。+1でさし色を入れてもいいし、+2～3色入れてもいいと思いますけど全体はモノトーン、出来る限り白を基調にするといいかなーって思います。
シンプルかつオシャレにするために：参考にすべき記事
CSSの知識なんてないよー(´・ω・｀)って人はコピペだけでOKみたいな記事を参考にすると色々と捗ります。Googleで「はてなブログ CSS コピペ」で検索して良さ気な記事から引っ張るのもいいかもしれません。
一番初級的かもしれない。取り敢えずこれと下の記事読んでから初めてみましょう。
基本的にはこの記事だけでいいかなーって思います。取り敢えずこれ見てカスタマイズして、随時足していく感じで。
ちょっと知識ある方はこちらを参照。
取り敢えず実行したカスタマイズ
テーマを変更
デフォルトがくっそだせえって言う宇宙魚も多いので是非変えましょう。簡単だし。
ちなみに僕はInnocentというテーマを使っています。以前は同じ作者さんのBlankを使っていたのですが、グローバルメニューがどうにもうまく行かなかったので変更。デザイン滅茶苦茶凝りたいっていう人はこういうシンプルなテーマが一番なのではないでしょうか。
手っ取り早く変えたい人、面倒くさいから一発でオシャレにする奴ないの！！って人はMaterialかDUDEかNakedが今のところ最強ではないでしょうか。マジ御三家。
この3つは本当に滅茶苦茶かっこいいです。センスが無い＞＜って人に特におすすめですね。僕は背伸びしてカスタマイズしましたけどね！！
はてなブログproに加入
ブログが全体的にとっちらかっていたので（前の全体のスクショ撮るの忘れた）全体的にシンプルにしようと決意。取り敢えずはてなブログproに入って余分な広告を消去&デフォルトで表示されるフッタとヘッダを消去しました。これだけでも大分シンプルになる気がします。
スマホ用カスタマイズを実施
レスポンシブルデザインのテーマを実装するのも良いと思いますが、どうしても重くなってしまうので思い切ってスマホ用のデザインを創ることにしました。
僕がスマホ用のデザインにしようと思い立った、また、はてなproに加入しようと思った大きな理由です。すごい参考になります。
こちらも参考になります
ちょっと上級者向け。こだわりたい人は是非。
ヘッダーを作成
画像編集ソフトを使ったヘッダーの作り方。自由度の高さはやっぱりこれが一番かなと思います。長く運用していくものですので、ちょっと時間かけるぐらいでもいいのかもしれませんね。画像選びも重要になってきそう。
webだけでも作れるよ
日本語タイトルの方におすすめ。でもちょっと自在性にはかけるので、日本語タイトルの方は最初に上げた奴（うまい言葉が出てこない）がいいかなと思います。
Canvaは、僕のブログのヘッダー作成に使用したサイトです。「宇宙時代より」というタイトルなので、なんかそれっぽい英語にしました。結構自由度が高く、図とかデフォルトで用意されているものを自由に配置したり、フォントが豊富だったりと結構魅力的なサイトです。
グローバルメニューを設置
ここは正直迷った所です。実際設置する意味あるのかなって思うんですよね。直帰率改善には繋がっているんでしょうけど、設置してもそこからいくより、記事一覧とかカテゴリ欄から行く人の方が多いんじゃね？って思うんです。事実僕はブログを見るときに殆ど使ってません。
僕のブログはこちらを参照しました。くっそ時間かかりましたけど僕は気に入ってます₍₍(ง˘ω˘)ว⁾⁾
こちらのサイトはとっても簡単です。
反省点
http://yukinkohouse.jugem.jp/?eid=2718
デザインを変更するのに熱中しすぎて記事を更新しなくなった
見出しだけでガバガバ感がひしひしと伝わってきますが本当に注意してください。僕みたいにならないためにー！！！
ブログの主役はコンテンツです！！！！！これじゃ！！！本！！！！末！！！！！転！！！！倒！！！！
CSSを整理しなかった
随時気になったものを追加していったのでCSS欄がゴッチャゴチャです。ちゃんと分ければよかったお(｀；ω；´)
改善する度に探しまわらなきゃいけないのでカスタマイズする前に是非整理しましょう。
サイトがちょっと重い
前回よりは改善したのですが、サイトがチョット重いです。特にPC版。これはなんとかしないとなあ・・・スマホ版は軽いのですが。
まとめ
謎画像
最近やたらと偉そうにブログのこと書いてるけど個人的にはモチベーション上がるので満足です！！！デザインCSSまとめこれから随時更新予定！！！多分！！！！
