今日はこんな疑問に少しお答えしてみます😊
＊この記事はこんな人におすすめ＊
WordPressを始めたばかりの人
CSSとHTMLについて知りたい人
今日はわたしがWordPressを始めたばかりの時につまずいた
HTMLとCSSについて
書いていきたいと思います😊
WordPressで記事を書くとき、
投稿画面から普通に文章を書いて公開すると、Wordやメモ帳で作った文章と同じような殺風景な文章が出来上がります。
もちろんこのままでも十分ブログ記事として読むことはできますが、
文字だけの文章って読みにくくないですか？🤔
アフィリエイトをするにあたって、サイトに訪れた人に最後まで記事を読んでもらうことは大前提なので、
読みたくなるようなブログにデザインしていくことはとても重要です✨
特に、
今はスマホでネットを見る人が多数
だと言われています。
ネットで記事を読む人は本を読むというより、
画面を眺める感覚でブログを読むので、
流し読みした時に、“飽きない見た目の記事“にしておくことが訪問者のブログの滞在時間を長くするコツなのです。
そこで、
というところが今回の記事のポイント😊
具体的には、こちらの記事で書いたように、
見出しをつけたり、
HTML、CSSを触ることで書いた文章に肉付けして、
読みやすいような記事を装飾することで文面が整理された文章を仕上げていきます😀
WordPressでブログを書き始める際に、
今回のテーマ、HTMLとCSSについては、ある程度の知識があった方が出だしでつまずくことも少ないと思います。
わたしがWordPressを初めて使い始めた時、他の人のブログを読んでいて
読みやすい‼
いい感じ💋
マネしたい😃
と思うことが多っかったのですが、
その度、自分が使っているテーマでどうやったら同じようなブログにデザイン出来るのか見当がつかず、
デザインを解明するのに時間ばかりがかかるので、途方にくれていました。
原因は圧倒的な知識不足。
どんな構造でサイトが出来ているのか、Webサイトの作りについてほとんど理解できていなかったからです😓
WordPressで何も手を加えていないままの画面と、デザインを加えた他のアフィリエイトターさんのブログの画面とでは
似ても似つかない見た目になっています。
基本的な知識がないと自分の理想のブログを作っていくのはとても難しく感じてしまいます。
わたしも、その絶望感からWordPressでのブログ作りを何度も挫折しかけました💦
今では、他人の作ったサイトやブログを見て、なんとなく、どんな構造になっているのか理解出来るようになってきました😊
自分の理想のブログを作るためにも、CSSやHTMLの知識は必要だと思うので、是非参考にしてみて下さいね。
＊今回の記事のテーマ＊
読みやすいブログになるためのデザインの触り方
CSSとHTMLの基本的な知識
初心者さんでも理解出来るというところをポイントに書いていきます😊
WordPressの表示がブログごとに違って見えるのは何故？*
自分のWordPressの画面と、他の人のWordPressの画面表示が違う原因は主に２つ。
- 使っているテーマが違う
- 記事の中のデザインが違う
です。
1のテーマについてはまた別記事で書きたいと思います。
２のデザインについては今回のテーマ、HTMLとCSSによるところが大きいです。
記事の中のデザインの要になる部分だからです。
WordPressのブログの記事とデザインの大切さ
HTMLとCSSについて書く前に、記事のデザインの大切さについて説明したいと思います。
例えば、同じ記事を書いても
こんな見た目の記事と
この記事では明らかに見た目の読みやすさや、
デザインが違いますよね。
これはHTMLやCSSにコードが書かれているかどうかの違いです。
ブログの読みやすさについては、男性向け、女性向け、どんな人に向けた文章なのか等、読者層によって変えることが大切ですが、
いずれにしても、読んでいて、まるで小説みたいに、文章だけが長々と続くと、読む気がなくなってくるかなと思います。
そこで登場するのが「HTMLとCSS」です。
WordPressが人気の理由は色々とありますが、
といったデザイン性も魅力の１つなのです😊❤
HTML、CSSって何？
ブログを書こうとして、情報を集めていくと、必ず出てくるHTMLとCSS。
そもそも、WordPressの画面も含め、webサイトの画面はHTML・CSS等、文字の羅列で作られています。
GoogleChromeを開いて”右クリック＞検証”を押してみて下さい。
画面の右上にサイトのhtmlのコードが表示します。
このコードをブラウザが処理することで、わたし達が見るスマホやPC画面では画像として映っているのです。
この辺はwebサイトの仕組みになってくるので、詳しくは別の記事でまとめてみます。
HTMLって何？
HTMLは文章にこのタグ『<』『>』と呼ばれる印をつけて、それぞれの部分が何かを示したテキストファイルのことです。
HTMLで文章の構造を作っていくイメージです。
例えばこんな文章があるとします😊
この文章の場合、見出しを意味する<h></h>の印と、
文章を意味する<p></p>をつけると、こんな意味が加わります。
<h>は<heading>の略、<p>は<paragrarh>の略です。
headingは英語で「見出し」、paragrarhは「文章」を意味します。
<heading>や<paragrarh>では少し長くて見づらいので実際は頭文字で省略してあります。
終わりは必ず『/』の入ったタグ『</>』で締めくくればok。
WordPressでは見出しを1から設定できるので、<heading1>、<heading2>、<heading3>・・・と数字を足して見出しを区別します。
このHTMLのテキストファイルをブラウザで処理すると・・
こんな文章になります😃
見出しの文字が大きくなって文章っぽくなりました‼
HTMLを勉強するということはこのタグの印が何を意味するのか、というところを知って、ルールを覚えることを言います。
HTMLにはこのタグがなんと、約100種類もあるんです。
WordPressで使うタグは決まってくるので全部を覚える必要はありませんが、
どのタグがどんな意味を持つのかを理解しておくと、ある程度自分で文章の構造が理解できるようになり、とても役立ちます。
WordPress HTMLを書き込む場所*
まず、WordPressではここから見出しを分けられるようになっているので、
見出し１を選択すると<h1></h1>、見出し２なら<h2></h2>のタグが自動的に挿入されます。
投稿画面から記事を書くと、ある程度の文章は出来上がった状態で投稿されるので、
<p></p>はあえて入力する必要はありません。
他にもたくさんのHTMLのタグでページができているのですが、
基本的にWordPressでは記事を書く時にHTMLを触ることが多いです。
投稿画面のこのテキストタブ↓を押して画面を切り替えてコードを入力します。
CSSって何？
次にCSSです🙂
CSSは、『HTMLでタグ付けした部分に表示の指定をするコード』になります。
HTMLで文章の骨組みを完成させ、CSSで装飾していくイメージ。
CSSではどの要素に対して表示の指定をするのか、セレクターと呼ばれる『{』『}』の括弧の中に書き込んでいきます。
“何をどうするのか“というところを、
『:（ダブルコロン）と;（セミコロン）』で挟んで入力していくのですが、
例えば、上の文章で指定した見出しをこんなデザインにしたい時、
CSSにはこう書き込きこみます。
|
1 2 3 |
#sample01{ border-left: 10px solid #F597A5; } |
このコードの意味するところは・・
sample01の指定
- border-left＝左のボーダーを
- 10px solid #F597A5にする
です。
- 線の太さは10px、solidは1本線、カラーは#F597A5
と指定されています。
カラーはカラーコード表から調べて、自分の好みのコードを入れると好きな色に指定できます。
見出し2に設定したい場合は、CSSで指定した『sample01』の指定をidのタグで属性として足します。
HTMLには
|
1 |
<h2 id="sample01"></h2> |
と書き込みます。
そうすると、見出し２に太さ10pxのピンク色の1本線が入ります。
コードの入力箇所に関してですが、
使用しているテーマによって入力する箇所が違うこともあるので、確認して入力してくださいね。
WordPress 囲いのコード*
例えば文章中で、自分の言いたいことのまとめをボックスで囲いたい時がありますよね。
こんな感じで↓まとめる箇所を作ると分かりやすいし、文章にもメリハリがつきます。
この場合も、まずCSSで”何をどうするのか”というデザインを指定します。
このピンク色の囲みBOXを作りたい場合、CSSにこのコードを入力します。
|
1 2 3 4 5 6 7 |
/* シンプル 枠 1*/ .kakomi-box1 { margin: 2em auto; padding: 1em; background-color: #fff; /* 背景色 */ border: 1px solid #FF99CC; /* 枠線 */ } |
これも、kakomi-box1をどんなデザインの囲いにするのか『{}』の中に入力してあります。
box1にしているのは、他のデザインのボックスを追加した時にbox2,box3と区別していくためです。
- margin: 2em auto;（ボックス外側の余白を2emにするという意味、autoを入力すると余白が自動算出されてボックスが中央に表示します）
- padding: 1em;（ボックス内側の余白を1emにするという意味）
- background-color: #fff; （背景色を#fffにするという意味）
- border: 1px solid #FF99CC;（枠線 を#FF99CCにするという意味）
HTMLにはブロックの要素を表す<div></div>と先ほど指指定したkakomi-box1の属性を入力します。
|
1 2 |
<div class="kakomi-box1"> </div> |
ちなみに、わたしはまだCSSのコードを自分で書けるほどのスキルはないので、
ネットから拾ってきたコードをコピペして使わせてもらっています。
そのまま貼り付けると、画面にうまく反映しないことがあり、そんな時にはHTMLやCSSの知識が役立ちます。
何でうまく画面に反映しないのか、コードの意味を確認しながら原因を探ることができますからね。
あと、モリモリ気味のデザインが好きなので、
囲みボックスの他に、記事内にマーカーペンを引いたりして結構カラフルに彩った記事を書きます♪
マーカーを引く方法はこちらの記事で書いています ⇓ ⇓ ⇓
WordPress CSSを書き込む場所*
WordPressの場合、CSSのコードを入力する箇所はいくつかあります。
この画面の
ここか
ダッシュボード上の外観の中にあるテーマエディターの中のスタイルシートを選択した
最後尾に追加していきます
どちらに書き込んでもOK。
投稿画面を確認しながら作業すると入力したコードが反映している画面を直接確認できるのでおすすめです。
InternetExploreの画面からだとコードを張り付けてもうまくいかないことがあるので、
GoogleChromeの画面から入力した方がいいと思います。
わたしも初めはInernetExploreの画面でコードを触ってたのですが、
コードがうまく貼りつかず、PCまで新しくしたのですが解消しなかったので、ブラウザの問題だったようです💦
WordPressのテーマによってはHTMLやCSSのコードの入力は不要！
WordPressにはたくさんテーマがあり、使うテーマによってブログのデザインを好みに設定できるのが魅力です😃
使うテーマによってはデフォルト設定のデザインが施されているので、
特に自分でコードを入力する必要がない場合もあります。
このブログはOPENCAGEのアルバトロスを使用しているのですが、
アルバトロスのテーマはデフォルトだと見出しのデザインはシンプルなままです。
そこで、この記事で書いたように
CSSやHTMLのコードを触る必要があり、今の記事の画面にするまで結構時間をかけてしまいました😥
こちらは同じOPENCAGEのストークというテーマを使用して書いている美容ブログの記事の画面です。
ストークにはデフォルトで見出し４まではデザインが設定されていて、
特にこのデザインを変更したいと思わない場合そのまま見出しを選択するだけでデザインが反映します。
HTMLやCSSのコードの入力は不要‼
初めからストークのテーマを使用していれば、ここまでCSSやHTMLについて勉強しなかったかもしれません。
アルバトロスのテーマはストークのテーマより前に販売されたテーマなので、使いやすく改良されているようです。
このように、デザインについては、コードを触れば変更できたりもするようなのですが、
セキュリティの問題を考えると元のデザインはあまり変更しない方がいいようです。
今からWordPressを始める人なら、ある程度デザインのオリジナルが効いて、
細かいところの設定が不要なOPENCAGEのストークはおすすめです😊
他のアフィリエイターさんやブロガーさんも使っている人が多いので、
たいていの分からないことはググればすぐに情報が出てくるので助けになると思います。
HTMLやCSSについて勉強してみよう！勉強方法は？何から始めるべき？
HTML CSS おすすめ本とアプリ
HTMLやCSSのことを学ぶ方法として
本を読む
誰かが書いたブログを読む
といった方法あります。
書籍だと結構分厚いものが多く、１から読み始めると記事を書く作業がおろそかになってしまうので、
挫折の原因になりやすいと思います。
おすすめは自分のWordPressの画面を触りながら、他の人が書いたブログ等で情報を集めて少しずつつかんでいく方法。
無料ですし、実践しながらなので身に付きやすいです。
本での勉強からスタートすると、つい「やった気になってしまう」ので遠回りになってしまいがちなんです。
取り敢えず作業をしてみて、
と思う疑問を貯めておいて、あとから本を読むと
と落とし込めます。
ただ、ネットで拾ってきた知識は誤った情報も多いですし、断片的な情報なので、
という人がいればこちらの書籍がおすすめです😃
参考書のような分厚さはありますが、
カラーで図解入り、説明も基本的なところから分かりやすく書いてあるので、初心者でも理解出来る内容でした。
後はプログラミングを勉強するこちらのアプリもおすすめです。
説明→練習の実践形式で、隙間時間に手軽にCSSとHTMLの勉強ができます。
わたしは3か月くらいかけてこのブログのデザインに全精力を注いでいたので、
先の見えない作業に一度挫折しかけ、このブログには未だに14記事しか入っていません😭
ブログを読んでもらうにはまずは記事数です！
って人は、まずはひたすら記事を書いてからデザインに力を入れることをお勧めします。
もしくは、記事を書きながら、
飽きたらデザインを変更して、徐々に自分の理想のブログに仕上げていくのもいいかもしれません😊
WordPressを始めたけど記事を投稿する画面の入力方法がよく分からない・・