イワノメ blog

田舎暮らし目線ブログ

ブログ記事の写真に吹き出しを付ける_html

2011年12月04日 | HTML学習

HTMLエディター

goo blog でいつもはTEXTエディターを使用しているのですが、今回初めて HTMLエディター を使用してみる


文字入力

本日は晴天なり

画像の挿入

車 HTMLソースエディタから入力

■ 本文中の図や写真に吹き出しを付ける (goo blog 編集画面 HTML エディターから)

HTMLソースエディタ を表示して、

<p><img src="http://blogimg.goo.ne.jp・・・・・.png" border="0" alt="ここに文字入力" /></p>

*注:HTML5 では“alt”は廃止です。代わって、“title”を使用します。
<p><img title="ここに文字入力" /> src="http://blogimg.goo.ne.jp・・・・・.png" border="0"></p>

<イメージファイルURL.拡張子”(半角スペース)alt=” (ダブルクォーテーションマーク内に記入) ”/></p>

*文字入力部以外はすべて半角入力されています。入力時の訂正などで、1文字消去してもおかしな表示になりますので気を付けてください。
*この記事で「吹き出し」と言っているものは、一般に「代替えテキスト」と呼ばれています。


*2013年8月現在の時点で"alt"タグは無効になっいます。


表の作成練習_html

2011年12月03日 | HTML学習
blog 絵日記
表の作成練習

(レイアウト・作成時の補助に”コメント”利用)

★ 表(枠)の構成図 ★

上表は、外・中・中中、(大まかに)三つの枠から構成されています

*外(ベタ塗り)
*中(アニメ背景)
* blog 絵日記 *
* *中中(文字枠 2×3) *


HTML をやっていて・・・

記述は

「Excel 関数に似ているなぁ~!」

・・・と、よく感じます。

実際、Excel 関数を使った数式作りの ”考え方” が役に立ちます。

今回のこの表などは、”入れ子関数” みたいです。
”コメント” はマクロやVBA(ババ)の コメント と。

* ”入れ子関数” 参考記事

----------------------------------------------------------

上の表は3層になっていて、上位の表(中中)に
透明部を持つ写真でも貼れば、例えば、人物とか・・・
それで一つの絵になります。

これって、・・・

まるで、「お絵描きソフト」 の ”レイヤー” ではないですか!

* ”レイヤー” 説明 参考記事

----------------------------------------------------------

上の表で 車が走行します (*^。^*)

gif (ジフ) アニメの再生は・・・

最新の情報に更新 していただくか、・ショートカットキー F5


セル枠線作成学習 (細いセル枠線&細い水平線)

2011年11月26日 | HTML学習

■表の利用 (細い枠線・細い水平線)_html

表の利用 セル枠作成学習 (細いセル枠線&細い水平線)
TD valign="center"
nowrap align="middle"
width="30%"
bgcolor="#d9ffd9"
全体
<TABLE cellspacing="0" cellpadding="3" width="600" border="1">

細い水平線 <HR noShade SIZE=1>

(右列)
<TBODY>
<TR>
<TD align="left" width="70%" bgcolor="#d9d9ff">本日は晴天なり。本日は晴天なり。本日は晴天なり。 実際に今日は抜けるような青空です!気持ちいい!

ブログ記事の表示修正_html

2011年11月13日 | HTML学習

blog 記事の表示修正_html (○○さんへ)

■私の実験結果で・・・修正には・・・以下の2点だと思います

1.背景のpng(ピング)画像は前のサイズのもの(400×140)を使用する。
 *これは、(今度は逆に)小さいサイズのディスプレーに表示する場合手直し後のサイズでは大きすぎるからです。
2.一番外の点線枠幅を%(パーセント)指定ではなく数値指定にする。

この2点で修正されると思いますが、実際にやってみてください。ダメだったらまた考えましょう!

■以下の赤字部分が html の書き換え部になります
<TABLE
style="BORDER-RIGHT: #22e63a 5px dashed; BORDER-TOP: #22e63a 5px dashed; BORDER-LEFT: #22e63a 5px dashed; BORDER-BOTTOM: #22e63a 5px dashed; HEIGHT: 90%" width="570(!-- 90%を数値指定(570)にしました = *数値は自由に書き換えられますが、私の行った結果ではこの数値でちょうどいい加減でした。--)" align=center border=0>
<TBODY>
<TR>
<TD background="背景画像ファイルURL" bgcolor="#fff7fb">
<P>タイトル部</P> ・・・・・・・・・


my blog 作成上の注意点

2011年09月30日 | HTML学習
本日、普段使用していない古いタイプのパソコンで自分の投稿記事を確認した。いくつか気付いた点があったので書き留めておきます。

画面サイズに配慮
普段デスクトップタイプのディスプレーサイズの大きいパソコンで編集しているので、つい画面サイズが大きくなってしまっています。小さい画面で表示した場合に配慮しましょう。

古いタイプのパソコン・ディスプレイの解像度は低い
古いタイプのパソコンでは、解像度が低く、表現できない色がある。「白飛び」している画像がある。

●このブログを閲覧して頂いている皆様へ●
閲覧いただいてありがとうございます。
これまでの記事の中には画面内に納まりきらない記事があったりして、ご迷惑をおかけしています。これからの記事には、これまでの経験を生かしてより閲覧しやすい記事を作成して行きたいと考えています。今後ともよろしくお願い致します。

絵日記

カラフル罫線

2011年09月21日 | HTML学習
罫線もどきの作成 (表の応用)
1月 2月 3月 4月
1 #656565♪ Hello Test 1 2 3 ! bgcolor="#00cc00"
2 #58974563♪ bgcolor="#009900"
3 #2159876♭♭ bgcolor="#ffffff"
004 ♪♭♯ バック・グランド・カラーを利用した罫線

罫線もどきの作成2 (色違い)
1月 2月 3月 4月
1 #656565♪ Hello Test 1 2 3 ! bgcolor="#ff00ff"
2 #58974563♪ bgcolor="#cc00cc"
3 #2159876♭♭ bgcolor="#ffffff"
004 ♪♭♯ バック・グランド・カラーを利用した罫線

罫線もどきの作成3 (色違い)
1月 2月 3月 4月
1 #656565♪ Hello Test 1 2 3 ! bgcolor="#00cccc
2 #58974563♪ bgcolor="#00ffff"
3 #2159876♭♭ bgcolor="#ffffff"
004 ♪♭♯ バック・グランド・カラーを利用した罫線

ページのトップ

ページの先頭