【Plugin】外部掲示板を iFrame プラグインを使ってインラインフレームで表示する

RW4.0検証済み
このエントリの内容は RapidWeaver 4.0 を使用して検証、カスタマイズされた時のものですが、このバージョンでの動作を保証するものではありませんのでご注意下さい。また、表示の無いバージョンでは動作しない、エラーが出ないという意味ではありません。
RapidWeaver には、インラインフレームを簡単に使うためのプラグインが標準で用意されています。
タイトルの掲示板に限らずですが、外部ページを標準の「
iFrame」プラグインを使ってページ内に表示している人も多いのではないでしょうか。

別サイト状態の掲示板を組込みたい

私が運営しているスノーモトFANというサイトがあるのですが、掲示板はフリーのものをサーバーにインストールして使っています。
使っているテーマに組み込みたかったのですが、掲示板のCSSと使っているテーマのCSSが干渉して?レイアウトが崩れてしまうので、サイトの統一感は無くなりますが、諦めて別ページとして表示していました。(以下参照)

*スノーモトFANのトップページ。ほとんどカスタムしていません。 *スノーモトFANの掲示板。シンプルでいいのですが、同じサイトのコンテンツとは思えません…。
左がトップページ。右が掲示板のページ。

しかし、このままだとサイトの統一感がまったく無いので、iFrameプラグインを使ってサイト内に表示してみました。

*標準でインストールされている iFrame プラグインは自動で高さ調節されませんので、スライドバーが表示されます。 *iFrameプラグインの設定。
左が掲示板を iFrame プラグインで表示したところ。右が iFrame プラグインの設定。

この方法だと、確かにサイトに統一感が生まれていいのですが、組み込むページ(掲示板など)の高さと、表示するページの高さが合わず、スクロールバーが表示されてしまいます。
標準のプラグインだと見た目を整えるのはこれが限界だと思います。まぁ十分とも言えますが。


RapidIframe でスクロールバーの表示を調整する

しばらくこの状態で放置していたんですが、もうひとつインラインフレーム用のプラグインがあるのを思い出しました。

MEGE-SERVICES
RapidIframe(フリープラグイン/RW3.6・4.0に対応。)→ダウンロードページ

このインラインフレーム用プラグインは、標準でインストールされている iFrame が対応していない、「高さの自動調整」が出来ます。ですので、縦のスクロールバーが表示されることはありません。横は強制的に元のページの幅で表示されますので、元のページの幅がインラインフレームを使うページの幅より大きくならないように注意して下さい(表示する側のwidthを調整。)。はみ出した分は隠れてしまうようです。当然、横のスクロールバーは表示されません。

追記:
RapidIframe を使って、インラインフレームの横幅や高さを調整したい場合は、ページインスペクタのCSSの所に以下のように入力して下さい。(IDはそのままでOK、数値は適当です。)
#myframe {
	width: 500px;
	height: 100%;
	}

*縦のスクロールバーが消えて、完全に違和感が無くなりました。 *横のスクロールバーももちろんありません。右に見えるスクロールバーはブラウザのものです。
左がページの最上部。右が最下部。完全に違和感がなくなりました。

これで完成です、と言いたいところですがもうちょと欲を出してみました(笑)。

このスノーモトFANというサイトでは、ページごとに画像のタイトルを使っています。

*「GELANDE」の部分が画像タイトルです。
ほぼ全てのページでページタイトルを画像で表示しています。

iFrame プラグインや、RapidIframe プラグインには、ヘッダ&フッタを入力するところがないので、上の画像のようなページを作ることは出来ません。
そこで、PlusKitプラグインを使って、タイトル画像を入れてみました。PlusKit の使い方は以前のエントリを参考にして下さい。以下が最終的に完成したページ。

*PlusKitのおかげで、ヘッダの無いプラグインでもヘッダ領域を作ることが出来ます。
URLhttp://www.snowmotofan.net/bbs/index.html(現在は事情により再び別サイトにしています)

上のページは、以下の掲示板を「RapidIframe」プラグインを使ってインラインフレームで表示しています。
http://www.snowmotofan.net/bbs/index.php

iFrameプラグインでも同じ事が出来ます。以上です。


【このエントリに使ったプラグイン・ツール】

blog comments powered by Disqus