日常の最中に、

ちょっとした楽しみを。

header-img

本当は教えたくない!ド素人がはてなブログカスタマイズの参考にした記事

f:id:saichu:20170708194522j:plain

え? タイトル? 何の話? 

 

どうもー、もなかです。

スマホ表示はちょっと前にやってPC表示もブログデザインを変更したんですけど、どうでしょう?

 

良いでしょ? 良いよね?

 

別に......って人はその卓越したセンスを僕に少し分けてください。お願いします。

 

今回はド素人の僕がこのくらいのブログデザインを作るのに参考にした素晴らしい記事たちを紹介します!!

PC表示ブログデザイン

PC表示はこんな感じになりました!

f:id:saichu:20170708121135j:plain

全面的にうぃるさんの「力こそパワー」をパク参考にさせて頂いています。

参考リンク

力こそパワー

しかしここまでカッコよくする力もパワーも僕にはなかった……

テーマ

このトップページでわかる人はわかると思いますが、こどみすさん作成の「Codomisu Flat」です!

最近は新しいテーマ「Minimalism」も公開されていましたね!

今のはてなブログでは、ほとんどの方がどこかしらこどみすさんのカスタマイズを採用しているのではないでしょうか!

神ですね!

トップページ

ヘッダー画像

f:id:saichu:20170706192012j:plain

ヘッダー画像良くなーい?
わかりにくかったブログ名もこれなら問題ないでしょう!

あのCanvaで作ってみました!

とはいえブログ名とフリー素材のアイコンを組み合わせただけです。

そしてこのアイコン……

 

 

いつからもなかだと錯覚していた?

 

 

これはチョコレートのアイコンです。
普通にわかってたらごめんなさい。

もなかに見えなくもないかなーと思って。

 

「さなか」を文字に入れるアイデアを思いついた時、天才かな? と思いました。

記事表示

カード型の表示にしてみました!
「Codomisu Flat」を使っている方のブログを見ても大体そうですね。

コードはMinimal-Greenさん、つばささんの記事を参考にさせて頂きました。

ちょこちょこと配置をいじったりしてるんですが、なんせド素人なもので手当たり次第に1項目ずつ書いては消して試してます。
恐らくわかる人には目眩がするほどのコードになっていることでしょう。

勉強した方が絶対早いし上手く出来ますね。

あと、トップページのスターは非表示にしてあります。ここからスター付けることもないと思いますし少しでも軽くなればいいなと。

なるへそゴマのすけさんの記事を参考にさせて頂きました。ほー、なるへそ。

スマホ表示ブログデザイン

スマホ表示はこんな感じ!

f:id:saichu:20170708162640j:plain

ヘッダー・フッター

これもこどみすさんの最強カスタマイズを参考にしました。

色んな方が採用しているので被ってしまいますがそれでも魅力的なカスタマイズです!

記事表示

こちらはshunさんの記事を参考にしました。

やはり多くの方に採用されています。良いものはみんなが使いますから仕方ないですね。

 

スマホ表示は2つの記事の内容だけでカスタマイズ出来るという素晴らしさ!

PC表示との統一感もわるくないと思います!

全般

PC、スマホ共通のカスタマイズ部分です。

記事ページ

やはりメインはここですから。
前とは大分変った印象になったのではないでしょうか。

シェアボタン

f:id:saichu:20170708151805j:plain
orefolderさんの記事を参考に、少しアイコンや配置を変えてみました! 

大分てこずった。わけわかめ。
でもおかげで少しずつどこを触ればどうなるとか把握できました。

ブクマとかのシェア数表示もしたかったですが断念。軽さ重視ってことにしときます。

見出し

f:id:saichu:20170708143830j:plain

サルワカさんの記事から参考にしています。

パターンが多いので優柔不断な僕は悩みに悩みました。

あまり方向性の違うデザインもまずいかと思い選ぶのに苦労しました。
ラインでシンプルにして色を合わせると結構統一感が出たんじゃないかと思います。(多分)

あと前回の記事からh2を使うようにしたので過去の記事だとh2がありませんが、h3とh4だけでも不自然ではないかなと。

h5を使ってる記事は早急に直さなくてはいけない。

関連記事

f:id:saichu:20170708152231j:plain

コチラもorefolderさん、サルワカさんの記事から。

はてな標準の関連記事を使っていますが5つまでしか表示できないのでPCでは1つ非表示にして2列にしました。

スマホは1列でそのままですがシェアボタンやスターとの表示順の調整が難しくて、かなり無理矢理になっています。

 

あと、過去記事には適用されないので結局見出しと一緒に点検しないとですね。

囲み枠

ここまでも参考URLに使用していますが、この囲み枠もサルワカさんです。

選り取り見取りで迷っちゃいますね!
(↑ていうか漢字でこう書くんですね。)

ヨメレバ・カエレバ

コチラはYukihyさんの記事を参考にしました。

例のために載せましたがこういう本読んで勉強したいですね。
こんなん持ってるだけで仕事出来そうだし。表紙カッコイイ。

配色

センスのない僕にとって一番の鬼門「色使い」

それでもサルワカさんなら……なんとかしてくれる!

今回とてもお世話になっております。

もなかっぽいイメージかと思ってオレンジをベースに緑系を合わせています。
ただ色を使う場所とか正直自信ないので見えにくかったらゴメンナサイ。(アドバイスください)

まとめ

被りたくない、でもオシャレにしたい、でもセンスない、というどうしようもない状態でもがきにもがいてなんとかここまでこれましたw

そしてセンスや技術のある方々が惜しみなく公開してくれることがとてもありがたいです。

 

最後にお世話になった方々のブログを一覧で載せますので参考になさってください。

まだやりたいこともありますし少しはわかるようにもなってきたんでカスタマイズ沼から抜け出せそうにありません。

ただ……

 


カスタマイズの時間でいくつの記事が書けただろう

 

以上、もなかでした。