ブログのデザインを編集する時cssを編集することでデザインを変更できます。
例えば
こんな感じでマーカーを引いたり、
こんな感じに背景の色を変えて強調したり
様々なブログを見ることでデザインを真似しようと思いcssを変更することはあるでしょう。
私もそのうちの一人で、見やすいブログを作ろうと色々試しています。
今回ははてなブログでのデザインcssの編集についてのお話と共に、初心者が忘れがちなコメントアウトについてのお話をしていきます。 私ははてなブログしか使ってないので、WordPress等の他ブログについて詳しくは分かりませんが、コメントアウトは使うべきだと断言します。
- はてなブログ使ってる
- 記事のデザインを見やすくしたい
- コメントアウトって何か知らない
デザイン変更について詳しい方は「コメントアウトって？」からお読みください。
読まれやすい記事にしよう
様々なサイトを訪れた時に読みやすい、読みにくいと思うことありませんか？大抵の検索で、上位表示されるサイトは見やすいサイトが表示されますが、それは管理主がサイト訪問者に目を通してもらえるように、デザインにこだわってるからです。
見づらい記事は途中で読むのをやめてしまうな
画像や色が使われてない文字ばっかりの記事は読まれにくいよ
あなたも書いた記事を他の人に読んでもらいたいと思うのであれば、デザインにこだわってみましょう。デザインの変更方法に関してはたくさんの方が記事を書いていますので、ここではコード等の記載は控えます。
こちらのサイトでブログの様々なカスタマイズやデザインを変える方法について紹介されていますので参考にしてください。一部はてなブログ以外でも使えるものあります。
はてなブログデザインcss変更方法
コメントアウト以前にデザインcssの方法を知らない方ように、簡単に詳細手順を画像を使って紹介しておきます。
管理画面より「デザイン」をクリック
このような画面になります。
「スパナマーク」→「デザインcss」よりcss記述画面が表示されます。サイトで調べたcssコードをこちらにコピペ等で記載してください。 最後に必ず「変更を保存する」をクリックしましょう。せっかく書いたコードが反映されません。
コメントアウトって？
画像は背景色を変えるためのコードです。赤枠がコメントアウトしている内容です。
コメントアウトって何？
プログラミングをやったことある人はコメントアウトについて聞いたことあるでしょう。コメントアウトとは「コンピュータ言語のソースコードのうち、人間のために覚えとして挿入された注釈のこと」、いわばメモです。つまりコメントアウトを使うことで、コードに影響しない情報を書くことができます。
慣れないcssを使っているうちに、
- このコードなんだっけ？
- 色を変えたいけど、どこを直せばいいか分からない？
- コード書いたけど、使い方忘れてしまった
といった悩みが出てくるのを防ぐことができます。
コメントアウト便利だな！
続いてコメントアウトの書き方や書いておくべきことを説明するよ
背景色についてのコードはこちらのサイトを参考にしました。
方法
方法はいたって簡単！
/*ooooooooo*/
このように/* */で間に書き残したいメモを残すのみです。oooの部分を変えましょう。画像の赤枠を参考にしてください。
コメントアウトで書く内容
コメントアウトは自分用のメモです。後から見たときに分かりやすくするためにコメントアウトを使って記しておきます。
コメントアウトを使いたい内容は以下の通りです。
- 日付
- コードの内容
- 参考にしたURL
- コード内の意味
- 各コードを見やすくするために分ける
日付
自分がコードを付け足した日を記載しておくことで、編集しようと思った時に時系列を追って探すことができます。またこの後記述するURLについて更新されてる情報を知った時に更新日と比較することでCSSの修正に気づくことができます。
コードの内容
コピペして貼り付けたはいいけど、後から編集する時にどのコードだったか分からないとなってしまっては編集できません。サイト主さんがコード内にコメントアウトを使って内容を書いてくれていることも多いですが、書かれてない時は自分でコードの内容を記しておきましょう。
少しでもコードの意味を知っておくと今後役立てることができます。
調べてコピペだけではもったいないので軽く勉強して内容をコメントアウトして書き残しておきましょう。
参考にしたURL
参考にしたURL内にはコード以外にも有益情報が記載されていることがあります。例えば、色の変え方や幅の変更、使い方などです。上記方法を忘れてしまい、再検索する時にURLをコメントアウト使って記載しておくことで、すぐにサイトを検索することができます。
コード内の意味
例えば、色を変える時や幅を調整する時に、どこのコードを変えればいいか分かっていると自分でカスタマイズする時に楽です。ただ、cssの知識がない人はコードを見ただけでは、どこを編集すればいいか分からないでしょう。
例えば
padding: 30px; /*文字まわり（上下左右）の余白、数字は幅*/
と記しておくことで余白をもっと少なくしたいなと思った時に数字を小さくすればいいことがコメントアウトを見ることですぐ分かります。
ただコメントアウトの内容は簡潔に書くようにしましょう。長い文章で書くとCSSのコード自体が見辛くなってしまいます。
各コードを見やすくするために分ける
上記の日付やURL等を記載していると自然にコード毎に分けられるので見やすくなります。しかし、もっと見やすく分けたいなと思う方はコメントアウトを使うことで整理することができます。
例えば、AというコードとBというコードがあるとします。
A
B
と記載されているのが境目が分かりづらいなと思う方は
A
/*ーーーーーーーーーーーーーー*/
B
とコメントアウトを使うことでコード毎に分けることができます。
これは好みの問題なので、分けたいなと思う方は使ってみてください。私は必ず使用してます。あとで修正する時に境目を作っておいた方が発見しやすいからです。
まとめ
はてなブログでのデザインcssの編集についてと、コメントアウトについてお話しました。
デザインを変更しようと思った時にコメントアウトを使っておくことで、効率よく変更することができます。ただただコードをコピペして終わりでは、後から大変な思いをすることもあるので、最低限の情報はコメントアウトを使って記載しておきましょう。
一度変更したきりではなく、見やすいデザインを追求するためにコメントアウトを使用してみてください。
ブログについての有益情報発信しています。興味ある方は読者になるをポチッと！