無料ブログ困ったときのHTMLのカテゴリ記事一覧

  • ホーム
  • »
  • 無料ブログ困ったときのHTML

カテゴリ:無料ブログ困ったときのHTML

無料ブログ困ったときのHTMLのカテゴリ記事一覧。居眠りばかりしている社長を見て、この会社の将来はあるのかな!?と不安を抱くようになり、好きな車で自由にドライブがしたくてネットビジネスをはじめました。会社勤めしながらでもできるアフィリエイトで気ままに副業生活
no-image

無料ブログ困ったときのHTML
HTMLを使って箇条書きの入れ子にする方法は?箇条書き・箇条書きの入れ子の行間の調整法は?についてまとめました。HTMLの箇条書きについてはこちらの記事をご覧ください。⇒ HTMLを使って箇条書き、記号・数字を表示する方法入れ子とはこんな感じです。項目1項目1-1項目1-2項目2項目2-1項目2-2項目1を、さらに箇条書き(ここでは項目1-1と項目1-2)にしたいときに使うHTMLです。記事を書い...

記事を読む

無料ブログ困ったときのHTML
ブログ記事に画像を貼り付けると、説明しやすくなって効果的になります。ということで、ブログに貼り付けた画像に文字を回り込みさせるHTMLを覚えておくと、とても便利です。特に無料ブログは、画像に文字を回り込みさせる機能がついていないこともありますので、役に立ちます。ブログに画像を貼り付けると、画像のHTMLは下のようになっています。↓<img src="画像が保存されている場所(URL)">この画像のHTM...

記事を読む

無料ブログ困ったときのHTML
ブログの記事を書いていると、文字を横にズラズラ並べるより、縦に並べた方がスッキリして見やすくなることがあります。箇条書きのが見やすいよな~と思うのがこれですね。お馴染みのYahooのトップ画面です。↓出典:http://www.yahoo.co.jp/これを横に並べてみると、報道規制発言 幕引き狙う自民、ギリシャ議会 国民投票を承認、台湾爆発470人負傷 邦人2人も、紫式部像 パンフと実物大違い見づらいしわかりづらいですよね。というこ...

記事を読む

無料ブログ困ったときのHTML
ブログで表を作るときのHTMLタグがなかなか理解することができなかったので、あらためてまとめてみました。ブログで表を作るためには、下のようなTableタグを使います。<table>ここに表の行列になるHTMLタグを入れる</table>この<table>~</table>の中に行列を表示するHTMLタグを入れていきます。行を表示するには下のように、trタグを使います。<tr>ここに文字を書く&#...

記事を読む

無料ブログ困ったときのHTML
無料ブログの文字サイズ変更は簡単にできます。大・中・小の3種類を簡単に選択できるようになっています。文字サイズ変更のHTMLコードは、font-sizeを使います。FC2ブログでは、このアイコンをクリックすれば簡単に文字サイズ変更ができます。↓実際の文字サイズは、下の通りです。↓大中小この3種類で間に合ってしまうのですが、ちょっと慣れてくると記事の文字サイズを所々変えてみたいと思うことがあります。無料ブログ...

記事を読む

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 カテゴリ
 タグ
None

HTMLの箇条書きを入れ子にするには?行間の調整法は?

HTMLを使って箇条書きの入れ子にする方法は?
箇条書き・箇条書きの入れ子の行間の調整法は?

についてまとめました。


HTMLの箇条書きについてはこちらの記事をご覧ください。
⇒ HTMLを使って箇条書き、記号・数字を表示する方法



入れ子とはこんな感じです。
  • 項目1
    • 項目1-1
    • 項目1-2
  • 項目2
    • 項目2-1
    • 項目2-2

項目1を、さらに箇条書き(ここでは項目1-1と項目1-2)にしたいときに使うHTMLです。

記事を書いていて、箇条書きを箇条書きしたいというときが出てきます。

この箇条書き、入れ子のHTMLを覚えておくと便利です。




箇条書きを入れ子にするHTML


<ul>

<li>項目1
<ul>
<li>項目1-1</li>
<li>項目1-2</li>
</ul>
</li>

<li>項目2
<ul>
<li>項目2-1</li>
<li>項目2-2</li>
</ul>
</li>

