【初心者必見】簡単にはてなブログをカスタマイズする手順・方法とぼくが参考にしているサイトまとめ
ブロガーのサイトを訪問するとみなさん、まぁデザインがきれいだこと。自分もマネ＋アレンジしたいもののやり方が分からん。
でも初心者がうかつに手を出すと泥沼にはまっていくんですよ。
・調べるのに時間がかかる
・カスタムしたい病にかかる
この２つにね。
この泥沼に入らないためにも効率よくカスタマイズする方法を抑えましょう。
※おいもは、はてなブロガーですがはてなproを導入していません。なのでこちらで紹介しているものは全てPC版です。
テーマを決める→検索方法を知る→検索をする→カスタム
タイトル通りの手順が1番手っ取り早いです。
1．ブログテーマ（大まかなデザインのこと、タイトルのことではない）を決める
2．効率のいい検索方法をおさえる
3．実際に検索する
4．調べたサイトをもとにカスタム（コピペ）していく。
ぼくはパーフェクトガイドブックも持っていますが、ほとんど検索でカスタマイズできました。
検索ワードが思いつかないものやマニアックなものは、やみくもに検索してもヒットしません。そのときはパーフェクトガイドブックが重宝します。（Kindleよりも紙の書籍がおすすめ。←辞書代わり）
本だとコピペできないじゃないか！と思った方。するどいです。でも安心してください。コピペできるURLが本にのっているので、そこに行けば解決しますよ。
ではさっそく、テーマ決めから見ていきましょう。
※コピペコードを写す前に、元々のhtmlやcssをメモ張やコピペするなど、必ずバックアップを取っておいてくださいね。ぼくはヤフーメールの下書きに保存してます。
↑ これマジで大事！
ブログテーマを決める
サイトデザインがきれいなブログをイメージしてください。はてなブログ初期のテーマや公式テーマを使っている方はいましたか？ぼくは皆無でした。
すてきなデザインをされてる方は公式テーマなんて使わないんですよ。使っているのはテーマストアでインストールされているものを使っているんですよ。
関連記事もどうぞ
はてなブログの公式テーマがダサすぎてツッコまれる件とその対策 - おいもさんち
＜はてなブログ＞レスポンシブデザイン対応のおすすめテーマ22選 2016.8更新 - イロイロひとりごと。
ちなみにぼくはSpireaを使っています。デザインがシンプル＋作成者がカスタマイズ方法を紹介してあり使いやすいです。
はてなブログの便利過ぎるテーマ「Spirea」を作った｜一瞬で自分だけのデザインにできる！ - いつ俺〜いつから俺ができないと錯覚していた？〜
検索方法を知る
ブログといっても全てがすべてはてなブログではありません。Wordpressやlivedoor Blogをはじめ多くのブログが存在しています。
なので検索ワードに「はてなブログ」を加えるといいです。はてなブロガーの方がカスタマイズ方法を紹介した記事に出会えるので手順通りやれば間違いなしです。
「はてなブログ HPのパーツ名 （どうしたいか）」でぼくは検索してます。
HPのパーツ名の例
・余白
・目次
・時間差
・ヘッダー
・フッター
・サイドバー
・シェアボタン
・フォローボタン
・グローバルナビ
・マウスオーバー
・ヨメレバ、カエレバ
などなど。
最初はこれを見とけばほぼOK
これで準備万端です。それではカスタマイズしていきましょう。
大事なので、もう1度。
※コピペコードを写す前に、元々のhtmlやcssをメモ張やコピペするなど、必ずバックアップを取っておいてくださいね。ぼくはヤフーメールの下書きに保存してます。
ぼくが最初のころ参考にした記事です。これらのサイトを見て思い通りのカスタマイズができました。
必ず読んでおきたい！はてなブログをカスタマイズする際に超参考になる記事まとめ - hacogaki
はてなブログカスタマイズまとめ（スマホメイン）【2016】 - ポジ熊の人生記
【保存版】2ヵ月必死にはてなブログのデザインをカスタマイズしてきたのでまとめて紹介するぞぉぉぉ！！！【初心者向け】 - TureTiru Times
3分でブログ初心者を卒業できる14個のテクニック - 今日はこれを証明しようと思う。←「今日はこれを証明しようと思う。」だけ、はてなブログではないかもしれませんが何度も参考にしています。（※追記！keitaさん、ご自身のことをはてなブロガーだと教えてくれました。）
ここにないけどあのブロガーさんがやってるようなカスタマイズがしたいときは検索しましょう。けっこうな割合でやり方が見つかります。ブログ背景に雪を降らしたり、テトリスで遊べたりする方法もありましたよ。
コピペで簡単！ブログの背景に雪を降らす方法 - おいもさんち
ここから下で紹介するものは、ぼくが使っている＋αなものです。
ちょっと細かいカスタマイズ
タイトル周辺
はてなブログを簡単カスタマイズ！④ブログタイトル編 - 無題で行こう
サイドバー
『はてなブログ』のカスタマイズ！サイドバーに画像編 - wepli.2
Twitterのつぶやきを「はてなブログ」のサイドバーに設置する方法 - おしい県でWebに携わって働く人のブログ
見出し
コピペ一発ではてなブログ見出しをカスタマイズ！ちょっとの工夫で印象が格段に変わる！ - Yukihy Life
ページトップへ戻るボタン
コピペでどうぞ。はてなブログで「ページのトップへ戻る」ボタンをつけるカスタマイズ - ばさのーと
ヨメレバ・カエレバ
たまに目にするヨメレバ・カエレバ。ブロガーさんがこれよかったよ！と紹介するときに使いやすいです。
※デザインCSSの上の方に書かないと反映されないことがありました。
ヨメレバ・カエレバのスマホ対応 ユーザーさんが考えてくれたカスタマイズまとめ
