Blogger  には、意外と置ける部品が限られています。文字、リンクは別として、画像、動画、リスト、引用文、くらいですね。


HTMLビューを使うと、かなり自由


でも、HTML ビューで挿入すると、かなり自由に、いろいろの部品が置けるみたいです。試しに、いくつかやってみました。今後使えそうなので、備忘のために置いておきます。

部品、その下に、HTMLコードの順番で並べてみました。HTMLコードを、HTMLビューで挿入すると、その部品が現れる、という具合です。

でも、このHTMLビューが難点で、全く読みにくいものですから、整形する必要があります。

で、詳しく書いています。テキストエディタを使う方法もあります。また、

で、実際に整形することもできます。

整形済みコードの、狙った所に（</div>　の後ろに）、挿入し、作成ビューに戻り、さらに編集することができます。

style の属性は、仮のものですので、適当に変更してください。


表



1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
 


	     <table border="1" style="width: 100%;">
              <tbody>
                <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                </tr>
                <tr>
                  <td>5</td>
                  <td>6</td>
                  <td>7</td>
                  <td>8</td>
                </tr>
                <tr>
                  <td>9</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                </tr>
                <tr>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16<br />
                 </td>
                </tr>
              </tbody>
            </table>

こうして表を作って、セルの値は、後で変更できます。


テキストブロックの背景色


Bloggerのメニューには、テキストの背景色、というメニューがあります。ここで色を着けると、例えば、このように行の間には色が着きません。

これは、<p><span style="background-color: #fff2cc;">という段落の中での、色指定になっているためです。


この <span style="background-color: #fff2cc;">　を解除して、<p>　</p>　を、<div style="background-color: #fff2cc;">　と　</div>　で囲むんでやると、次のように、行間にも色が入ります。前項の表のコードも、このやり方で色を着けています。（ただし、上の表のコードでは、div は、pre の間に移動されてしまいます）


Bloggerのメニューには、テキストの背景色、というメニューがあります。ここで色を着けると、例えば、このように行の間には色が着きません。

これは、<p><span style="background-color: #fff2cc;">という段落の中での、色指定になっているためです。


整形済みテキスト


この上の「表」の項目で示しました、HTMLコードです。こういうHTMLコードの「整形済みテキスト」を表示させるには、ひと手間かかります。（例えば、javascript といったものだと、難なく表示されたりします）

このテキストをそのまま、作成ビューで貼り付ければ、間延びした、おかしな表示にされてしまいます。表なので、改行とかあって、そのせいかもしれません。

といって、HTMLビューで貼り付ければ、HTMLコードとして解釈されてしまいます。

そこで、整形済みテキストとして挿入します。ただし、「＜」や「＞」は特殊文字として解釈されるので、「＆lt；」と「＆gt；」に置き換える必要があります。
テキストエディタで、一括置換すれば、簡単です。それを、HTMLビューで、希望の所に貼り付け、直前に「<pre>」、直後に「</pre>」を付け加えます。

pre タグについては、次のサイトで教えていただきました。


枠線


文章の、ある範囲（例えば、div ブロック）を、枠線で囲みたい、ということはありますよね。説明は、次の枠内に書きました。

枠線を入れたいブロックを、HTMLビューで探し出して、その前に（多分、「<div　」 がある所）、「<div style="border: 1px solid darkgray;">」を挿入します。

さらに、次は、枠線を入れたいブロックの終わり（多分、「</div>　」 がある所）を探し出して、その後ろに、「</div>」を挿入します。

コードは、つまり
<div style="border: 1px solid darkgray;">
と
</div>
です。


水平線



Bloggerには、「追記を挿入」がありますが、別に、線が（投稿編集画面にあっても）実際に表示されるわけではありません。

ふと、水平線があればいい、ということもありますね。


 <hr style="background-color: green; height: 2px; width: 60%;" />
です。


フリガナを付ける


フリガナを付けるのは、簡単みたいです。

漸くようやく
暫くしばらく

コードは、
<ruby><rb>漸く</rb><rt>ようやく</rt></ruby>
です。前の1行分です。

ただし、Bloggerの作成ビューでは、フリガナにはならず、漸くようやく　暫くしばらく　の表示になります。なので、コードを貼り付けた後、作成ビューで変更するのは難しいので、変更する場合も、HTMLビューでやった方が良いみたいです。

Chromeでは、ご覧のように、無事、フリガナとなっています。


コメント付きボックス


本来は、フォームの部品ですが、フォームの外でも自由に使えるみたいです。
おせっかいコメントに適しているかもしれませんね。

おせっかいコメント付きボックスができました。コードは、この後に。

コードは、 
<fieldset><legend>おせっかい</legend>コメント付きボックスができました。コードは、この後に。</fieldset>

です。

さらに、いろいろ style を設定すると
おせっかい コメント付きボックスができました。コードは、この後に。

 コードは、
<fieldset style="background-color: #fcff01; border: 2px solid darkred; width: 70%;"> <legend style="text-align: right;">おせっかい</legend>
コメント付きボックスができました。コードは、この後に。</fieldset>

です。へへー、面白いです。


今日は、これまで。また、おいおい追加できたらと思っております。