読者です 読者をやめる 読者になる 読者になる

宇宙時代より

Everything on this blog is worthless

【初級編】はてなブログのデザイン変更時に取り敢えず見るべき記事とCSSまとめ

f:id:skyfish25:20160723204854j:plain

先日夜遅くまで起きてたのが祟ってはてなブログproに加入してしまいました。

飲み会キャンセルして金が浮いたしちょっと散財₍₍(ง˘ω˘)ว⁾⁾とか思ってたらいつの間にかこんなことに。加入した時はちょっと後悔(月費1000円は高すぎだろ○ソが)してたんですけど、せっかく課金勢になったので、ちょっとブログのデザインとか変えて、心機一転ブログを真面目に更新していこうと思ったわけですよ。バイトもやめて暇になっちゃったしね。

 

 

Before After

Before

f:id:skyfish25:20160723151420j:plain

After

f:id:skyfish25:20160723151635p:plain

 

シンプルかつオシャレにするために:目標のブログを決める

f:id:skyfish25:20160718053827p:plain

http://matome.naver.jp/odai/2141458641261463801

 色んなブログを参考にしましたが、僕は基本的にこれらの4つのブログを参考にしました。

hacogaki.hatenablog.com

akiueo.hatenablog.com

tsukuruiroiro.hatenablog.com

www.north-geek.com

 

やっぱりしっかり人気のあるブログはオシャレです。自分がよく読むブログ、特にデザインが気になったブログをいくつかピックアップしておいて、そういうサイトないしはブログを参考にして自分のブログをデザインするのが一番いいのかなって思います。

 

こちらのブログで「要素を検証」を使ったデザイン変更の手引が乗ってます

tsukuruiroiro.hatenablog.com

自分の現在の「ブログがシンプルかつおしゃれ」かどうかは置いておきます。なんでかって?センスがないからだよ!!

 

まあ僕みたいにセンスのない人は基本的にモノトーンでまとめるのがいいと思います。+1でさし色を入れてもいいし、+2~3色入れてもいいと思いますけど全体はモノトーン、出来る限り白を基調にするといいかなーって思います。

weboook.blog22.fc2.com

シンプルかつオシャレにするために:参考にすべき記事

CSSの知識なんてないよー(´・ω・`)って人はコピペだけでOKみたいな記事を参考にすると色々と捗ります。Googleで「はてなブログ CSS コピペ」で検索して良さ気な記事から引っ張るのもいいかもしれません。

www.yururimaaruku.com

一番初級的かもしれない。取り敢えずこれと下の記事読んでから初めてみましょう。

hacogaki.hatenablog.com

基本的にはこの記事だけでいいかなーって思います。取り敢えずこれ見てカスタマイズして、随時足していく感じで。

catprogram.hatenablog.com

ちょっと知識ある方はこちらを参照。

取り敢えず実行したカスタマイズ

テーマを変更

デフォルトがくっそだせえって言う宇宙魚も多いので是非変えましょう。簡単だし。

www.north-geek.com

ちなみに僕はInnocentというテーマを使っています。以前は同じ作者さんのBlankを使っていたのですが、グローバルメニューがどうにもうまく行かなかったので変更。デザイン滅茶苦茶凝りたいっていう人はこういうシンプルなテーマが一番なのではないでしょうか。

 

手っ取り早く変えたい人、面倒くさいから一発でオシャレにする奴ないの!!って人はMaterialDUDENakedが今のところ最強ではないでしょうか。マジ御三家。

この3つは本当に滅茶苦茶かっこいいです。センスが無い><って人に特におすすめですね。僕は背伸びしてカスタマイズしましたけどね!!

 

はてなブログproに加入

ブログが全体的にとっちらかっていたので(前の全体のスクショ撮るの忘れた)全体的にシンプルにしようと決意。取り敢えずはてなブログproに入って余分な広告を消去&デフォルトで表示されるフッタとヘッダを消去しました。これだけでも大分シンプルになる気がします。

 

スマホ用カスタマイズを実施

レスポンシブルデザインのテーマを実装するのも良いと思いますが、どうしても重くなってしまうので思い切ってスマホ用のデザインを創ることにしました。

tsukuruiroiro.hatenablog.com

僕がスマホ用のデザインにしようと思い立った、また、はてなproに加入しようと思った大きな理由です。すごい参考になります。

www.mukaikaze.net

こちらも参考になります

akiueo.hatenablog.com

ちょっと上級者向け。こだわりたい人は是非。

 

ヘッダーを作成

nozziedesign.com

画像編集ソフトを使ったヘッダーの作り方。自由度の高さはやっぱりこれが一番かなと思います。長く運用していくものですので、ちょっと時間かけるぐらいでもいいのかもしれませんね。画像選びも重要になってきそう。

webだけでも作れるよ

picky-pics.com

日本語タイトルの方におすすめ。でもちょっと自在性にはかけるので、日本語タイトルの方は最初に上げた奴(うまい言葉が出てこない)がいいかなと思います。

www.canva.com

Canvaは、僕のブログのヘッダー作成に使用したサイトです。「宇宙時代より」というタイトルなので、なんかそれっぽい英語にしました。結構自由度が高く、図とかデフォルトで用意されているものを自由に配置したり、フォントが豊富だったりと結構魅力的なサイトです。

 

f:id:skyfish25:20160717103253p:plain

 

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

ここは正直迷った所です。実際設置する意味あるのかなって思うんですよね。直帰率改善には繋がっているんでしょうけど、設置してもそこからいくより、記事一覧とかカテゴリ欄から行く人の方が多いんじゃね?って思うんです。事実僕はブログを見るときに殆ど使ってません。

blog.sukecom.net

僕のブログはこちらを参照しました。くっそ時間かかりましたけど僕は気に入ってます₍₍(ง˘ω˘)ว⁾⁾

theme-naked.hatenablog.jp

こちらのサイトはとっても簡単です。

 

 反省点

f:id:skyfish25:20160303093727p:plain

http://yukinkohouse.jugem.jp/?eid=2718

デザインを変更するのに熱中しすぎて記事を更新しなくなった

見出しだけでガバガバ感がひしひしと伝わってきますが本当に注意してください。僕みたいにならないためにー!!!

ブログの主役はコンテンツです!!!!!これじゃ!!!本!!!!末!!!!!転!!!!倒!!!!

CSSを整理しなかった

随時気になったものを追加していったのでCSS欄がゴッチャゴチャです。ちゃんと分ければよかったお(`;ω;´)

改善する度に探しまわらなきゃいけないのでカスタマイズする前に是非整理しましょう。

サイトがちょっと重い

前回よりは改善したのですが、サイトがチョット重いです。特にPC版。これはなんとかしないとなあ・・・スマホ版は軽いのですが。

 

まとめ

f:id:skyfish25:20160723161814j:plain

謎画像

最近やたらと偉そうにブログのこと書いてるけど個人的にはモチベーション上がるので満足です!!!デザインCSSまとめこれから随時更新予定!!!多分!!!!