</ul>

<li>項目1</li>項目1と</li>の間に

<ul>
<li>項目1-1</li>
<li>項目1-2</li>
</ul>


を入れるイメージです。


また、入れ子にした箇条書きを数字で表示するには

<li>項目1</li>項目1と</li>の間に

<ol>
<li>項目1-1</li>
<li>項目1-2</li>
</ol>


を入れればOKです。



箇条書きを数字の入れ子にするHTML


<ul>

<li>項目1
<ol>
<li>項目1-1</li>
<li>項目1-2</li>
</ol>
</li>

<li>項目2
<ol>
<li>項目2-1</li>
<li>項目2-2</li>
</ol>
</li>

</ul>



次に、箇条書きの行間を調整する方法です。

箇条書きの行間を調整するHTML


標準の行間はこんな感じです。

  • 項目1
  • 項目2


ちょっと行間がつまり過ぎて見づらいときに、下のようなHTMLを<li>に追加します。

行間を調整するHTML
<li style="line-height:行間の数値を入れる ;">


ここでは行間の数値はemを使います。
3em分行間を広げます。

  • 項目1
  • 項目2


標準の行間より広くなったので、見やすくなりましたね。




最後まで読んでいただき、ありがとうございます。





スポンサーサイト

ブログに貼った画像に文字を回り込みさせるHTML

mawarikomi.pngブログ記事に画像を貼り付けると、説明しやすくなって効果的になります。

ということで、ブログに貼り付けた画像に文字を回り込みさせるHTMLを覚えておくと、とても便利です。


特に無料ブログは、画像に文字を回り込みさせる機能がついていないこともありますので、役に立ちます。


ブログに画像を貼り付けると、画像のHTMLは下のようになっています。

<img src="画像が保存されている場所(URL)">



この画像のHTMLのうしろに、画像に文字を回り込みさせるHTMLを追加します。

配置を指定するalign(アライン)を使います。
alignの意味は、一列に整列する・提携する・調節するです。.

画像のHTMLと配置を指定するalignを組合わせてみます。

<img src="画像が保存されている(URL)" align="画像を回り込みさせる方向">


画像を回り込みさせる方向の場所に配置を指定する値を入力します。

画像の位置入力する値HTML
right<img src="画像が保存されている(URL)" align="right">
left<img src="画像が保存されている(URL)" align="left">





画像が右で文字が左の場合

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ





画像が左で文字が右の場合

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ



ちゃんと、文字が画像に回りこんでいますね。
でも、なんとなく画像と文字がくっつきすぎていて見づらいですね。

画像のまわりに余白をつけるときに使うHTMLがあるんです。

marginです。

ここでは、marginを無料ブログでも簡単に使える方法を一覧にしました。
余白サイズ(値)余白が入る場所HTML
値が1つ上下左右style="margin:値1;"
値が2つ値1が上下、値2が左右style="margin:値1 値2;"
値が3つ値1が上、値2が左右、値3が下style="margin:値1 値2 値3;"
値が4つ値1が上、値2が右、値3が下、値4が左style="margin:値1 値2 値3 値4;"


この中で、値を4つ入れるHTMLを覚えておけば迷いもなくなります。

時計回りに、上・右・下・左です。

<img src="画像が保存されている(URL)" align="画像を回り込みさせる方向" style="margin:値1 値2 値3 値4;">


値は半角スペースでつないで、px(ピクセル)で入力します。


画像が左で文字が右の場合を使って、右に余白を作ってみます。

align="left" style="margin:0px 20px 0px 0px;"

ここでは、画像の右に20pxの余白をつくります。
上 右 下 左:0px 20px 0px 0px


ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ



画像と文字の間に余白ができました。

ぴったりと画像と文字がくっついているより、ちょっと余白が空いているほうが見やすいですね。



文字が画像に回り込むタイミングは、文字の行数が画像の高さ以上になったときです。

下の画像&文字をみると、画像を小さくしたことで文字が回り込みが早くなっていますね。

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ




画像に文字を回り込みさせたあとに、回り込みはここで終了というHTMLも忘れず入れましょう。

