本日は久々の「WordPress（ワードプレス）使ってみた」シリーズ続編です。
今回は、HTMLをつかっての記事装飾方法の一部を簡単に紹介します。
【HTMLとは】
HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）、略記・略称HTML（エイチティーエムエル）とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。※Wikipedia（下記ページ）より引用
Wikipedia：HTML
HyperText Markup Language
イマイチよくわからないですよね～。僕もよくわからなかったのですが、ようは、コンピュータ用の言語のようなものなんですね。プログラミングをするにも、コンピュータの編集をするにも、我々に見えている画面や文字とは別の『コンピュータ言語』を使用しないといけないんですね。
「コンピュータが理解できる言語（記号や半角英数字）をコンピューターに打ち込むと、我々が理解できる形で、モニター画面に反映される」といったものです。
※画像はイメージです。本投稿内容に直接関係はありません。
過去の投稿『【体験談】WordPress（ワードプレス）使ってみた』シリーズでは、画面上記にある『ツールバー』を利用して、文章を装飾する方法を説明してきました。代表的なものに下記がありましたね。
- 文字を太くする
- リンクを貼る
- 文字を左揃え、右揃え、中央揃え
- 顔文字の挿入
- 文字の色選択
しかし、それにも限界があります（たぶん。僕の知る限り）。
文字のサイズを変えたり、任意の場所で、（1行開けずに）段落を変えたり、下線を引いた入りするにはどうすればよいのでしょう。もしかするとツールバーからでも出来るのかもしれませんが僕はその方法をしりません。ググっても、HTMLをいじって修正する方法しか見当たりませんでした。
そこで必要な装飾方法のみHTMLを調べ、状況に応じて使うようにしています。本日は一部のみとなりますが、下記HTMLを紹介します。
- 文字に下線を引く
- 任意の箇所で（1行開けずに)段落を変える
- 文字のサイズを変える
- ページ内リンクに飛ばす
以前の投稿でも説明させていただきましたが、WordPressには、コンピュータ編集用のページ『テキスト』と、我々にどのように見えるかが確認できる『ビジュアル』のページがあります。
テキストのページを選択すると、上記のように</strong>や</span>なんかの文字（記号）が見えますね。これがHTMLで、文章の前や後に付けることで、その文章を装飾することが可能になります。
それでは１つずつ見てきましょう。
１．文字に下線を引く
これは極めて簡単です。下線を引きたい文章の前後に <u> ●●● </u> を付けるだけです。※●●● に下線を引きたい文章が入ります。
もちろん編集はテキストページで行います。
『文字に下線を引く』の前後に『<u>文字に下線を引く</u>』 と打ち込みます。すると下記のように下線が表示されます。
文字に下線を引く
［HTML］
<u>文字に下線を引く</u>
※以下2015/10/26追記
ツールバーから簡単に下線を引く方法がありましたので、追記します。
入力画面上部のツールバーに『フォーマット』という項目があります（テーマ『Twenty Fourteen』の場合）。
その右側にあるプルダウン（逆三角形の印ね）をクリックすると、下記のように、1クリックで太字や下線が引ける、アイコンが表示されます。
下線を引きたい文字を選択し、この『 U 下線 』をクリックするだけで、下線が引けるのでした。 ※ここまでが後記文
２．任意の箇所で（1行開けずに）
段落を変える
通常、文章を折り返したいときはキーボードの『Enter』キーを押すと改行されます。しかしWordPressの場合、Enterキーを押すと、下記のように1行開いて改行されます。※この文章のように、行の文字数がいっぱいになって、次の段に移る場合は、1行開かずに改行されます。
これを任意の箇所で1行開けずに改行したい場合に役立つのが<br>タグです。
【通常のEnterを使った改行の場合】
⇓下記のように『開けずに）･･･』と『段落を･･･』の間に1行間隔が開いてしまいます。
任意の箇所で（1行開けずに）
段落を変える
【<br>タグを使った場合の改行】
⇓下記のように、1行開かずに改行できました。
任意の箇所で（1行開けずに）
段落を変える
こちらも操作自体は簡単です。開業したい場所に<br>を入れるだけです。
［HTML］
任意の箇所で（1行開けずに）<br>段落を変える
３．文字のサイズを変える
⇑の文字、ちょっと大きいですよね。
文字のサイズ変更には、<font size=”〇”>●●●</font>を使います。
〇には半角英数字1～5が、●●●には装飾したい文章が入ります。※1が最も小さく、5に向かうほど大きくなります。
上記の場合フォントサイズ5を使用しています。
<font size=”5″>文字のサイズを変える</font> と
文字のサイズを変える と、なります。
［HTML］
<font size=”5″>文字のサイズを変える</font>
４．ページ内リンクに飛ばす
例：『ページ内リンク（出発点）』をクリックすると、同じページ内の『ページ内リンク（着地点）』が上部に表示される位置に飛ぶ仕組みのことです
下記のリンクをクリックしてみてください。
着地点に飛んだのではないでしょうか。
これを可能にするHTMLが
■出発点：<a href=”#×××”>●●●</a>
上記タグ内×××には、任意の半角英数字を、●●●には、リンクの出発点の文字を入れてください。
■着地点：<h2 id=”×××”>●●●</h2>
上記タグ内×××には、上記出発点の×××と同じ半角英数字を、●●●には、リンクの着地点の文字を入れてください。
［HTML］
<a href=”#link”>ページ内リンク（出発点）</a>
<h2 id=”link”>ページ内リンク（着地点）</h2>
ページ内リンク（着地点）
※ちなみに、僕がむかーし買って一読していた書籍が下記になります。2008年に出版されたものですが、このブログを始めてから、非常に役立っています。
できるポケット仕事 使って覚えるHTML&CSSの基本がマスターできる本 改訂版 Internet Explorer7/6対応 (できるポケット）
佐藤和人 著
出版社：インプレスジャパン
※当ブログでは、あくまでIT弱者の僕が知識ゼロからHPとブログを作る中で格闘したことを紹介すると共に、自身の知見蓄積にしていこうと思い投稿したものとなります。