──ハイ、かなり面倒ですが。でも、最後には、たぶん、できます。
(測定したり計算したりする数字が何箇所もあります。まったくの初心者さんは、最初は簡略アイフレでカスタマイズに慣れることをオススメします)
とりあえず、やってみる。
1-1.「アイフレ」を準備する。
フリースペースに以下を入力。【重要】アイフレ名(下記では「aifure1」)は、アルファベットで。数字で始めてはダメです)
1-2. CSS入力
CSSに以下を入力。「表示を確認する」をクリックする。「アイフレ」の左上の角がある位置が、「移動基準」の左上。
1-3. CSS修正
アイフレを下げる。……「top:0px;」の数字を増やす。アイフレを右に。……「left:0px;」の数字を増やす。
数字は、
・目分量で入れて、「表示を確認」しながら、微調整する。
(参考:このページの背景の黒い升目が、50px。px定規も使用可)
・スクリーンショットを画像ソフトに取り込んで、画像ソフトの機能で測定する。
(右図は「WindowsXP版ペイント」の例。範囲指定ツールで囲むと、範囲の幅×高さが画面右下に表示される)
どちらの方法でもお好みで。
2-1.アイフレを増やす
アイフレを増やしたい場合。フリースペースに2番目のアイフレタグをいれる。2-2. CSS入力
1つめと同様に、CSSに以下を入力。フリースペースに入れた「id="aifure2"」とCSSに入れる「#aifure2」は、まったく同じでなければならない。「表示を確認する」をクリックする。「アイフレ」の左上の角がある位置が、「移動基準」の左上。
2-3. CSS修正
1つめと同様に。アイフレを下げる。……「top:0px;」の数字を増やす。
アイフレを右に。……「left:0px;」の数字を増やす。
3. もっと増やす
「2番目のアイフレ」と同じく、フリースペースに入れた「id="[id名]"」とCSSに入れる「#[id名]」を揃えて、さらに追加してゆく。やったけどダメ
「アイフレ」を入れる前にやったカスタマイズが特殊だと、このやり方ではダメな可能性もある。その場合は、グルっぽででも質問を。これまでの分がズレた
上のCSSを入れたらかえってズレた(これまで「ブラウザ枠連動」だったアイフレが上のCSSを入れることで、閲覧窓サイズを変えても希望の位置にはまらなくなった)場合。「ブログカラム」との位置関係が一定になっているのであれば、そういうものだと諦めて、泣きながら(^^;)位置設定をやりなおす。やりなおしが終われば、今度は、閲覧窓サイズを変えても、ズレなくなる。どうしてそんなことに
「アイフレ」の位置指定に使う「position:absolute」は、「position:relativeかabsoluteを設定した外枠を移動基準にする」という決まりがある。なので、「relative設定の枠に追随する」ように見える。これはCSSの決まりなので、文句言っても無駄。外枠、というのは、こういう↓意味。
<div id="frame">←position:relative;ありときどき、メニューカラムを「position:absolute;」で動かした後で、
(中略)
<div id="aifure1">←position:absolute;あり
(アイフレの中身)
</div>←「id="aifure1"」divの終わり
(中略)
</div>←「id="frame"」divの終わり
「『アイフレ』がメニューカラムの外側に出てこない」
と悩んでる方があるが、これも、メニューカラムが「移動基準」になったために起こる現象。この場合は、「top」や「left」の値にマイナスをつけると、メニューカラムの外へ出すことができる。出てこない場合は、CSSに以下を追加すると有効なことがある。