HTMLを書いて、それを「かんたんモード」用の記事に使う

・クリックして縦棒を出します ・そのまま文章を書いたり、 ・縦棒(カーソル)が出てる状態で、 画像を貼り付けるボタンをクリックして 画像を差し込んだり ・Flashやブログパーツを貼り付けること もできます

以前はFlashの横に文字や画像を載せることがすごい簡単にできたのですが、最近は普通にはできなくなってしまったので、その手順を考えています

これを機会に、HTMLの勉強もしようと思います

上の「左に文字」「右にFlash」、「後ろに背景画像」は以下のHTMLを貼り付けています

ざっくりと「表」を作って、その中に文字やFlashを入れています

サンプルのHTML(.zip)をダウンロード

HTMLの説明

---

<div style='width:560px;height:300px;background-image: url("https://blog-001.west.edge.storage-yahoo.jp/res/blog-f9-a6/rutouch_rutouch/folder/594832/60/28100760/img_3");'>

width:560px;height:300px

・背景に使う画像の大きさを横幅560x 高さ300で指定

background-image: url(https://blog-001.west.edge.storage-yahoo.jp/res/blog-f9-a6/rutouch_rutouch/folder/594832/60/28100760/img_3)

・背景に使う画像のURLを指定(今回の場合、星空の画像)

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

<table cellpadding="0" cellspacing="0"><tbody>

・「表」を作成

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

<tr style="font-family:fantasy;
     font-weight:bold;
     color:#666666;
     <!--text-shadow:1px 1px 1px #ffffff;-->
    ">

tr

・表の一段目を作成

font-family:fantasy;

・文字のフォントの指定

font-weight:bold;

・太字を指定

color:#666666;

・文字色のコードを指定

<!--   -->

・コメント(HTMLに注釈を入れる場合にコメントを囲むに使う。間にコードを書いてもHTMLとして実行されない)

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

<td>
   ・クリックして縦棒を出します<br>
   ・そのまま文章を書いたり、<br>
   ・縦棒(カーソル)が出てる状態で、<br>
   画像を貼り付けるボタンをクリックして<br>
   画像を差し込んだり<br>
   ・Flashやブログパーツを貼り付けること<br>
   もできます
  </td>

td

・横に一列目を作成

・その下に文字を直接書いてます(文字の装飾は上の「tr」で設定した値が適用されます)

<br>

・改行

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

<td style="font-size:0";>
   <IMG id="[[item(https://raindrop-whitemintbear.ssl-lolipop.jp/small/space/earth20130601_200x200.swf?$0,200,200)]]"
        style='background: url("https://s.yimg.jp/images/blog/rte/moviemat.png"); width: 200px; height: 200px;'         src="https://s.yimg.jp/images/clear.gif">
</td>

td

・横に2列目を作成

font-size:0

・ブログパーツの上に表示されてしまうタグの部分のサイズを0に指定しています

IMC id="https://〜.swf？＄０"

・ブログパーツ(Flash)のアドレスを指定、「?$0(半角)」をつける、横幅、高さを指定

background: url("・・・"); width; 200px; height: 200px;

・チェックの画像のURLを指定(ここはそう書くんだという程度の認識でいいと思います)、横幅200 x 高さ200は、ブログパーツ(Flash)の横幅、高さと合わせる

src="〜"

・ここもそう書くんだ〜っという程度の認識で大丈夫です

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

ダウンロードして解凍してできる「sample00_[テーブル]横2列に並べる.html」をデスクトップにコピーして、それを右クリック→「プログラムから開く」→「メモ帳」をクリックして、中のHTMLに書いてあるURLの変更や横幅、高さを調整します

変更後、「ファイル」→「上書き保存」

デスクトップに貼り付けてある「sample00_[テーブル]横2列に並べる.html」をダブルクリックして、ブラウザを立ち上げます(グーグルクローム以外のブラウザにしてください。グーグルクロームが立ち上がってしまう場合は、「sample00_[テーブル]横2列に並べる.html」を右クリック→「プログラムから開く」→「グーグルクローム以外のブラウザ」をクリックしてください)

あとは「すべて選択」→「コピー」という慣れた手順をこなして、コピーしたものをかんたんモード用の記事作成のところへ貼り付けます

文字の部分をクリックして、文字の変更、文字の色や文字位置も変更します

(上のボタンから文字の色などを変更させることが可能です)

ある程度、できたら、「確認」してみてください

画像のアドレスやなんかを1つずつ変更してみては、記事に貼り付けてその変化をご確認ください

HTMLのコードの意味がわかってきます

意味がわかってくると、うんじゃあ、こんなこともできるのでは？っという発想が出てくると思います

だいぶややこしいのですが、HTMLのファイルの中身の変更部分は「URL」と横幅、高さぐらいだと思います

文字の内容の変更、文字装飾の変更は、記事の作成時に書き換えればいいです

どうしてもFlashの横に文字を置きたい！っという方はチャレンジしてみてください（ぺこ）