【はてなブログ】ド素人がUnder Shirt に変えてみた【カスタマイズ】

先輩方のおかげです

ずーーっと前から自分のブログデザインを変えたいなーと思っていたのですが、PC音痴なので何をするにも【単語の意味】から調べないと分からないレベルだし、調べてやってみても失敗の連続で「何で出来ないんだろう・・・」と心が折れることばかり。

なので、本を買いました。
読んでみるとチンプンカンプンで、この本を説明してくれる本が欲しいくらいでした。

ネットで調べても分からない。

本を読んでも分からない。

こんな事ばかり繰り返してるとね、出来ない自分に腹が立ち「だったらやってやろうじゃねーか!」と、久しぶりに負けず嫌い精神が出たおかげで何とか仕上がりましたw
まぁ、1ヶ月以上かかりましたが・・・(´-ω-`)

毎日試行錯誤してると「なぜ失敗していたのか?」が少しずつ分かるようになり、参考にしたブログカスタマイズの記事を読んでも理解できるようになりました。
(最初は読んでも全く意味が分からなかったので・・・)

ってか、はてなブログカスタマイズの記事を書いてる先輩方はかなり親切です。
何ならお金を取って良いレベルなんでは?と思うくらいです。

カスタマイズ記事を書いてる先輩方がいなかったら私は何もできませんでした・・・本当にありがとうございますm(__)m

そんなド素人の私がやってみたカスタマイズと参考にしたブログを忘備録としてまとめていきたいと思います。

テーマはUnder Shirt

blog.rokuzeudon.com

何でこのテーマを選んだか?

このテーマを作った@rokuzeudonさんがコメント欄で丁寧に質問に答えていて、カスタマイズが分からない場合でも参考になるコメントが多かった事。

それとUnder Shirtのカスタマイズ紹介をしているブロガーさん達の説明がド素人の私でも分かりやすかった事。

そして写真撮影のセンスが無く文章力の無い私でもオシャレに見えそうだったので、思い切って挑戦してみましたw

出来上がった今ではこのテーマにして良かった!と思えますw

グローバルナビゲーション

グローバルナビゲーション(メニュー)をつけたかったので、こちらの記事を参考にしました。
細かく説明してくれてる+変更箇所を数字で指定してくれてるのでありがたい!

www.yukihy.com

ボトムナビゲーション

実は、はてなブログを始めた時に色々参考にさせてもらっていたのが元CAバンビさん。今回も参考にさせて頂きましたm(__)m

今回のカスタマイズはスマホ用に力を入れたくてボトムナビゲーションを追加。
画像付きで説明してくれているので、私でもできましたw

www.bambi.pro

www.bambi.pro

記事・全体のデザイン

デザイン関係のカスタマイズはこの方達のブログで解決!
画像解説付きで本当に分かりやすいのでオススメです!

沢山参考にさせて頂きました!

www.oheya-migaru.com

www.kurasitotonoe.com

diy-mp.com

www.bananacake.xyz

kirari-yums.net

clrmemory.com

www.itjigoku.com

プロフィール

サイドバーのプロフィールを初めて変えてみました。

こんな簡単に出来るなんて知らなかった・・・。
おかげで見栄えが良くなりました!

marunuki.tools-base.biz

パンくずリスト

初めてブログをカスタマイズした時に取り入れたかったのですが、私の理解不足で意味が全く分からずカスタム出来なかったパンくずリスト。

今回は再度挑戦して何とか成功しました!w

ただ、全ての記事のカテゴリを変更する必要があったのでかなり大変でしたが、やって良かった!

blog.wackwack.net

フォント・カラー

カスタマイズする前に自分のブログを改めて読んでみたんですが、文字に落ち着きが無いというか、読んでて疲れるというか・・・なんかね。

デザインも含め「こんなブログだったんだ・・・」と、何とも言えない気分だったので今回はフォントも全て変えてみました。

参考にしたサルワカさんのブログって本当に見やすい!
今後も参考にしていきたいと思います!

saruwakakun.com

fontawesome.com

saruwakakun.com

www.colordic.org

はてなブログの画像投稿について

ブログって文字を打ち込んで写真をペタペタ貼って、リンク先や何やらを貼って分かりやすく書ければ良し!と思ってました。

TwitterやInstagram的な感じでね。

今更ですが、それではダメな事をカスタマイズ記事を読み漁って知りました・・・。

私のブログはPCでもスマホでも読み込みが遅いなーと思っていたんですけど、ネット環境が悪いのか?とかPCの調子悪い?とかくらいにしか思ってなかったんだけどさ。

私のブログは画像サイズがデカすぎたらしい。
調べてみたら・・・3000px~4000pxだらけで3500KBとかだらけだったのよね。

最初これの何がダメなのか意味が分からなかったんだけど、サイズがデカいと読み込みに時間がかかるから遅いというか重いというか、サクサク進まないっていうね。

なので、全ての写真のサイズを変更し圧縮して一枚ずつ写真を差し替えました・・・。
44記事全て!圧縮するという事も覚えましたよ。あはは。)

全ての記事の画像サイズを合わせた方が綺麗なんでしょうけど、そこまでの気力は無く少しバラバラなんですが・・・許してくれ~。

ブログの高速化・画像の圧縮

私みたいにペタペタ画像を貼ってる方は少ないんでしょう・・・。

高速化と、画像のトリミング・圧縮についてはこのツールがおすすめ。
もっと早く知りたかった・・・。

imagecompressor.com

参考にさせて頂いたブロガーの皆さまへ

ブログカスタマイズで大変お世話になったのに、お一人ずつきちんと紹介出来ずですみません。
もし、削除要請等がありましたら迅速に対応致しますので教えてくださいm(__)m

皆さまのおかげで、ド素人の私でも素敵なデザインになった事が本当に嬉しいし、感謝しかありません。
本当にありがとうございました!