注目タグ

テンプレート・プラグイン

トピック詳細

プラグインのスクロール(後カラム落ち修正方法)

こんにちは。
御世話になります。


今回はプラグインをスクロール表示にする為の方法を教えていただきたいと思い、書き込みをします。


私は公式テンプレートの【orange】を使用しているのですが、
プラグインを色々追加したりバナーをはったりしていたら
右側に収まるべきプラグインやバナーが本来あるべきでない記事下に溢れ出てしまいました。

ブログをたくさん書いてテンプレートを伸ばせば溢れ出たプラグインも元のあるべき場所に収まるとは思うのですが
カテゴリやカレンダーでの記事表示の場合、記事数が少なくなることもあると思うので
そういうときにバナー等が溢れ出ないようにするために

プラグインのスクロール表示を出来るようにしたいのです。


回答、宜しくお願いします。
<(_ _)>



------



修正タグを載せていただいたおかげで、ちゃんとプラグインが収まるべき場所に収まるようになりました。
これならカラム? をスクロール表示にせずとも大丈夫そうです。

ありがとうございました^^

2011年09月08日 13:07  by えとわるこ

コメント一覧 8件中、1~8件表示

  • 理解が悪くてお手数おかけしました。


    標野ゆきさんが上書きしてみるようにと載せてくださったのをそのまま貼ってプレビュー(すみません、完全に実行しないでプレビ ューで済ませました)してみたり
    pictlayerを非表示にしてみても変化は無かったのですが

    <div>
    <a href="http://members.redsonline.jp/index.asp&quo t;>
    <img src="http://blog-imgs-26.fc2.com/r/e/d/redbeck on/RSbanner.gif" /border=0 alt="RED STONE日本公式サイトトッ プ"><br />
    RED STONE日本公式サイトトップ
    </a>
    </div>
    </div>
    <a href="http://wr.2-d.jp/hayabusa/">
    <img src="http://blog-imgs-26.fc2.com/r/e/d/redbeck on/rs-hayabusa-wrabbit.jpg" /border=0 alt="White r abbit"><br />
    </div>
    </div>
    <a href="http://wr.2-d.jp/hayabusa/">
    <img src="http://blog-imgs-26.fc2.com/r/e/d/redbeck on/wrabbit2.gif" /border=0 alt="White rabbit" ><br />
    RED STONE日本公式イラストレーター、隼優紀(ハヤブサ ユキ)さんのホームページ
    </a>
    </div>

    上の太字のタグのスラッシュ(/)をぬいて<div>に したら、
    無事解決しました!

    なかなか理解できずに困らせてしまって、すみません。
    <(_ _;)>

    そして、ありがとうございました!
    これで解決にさせていただきます。

    2011年09月09日 15:59 by えとわるこ

  • とりあえず
    2011年09月08日 16:56のコメントで
    質問者さんが引用した部分を修正したものを置いておきます。

    <div>
    <a href="http://members.redsonline.jp/index.asp&quo t;>
    <img src="http://blog-imgs-26.fc2.com/r/e/d/redbeck on/RSbanner.gif" /border=0 alt="RED STONE日本公式サイトトッ プ"><br />
    RED STONE日本公式サイトトップ
    </a>
    </div>
    <div>
    <a href="http://wr.2-d.jp/hayabusa/">
    <img src="http://blog-imgs-26.fc2.com/r/e/d/redbeck on/rs-hayabusa-wrabbit.jpg" /border=0 alt="White r abbit"></a><br />
    </div>
    <div>
    <a href="http://wr.2-d.jp/hayabusa/">
    <img src="http://blog-imgs-26.fc2.com/r/e/d/redbeck on/wrabbit2.gif" /border=0 alt="White rabbit" ><br />
    RED STONE日本公式イラストレーター、隼優紀(ハヤブサ ユキ)さんのホームページ
    </a>
    </div>

    これでべったり上書きしてみてください。

    それでも表示が直らないようなら
    pictlayerというプラグインを非表示にするか、HTMLの編集で
    pictlayerプラグインのスクリプトを一旦全部 削除してみてください。

    2011年09月09日 08:26 by 標野ゆき

  • すみません。
    どうしてもうまく理解できません><


    バナーはFC2の公式マニュアル等を参考にしてはったものだから、青い部分を閉じると言ってもどこをどう閉じればいいのか><
    改行タグの前に閉じタグを追加してはみたのですが
    プレビューしても改善は見られず、そのため変にいじるよりはと結局元に戻してそのままにしてしまっています。

    また、
    >ブログのHTMLソースの476行目辺り
    というのはテンプレートのHTML編集ということでしょうか?
    テンプレートで見てみても、バナーをはったフリーエリアのHTMLを見てみてもご指摘の前後タグが見当たりません。

    以前にもFC2の同じテンプレートでバナーをはったコトがありその時はこんな現象は起きなかったのを思い出したので、
    たぶんその本来あったはずのタグを削除してしまったのが原因なのでしょうけれど

    こんな時間に眠い頭で考えてる所為もあるとは思いますが
    さっぱりわかりません。
    今日は慌ただしくなりそうなのでこんな時間ですが今書き込みをして
    回答を待たせていただきたいと思います。

    2011年09月09日 01:14 by えとわるこ

  • 以下はブログのHTMLソースの476行目辺りですが


    <h3 style="text-align:left">pictlayer</ h3>
    <p style="text-align:left">

    </p>
    <div class="plugin-freearea" style= "text-align:left">
    <script type="text/javascript">
    <!--
    //=======================================================
    // Pictlayer ー リンク先の画像をレイヤー表示します


    あるべきはずの橙色の文字列が存在しません。
    (周囲のフリーエリアプラグインには全部このタグがあるので)
    ジャバスクリプトの文字列をコピペするときにうっかり上書きしたのではないでしょうか。

    フリーエリアプラグインのHTML編集
    またはテンプレートのHTML編集で、元に戻しておいたほうがいいと思います。

    2011年09月08日 18:07 by 標野ゆき

  • それと

    <div>
    <a href="http://members.redsonline.jp/index.asp&quo t;>
    <img src="http://blog-imgs-26.fc2.com/r/e/d/redbeck on/RSbanner.gif" /border=0 alt="RED STONE日本公式サイトトッ プ"><br />
    RED STONE日本公式サイトトップ
    </a>
    </div>
    </div>
    <a href="http://wr.2-d.jp/hayabusa/">
    <img src="http://blog-imgs-26.fc2.com/r/e/d/redbeck on/rs-hayabusa-wrabbit.jpg" /border=0 alt="White r abbit"><br />
    </div>
    </div>
    <a href="http://wr.2-d.jp/hayabusa/">
    <img src="http://blog-imgs-26.fc2.com/r/e/d/redbeck on/wrabbit2.gif" /border=0 alt="White rabbit" ><br />
    RED STONE日本公式イラストレーター、隼優紀(ハヤブサ ユキ)さんのホームページ
    </a>
    </div>

    太字のタグは</div>ではなく<div>でないとお揃いになりません。
    そもそもココに本当にこのタグが必要なのか疑問を感じますが
    とりあえず、この部分の閉じ忘れは解消されると思います。

    2011年09月08日 18:06 by 標野ゆき

  • <a href="http://members.redsonline.jp/inde x.asp"> <img src="http://blog-imgs-26.fc 2.com/r/e/d/redbeckon/RSbanner.gif" /border=0 alt=" ;RED STONE日本公式サイトトップ"><br />
    RED STONE日本公式サイトトップ
    </a>
    </div>
    </div>
    <a href="http://wr.2-d.jp/hayabusa/" > <img src="http://blog-imgs-26.fc2.com/r/e/d /redbeckon/rs-hayabusa-wrabbit.jpg" /border=0 alt=" ;White rabbit"><br />
    </div>
    </div>
    <a href="http://wr.2-d.jp/hayabusa/" >
    <img src="http://blog-imgs-26.fc2.com/r/e/d/redbeck on/wrabbit2.gif" /border=0 alt="White rabbit" ><br />
    RED STONE日本公式イラストレーター、隼優紀(ハヤブサ ユキ)さんのホームページ
    </a>

    赤のタグ、ピンクのタグと違って
    青のタグには対応する</a>がありませんよね。
    改行タグの前に閉じタグを追加すると良いと思います。

    2011年09月08日 17:36 by 標野ゆき


  • (編集して追記で書こうと思ったのですが、確認画面が真っ白になってしまい進まなかったのでこちらで失礼します。)



    HTMLタグを閉じ損ねているとのご指摘があったのでチェックしてみたのですが
    ドツボにはまっているらしく、何度見てもドコがいけないのかわからないので
    バナーのリンクをはっておきます。
    おそらく3番目のバナーに問題があるのでしょうが、どこが間違っているのか><

    ↓↓↓

    <div>
    <a href="http://members.redsonline.jp/index.asp&quo t;>
    <img src="http://blog-imgs-26.fc2.com/r/e/d/redbeck on/RSbanner.gif" /border=0 alt="RED STONE日本公式サイトトッ プ"><br />
    RED STONE日本公式サイトトップ
    </a>
    </div>
    </div>
    <a href="http://wr.2-d.jp/hayabusa/">
    <img src="http://blog-imgs-26.fc2.com/r/e/d/redbeck on/rs-hayabusa-wrabbit.jpg" /border=0 alt="White r abbit"><br />
    </div>
    </div>
    <a href="http://wr.2-d.jp/hayabusa/">
    <img src="http://blog-imgs-26.fc2.com/r/e/d/redbeck on/wrabbit2.gif" /border=0 alt="White rabbit" ><br />
    RED STONE日本公式イラストレーター、隼優紀(ハヤブサ ユキ)さんのホームページ
    </a>
    </div>

    2011年09月08日 16:56 by えとわるこ

  • 記事がちょっぴりしかなくても
    プラグインカラムはちゃんと伸びるはずなんですよ。

    カラムが変になってるのはいわゆる「カラム落ち」で
    多分タグの閉じ忘れが原因だと思います。

    閉じ忘れチェックサイトさんでチェックしたら

    (212行目) <a href="http://wr.2-d.jp/hayabusa/"&g t; : タグが閉じていません
    (215行目) </div> : 開きタグがありません
    (220行目) </div> : 開きタグがありません
    (221行目) </div> : 開きタグがありません
    (336行目) <linksno;i++){ var Href = Links[i].href; if(Href .match(/(jpg|jpeg|png|gif)$/i)) { p++; Nimg = 'I'+ p; Pict[Nimg] = new Image(); Pict[Nimg].src = Href; if (Link s[i].childNodes[0].tagName == 'IMG') Links[i].chil dNodes[0].title = Och; else Links[i].title = Och; Links[i].t arget = '_self'; Links[i].id = Nimg; Links[i].oncl ick = function() {PictLayer(this.id); return false;} }}} if( p > : タグが閉じていません
    (476行目) </div> : 開きタグがありません

    こんな結果が出ました。
    まずは初めのaタグを閉じてみてください。

    2011年09月08日 14:44 by 標野ゆき