画像と文字の位置HTML
画像が左で文字が右<br clear="left">
画像が右で文字が左<br clear="right">
画像が左右で文字が真ん中<br clear="all">




回り込み解除をしないと、そのあとの文章や画像の位置がぐちゃぐちゃになってしまいます。

allは、すべての回り込みを解除してくれるので<br clear="all">を覚えておくと便利です。



最後まで読んでいただき、ありがとうございます。





HTMLを使って箇条書き、記号・数字を表示する方法

ブログの記事を書いていると、文字を横にズラズラ並べるより、縦に並べた方がスッキリして見やすくなることがあります。


箇条書きのが見やすいよな~と思うのがこれですね。
お馴染みのYahooのトップ画面です。

yahoo.png
出典:http://www.yahoo.co.jp/


これを横に並べてみると、

報道規制発言 幕引き狙う自民、ギリシャ議会 国民投票を承認、台湾爆発470人負傷 邦人2人も、紫式部像 パンフと実物大違い

見づらいしわかりづらいですよね。


ということで、ブログ記事の見やすさ・わかりやすさを追求してみたいと思います。


HTMLタグで、箇条書きにする方法をまとめました。


HTMLタグの箇条書き一覧


  1. 箇条書き(番号なし)

  2. 箇条書き(番号なし+記号)

  3. 箇条書き(番号あり)




箇条書き(番号なし)


<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>


表示結果

  • 項目1

  • 項目2

  • 項目3




箇条書き(番号なし)にするには、ulタグを使います。
ulは、Unordered List(アンオーダード リスト)の略です。

番号の付かないリストという意味です。

<ul>~</ul>タグの中に、項目を記入する<li>~</li>タグを入れていきます。

上の例では、項目1~項目3になっていますが、それ以上の項目になるときは<li>~</li>タグを増やしていけばOKです。

liは、List Item(リスト アイテム)の略です。





箇条書き(番号なし+記号)


<ul style="list-style-type:記号の種類">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>


記号の種類一覧

記号の種類記号のスタイル
disc黒丸
circle白丸
square黒四角
none記号なし



記号のスタイルを黒丸にして箇条書きにしてみます。

<ul style="list-style-type:disc">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>


表示結果

  • 項目1

  • 項目2

  • 項目3



黒丸の箇条書きが完成です。

この黒丸は、1の箇条書き(番号なし)のときと同じ黒丸です。

ということは、黒丸の箇条書きにするときは、<ul style="list-style-type:disc">と長々とHTMLタグを入力しないで<ul>だけで良いということですね。


別の箇条書き記号でやってみます。
白丸の場合

<ul style="list-style-type:circle">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>



表示結果

  • 項目1

  • 項目2

  • 項目3



箇条書きの記号が白丸になりましたね。




箇条書き(番号あり)

<ul style="list-style-type:番号の種類">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>


番号の種類一覧
番号の種類番号のスタイル
decimal数字
decunal-leading-zero桁を揃えた数字
lower-alpha,lower-latin小文字のアルファベット
upper-alpha,upper-latin大文字のアルファベット
cjk-ideographic漢数字
hiraganaひらがな
katakanaカタカナ
hiragana-irohaいろは順(ひらがな表示)
katanaka-irohaいろは順(カタカナ表示)



番号のスタイルを数字にして箇条書きにしてみます。

<ul style="list-style-type:decimal">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>



表示結果

  • 項目1

  • 項目2

  • 項目3



番号のスタイルを数字にするときは、<ul style="list-style-type:decimal">ではなくて、もっと簡単なHTMLタグがあります。

<ol>タグです。

olは、Ordered List(オーダード リスト)の略です。


<ul>~</ul>ではなくて<ol>~</ol>を使います。

箇条書きを数字で表示するときは、<ol>タグを使います。

<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>


表示結果

  1. 項目1

  2. 項目2

  3. 項目3





このように、HTMLタグを使っての箇条書きは、記号・数字などいろいろな表示方法があります。

はじめにもお話ししましたが、記事の箇条書きには、見やすく・わかりやすくするという効果があります。

これは、読んでくれる方のことを考えてのことです。

さらに、箇条書きにするメリットがあります。

それは、検索エンジンに対しても効果があるということです。


