【ブログ】はてな無料版でしてきたカスタマイズを備忘録的に（スマホ対応・目次・引用・見出し・シェアボタン・読者登録ボタンなど）
ブログ訪問ありがとうございます！海外コスメ、お得情報、レビュー、その他海外ものについて書いていきます。
どうも、ぶるりあんです。
この記事では備忘録的に、今までこのブログでしてきたカスタマイズをまとめていきます。多くのカスタマイズの偉人に、大変お世話になっています！（笑）とても役に立った記事へのリンクも貼っておくので、よければ参考にしてみてください。
- １. モバイル対応
- ２. 見出し
- ３. 目次
- ４.「続きを読む」ボタン
- ５. 共有ボタン
- ６. Youtube再生を軽くする
- ７. 読者になるボタンをクリックしやすく
- ８. 引用
- ９. 囲み枠（ボックス）
- １０. サイドバーの順序を変えたり、項目を追加
１. モバイル対応
色々カスタマイズを始めるにあたって、まずはこれ。レスポンシブデザインにしました。HTMLやCSSのコードが共通になるので、いちいちPCとスマホと、と設定しなくて大丈夫。PC版をいじれば、スマホ版にもそのまま反映されます！
サイドバーは必須だと思うので（そこにカテゴリーとか自己紹介が表示されるから）、サイドバーがあるレスポンシブデザインのものからチョイス。
今使用しているのは、minimalismです。（だいぶいじってますが（笑））
ひつじの雑記帳さんのデザイン。見た目や設定の仕方はこちらで解説してくれています。こんなのが作れるなんて、本当に素晴らしいです。
２. 見出し
ひたすらサルワカさんに感謝。
サルワカという名前も秀逸だと思う。本当にサルでもわかるし、ブログも清潔感ありまくりで可愛いし、見やすい！永遠の憧れ。
こちらでコードはもちろん、使い方も紹介してくださっています。
色を変える
ブログ名の由来のceruleanにするため、色はいじりました！画像から直接htmlコードを取得するため、こちらのcolor code finderを使い、htmlコードをゲット。
３. 目次
minimalismテーマのものがすでに素晴らしいので、字体だけカスタマイズ。
この頃になると、ほんの少しhtmlがわかるようになってきたので、サルワカさんを見ながら追加しました。
このブログのコード：
.table-of-contents a {
font-size: 16px;
font-family: "Montserrat";
}
Montserratはこんな感じのフォントです。大好き。
記事全体に適用しようとしたら、太字がうまくいかなかったので試行錯誤中。
４.「続きを読む」ボタン
いい感じになります。わたしは「ホバー時に枠線が重なる」にしてます。
５. 共有ボタン
こちらを元に、はてブ・Facebook・Twitterのみを残したカスタマイズ。かなり悪戦苦闘しました（笑）
いじったことで微妙に左によったり、もう直すのに時間をかけすぎたので、もう一生触りません（宣言）
６. Youtube再生を軽くする
確かにめちゃ軽くなる！けど、至難の技でした。わたしがばかなんだろうけど、「クリックで再生」の画面がページ全体に広がるという事件発生。
問題の記事はこちら。「不具合を調整しました」という文をタイトルから消したいのですが、いじくるとまた不具合になるんじゃないかって怖くてできない。チキン。
いまだに使い方がよくわかりません... 書いた以外のhtmlコードが勝手に増えていくんです...
頑張る。
７. 読者になるボタンをクリックしやすく
横広でクリックしやすいようにカスタマイズ。こちらの記事で推奨されているように、ヘッダー下にもボタンを設置しています。
８. 引用
丸みのある引用符に変更。超可愛いし、見やすい！
引用は色付きもいいけど、やっぱグレーかなということで、そのまま使わせてもらっています。
９. 囲み枠（ボックス）
使ってみると、ボックスって見やすくするのに大切なんだなあ、と思いました。これから活用していく所存。
またまたサルワカさんです！ありがたい。
１０. サイドバーの順序を変えたり、項目を追加
こちらは、「デザインーカスタマイズーサイドバー」でできます。
項目追加
ブログ村のバナーを貼りたい場合なんかも、「モジュール追加」で「html」を選択して、コードを貼り付けるだけでOK。
項目の名前を変更
各項目の名前は、「編集」ボタンで変えられます。例えば、わたしの「新着記事」の欄は、「書きたてほやほや記事」になってます。
項目の順序を変更
項目の順序は、一番左の「三」みたいなところをクリックしてドラッグすれば動かせます。
以上、今のところやってきたカスタマイズです！まだまだ初心者でわからないことが多いですが、偉人たちが知識を授けてくれるので、なんとかやっています（笑）
無料でコードのコピペを許してくれるの、本当にお心が広い。ありがとうございます！
これからも少しずつカスタマイズしていきますが、やりすぎないようにだけ注意ですね。偉人たちがそう言ってました。
では！
普段は海外コスメや、お役立ち情報について書いています。ご興味があれば、読者登録をお願いします。
