今回は、HTMLとCSSについて書いていこうと思います。
HTMLとは？
HTMLとは、
Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略です。
コンピュータが理解できる形で書くもので、
WEBページを制作する際に使用する言葉（コンピュータ言語）の事です。
マークアップとは、
「ここからここまでは見出し」「ここからここまでは文章」というように、
マーク(目印)を付けることでコンピュータに理解してもらう作業になります。
wordpressでは、現在はブロックエディタが使われているため、
HTML等を知らなくてもブログやホームページを簡単に制作することができます。
しかし、文字の色やアンダーラインを引くなど装飾が限られています。
そこで登場するのがCSSです。
CSSとは？
CSSとは、
Cascading Style Sheets（カスケーディング・スタイル・シート）の略です。
HTMLで作った文章を装飾したり、文字や図のレイアウトを調整するなど、
Webサイトの見た目を整える役割があります。
CSSでできる事
1.文字の色やサイズの変更
HTMLで書いた文字の色やサイズの変更等を行うことができます。
例えば、このように文字のサイズや色を変えることができます。
2.装飾
先ほどの「文字の色やサイズの変更」も装飾の一部ですが、
その他にも枠を付けて背景に色を付ける等、
ホームページのデザインをより見やすく変更することが可能です。
このように枠や色を付けることも可能です
その他にも、余白の調整や、画像の装飾、アニメーションなど様々な事を行うことができます。
wordpressでのCSSの追加方法は複数ありますが、
今回は、投稿ページでできるCSSの追加方法について紹介します。
上の図のように投稿ページの下の方にスクロールすると「カスタムCSS」という欄があります。
ここにCSSのコードを入力すると上記のような装飾が可能となります。
入力例としては、
装飾をしたい部分にclassというものを指定して、
そのclassに対して装飾を指示していきます。
書き方としては、
例えば、
.class名{
color:red;
font-size:24px;
}
といった具合です。
class名は自由につけられ、1つのclass名で複数個所の装飾を同時に行ったり、
それぞれの装飾に1つずつclassをあてて装飾を行うなど方法も様々です。
具体的な方法については、また後日投稿をupできたらと思います。
まとめ
WordPressでのHTMLとCSSの活用方法についてまとめました。
WordPressはブロックエディタがあるため、
簡単にブログやホームページを作成することができますが、
HTMLやCSSを活用することでデザインの幅が広がると思うので、
興味のある方はぜひ活用してみてください。
コメント