top
かんがえたこと

[ブログの書き方]必要なhtmlタグをバッチリ解説

妖怪たんころりん vs カルロス
Pocket

カルロスブログの作り方、3回目の続きです。

□第1回:[無料ブログ作成術]0.初期設定 #カルロスブログの作り方

□第2回:[脱アメブロ!]1.無料でブログを立ち上げる #カルロスブログの作り方

□第3回:[読者全員サービスあり!]2.ブログを書く #カルロスブログの作り方

今回はタグの意味から解説し、小技を紹介していきます。

3.ブログを書く

前回、丸投げでタグ編集の原稿を公開しました。
Webが苦手な人はそこでめげてしまったかもしれません。
でもご安心ください。
今から一つ一つ意味を記していきます。

3−1 タグ解説

まず第1回の初期設定で辞書ツールにタグを登録しておきました。
それから解説していきます。

(1)br:<br/><br/>

改行をします。
以下をHTMLタグ編集に入力します。

カルロスは天才<br/><br/>

カルロスはカッコイイ<br/><br/>

カルロスは偉大<br/><br/>

カルロスは優しい<br/><br/>

するとプレビューではこのように表示されます。

[これでばっちり!タグ解説]3.ブログを書く #カルロスブログの作り方

このように改行されていますね。

僕はLivedoorブログで書いている時には1行ずつ空いている方が見やすくなると思いました。
そこで<br/>を2つ重ねていました。

(2)h2:<h2></h2>、h4:<h4></h4>

小見出しを作ります。
具体的に見たほうが早いでしょう。
以下をHTMLタグ編集に入力します。

<h1>カルロスは天才</h1>

<h2>カルロスはカッコイイ</h2>

<h3>カルロスは偉大</h3>

<h4>カルロスは優しい</h4>

するとプレビューではこのように表示されます。

[役立つ小技のオンパレード]3.ブログを書く #カルロスブログの作り方

小見出しになっています。
これはパソコンから見た具合なので、スマホからも確認するといいと思います。
僕はh2とh4を使うことをオススメします。
個人の趣向でお選びください。

(3)bl:<blockquote></blockquote>

網掛けをします。
以下をHTMLタグ編集に入力します。

<blockquote>

カルロスほどすごいやつは今まで見たことがない。

</blockquote>

するとプレビューではこのように表示されます。

[役立つ小技のオンパレード]3.ブログを書く #カルロスブログの作り方

このように網掛けされます。
僕はこれを結構多用しています。
読む人が視覚的に理解しやすいからです。
的確に使って見やすくしていきましょう。

ちなみにですが他の方法でも出来ます。

[役立つ小技のオンパレード]3.ブログを書く #カルロスブログの作り方

画像のように網掛け死体部分をドラッグして、赤丸のボタンを押します。
すると<blockquote></blockquote>で囲まれます。
この方法でも出来ますが、辞書ツールに登録して作業したほうが早く書けると思います。

(4)b:<b></b>、u:<u></u>

<b></b>は太文字で、<u></u>は下線を引きます。

<b>カルロスは純粋な日本人である。</b><br /><br />

<u>カルロスは実はピアノが弾ける</u>

するとプレビューではこのように表示されます。

[役立つ小技のオンパレード]3.ブログを書く #カルロスブログの作り方

太字下線で書けています。
ここまでくれば、大体要領が得られてきたのではないでしょうか。

(5)いんよう::<font size=”2″>引用元:</font>

これは画像の引用元を明記するために作ったタグです。
画像編集の際に使います。
僕は最近以下のように使っています。


青年海外協力隊発足50周年企画|私のとっておきの1枚!JICAボランティア

引用元:青年海外協力隊発足50周年企画|私のとっておきの1枚!JICAボランティア

このような具合です。
タグをいかに示します。

<blockquote>

<a href=”https://50th-jocv.jica.go.jp/” target=”_blank”>
<img src=”http://crls1031.com/wp-content/uploads/2015/08/d099d886ed65ef765625779e628d2c5f.jpeg” alt=”青年海外協力隊発足50周年企画|私のとっておきの1枚!JICAボランティア” width=”420″ height=”264″ class=”alignnone size-full wp-image-2679″ /></a>

<font size=”2″>引用元:<a href=”https://50th-jocv.jica.go.jp/” target=”_blank”><u>青年海外協力隊発足50周年企画|私のとっておきの1枚!JICAボランティア</u></a><br/></font>

</blockquote>

※ <a href・・・></a>:リンク先に飛ぶように設定します。
※ <img・・・>:画像を表示するように設定します。

ということで”青年海外協力隊発足50周年企画|私のとっておきの1枚!JICAボランティア”(https://50th-jocv.jica.go.jp/)というサイトから画像を引用していると示すことが出来ます。

次回は役立つ小技集!

今回はタグの説明だけで終えます。
次回は実際にどのようなアプリ使ったらいいかや、画像の効果的な方法を載せます。
乞うご期待( ´ ∀ ` )


もっと楽しく!


カルロスブログにクリックをお願いします。

カルロスと会いたい方、いつでも会いましょう!

小林勝宗
TEL:07066863561 or 08011269638
Facebook:https://www.facebook.com/kobayashi.katsuhiro
Twitter:https://twitter.com/crls1031
LINE:crls1031
Schedule:http://bit.ly/1F3ljpn
Mail:carlos1031.ind@gmail.com

この記事が気に入ったら
いいね!しよう

カルロスをTwitter で
Pocket

コメントを残す

*