当ブログは「はてなブログ」で運営しています。
無料で始められてブログテンプレートも豊富、カスタマイズも簡単にできてオリジナリティを出しやすいのも魅力です。
今回は初心者の方でも簡単！HTMLとCSSがよくわからなくてもとりあえずOK！
当ブログがブログカスタマイズの際に参考にさせていただいているサイトをご紹介します。
はてなブログの方向けカスタマイズ参考サイトになりますが、ご紹介する中にはワードプレスブログの方にも参考になるサイトもありますのでチェックしてみてくださいね！
初心者でも簡単｜コピペでOK！ブログカスタマイズの参考サイト【はてなブログ】
HTML・CSSって何？違いは？
HTMLとCSSはどちらもWEBサイトの表示やデザインにかかわる言語です。
細かいことや専門的なことをはぶいてざっくり説明すると「CSSは事前の準備、HTMLでデザインを反映させる」といったものになります。
🖋素人による「ネコでもわかるスタイルシート門前講座」
— にゃも🍓ぷち得ブログ×YouTube (@nyamo3blog) 2020年4月24日
スタイルシートとはデザインの魔法です✨
CSS→事前詠唱
HTML→発動呪文
CSSだけで魔法は発動しませんし、逆もしかり。
はてなではデザインCSSで事前に詠唱し
記事作成のHTML記述でデザインが発動します✨#はてなブログ #ブログ書け
当ブログ開設前にTwitterでつぶやいた内容になります。
かなりファンタジーな表現をしていますが、短い文字制限でわかりやすく説明しよう！と無い知恵をしぼった苦肉の策でこうなっていまいました。
専門的な目線からしっかりと解説されているサイトがありますので、参考リンクとしてのせておきます。
はてなブログのHTML・CSSの入力方法
はてなブログでカスタマイズする際にHTML・CSSのコードを入力する場所を解説します。
CSSをカスタマイズする時は必ずバックアップをとりましょう！
デザインに不具合が起きたときに復旧できなくなったり、復旧に大きく時間を取られることになります（経験者は語る）
管理画面にあるパレットアイコンの「デザイン」という項目をクリックします。
テンプレートの変更やサイドバー管理などが集約されています。
スパナマークの「カスタマイズ」をクリックしてください。
「｛｝デザインCSS」という項目にこれからご紹介する参考サイトの「CSSコード」を入力してください。
元から書いてあるコードはお使いのテンプレートによる記述なので変更しないでくださいね。
カスタマイズの中には「HTML」の入力が必要になってくるものもあります。
HTMLはカスタマイズを反映させたい場所に入力するのが基本なので、特に記述がない場合は記事本文に入力します。
デザインによっては「ヘッダに入力」など記載してありますのでよく読んで入力してくださいね。
入力する場所を間違えるときちんと反映されなかったり、思わぬデザイン崩れを引き起こすことがあります。
コメントアウト｜HTML・CSSを見やすくわかりやすく
HTMLとCSSを色々追加していくと「あれ、このコードは何についての記述だっけ？」とわからなくなってしまうことがあります。
そんなときに便利なのが「コメントアウト」です。
コメントアウトはコードの内容に干渉せずに記述することができる補足説明やメモのようなものです。
コードを紹介されているサイトによってはコードの中に何についての記述なのかコメントアウトが入力されている場合があります。
HTMLでは <!––○○○○––>
CSSでは /* ○○○○ */
（必ず半角英数で入力してください）
記号ではさんだ「○○○○」部分に補足説明やメモなどを記述します。
例えば「<!–– フォローボタンヘッダ ––>」とか「/* 見出しh3 */」などコピペしたコードに追加して記述しておけば、あとで見たときに何のコードかわかりやすくなります。
HTMLのコメントアウトはブログ記事本文に使えますので、記事本文には表示させたくないけど書いておきたいことを記述できます。
例えば私の利用方法ですが、記事をリライトした時などはじめに記事を書いたのはいつかを覚書として日付などの情報を記述しておいたりしています。
「初出○年○月○日、○年○月○日リライト」と更新履歴をブログ記事本文に書くこともありますが、読者の方には必要ない情報かなという場合にはコメントアウトに記述しています。
コメントアウトに関して詳細に解説しているサイトを参考としてのせておきます。
当ブログで参考にさせていただいているカスタマイズ関連サイト
私が運営する2つのブログで参考にさせていただいているカスタマイズ関連サイトをご紹介します。
とても便利で参考になるおすすめのサイトです。
はてなブログのカスタマイズが充実-フジブロっ！
はてなブログでも人気のブログテンプレート「Cappuccino」「Neumorphism」の製作者様であるフジグチさん（id:utoutosara）のブログ。
カスタマイズ情報がとにかく充実していて私も大変お世話になっています。
サイドバーのプロフィールのカスタマイズや記事本文の囲み枠など活用させていただいています。
そして特にオススメポイントがとても便利なカスタマイズの作成フォームです。
カスタマイズを紹介されているサイトのほとんどがカラーコードや必要事項の入力部分を自分で調べて入力して…と手間がかかるのですが、フジグチさんのブログでは必要事項を入力するだけで自分好みのコードを作成してくれるフォームがあるんです。
色選びも好みの色の部分をクリックするだけでコードに反映される素晴らしい仕様です。
間違ったカラーコードを入力したり、必要なコード部分を上書きしたり消してしまったりなどミスが少なくてすむのが本当にありがたいです。
特にコードを見ただけでは「どこにカラーコードを入れれば色がかわるの！？この英語どういう意味！？」となってしまう初心者さんや私にとっては入力フォームを確認するだけでミスが修正できるので便利ですよ。
HTML・CSS入門ほか幅広い話題のサイト-サルワカ
私がブログを始めた本当に初期の頃からお世話になっているサイトです。
HTML・CSSなどWEBデザインをメインに漫画などの書籍レビューや「力尽きたときの簡単レシピ」など幅広い話題が掲載されているサイトです。
私は見出しのカスタマイズを利用させていただいています。
見出しの変更はCSSを入力しておけばすでに書いている記事の見出しにすぐ適用されて簡単なのでカスタマイズの第一歩としては最適です。
見出しのカスタマイズサンプルはたくさんあって迷うほどです。
私も色々あって本当にどれにしようか迷いました。
結局シンプルなものに落ち着いてしまいましたが。
色で迷ったら-和色大辞典
カスタマイズに必要不可欠な「色」。
WEB上の色を指定するのに必ず知っておきたいのが「カラーコード」と「RGB」。
カラーコードは「#」から始まる最大6桁の英数字。
RGBは色のR（赤）G（緑）B（青）の3つ混ざり具合をそれぞれ1から255までの数値で表したものです。
和色大辞典は日本の伝統色の名前とカラーコード、RGBの値、配色パターンなどさまざまな情報が掲載されているサイトです。
見たまま色で選んでもよし、色の名前から選んでもよし（私は名前から選んでしまうことが多いです）。
系列サイトとして「原色大辞典」「洋色大辞典」などありますのでそれぞれ見てお気に入りの色を見つけてくださいね。
個人的な好みとしてはあまりビビットな色を使うと目に痛いかなと考えてブログで使う色は少しだけくすんだり淡い色味を選ぶようにしています。
ちなみに当ブログでメイン使用している色は
白群 びゃくぐん#83ccd2
白群の反対色の#d18882
卵色 たまごいろ#fcd575
の3色です。
もう一つのブログのメインカラーが暖色系なので、正反対の寒色系をメインカラーにしてみました。
色味に関してはカラフルにあれこれ盛り盛りにするのも好きなのですが、ブログのトップページに統一感を持たせたくてメインの3色を決めました。
カスタマイズやデザインの「色」に関する話題は改めて記事にしようと考えております。
まとめ：カスタマイズでオリジナリティあふれるブログづくり
当ブログではテンプレートの「undershirt」を利用しています。
とてもシンプルなテンプレートで人気のテンプレートのひとつでもあります。
シンプルで見やすいというのも人気の理由ではあると思いますが、カスタマイズ次第で他のブログとの差別化ができるというのもあります。
実際、はてなブログのテーマストアで人気順の上位をしめるブログテンプレートのほとんどがシンプルなものが多いです。
シンプルなテンプレートは簡単なカスタマイズで見た目がガラッと変わるのでブログを始めたら少しだけ手を加えておくといいですね。
ただし、夢中になって沼にハマりやすいのでご注意を（経験者は以下略）
