【ブログの楽しみ方】段落（領域）を枠線で囲む／背景色をつける【ココログ】

はじめに

この説明は、過去の記事で説明した基本的なHTMLタグを理解していことを前提とします。

　

この記事の目的

HTMLタグの知識がない方でも、「HTMLの編集」で編集し、「領域／段落（<p>～</p>）を枠線で囲むんだり背景色をつける」ことができるように説明するもの。

なお、以下の説明にも書いているように、HTMLを手入力しても、cocologの仕様で、一部のタグは自動的に変換されてしまいます。この部分はユーザにはブラックボックスであり、今後、仕様の変更により使用できなくなる可能性もあることをご了承ください。あくまでもこの記事を書いている時点で有効な方法です。

　　　

ココログで記事を書く場合、通常は「リッチテキスト」モードで編集しますが、「HTMLの編集」に切り替えると、「<p>～</p>」、「<a href="～">」などのHTMLタグが自動的に付加されることが分かります。

HTMLタグの知識が無くてもwebサイトを作れるのがブログの利点ですが、リッチテキストモードでは編集できないようなHTMLタグを知っていると、ブログの表現方法にバリエーションが出ます。

　　

上の2つの段落は緑色の枠線（破線）で囲まれていますが、実際は、全体をドラッグで範囲指定してから「引用の開始」ボタンを押して、「<blockquote>」・「</blockquote>」（引用ブロック）というHTMLタグで囲んでいるだけです。（下図参照）

しかし、枠線の装飾はこのブログが使用している『デザイン』（スタイルシート／CSSファイル）で設定されているもので、どのブログでもこのように表示されるわけではありません。

一方、下はHTMLタグを編集して、段落の周囲を破線の枠で囲んでいます。

段落を枠で囲む

以下、このような段落の装飾方法（プロパティ）を、使用頻度が高そうなものをピックアップし、実例を挙げて解説します。（全てのプロパティを網羅しているわけではなく、詳細な説明も敢えて避けています。）

段落装飾のバリエーション

段落記号「<p>～</p>」の「<p>」の部分を「<p style="・・・">」として、「・・・」の部分に各種スタイル(＝プロパティ名とその値）を「;」（半角セミコロン）で区切って指定する。「プロパティ名」と「その値」の間には「:」（半角コロン）を置く。

以下にHTMLタグとサンプルを提示するので、HTMLタグをコピーして使用する場合は、「HTMLの編集」モードにして貼り付ける。

■枠線の種類は「border-style: 」で指定する

1．dotted　（マージンなし）

<p style="border-style: dotted;">段落を枠で囲む</p>

段落を枠で囲む

2．dotted　（マージン：10px 以下同じ）

<p style="border-style: dotted; padding: 10px;">段落を枠で囲む</p>

段落を枠で囲む

3．solid

<p style="border-style: solid; padding: 10px;">段落を枠で囲む</p>

段落を枠で囲む

4．dashed

<p style="border-style: dashed; padding: 10px;">段落を枠で囲む</p>

段落を枠で囲む

5．double

<p style="border-style: double; padding: 10px;">段落を枠で囲む</p>

段落を枠で囲む

6．outset

<p style="border-style: outset; padding: 10px;">段落を枠で囲む</p>

段落を枠で囲む

■枠線の色は「border-color:  」で指定する。

カラーのコードが分からない場合は、適当な文字に「フォントカラー」で色を付けてHTMLの編集で見るとよい。この「適当な文字」の箇所は、

<span style="color: #0066CC;">適当な文字</span>

となっているので、「#0066CC」というコードだと分かる。

<p style="border-style: solid; padding: 10px; border-color: #0066CC;">段落を枠で囲む</p>

段落を枠で囲む

<p style="border-style: outset; padding: 10px; border-color: #0066CC;">段落を枠で囲む</p>

段落を枠で囲む

なお、「 border-color: #0066CC;」と入力しても、一度「リッチテキスト」モードにして再び「HTMLの編集」で見ると「 border-color: rgb(0, 102, 204);」のように自動的に変わっているが、表現方法の違いなので気にしなくて良い。

■背景色の指定：　background-color:

<p style="border-style: double; padding: 10px; background-color: #FFFFCC;">段落を枠で囲む</p>

段落を枠で囲む

下は、枠線を付けず、背景色を■（こげ茶：#663300）、文字色を白にしたもの。（HTMLタグの提示は省略）

　私のしようとしたこと、したかったことは、キャパの虚像を剥ぐというようなことではなかった。
　ただ、本当のことを知りたかっただけなのだ。「崩れ落ちる兵士」は本当に撃たれていたのか、本当に死んでいるのか。その問いが、さらに大きな、別の謎をを生み出すことになるなどとは、まったく思ってもいないことだった。
　
（『キャパの十字架』帯から）

見出しのような例ばかりなので、少し長めのテキストを書いてみました。段落を変えずに改行するには、［Shift］+[Enter]を押します。（あるいは、「HTMLの編集」モードで「<br />」＝「改行タグ」を記入する。）

■文字位置：　text-align:

<p style="border-style: solid; padding: 10px; text-align: center;">段落を枠で囲む</p>

段落を枠で囲む

text-alignプロパティには他に「left」（左揃え）、「right」（右揃え）等の値を指定できる。（「text-align: left;」はデフォルトなので、何も指定しないと、text-align: left; と同じ結果になる。）

なお、<p>～</p>タグの内側に<span>タグを使用することで、段落全体ではなく、任意の文字列にのみ修飾を行うことができる。

<p><span style="font-size: 1.2em; color: #FFFFFF; font-weight: bold; background-color: #0066CC; padding: 10px;" >文字列を枠で囲む</span>ここから属性解除</p>
　　

文字列を枠で囲むここから属性解除

<p>タグ同様、「<span>～</span>」の最初の「<span>」の部分を「<span style="・・・">」として、「・・・」の部分に「プロパティ名」と「その値」を「;」（半角セミコロン）で区切って指定する。以下、使用しているプロパティの簡単な説明を記す。

• font-size: 文字の大きさ （ 数字＋em）
• color: 文字色　
• font-weight:　文字の太さ　

「HTMLの編集」で編集後、一度「記事の作成」に切り替えると、一部の記述が自動的に変更されることがある。

■枠線の属性を終了させ、通常の文字を入力するには

段落に装飾を加えた状態で「リッチテキスト」モードのまま改行すると、枠線の属性を持ったまま改行されてしまう。

これを回避するには、一度「HTMLの編集」に切り替え、段落記号の結び＝「</p>」よりも後ろに適当な文字を入力するとよい。（下図参照）

この例では「ああ」と入力したが、再び「HTMLの編集」で見ると、「ああ」には自動的に段落マークが付与されて「<p>ああ</p>」になっていて、属性が解除されているのが分かる。

（拍手はブログ主のモチベーション維持程度の目的です。面白かった、役に立った、等々、宜しければクリックしてください。）