CSSとHTMLの違いは？自分好みのブログの見た目にするには？
今回は、はてなブログの「デザインCSS・HTMLの編集」について学んでいきたいと思います。
- 前回までの簡単な復習
- ブログを自分好みの見た目にしたい人におすすめ！
- HTMLとCSSの違いって何？
- ブログ初心者は「デザインCSS編集」には手を出さない！
- 記事上下やタイトル下、フッタに「HTML」が追加できる！
- HTMLとCSSのカスタマイズは自己責任で！
前回までの簡単な復習
現在、「はてなブログアカデミー」ではてなブログの使いこなすコツを学んでいるところです。
今学んでいるのは、
■コース1「はてなブログへようこそ」
■コース2「記事を書こう」
■コース3「自分のブランドをつくろう」
①ブログに特徴を持たせる
②自分や自分のブログを読み手に紹介する
③ブログをカスタマイズする
コース3の3番目の「ブログをカスタマイズする」というところです。
その中でさらに4つのポイントが紹介されていて、前回学んだのは
- ブログの主要な画像を設定する
- デザインテーマを変更する
- デザインをカスタマイズする
- 上級者向け: デザインCSS・HTMLの編集にチャレンジ
3番目の「デザインをカスタマイズする」で、ブログの背景やタイトル、サイドバーの設定について学びました。
このブログでもタイトルやサイドバーのカスタマイズは実施していますが、それとは別にデザインの勉強も必要だと感じました。
今回は、4番目の「上級者向け: デザインCSS・HTMLの編集にチャレンジ」について学んでいきます。
ブログを自分好みの見た目にしたい人におすすめ！
これまでブログを自分好みの見た目にするために、画像の変更やテーマの設定、デザインのカスタマイズなどを学びました。
ただ、自分が理想とするデザインにしたいなら、これらを変更するだけでは実現できない可能性があります。
そこで必要なのが、
- HTML
- CSS
のカスタマイズになります。
HTMLとCSSの違いって何？
はてなブログアカデミーで「上級者向け」と表記されていただけあって、ある程度HTMLやCSSの知識がある人でないと難しいかもしれません。
それでもHTMLとCSSについて学びたいという人のために、簡単にその違いについて説明したいと思います。
「ブログの見た目」を「自分の体の見た目」に例えて説明すると、HTMLとCSSの違いは
- 体の構造が「HTML」
- おしゃれが「CSS」
といった感じです。
HTMLはブログの構造なので、体で例えるなら、きれいな顔立ちだったり、スタイルが良かったりするのと同じです。
CSSはブログのおしゃれなので、体で例えるなら、化粧や洋服などで見た目をよくするのと同じです。
HTMLとCSSの違いを説明しても、実際にいじってみないとわからないことも多いと思うので、興味がある場合はやりながら学んでいく方がいいかもしれません。
ブログ初心者は「デザインCSS編集」には手を出さない！
最初にデザインCSSの編集について解説したいと思いますが、最初に言いたいのがブログ初心者は手を出さない方がいいです。
なぜならCSSの知識がないと、何をすればどうなるのか全くわからないからです。
当ブログを運営しているタコアタマも、CSSを勉強中のため、今のところデザインCSSの編集はしていません。
それでも挑戦したい人は、はてなブログのヘルプページを参考に勉強してみてください。
デザインCSSは、前回学んだデザインの「カスタマイズ」から変更することが可能です。
記事上下やタイトル下、フッタに「HTML」が追加できる！
はてなブログでは
- 記事の上
- 記事の下
- ブログタイトルの下
- フッタ（ブログの一番下）
にHTMLを追加することができます。
当ブログでも、記事の下にブログランキングのタグを設置しています。
こんなやつです。
これはブログ初心者でも簡単に設置できます。
設置方法は、デザインの「カスタマイズ」から「記事」を選択して、下の方に「記事下」という欄があるので、そこにタグを貼り付けます。
また、サイドバーにもHTMLを追加することができます。
当ブログでもサイドバーに「ブログランキング」というタイトルで、このようなものを設置しています。
これもデザインの「カスタマイズ」から「サイドバー」を選択して、「HTML」というモジュールを追加して、そこにタグを貼り付けます。
人気ブログランキングやにほんブログ村などに登録している人は、試してみてはいかがでしょうか。
HTMLとCSSのカスタマイズは自己責任で！
今回は、自分好みのブログの見た目にするために、CSSとHTMLの違いから説明し、CSSデザインとHTMLの編集について解説しました。
CSSとHTMLは知識がないとよくわからないことも多いかもしれませんが、できるところから学んでいくと少しずつカスタマイズできる範囲も広がっていきます。
ただし、HTMLとCSSのカスタマイズは間違うとデザインが崩れてしまったり、表示されなくなったりする場合もあるので、実践する際は自己責任ということで。
自分でカスタマイズできるようになりたいなら、まずははてなブログアカデミーやヘルプページ、そして丁寧に解説してくれているはてなブログの先輩方の記事も参考にしてみましょう。
話は変わりますが、最近毎朝ブログの記事を投稿することができていません。
毎日ブログを投稿することができていますが、朝の時間では間に合わず、夜に続きをして投稿することが増えてきました。
ついつい調べるのに時間がかかったり、自分でも実践してみたり、文章が長くなったりしているのが原因ですが、できるだけ毎朝投稿していきたいものです。
記事は後でも修正したり、追加したりすることもできるので、まずは毎朝投稿を目指して、微妙な記事は後日修正していくなどしていこうと思います。
