復活草の持ちものかばん

人生を生き抜くプログラミングと、人生を息抜く音楽。その他好きなことについて

HTML・CSSでいじるはてなブログ #1 HTML・CSSとは

こんにちは、復活草です。

 

 

ブログ歴1年半弱の僕がようやくわかってきたHTMLとCSS

 

はてなブログだと全く知らなくても執筆できるので、始めて半年はほとんどいじらずにやってきたのですが

これがわかるとブログ編集の幅が大きく広がりました。楽しいですねぇ。

 

アウトプットも兼ねて、これから何回かに分けてHTMLとCSSを使ったはてなブログ編集の方法について書いていこうと思います。

 

ただしあまり深いところまでやらず、最低限の内容にするつもりです。

僕自身深い知識もないですし、概要さえわかればあとは調べれば大抵のことはわかりますので!

取っ掛かりの部分ということで。

 

 

今回は下準備として、HTMLとCSSについて軽く説明してみようと思います。

f:id:fukkatsusou:20180919172945p:plain

 

 

 

HTML・CSSとは?

僕はHTMLなら聞いたことあるなぁ。くらいでした。

でもそれほど難しくはありません!

 

HTMLとは

f:id:fukkatsusou:20180919171159p:plain

Hyper Text Markup Language の略です。(そんなに重要じゃない)

 

プログラミング言語とはちょっと違って、 

Webページに表示させるテキストや画像、また構成をコンピュータに理解させるための言語です。

 

Webページの部品や骨組みのようなものです。

 

CSSとは

f:id:fukkatsusou:20180919171229p:plain

Cascading Style Sheets の略です。

 

Webページの見た目を自由にカスタマイズするための言語です。

 

CSS単体で使われることはなく、

HTMLで作った部品・骨組みに色や大きさ、位置などの情報を付け加えるのに使われます。

 

 

HTMLとCSSを知ると何ができるの?

先ほどの説明でなんとなくわかったかもしれません。

 

HTMLで盛り込みたいテキスト・画像を記述して、

CSSでそれを装飾することにより、

オリジナルなWebページを作ることができるんです。

 

ブログだと、見出しや目次のデザインを変えてみるですとか。

もっと勉強すると、文章を囲むボックスやメニューバーなども、自分好みにデザインできるようになります。

 

まあ自分でできなくとも、人様が書いたコードを読んで何が書いてあるかがわかるようになれば、それだけで一歩進んだブロガーになれます!

 

 

はてなブログでHTML・CSSを編集するには

はてなブログスマホアプリ版もありますが、

HTMLやCSSはPC版でしか編集できないので、これからはPC版に限った話だということを注意書きしておきます。

 

HTML

HTMLを編集できるのは、

  • 『見たまま編集』の編集画面のHTML編集タブ
  • デザイン→カスタマイズから、
    ヘッダ→タイトル下
    記事→記事上記事下
    フッタ

からとなっています。 

 

有料版であればスマホ用にも編集可能ですが、

筆者が無料版を使っているのと、説明の簡略化のため省略します。

 

CSS

CSSの場合は、

  • デザイン→カスタマイズ→デザインCSS

から編集できます。

 

この画面ですね。

f:id:fukkatsusou:20180920014554p:plain

 

 

HTMLはいろんなところで編集できるので混乱しがちですが、

まずは記事のHTML編集、そしてデザインCSSに絞って勉強していくのがオススメです☝

 

なんとなくわかってくると思います!

 

 

最後に

今回は触りの部分だけ説明してみました。

 

次回から実際にHTMLやCSSを扱った説明をしていきます。

 

このシリーズでブログカスタマイズの楽しさを知ってもらえたらな、と思ってます!

これからよろしくお願いします!