トップページ > 記事閲覧
【質問】段組み[cols,thumbnails]の高さを自動で揃える方法
投稿日 : 2017/06/28(Wed) 15:01
投稿者 のほほん
参照先
humbnails等で文字や画像でいくつかの段組みを作成した際に
現状では高さが揃わない場合は改行や#brプラグインで余白を記載するか?しか
無いかと思われますが…

これらの高さを自動で揃える方法を何方かご存知のお方はおりますでしょうか?


以前の旧公式掲示板(北研時代)にYujiroさんが記載して下さっていたのですが…
月日が経ち忘れてしまいました…(T_T;)


かなりうろ覚えですがclassで直接jsを読み込んで出来たような気がしたのですが…


何方かご存知のお方がおりましたらご教授頂ければ幸いですm(_ _)m
記事編集 編集
Re: 【質問】段組み[cols,thumbnails]の高さを自動で揃える方法
投稿日 : 2017/07/01(Sat) 22:13
投稿者 のほほん
参照先
>【Yujiro様】

お忙しい所、ご丁寧にありがとう御座います!
お礼を申し上げるのが遅れてしまい申し訳御座いませんでした…m(;_ _)m

HAIKはこういう細かい便利な部分まで使えると本当に便利で良い物なので
北研時代に説明がされなかったというプラグイン群もいつか説明がされると有難いんですけどね…(-_-;)



>【stage2様】
なるほど!
colsでもその様な記述でcolss指定出来るんですね!

こういう情報は覚えればかなり使えると思うので…
本当にもっともっと知りたいですし
いち早く情報開示される事を願うばかりですね

ちょっとした事を知っていると知らないとでは天地程
差がありますからね…(汗)



PS.
たまたま質問後に仕事の関係で出ていた為
お礼を申し上げるのが遅れてしまい申し訳御座いませんでしたm(_ _)m

iPhoneから投稿させて頂いておりますが
質問させて頂いた(のほほん)者です…m(_ _)m
記事編集 編集
Re: 【質問】段組み[cols,thumbnails]の高さを自動で揃える方法
投稿日 : 2017/06/29(Thu) 09:43
投稿者 stage2
参照先
#bs_box を使わない場合、 #cols の各カラム毎にクラス名を指定できるので、それでも良さそうですね。

#cols(6.adjust,6.adjust){{{
...
}}}

> と言うか、再読み込みが必要なのが難点かも

記事のjsは、ウィンドウのサイズを変えた時も考慮されていますがうまく行きませんか?Demoページで試しましたが大丈夫でした。
記事編集 編集
Re: 【質問】段組み[cols,thumbnails]の高さを自動で揃える方法
投稿日 : 2017/06/28(Wed) 15:49
投稿者 Yujiro
参照先
のほほんさん

以下が参考ページです。この方法で私は実際に使っています。

http://16deza.com/tips/jquery-parallel-columns-height-adjust/

(1)上の内容で「任意のファイル名.js」で保存します。

ここで「任意のファイル名」は、必要なサイトの中にある「js」フォルダ中にある
ファイル名と重複しないように注意。とりあえず私は「height-cont.js」としました。

(2)上記ファイル height-cont.js を jsフォルダにアップロード

(3)head 内にscript typeの追加

必要なサイトのページにログインし、設定>サイト情報の設定>その他のタグに
以下の1行を追加、保存。

<script type="text/javascript" src="js/height-cont.js"></script>

(上でheight-contの部分は(1)で作ったファイル名が入ります)

(4)#cols{{ の中にある #bs_box にクラス指定する。

具体的には、各#bs_boxの後ろに(class=adjust)を付与。
結果的に#bs_box(class=adjust){{{ この記述になります。
(横並びに設置している#bs_box全て)

以上で作業終わり。

この結果をPCで試すとき、ブラウザ幅を任意に変えた場合はページの再読み込みにて
ボックス高さが再計算されます。(と言うか、再読み込みが必要なのが難点かも)
記事編集 編集
件名 スレッドをトップへソート
名前
メールアドレス
URL
画像添付


暗証キー
画像認証 (右画像の数字を入力) 投稿キー
コメント

- WEB PATIO -