CMS「すぐ使えるCGI」の開発者がご質問にお答えします

 

静的ページにiframeでwebdir/index.htmlを表示する方法について (No. 1922)

回答日: 2017-02-05

質問

製品名:折り畳み機能付きすぐ使えるCGI
Ver:162-show-hide-P092-G0-A9-CU-ALJA-ULJA-AM0-UM0-5_0
使用環境:win10、Dreamweaver、lolipopレンタルサーバー
【質問】
1.静的ページに、短い一覧webdir/index_short.htmlをインライン表示させうまく出来たが、このページの各登録項目からのリンクを下記2の静的ページ内の各登録記事にアンカーを付けてそのアンカーにリンクさせたいと思います。方法をお教え願います。

2.静的ページに、登録記事全てをスクロールバー無しでインライン表示したいのですが、webdir/index.htmlを読み込んだ時、全ての登録記事が表示されない(高さの自動設定が出来ない)。対策方法をお教え願います。
投稿日時: 2017-02-04 20:35

回答

「すぐ使えるCGI」のご利用ありがとうございます。

さて、ご質問は、

インランフレームで表示した「短い一覧」(新着情報)から
インランフレームで表示した「全一覧」(お知らせ一覧)に

アンカー付きでリンクしたいという事ですね。

■制限事項
1点、ご希望のうちできない可能性がある点がありますのでまずお知らせします。

お使いになっている製品は以下の「アイコンクリックでの折りたたみページ」ですね。
http://sugutsukaeru.jp/sample/162-show-hide/webdir/

このデザインは、全一覧の高さがクリックで伸び縮みする事になりますので、この全一覧をインランフレーム内に表示した時、読み込み時にスクロールバーなしで表示できたとしても、内容を表示するためにクリックした時にはスクロールバーが出てしまうと思います。(そのような構成でテストしていませんが、仕組み上おそらくそうなります。)

このため、折りたたみ式のものを使う場合は、全一覧をインラインフレームで表示するのは諦めていただいた方が良いかと思います。テンプレートは自由に編集してサイトのデザインに合わせる事ができますので、テンプレートを編集して調整して下さい。他の要素と合体させて表示したい場合は、その要素の方をインラインフレームで表示する事をご検討下さい。

もしインラインフレームでの表示が必須なら、「すぐ使えるCGI」の方は折りたたみ式で無いもの(下記など)をご検討下さい。
http://sugutsukaeru.jp/sample/219-new-icon/webdir/index.html

■ご質問1の回答
インランフレームで表示した「短い一覧」(新着情報) から インランフレームで表示した「全一覧」(お知らせ一覧) へアンカー付きでリンクさせる方法は、下記ページをご覧ください。

「iframe 内のアンカーまでリンク時にスクロールする方法」
http://sugutsukaeru.jp/support/320/

ただこれは、リンク先の「全一覧」の iframe の高さ調整をしていない場合です。リンク先の「全一覧」の iframe の高さを調整している場合は、その場所にジャンプするのは不可能では無いですが、もっと複雑なJavaScriptを書く必要があります。「すぐ使えるCGI」でお請けする場合は有料のサポートとなります。

(この点でも、全一覧のインランフレーム表示の必要が無いといいのですが!全一覧が1枚のHTMLなら、問題なくアンカーまでリンクできます。)

■ご質問2の回答
2番目のご質問が、折りたたみ式一覧をクリックした時に(ページの高さが広がる事により)全ての登録記事が表示されない、という問題では「ない」という前提でご回答します。(上述の「制限事項」の通り、読み込み時はうまくいっていたとしてもクリックした時はスクロールバーが出てしまうと思います。)

インラインフレームの中身のページの高さに合わせてインラインフレームのサイズを変更する方法は下記ページでご案内している通りですが、これを設定したのに動作しない(折りたたまれた状態でも、記事が全件表示されない)、という状況だという理解でよろしいでしょうか。(違っていたらもう少し詳しい情報を合わせて再度ご質問下さい。)

「iframe のスクロールバーを出さない方法(高さを自動変更)」
http://sugutsukaeru.jp/support/180/

まず、ここでも「制限事項」があるのですが、インラインフレームの親ページと子ページが同じサーバに無いとこの方法は機能しません。www あり/なしのURL表記の違いでも「別のサーバ」という事になってしまいますので、URLの問題が無いかをまず確認して下さい。

それでもうまくいかない場合は、どこかに設定ミスがあるのかと思います。上記ページの方法をもう一度ご確認いただいた後、問題が見つからなければ、どのような設定をしたかが分かる情報(設定サイトのURLなど)を合わせてもう一度ご質問頂けますか?
回答日: 2017-02-05