cosoa-b

八百屋にサンマは頼まねえ

heightLine.jsで揃えた高さをスマホで解除する

jquery

Posted on

こんな面倒を起こしたくなければ、背景とカラムで背景色を分けるべからず。

まさにこのブログがそうなんですが、よく見る2カラムで、メインカラムとサイドカラムに色がついてて背景と異なっています。そうなると高さ足りないのがバレる。
それを補ってくれるのがhightLine.js。一番楽チンだったのでこれを採用しました。

ブロックレベル要素の高さを揃えるheightLine.js – to-R

詳しい使い方はリンク先を参照してもらうにして、僕の使い方は高さを合わせたい親要素にclass=”heightLineParent”を付けるだけという至極手抜きなもの。で、万事解決かと思ったらスマホで見るとやらかしてました。

謎の空白

まぁメインとサイドの高さを揃えてるので当然の結果ですけどね。。ということでjsファイルを読み込まないようにしてます。当ブログはWordpressで作成しているのでwp_is_mobileという便利な関数があるのでそれを利用します。

if ( function_exists('wp_is_mobile') && wp_is_mobile() ){}
else{wp_enqueue_script( 'heightLine', get_template_directory_uri().'/js/heightLine.js',array('jquery') ;}

else側に命令を書くというなんとも手抜きなやり方をしてますので、ご利用の際は!とか||とか使ってきちんとやることをオススメします。(てか分かるならやれ、オレ)
上記のはfunctions.phpに書いてwp_enqueue_scriptで出力する方法ですので、header.phpに直接書くには下記のようにすればいけると思います。

<?php if (function_exists('wp_is_mobile') && wp_is_mobile()) {} else{ ?>
<script src="<?php echo get_template_directory_uri(); ?>/js/heightLine.js"</script>
<?php }; ?>

ちなみに冒頭で「よく見る」とか風当たりのいい枕詞を使いましたが、当人的には極端にサイドを狭くしていて、1.5カラムだと自負しております。1カラムの視認度と2カラムの情報量を持ち合わせている古くも画期的なレイアウトだと、誰かに突っ込まれたら力説してやろうと目論んでおります。

1カラムブームの雨嵐の中、新たなカラム風を吹かすべく孤高のカラムニストの冒険は始まったばかりだった…(続かない)