FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

なんでもスクロールを横に２つ並べる

なんでもスクロールを横に２つ並べて表示する方法を紹介します。

公式プラグイン「フリーエリア」の中を下記の様にしてください。

<div style="
height:100px; /* スクロールの高さはこの数値を変えて設定してください */
width: 200px; /* 幅 */
float:left; /* 左寄せ */
overflow:auto;
scrollbar-3dlight-color:#ffffff;
scrollbar-arrow-color:#cccccc;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#cccccc;
scrollbar-shadow-color:#cccccc;
scrollbar-track-color:#ffffff;">

※スクロールさせる文字やプラグインのHTMLをここに加えてください。

</div>

<div style="
height:100px; /* スクロールの高さはこの数値を変えて設定してください */
width: 200px; /* 幅 */
float:right; /* 右寄せ */
overflow:auto;
scrollbar-3dlight-color:#ffffff;
scrollbar-arrow-color:#cccccc;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#cccccc;
scrollbar-shadow-color:#cccccc;
scrollbar-track-color:#ffffff;">

※スクロールさせる文字やプラグインのHTMLをここに加えてください。

</div>

<br style="clear:both" />

赤い部分が「なんでもスクロール」に新たに加えられた部分です。
幅はお好みに合わせて競ってしてください。

関連記事

[ 2009/09/26 23:26 ] カスタマイズ共通カスタマイズ | TB(0) | CM(20)

≪ FC2ブログ拍手の位置を変更 | HOME | スクロールバー色分け用解説図 ≫

[ 6258 ]

わざわざありがとうございます。
感謝します。

[ 2009/09/27 17:04 ] [ 編集 ]

[ 6265 ] > なゆたさん

お役にたてて良かったです。

[ 2009/09/27 21:56 ] [ 編集 ]

[ 6586 ]

3つ、4つ並べることはできるでしょうか・・・

[ 2009/10/21 17:14 ] [ 編集 ]

[ 6593 ] > 774さん

可能です。この記事の要領で<div>～</div>をいくつでも増やしてください。ただ１つ１つの幅は狭くする必要があると思います。

width: 200px; /* 幅 */

[ 2009/10/21 21:51 ] [ 編集 ]

[ 6838 ]

スクロールをひとつにして横に並べたいのですが、可能ですか？
もし可能でしたら方法を教えてほしいです。
お手数をおかけしまして申し訳ありません。

[ 2009/11/08 14:22 ] [ 編集 ]

[ 6845 ] > ７さん

スクロールの中身を２つ横に並べたいということでしょうか？

[ 2009/11/08 21:56 ] [ 編集 ]

[ 6849 ]

そういうことです。
分かりづらくてすみません。。
RSSを種類別に２つ横に並べたいのです。

[ 2009/11/08 22:37 ] [ 編集 ]

[ 6854 ] > ７さん

スクロールの中に入れたいものを、下記のようなタグで囲んでください。

<div style="width:280px; float:left;">
左の中身
</div>
<div style="width:280px; float:right;>
右の中身
</div>

[ 2009/11/08 22:57 ] [ 編集 ]

[ 6866 ]

すいません、なんか変なっちゃいました。。

あと↑を４つにすることはできますか。。

[ 2009/11/09 16:44 ] [ 編集 ]

[ 6878 ] > 7さん、コアさん

申しわけありません。さらに赤い部分を加えてみてください。

<div style="width:280px; float:left;">
左の中身
</div>
<div style="width:280px; float:right;>
右の中身
</div>
<br class="c-both" />

[ 2009/11/09 23:37 ] [ 編集 ]

[ 6880 ]

~~しつこくてすいません。なぜかRSSが表示されません~~

<div style="width:250px; float:right;"> の部分が
<div style="width:250px; float:right;> になってます。。

あとRSSを４つ表示するには・・・・

[ 2009/11/09 23:54 ] [ 編集 ]

[ 6882 ] > コアさん

ダブルクォーテーションが抜けてましたね。すみません；
４つ並べるならこうしてはどうでしょうか。

<table><tr>
<td style="width:25%;">中身１</td>
<td style="width:25%;">中身２</td>
<td style="width:25%;">中身３</td>
<td style="width:25%;">中身４</td>
</tr></table>

[ 2009/11/10 00:54 ] [ 編集 ]

[ 6884 ]

なるほどいろいろな方法があるのですね。。
％ですか。。

いろいろとありがとうございました。(^_^)

[ 2009/11/10 01:03 ] [ 編集 ]

[ 6888 ]

右と左のスクロール、両方のフォントサイズを変更したいのですがどうすればよいでしょうか？
テンプレートのスタイルシートのフォントサイズを変更しても左側しかフォントサイズが変更されなかったのですが。。。

[ 2009/11/10 07:30 ] [ 編集 ]

[ 6899 ] > コアさん、ショータさん

> コアさん
４つ並列に表示できましたね＾＾

> ショータさん
現状を確認するためにURLを教えてください。

[ 2009/11/10 22:41 ] [ 編集 ]

[ 6915 ]

申し訳ありません。
URLをURLの欄や本文などに入力すると　不適切なURLが含まれています。　と表示されてコメントすることが出来ないのです。
どうすればよろしいでしょうか？

[ 2009/11/11 01:49 ] [ 編集 ]

[ 6916 ]

上記の記事、コメント内容を見てなんでもカテゴリーを４つ

並べることは出来たのですがスクロールを１つにする事ができません

教えて頂けないでしょうか？

[ 2009/11/11 15:38 ] [ 編集 ]

[ 6927 ] > ショータさん、ra-kuさん

> ショータさん
ひょっとしてサーバーは８番でしょうか？いつのまにか禁止IPに「blog8.fc2.com」が含まれていたので解除しておきました。もう一度試してもダメなようならメールしてください。

> ra-kuさん
新たになんでもスクロールをダウンロードし、こちらのコメントの内容をその中に表示させてください。

http://10plate.blog44.fc2.com/blog-entry-313.html#comment6882

[ 2009/11/11 23:31 ] [ 編集 ]

[ 6967 ]

無事に４つ表示することが出来ました。

有難うございます＾＾

[ 2009/11/14 07:55 ] [ 編集 ]

[ 6979 ] > ra-kuさん

解決して良かったです＾＾

[ 2009/11/15 00:35 ] [ 編集 ]

コメントの投稿