箇条書きのHTMLタグは、リスト構造になっているので、検索エンジンが箇条書きのHTMLタグを見つけて、「おっ、箇条書きがあるな、何か大切なキーワードが書かれているんだな」と認識してくれるのです。




伝えたいことなど要点を書くときは、箇条書きにした方が良いということですね。

そうすることで、検索エンジンも「正しいHTML構文を使っているな」と評価してくれます。
ちょっとした、SEO対策にもなるということです。


だからって、必要以上に箇条書きのHTMLタグを使わないようにしましょう。

HTMLを使って箇条書きまとめ
  1. 記号を使う場合は、<ul style="list-style-type:記号の種類">を使う
    • ※黒丸のときは<ul>~</ul>でOK

  2. 番号を使う場合は、<ul style="list-style-type:番号の種類">を使う
    • ※数字のときは<ol>~</ol>を使う


最後まで読んでいただき、ありがとうございます。



ブログで表を作るときのHTMLコード

ブログで表を作るときのHTMLタグがなかなか理解することができなかったので、あらためてまとめてみました。


ブログで表を作るためには、下のようなTableタグを使います。
<table>ここに表の行列になるHTMLタグを入れる</table>


この<table>~</table>の中に行列を表示するHTMLタグを入れていきます。


行を表示するには下のように、trタグを使います。
<tr>ここに文字を書く</tr>

trは、Table Rowの略で、Table(表)の横方向のルールを決める役割があります。


Table(表)を作る場合、<tr></tr>の間に文字を書いただけでは、ちょっと足りません。

trは、Table(表)の行(横)方向のルールを定義しているだけなので、文字を入れるセル(箱)を作ってあげる必要があります。


セル(箱)を作るには下のように、tdタグを使います。
<td>ここに文字を書く</td>

tdは、Table Dataの略で、セルの中にある文字が「データ」となるようなセル(箱)を作ります。


Table(表)の基本(1行1列)となるHTMLタグは、下の通りです。
<table>
<tr>
<td>ここに文字を書く</td>
</tr>
</table>



1行1列のTable(表)を作ってみます。

HTMLタグは、下の通りです。





<table>
<tr>
<td>1行目の1列目</td>
</tr>
</table>




結果はこんな感じです。

1行目の1列目



文字は表示されましたが、線がありません。


Tableに線を引くには、別にHTMLタグを使う必要があります。

なんだか、こんがらかってきた・・・




Tableに線を引くHTMLタグは、borderを使います。

Tableタグの後ろに、半角スペースを入れてborderと入力します。
<table border="ここに数字を入れる">


<table border>は、<table border="1">を省略しています。

border="ここに数字を入れる"のここに数字を入れるの箇所に数字を入れることで、線の太さを選ぶことができます。

数字だけの入力ですが、単位はpxを使っています。

pxは、コンピュータで画像を表示するときに、色の情報を表す最も小さい単位です。




線の太さ「1」のTableタグは下の通りです。

<table border="1">
<tr>
<td>1行目の1列目</td>
</tr>
</table>


表示結果は、こんな感じです。

1行目の1列目



表らしくなってきましたね。



このborder=""に入れる数字が大きくなるにつれて、表の線も太くなります





Tableタグの仕組みを図でまとめてみました。

table-tag.png


行は<tr>で増やして、列は<td>で増やしていきます。


5行3列のTableのHTMLタグは、下の通りです。

<table border="1">
<tr>
<td>1行目の1列目</td>
<td>1行目の2列目</td>
<td>1行目の3列目</td>
</tr>
<tr>
<td>2行目の1列目</td>
<td>2行目の2列目</td>
<td>2行目の3列目</td>
</tr>
<tr>
<td>3行目の1列目</td>
<td>3行目の2列目</td>
<td>3行目の3列目</td>
</tr>
<tr>
<td>4行目の1列目</td>
<td>4行目の2列目</td>
<td>4行目の3列目</td>
</tr>
<tr>
<td>5行目の1列目</td>
<td>5行目の2列目</td>
<td>5行目の3列目</td>
</tr>
</table>


表示結果は、こんな感じ。


