メモ帳編集方法3(解説)

前回のメモ帳編集方法をもう少し詳しく解説。

1. 「メモ帳」のソースコードを表示する。
・Internet Explorerの場合
[ページ]->[ソースの表示]でソースを表示する。

・Safariの場合
あらかじめ、
[Safari]->[環境設定]->[詳細]->[メニューバーに"開発"メニューを表示]
にチェックを入れておく。
[開発]->[ページのソースを表示]でソースを表示する。

2. メモ帳のスキンの構造を確認する。

d0077811_13152128.png


上のようなメモ帳表示の場合は、
次のようなソースコード表示になって
いることが確認出来る。

d0077811_13265951.png


つまり、メモ帳のスキンの構造は、
"mn-wrap cf"の中に、"mntitle-wrap cf"と"mnbody-wrap cf"があり、
"mntitle-wrap cf"の中に"mntitle"、
"mnbody-wrap cf"の中に"mnbody"、
さらに、"mnbody"の中に"MEMOBODY"があるという構成だ。

概念図で表すと以下の通り。

mn-wrap cf
mntitle-wrap cf
mntitle
mnbody-wrap cf
mnbody
MEMOBODY

"mntitle"に該当する部分がメモ帳のタイトル、
MEMOBODYに該当する部分はメモ帳の本文だ。

3. メモ帳本文を入力する。
今回は、メモ帳に
・メッセージ
・お願い
の両方を表示したいけれど、
入力出来るタイトルは1つだけ。

そこで、強引にメモ帳本文部分の"MEMOBODY"
を</div>で閉じ、
その後ろにタイトル表示のための
"mntitle-wrap cf"、"mntitle"と、
それと対になる本文の、
"mnbody-wrap cf"、"mnbody"を
入れることに。

概念図にすると以下の通り。

mn-wrap cf
mntitle-wrap cf
mntitle
mnbody-wrap cf
mnbody
MEMOBODY
(本文1)
mntitle-wrap cf
mntitle
(タイトル2)
mnbody-wrap cf
mnbody
(本文2)

(本文1)のところは、
「管理人へのメッセージは
<a href="mailto:hoge@excite.co.jp"><u>コチラ</u></a>
から</div>」

最後の</div>でMEMOBODYを閉じるのがポイント。

(タイトル2)のところは、
「お願い」

(本文2)のところは、
「このブログに掲載されている写真・画像・イラストを
無断で使用することを禁じます。
使用する場合は必ず管理人までご連絡ください。」

を当てはめると、
以下のようなソースコードになる。

d0077811_21190746.jpg


下の赤枠で囲った部分がメモ帳本文に該当するので、

d0077811_21302441.jpg


以下のような入力になるという訳だ。

d0077811_16320824.png


うーん、説明が難しい。
これで伝わるかな。

[PR]
by miphoant | 2015-08-31 15:45 | Others

MIPHOアンテナがキャッチしたいろいろなこと
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30