KENT-WEB サポートコーナー 過去ログ [ 0017 ]

記事No： 13499
投稿日： 2014/11/30(Sun) 14:41:25
タイトル： アイコン一覧の表示幅
ID情報： goinkyox
投稿者： ご隠居X
URL： http://dp30109265.lolipop.jp/cgi-bin/yybbs2014/yybbs.cgi

YY=BOARDを最新版に更新しようと弄っているのですが、自作アイコンが大きい為にアイコン一覧で表示が崩れてしまいました。
なんとかアイコン単体の表示枠の変更は判ったので変更したのですが、一覧の横幅に対してアイコンが大きいので一覧の右側にかなり余白が出来てしまいます。
なので、YY--BOARDのアイコン一覧の幅を大きめに指定したいのですが、どこを変更すれば良いのでしょうか？
（以前のバージョンはイメージ参照画面のサイズって箇所が有ったのですが）

また、アイコンも上下幅が小さいものと大きい物が有る為に単体枠の下側に大きく空白が出来てしまう物が有るのですが、単体の表示を表示枠の上よりではなく中ほどにする方法が有れば教えて下さい。

記事No： 13507
投稿日： 2014/11/30(Sun) 23:49:34
タイトル： Re: アイコン一覧の表示幅
ID情報： hirayama
投稿者： hirayama
URL： http://shade-search.com/sts/fsw/wiki.cgi

>なので、YY--BOARDのアイコン一覧の幅を大きめに指定したいのですが、どこを変更すれば良いのでしょうか？

icon.htmlに
<TABLE width="540" height="400">
という記述がありますが、これのせいで右側に余白が出るのではないでしょうか。
以下table関係のタグはないので、消し忘れでしょうか？

>また、アイコンも上下幅が小さいものと大きい物が有る為に単体枠の下側に大きく空白が出来てしまう物が有るのですが、単体の表示を表示枠の上よりではなく中ほどにする方法が有れば教えて下さい。

これはyybbs.cssの
/* アイコンおよびキャプション位置 */
p.image, p.caption {
text-align: center;
margin: 5px;
}
の下に

p.image {
margin-top:10px;
}
p.caption {
margin-bottom:10px;
}
のような感じで追加してみてはどうでしょうか。(数値は適当に変えてみてください)

記事No： 13521
投稿日： 2014/12/01(Mon) 11:25:44
タイトル： Re^2: アイコン一覧の表示幅
ID情報： goinkyox
投稿者： ご隠居X
URL： http://dp30109265.lolipop.jp/cgi-bin/yybbs2014/yybbs.cgi

> icon.htmlに
> <TABLE width="540" height="400">
> という記述がありますが、これのせいで右側に余白が出るのではないでしょうか。
> 以下table関係のタグはないので、消し忘れでしょうか？
Tableタグを試した後、消し忘れてました。
ただ、Tableタグを付けても消しても表示が変わらないので影響はしてないみたいです。
ウインドウの幅に対してアイコンがもう一個入るスペースが無い為にあの余白になってるみたいです。

> これはyybbs.cssの
> /* アイコンおよびキャプション位置 */
> p.image, p.caption {
> text-align: center;
> margin: 5px;
> }
> の下に
>
> p.image {
> margin-top:10px;
> }
> p.caption {
> margin-bottom:10px;
> }
> のような感じで追加してみてはどうでしょうか。(数値は適当に変えてみてください)
試してみたのですがこれだとアイコン自体の高さに関係なく一律に同じだけ空間が入りますよね。
高さに応じてアイコンと文字を中央から配置させる方法があれば良いのですが。
（もしくはアイコンを中央配置で文字を下に○スペースを空けて配置とか）

記事No： 13522
投稿日： 2014/12/01(Mon) 14:30:36
タイトル： Re^3: アイコン一覧の表示幅
ID情報： hirayama
投稿者： hirayama
URL： http://shade-search.com/sts/fsw/wiki.cgi

>ただ、Tableタグを付けても消しても表示が変わらないので影響はしてないみたいです。
>ウインドウの幅に対してアイコンがもう一個入るスペースが無い為にあの余白になってるみたいです。
ブラウザによるみたいですが、私のブラウザでは左半分にしか表示されていなかったのが、
ほぼ全面に表示されるようになってます。
しかし、右端にちょっとだけ隙間が空いていますが、
元々この隙間のことをいわれていたんでしょうか。

この隙間を調整するのは意外と面倒そうですね。

/* アイコン枠デザイン設定 */

の上に

#album {
width:1600px;
margin:auto;
}
と追加するぐらいしか思いつかないです。(widthの値は適当に)
ただ、これでも、widthが各アイコンの幅+隙間で割り切れない分が余ってしまいます。
それとピクセルで指定すると小さいモニターで見た場合は、はみ出してしまうという問題も
ありますね。

記事No： 13532
投稿日： 2014/12/02(Tue) 11:55:18
タイトル： Re^4: アイコン一覧の表示幅
ID情報： goinkyox
投稿者： ご隠居X
URL： http://dp30109265.lolipop.jp/cgi-bin/yybbs2014/yybbs.cgi

> /* アイコン枠デザイン設定 */
>
> の上に
>
> #album {
> width:1600px;
> margin:auto;
> }
> と追加するぐらいしか思いつかないです。(widthの値は適当に)
> ただ、これでも、widthが各アイコンの幅+隙間で割り切れない分が余ってしまいます。
大幅に余ってるのを減らしたかったので、これでＯＫです。
hirayama様ありがとうございます。

記事No： 13531
投稿日： 2014/12/02(Tue) 10:56:47
タイトル： Re^3: アイコン一覧の表示幅
ID情報： teketen
投稿者： てけてん

CGIの動作に問題がないので、デザインについては、ここではサポートの対象外ではあるのですが…。
一つの案として、ご紹介します。
これについての追加サポートは行いません。
申し訳ありませんが、気に入らない場合は、ご自分で考えて下さい。

外部スタイルシートのyybbs.css

/* アイコン枠デザイン設定 */
div.photo {
border: 1px solid #2b0000;
background: #fff;
width: 135px;
height: 110px;
float: left;
margin: 1px;
}
/* アイコンおよびキャプション位置 */
p.image, p.caption {
text-align: center;
margin: 5px;
}
p.image {
margin-top:10px;
}
p.caption {
margin-bottom:2px;
}

を

/* アイコン枠デザイン設定 */
div.photo {
width: 135px;
height: auto;
display:inline-block;
}
/* アイコンおよびキャプション位置 */
p.image, p.caption {
text-align: center;
}

#album {
background: #fff;
margin: 0 auto;
text-align: center;
width: 845px;
}

#iconlist {
text-align: left;
margin: 5px;
}

に変更します。
個々のアイコンの高さがマチマチなので、周りの枠を消して、リストの横幅を840pxに固定し中央に配置します。
このことにより、両端に空白が出来ますが、左だけスペースが空くよりも気にならないと思うのですが。
次に、アイコン用のテンプレートファイルicon.htmlの

<div id="album">

の次の行に

<div id="iconlist">

を

<div class="clear"></div>
</div>

の次の行に

</div>

をそれぞれ追加して下さい。
あとは、好みで色々変更してみてください。

記事No： 13539
投稿日： 2014/12/04(Thu) 14:42:15
タイトル： Re^4: アイコン一覧の表示幅
ID情報： goinkyox
投稿者： ご隠居X
URL： http://dp30109265.lolipop.jp/cgi-bin/yybbs2014/yybbs.cgi

数値を変更してみたら好みの表示になりましたので使わせて貰います。
てけてんさんありがとうございました。

[検索ページ] [掲示板]