デザインについての解説

どのような記述をすると、どう表示されるのかを実例で解説していきます。
ちなみに上記の記事タイトル「デザインについての解説」は H1である。

大見出し（h1)の見え方

H1は通常記事の中では使わない。1ページの中で複数のH1を使うのは好ましくないからだ。
このテーマでは記事タイトルがH1になる設計なので記事内では使わないほうがいい。

記述の仕方
<h1>大見出し（h1)の見え方</h1>

中見出し（H2)の見え方

H2は記事の中で最もよく使う見出しです。

記述の仕方
<h2>中見出し（h2)の見え方</h2>

小見出し（H3)の見え方

H3はH2の下位でもう少し小さな見出しとして使う。

<h3>小見出し（h3)の見え方</h3>

極小見出し（H4)の見え方

H4はあまり使うことは無いと思う。ただ単に文字を大きく太文字にしたいときはH4を使うのでは無く、文字のデザインで表現しよう。

<h4>極小見出し（h4)の見え方</h4>

文字の大きさや色の記述の仕方

大きい文字　文字LLL

大きい文字　文字LL

大きい文字　文字L

標準の文字

小さい文字　文字S

記述の仕方
<span class="LLL">大きい文字　文字LLL</span>
<span class="LL">大きい文字　文字LL</span>
<span class="L">大きい文字　文字L</span>
標準の文字
<span class="S">小さい文字　文字S</span>

太字　　色緑　　色茶　　色赤　　色青　　色オレンジ　　黄色マーカー

記述の仕方
<span class="b">太字</span>
<span class="green">色緑</span>
<span class="tya">色茶</span>
<span class="aka">色赤</span>
<span class="ao">色青</span>
<span class="orange">色オレンジ</span>
<span class="line">黄色マーカー</span>

文字の大きさや色の表現は class=”” の中に入れるものの組み合わせ

例えば

大きな文字Lで太字で黄色マーカーの場合

<span class="L b line">大きな文字Lで太字で黄色マーカーの場合</span>

大きな文字LLLで太字で赤の場合

<span class="LLL b aka">大きな文字LLLで太字で赤の場合</span>

文字の大きさや色の種類はCSS（スタイルシート）で指定することで自由に増やすことができる。このワードプレスでは「カスタムCSS」というプラグインを使っていて、そこにCSSを書き込んでやることになる。

画像と文章の配置

画像を右側に回り込ませる場合

　得意なもの、苦手なもの。好きなこと、嫌いなこと。100人いれば100通り、みんなそれぞれ違います。でも、興味があることには思いっきり熱中する・・・これはみんなに共通して言えること。大切なのはどう教えるかではなく、どうやったら興味を引き出せるか、ということです。当塾のマンツーマン指導では、講師が授業時間中つきっきりで、様々な角度から生徒を見つめ、「この生徒には何が必要なのか」「どうやったら伸びるのか」を徹底的に考えていきます。大勢の中では「みんなはわかっているから」「はずかしいから」聞けなかった

<img class="float_right" src="http://sll.heteml.jp/aotajuku/wp-content/uploads/2016/06/Fotolia_4156958_S-e1465192457566.jpg" width="200" />　得意なもの、苦手なもの。好きなこと、嫌いなこと。100人いれば100通り、みんなそれぞれ違います。でも、興味があることには思いっきり熱中する・・・これはみんなに共通して言えること。大切なのはどう教えるかではなく、どうやったら興味を引き出せるか、ということです。当塾のマンツーマン指導では、講師が授業時間中つきっきりで、様々な角度から生徒を見つめ、「この生徒には何が必要なのか」「どうやったら伸びるのか」を徹底的に考えていきます。大勢の中では「みんなはわかっているから」「はずかしいから」聞けなかった

画像を左側に回り込ませる場合

<img class="float_left" src="http://sll.heteml.jp/aotajuku/wp-content/uploads/2016/06/Fotolia_4156958_S-e1465192457566.jpg" width="300" />　得意なもの、苦手なもの。好きなこと、嫌いなこと。100人いれば100通り、みんなそれぞれ違います。でも、興味があることには思いっきり熱中する・・・これはみんなに共通して言えること。大切なのはどう教えるかではなく、どうやったら興味を引き出せるか、ということです。当塾のマンツーマン指導では、講師が授業時間中つきっきりで、様々な角度から生徒を見つめ、「この生徒には何が必要なのか」「どうやったら伸びるのか」を徹底的に考えていきます。大勢の中では「みんなはわかっているから」「はずかしいから」聞けなかった

画像を右側に配置するときは「class=”float_right”」。左側なら「class=”float_left”」。
この犬の画像の元のサイズは 600×402 なのですが、「width=”300″」のように画像の横幅を指定してやると勝手に画像が縮小される。元画像より大きく指定すると画像がぼけるのでやらないこと。

画像を上中央に配置する

得意なもの、苦手なもの。好きなこと、嫌いなこと。100人いれば100通り、みんなそれぞれ違います。でも、興味があることには思いっきり熱中する・・・これはみんなに共通して言えること。

<div class="center"><img src="http://sll.heteml.jp/aotajuku/wp-content/uploads/2016/06/Fotolia_4156958_S-e1465192457566.jpg" width="200" /></div>
　得意なもの、苦手なもの。好きなこと、嫌いなこと。100人いれば100通り、みんなそれぞれ違います。でも、興味があることには思いっきり熱中する・・・これはみんなに共通して言えること。

画像を中央に配置する場合は「<div class=”center”>　　</div>」（画像を<div>で挟む。