ブログにちょっとした装飾をしてみましょ!

どうも、よろづ屋のBossことまりちゃんです。

今回は珍しくJimdoCafe 久留米でブログを書いてみます。

よろづ屋のブログにも書いたのですが、最近制作や勉強する時間よりも、ブログを書く時間の方が圧倒的に長いことに疑問を抱きつつも、今日もブログを書いています。

そんな今回は、ブログでも使える『簡単なHTMLタグ』について書いてみまーす(^^)/

 

よろづ屋
Bossです

HTMLタグってなに??

HTMLとは、Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略で、タグというマークを使うことで、HTML文書の構造や意味を指定したり、文字の大きさや色を変えたり、画像を表示させたりすることができます。

最近ではHTMLタグがわからなくても、前述したような書式の効果を簡単に反映させることができるようになりました。

Jimdoだったら太字にするのなんてボタンひとつですよ!すごい!!

 

そんな便利な機能があるわけですが、たまにうまく指示通りに反映されないことがあります。

そんなときにに必要になってくるのがHTMLのちょっとした知識です。

 

HTMLにちょっと入力するだけでできる簡単なタグを覚えて、ブログに装飾してみましょう!

HTMLを入力するには?

普通に文章にタグを打ち込むだけでは反映されませんので、HTML編集モードに切り替える必要があります。

Jimdoの場合はココです、ココ。

よろづ屋

では実際にJimdoの編集モードを使って、タグを入力していきましょう!

基本のタグ入力の仕方

<○>今日は晴れです</○>

 

タグを入力するときは、開始タグと終了タグで要素を囲みます。今回は「今日は晴れです」という文章が要素になります。

最初の<○>を開始タグ、文末の</○>が終了タグとなり、"< >""で囲まれたものが「○○しないさい」という命令だと思ってください。

 

 

どんな命令があるのか、今回はすぐに使用できそうなHTMLタグだけをまとめてみました!

 段落を意味する文字列に使用します。Jimdoでは入力しただけで<p>タグがつきます。

<p>今日は晴れです。</p><p>明日は雨のようです。</p>

 

表示例

 今日は晴れです。

 明日は雨のようです。

 太字にするタグです。

<b>ここだけ</b>太字にしてみます。

 

表示例

 ここだけ太字にしてみます。

※Webフォントにより、JimdoCafe 久留米のホームページでは<b>タグが反映されません(><)

 イタリック体(斜体)にするときに使用します。

<i>文字が斜めになります。</i>

 

表示例

 文字が斜めになります。       

 テキストに下線を引きたいときに使用します。

テキストに<u>下線をひきます。</u>

 

表示例

 テキストに下線をひきます。

 昔書いた文章の内容の訂正などに使用します。     

<s>通常価格:5,000円</s><p>特別価格:2,000円</p>

 

表示例

 通常価格:5,000円

 特別価格:2,000円       

 文章を削除するときに使用します。

<del>期間限定!送料無料</del><p>現在は終了しています。</p>

 

表示例

 期間限定!送料無料

 現在は終了しています。

 テキストにルビをふるときに使用します。

<ruby>我輩<rp>(</rp><rt>ワガハイ</rt><rp>)</rp></ruby>は猫である。

 

表示例

 我輩ワガハイは猫である。

※(ルビ非対応ブラウザ)

 我輩(ワガハイ)は猫である。

 改行するときに使用します。(※終了タグは不要です)

よろづ屋<br>代表<br>永野真里

 

表示例

 よろづ屋
 代表
 永野真里

ざっと思いついたのを書いてみたんですけど、簡単なものだけでもこれぐらいあります。

文字を太字にする<b>タグと、文字を斜めに表示させる<i>タグは、Jimdoだとボタン1つでもできますが、HTMLタグを少し打ち込んでみても同じように書式が反映されるんですね!

 

文字を太字にする<b>タグはJimdoのHTML編集機能を見てみると<strong>に、文字を斜め(イタリック)にする<i>タグは<em>タグになっています。

<strong>タグはテキストに重要性を持たせる、<em>タグは文章の意味合いとして強調すべきときに使用するという、それぞれの違いがあります。

<b>や<i>タグは、文字を装飾して違いを出したいときに使用するタグとして覚えておくといいですね。

まとめ

どうでしたか?

HTMLをちょっと編集するだけで表現できることがある、ということに気づいていただけたのではないかと思います。

しかも、HTMLを編集できるとか「私って意外とできるじゃん!」というデキる感もハンパないw

 

実際に自分でHTMLタグを理解すると、表現の幅がもっと広がっていきます。

最初から全部のタグと意味を理解するのは無理だと思いますが、ちょっと違う表現をしてみたいというときには、ぜひ挑戦していただけたらと思います!