1行目の1列目1行目の2列目1行目の3列目
2行目の1列目2行目の2列目2行目の3列目
3行目の1列目3行目の2列目3行目の3列目
4行目の1列目4行目の2列目4行目の3列目
5行目の1列目5行目の2列目5行目の3列目




table(表)にするためのHTMLタグの仕組みがわかれば、表を作ることも簡単ですね。




ブログの記事を書くことに集中できます^^




最後まで読んでいただき、ありがとうございます。



ブログの文字サイズをHTMLを使って変更する方法

無料ブログの文字サイズ変更は簡単にできます。

大・中・小の3種類を簡単に選択できるようになっています。

文字サイズ変更のHTMLコードは、font-sizeを使います。



FC2ブログでは、このアイコンをクリックすれば簡単に文字サイズ変更ができます。

moji-size.png



実際の文字サイズは、下の通りです。







この3種類で間に合ってしまうのですが、ちょっと慣れてくると記事の文字サイズを所々変えてみたいと思うことがあります。

無料ブログの文字サイズ変更HTMLをちょっと変えるだけで、簡単に文字サイズを自由に好きな大きさに変更することができるようになります。





☆文字サイズ変更するためのHTML

<span style="font-size:ここに文字サイズの数値を入れる">ここに文字を書く</span>



FC2ブログの場合、上のHTMLコードの『ここに文字サイズの数値を入れる』に、次のような文字サイズ指定コートを入れます。

の場合 ⇒ x-large
の場合 ⇒ large
の場合 ⇒ x-small


実際に、入れてみましょう。



大のx-large

HTMLコード

<span style="font-size:x-large">x-largeを入れるとこのサイズになります</span>

表示結果

x-largeを入れるとこのサイズになります




中のlarge

HTMLコード

<span style="font-size:large">largeを入れるとこのサイズになります</span>

表示結果

largeを入れるとこのサイズになります




小のx-small

HTMLコード

<span style="font-size:x-small">x-smallを入れるとこのサイズになります</span>

表示結果

x-smallを入れるとこのサイズになります




size:の後ろを変えるだけで、簡単に文字サイズを変更することができますね。



FC2ブログでは、x-large・large・x-smallを使っていますが、mediumとかsmallを入れるとまた違った文字サイズになります。




mediumを入れたときの文字サイズ

HTMLコード

<span style="font-size:medium">mediumを入れるとこのサイズになります</span>

表示結果

mediumを入れるとこのサイズになります




smallを入れたときの文字サイズ

HTMLコード

<span style="font-size:small">smallを入れるとこのサイズになります</span>

表示結果

smallを入れるとこのサイズになります




文字サイズの大きい順に並べると、

○ x-large
⇒ FC2ブログでは『大』

○ large
⇒ FC2ブログでは『中』

○ medium

○ small

○ x-small
⇒ FC2ブログでは『小』


になります。


下に、文字サイズ大きい順にHTMLコードを表示してみました。
HTMLコードを、コピーして『ここに文字を書く』の箇所を変えれば、使えます。


<x-large>
<span style="font-size:x-large">ここに文字を書く</span>

<large>
<span style="font-size:large">ここに文字を書く</span>

<medium>
<span style="font-size:medium">ここに文字を書く</span>

<small>
<span style="font-size:small">ここに文字を書く</span>

<x-small>
<span style="font-size:x-small">ここに文字を書く</span>





コピーすれば、large、medium、smallと横文字を覚える必要もないのですが、コピーしなくても良い方法があります。


それは、文字サイズの数値に『○○%』と入力する方法です。



普通に入力する文字サイズは100%です。


ということは、150%にすると、

HTMLコード

<span style="font-size:150%">150%の文字サイズはこれです</span>

表示結果

150%の文字サイズはこれです


パーセント表示にすれば、文字サイズを大きくしたければ、数字を大きくすれば良いだけなので、横文字を覚える必要がありません。



文字サイズの変更は、これで自由自在にできるようになりました。


上のHTMLコードをコピーして活用してみてくださいね。




最後まで読んでいただき、ありがとうございます。



Copyright © 脱サラしたいサラリーマンがアフィリエイトを実践、気ままにネットビジネス All Rights Reserved.

テキストや画像等すべての転載転用販売を固く禁じます

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。