急がばまわれの「アイフレ」講座

 グルっぽを見ていて。このページの赤枠部分のように、閲覧窓(ブラウザ枠)サイズを変えるとブログカラムと「アイフレ」がズレてしまう例を見かけます。青枠のように、閲覧窓サイズをかえてもブログカラムに追随して動く「ズレないアイフレ」の設置の仕方を、めんどくさく(ダメじゃん!)掲載してみました。
 ──ハイ、かなり面倒ですが。でも、最後には、たぶん、できます。
(測定したり計算したりする数字が何箇所もあります。まったくの初心者さんは、最初は簡略アイフレでカスタマイズに慣れることをオススメします)

とりあえず、やってみる。

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;あり
  (中略)
  <div id="aifure1">←position:absolute;あり
   (アイフレの中身)
  </div>←「id="aifure1"」divの終わり
  (中略)
 </div>←「id="frame"」divの終わり
 ときどき、メニューカラムを「position:absolute;」で動かした後で、
『アイフレ』がメニューカラムの外側に出てこない
と悩んでる方があるが、これも、メニューカラムが「移動基準」になったために起こる現象。この場合は、「top」や「left」の値にマイナスをつけると、メニューカラムの外へ出すことができる。出てこない場合は、CSSに以下を追加すると有効なことがある。

「自分で★カスタマイズ@《Ameba blog》 」へ戻る

 
 
 
とりあえず、ここを「ブログカラム追随型アイフレ」と呼びます。

カスタマイズ超基本

1. カスタマイズ前に

 カスタマイズの前には「バックアップ保存」をする。基本中の基本です。CSSを変更するならCSSを、フリープラグインを変更するならフリープラグインを、ワープロなどに貼り付けて自PCに保存します。

2. CSSを変更したら

 CSSを変更したら、必ず、ブログ表示画面で「更新」をしましょう。Internet Explorer(IE)をお使いの場合は、キーボードの「f5」です。
 1行変更するたび、とは言いませんが、一区切りついたらまた「バックアップ保存」を。
 閲覧窓(ブラウザ枠)サイズを変更してのチェックも忘れずに。
 ソフトのダウンロードができる方は、ブラウザを変更してのチェックも行うのが望ましいです。ブラウザは、IE,Firefox,Google Chrome,safari,Opera、IEはIE Testerを使ってバージョン6,7,8,9。けっこう面倒です。げんなりしますwが、「みんなに見てほしい」のであれば、必要な手順です。
とりあえず、ここを「ブラウザ枠連動型アイフレ」と呼びます。

「アイフレ」って何?

「アイフレ」は、《Ameba》の「改造系グルっぽ」や、「カスタマイズノウハウブログ」でだけ通じる言葉です。(ネット一般では通じない)。こういう語を「ジャーゴン」といいます。どうもこのページの赤枠&青枠のような、「スクロールのついたdivを、position:absoluteで配置したもの」を差す方が多いようです。《アメーバ》カスタマイズの老舗「アメブロ向上企画書」サマ2009年9月記事から一般化したのではないかと思います。
 私は「アイフレ」とカギカッコをつけて表記するようにしています。