無料テーマで有料テーマ級のデザインにするには
最低限HTMLとCSSの知識が必要です。
この記事ではブロガーが知っておけば有料テーマを
買う必要がなくなる最低限の知識を完全網羅できます。
また副業として開花させることができれば
もう一つの副収入を得ることができます。
是非ご覧ください
- ・HTMLとは:お絵描きです
- ・ブロガーHTML最低限知識
- ・普段はこれしか使わない7つのHTML
この記事では完全に無料テーマを推しています。
詳細は下記の記事にて記載しているので
是非ご覧になってみてください
また、ブログにて私が使っているPCの
たった4つのショートカットについてはこちら
ブロガーでも、最低限の知識は
あったほうがライティングを
効率良く進めることができるよ
外注すると高いし、
自分でやったほうが手直しができるしな
HTMLとは：お絵描きです
前記事でも書きましたが、HTMLとは
かっこよくプログラミングと言いますが、
誰でも絶対にできます。
HTMLはプログラミングの骨組みです。
それを他の言語で肉付けしていくのがプログラミングです。
以下の画像のようにブログではただ文字を
打っていたつもりでも、文章の前には<p>と最後に</p>
が隠れています。
その他にも写真の前には<img>や、見出しの前には<h>が
見えない所でくっついています。
このように文字の前に必ず<>のなにかがあるのが
HTMLです。
これがHTMLの基本の形です。
ここで終わりだよ！の開始合図として/(スラッシュ)マークを
タグの前に付けるのがルールです。
他にも基本のルールがあります。
- ・入れたい文字の前後に＜＞(例外あり)
- ・ここでこの文字は終わりますの合図で＜/＞をいれる
- ・＜＞の中に日本語や大文字を入れない
- ・スペース(空白)を入れない
- ・＜＞内は全て半角英数字
ここまで覚えれば君も
プログラマーだよ！
これしかルールないんだな～
簡単じゃん！！
ここからいよいよ
実践編だね♪
私がブログで使っているHTMLは7つ
HTMLの＜＞内に入る要素は112種類あります。
しかしそれらを全て覚える必要はなく、
まずはブログで使うものだけ覚えていきましょう。
ブログ(wordpress)で私が使っているHTMLの種類は
7種類ほどしかありません。
P：文章の段落
何気ない文章を書くときはこれを使います。
| ＜ｐ＞文章＜/ｐ＞ | 文章 |
|---|
h1～6：見出し
1～6で1から大きい順に使ってます。
| ＜h1＞文章＜/h1＞ | 文章 |
|---|
img：画像を貼る時に使用
imgは文章の前のみに＜＞が必要で後ろにはいりません。
また、画像が読み込めない時のためにimg srcの次に
alt=””を入れます。
その他画像特有のルールがあり
- ・imgの後にこの画像を使います！宣言のsrcを入れる
- ・imgとsrcの間に半角スペース
- ・srcの後にimg src=”ここに画像のファイル保存先URLを入れる”
- ・img src=””の後にalt(画像が読み込まなかったときに文字がでてくれる)
- ・基本形はimg src=”保存先”alt=”画像を文字で”
| ＜img src=”画像URL”＞ | 画像がでます |
|---|
a：リンク貼る
他サイトのURLを貼る時に使える
- ・＜a href=”URL”＞リンクを入れたい文字を挟む＜/a＞
- ・リンク先の宣言にhref=””を使うからaとhrefはセット
- ・基本の形は＜a href=”URL”＞リンクが入る＜/a＞
- ・写真の中とかにもで囲めば貼れる
| とりあえず＜a href=”リンク先”＞前の記事＜/a＞に飛びます | とりあえず前の記事に飛びます |
|---|
ul+li：リストを作りたい時に使う
ulが親の項目でliが子の項目
liの前に点が付いてリストっぽくなる。
- ・＜ul＞で＜li＞リスト項目＜/li＞を＜/ul＞囲む
- ・1つのまとまりの最初と最後に＜ul＞
- ・リスト項目1つづつに＜li＞を入れる
- ・＜ul＞を＜ol＞にすれば・が番号(1とか2とか)になる
| ちょこデニムのブログでは＜ul＞＜li＞株＜/li＞＜li＞金融知識＜/li＞＜li＞洗脳＜/li＞＜li＞豆知識＜/li＞＜/ul＞を学べます | ちょこデニムのブログでは
|
|---|
br：改行できます
1行が長くなる時に改行することができます
brもimg同様後ろに＜/＞が不要です。
| 改行すると＜br＞こんな感じです | 改行すると こんな感じです |
|---|
span,div：HTMLに名前をつけることができます
spanとdivはHTMLに名前を付けて
クラス分けすることができます。
CSSをする時にとても重要になってきます。
一応今は頭の隅に入れておいてください
| 赤い線をつける時とかに＜span style=”border-bottom: solid 5px red;”＞ここだけにラインを引きたい時に＜/span＞使えます＞ | 赤い線をつける時とかにここだけにラインを引きたい時に使えます |
|---|
以上が私が普段使用しているHTMLです。
これ以外にも使用しますが、正直112種類
全ては覚えていません。
なので今記載している7つを覚えるだけで他サイトとは違い、
有料テーマに匹敵するほどのサイトを作れます。
まとめ：7つ覚えて1万円分の知識
これらのHTMLの知識を持つことで有料テーマを
使わずとも見やすいサイトを作ることはできます。
たった7つなので是非これらを使い素敵なサイトを
作ってください
これとCSSを覚えたら
副業の道が増えるね♪
ブログの見た目も良くなるし
覚えて損なし！！
これだけでも
覚えちゃってね～
これらを覚えた後は実践と反復練習をすると
どんな場面でも使えるようになります。
私がHTMLを覚えるための勉強教材は
本とオンラインプログラミングスクールでした
本ではこちらがおすすめです
この本は2019年に発売したのですが、
現在(2021年)の楽天デザイン・グラフィック部門ランキングでも1位
をとっているとても人気のある1冊です。
この本を読んでおけばHTMLとCSSの使い方は
完璧に覚えることができます。
また、その他ページデザインに関することや
画像無料素材ページや優れたデザインのページを
知ることができます。
買って損はない最強のHTML＆CSS入門書籍です！！！
また本を購入する前にコチラの記事でレビューや、
記事のまとめ、wordpress用に補足情報もたくさん記載して
あります。
購入前に是非一度読んでから購入した方が良いです。
この本をきっかけにプログラミング
って意外とできるかも？ってなりました♪
プログラミングを初めて一冊目の本
がこの本だったゾ
わかりやすく、画像もいっぱいあるから
読みやすいよ
プログラミングスクールはこちら
こちらでプログラミングを受講し、私は覚えました。
cmで流れている通り実際に働いている現役講師や、
コースの充実さがすごく、やってよかったと本当に思っています。
詳しくはこちらのサイトで記載あるので
悩んでいる方はほんとにおすすめなので是非無料体験からでも！
口コミサイトはこちら
この記事と合わせて読めばブログラミング
をある程度習得することができます。
