どのような記述をすると、どう表示されるのかを実例で解説していきます。
ちなみに上記の記事タイトル「デザインについての解説」は 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通り、みんなそれぞれ違います。でも、興味があることには思いっきり熱中する・・・これはみんなに共通して言えること。大切なのはどう教えるかではなく、どうやったら興味を引き出せるか、ということです。当塾のマンツーマン指導では、講師が授業時間中つきっきりで、様々な角度から生徒を見つめ、「この生徒には何が必要なのか」「どうやったら伸びるのか」を徹底的に考えていきます。大勢の中では「みんなはわかっているから」「はずかしいから」聞けなかった
画像を左側に回り込ませる場合
得意なもの、苦手なもの。好きなこと、嫌いなこと。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>で挟む。