【初心者体験レポ】ブログ初心者がはてなブログ無料版をカスタマイズしてみた！
こんにちはhumuhumuchanです！
ブログを書き始めて12日目。この記事を含めて14記事書けました！
飽き症の私にとっては褒めてあげたいことです。
今日はブログをカスタマイズしたので、その方法を紹介したいと思います。
プログラミングやPCスキルがなくても大丈夫！
やってると楽しくなります(^^)/
✓こんな人におすすめ！
・ブログを始めたばかり
・ブログをかっこよくしたい！
・ブログの知識もスキルも全くない
（←私です）
ー目次ー
・初心者がまずカスタマイズすることは？
・どうやってカスタマイズするのか
１．初心者がまずカスタマイズすることは？
まず何から始めていいかわからないですよね。私もそうでした。
そこで私が実際にカスタマイズした手順を紹介します。
- アイコン画像を作る
- 見出しデザイン設定
- 蛍光ペン風アンダーライン設定
- ヘッダー画像上下の余白を消す
- テーマの変更
- グローバルナビの設置
- サイドバーの編集
- 「続きを読む」を使用する
- アンダーラインの消去
２．どうやってカスタマイズするのか
基本的には管理画面の「デザイン」→「デザインCSS」にコードを書きたしていくという作業になります。
プログラミングの「CSS」。
こんなのムリーって思うかもしれませんが大丈夫です。ほぼコピペでOKです（アップしてくださる方々に本当に感謝です）！
一つずついじっていくと慣れてくるので頑張りましょう！
では一つずつ紹介します。
（１）アイコン画像を作る
①アイコンにしたい画像をPCに保存しておく
②はてなブログで設定する
管理画面の「設定」→「基本設定」→「ブログアイコン」→「ファイルの選択」
私は無料ダウンロードできる写真を拝借しました。おすすめの写真サイトも貼っておきます！
（２）見出しデザイン設定・蛍光ペン風アンダーラインの設定・ヘッダー画像上下の余白を消す
こういうアンダーラインかっこいいですよね。以下の方法でできます！
「設定」→「詳細設定」→head内タグの「headに要素を追加」にコードをコピペ→「変更する」ボタンを押す
私がコピペしたサイト・コードはこちら！
はてなブログ無料版のカスタマイズまとめ。これさえやっておけばOK。 - 虹の子育てblog
（３）テーマの変更
管理画面の「デザイン」→パレットアイコンの「デザインテーマ」→一番下の「テーマストアでテーマを探す」
ここで好みのテーマを選び、「プレビューしてインストール」→「このテーマをインストール」で完了です。
このときレスポンシブルデザインを選ぶとスマホ版ブログも同様のデザインに変更できます。
「デザイン」→スマホのアイコン「スマートフォン」→「詳細設定」→「レスポンシブデザイン」にチェックを入れることでスマホも設定完了です。
私は「Haruni」のテーマで水色グラデーションにカスタマイズしました。
他の色のカスタマイズコードはテーマの説明の欄の下の方にあります。
コードは「デザイン」→スパナアイコンの「カスタマイズ」→「デザインCSS」にコピペです。
（４）グローバルナビの設置
グローバルナビはカテゴリーをヘッド内に設置し、ブログ内の記事を探しやすくします。私が参考にしたサイト・コードはこちら！
http://tps://www.haurin-zatunenlife.com/entry/hatenablog-globalmenu-navigation
ここでなかなかお気に入りの色にするのが難しく、悪戦苦闘しました…
でもここでいろいろいじったことで、デザイン変更の基本的なことがわかりました！実際にやることが大切。
またカテゴリー前についているアイコン。これは以下のサイトのコードを使いました！
http://tps://www.haurin-zatunenlife.com/entry/hatenablog-globalmenu-navigation
（５）サイドバーの編集
「デザイン」→スパナアイコンの「カスタマイズ」→「サイドバー」→「モジュールを追加」
私は「カテゴリー」と「注目記事」を追加しました。
順番の入れ替えはクリックしたまま上下に動かすことで可能です。
（６）「続きを読む」を使用する
ブログのトップページ、記事全文が表示されて長いですよね。
記事編集画面で、ブログトップページに表示させたいところの最後に「続きを読む」アイコン（題名下の4つ目のアイコン）をクリックします。するとそこに線が入り、ここまでが記事一覧画面で表示されます。
（７）アンダーラインの消去
最後です！
リンクのアンダーラインって気になりませんか？
これを消す方法は「デザイン」→スパナアイコンの「カスタマイズ」→「デザインCSS」に以下をコピペです。
/* 下線を消す*/
a {
text-decoration: none;
}
おわりに
お疲れさまでした！
以上で終わりです！
他にも記事中の見出しのデザイン変更や枠で区切るなどしていきたいです！
が、初心者の私はここまでで力尽きました…
たくさんのおしゃれなブログを参考に、自分のブログをカスタマイズしていきましょう！
ありがとうございました！
