Web関連

CMSの強い味方!? 高さを自動調節してくれるjQueryAutoHeight.js導入方法

0

こんにちは!最近ニコ生のアニメ一挙放送にハマっているSEの岸沢です。

最近見たのはマクロスFなんですが、もう5年以上前の作品なんですね。
マクロスシリーズでオススメはマクロス7です。
主人公が一切戦わず、戦場で歌っているといった変わった内容で、はじめは「なんで戦わないんだ」と作品にクレームが入ったようです。
その後、主人公がとあることをきっかけに武器を使ってしまう事があったのですが、逆にクレームが入ったしまったといった魅力的な作品です。

マクロスシリーズの開始は1982年なのでかなり昔のアニメシリーズなんですが、現代まで続いているのはすごいですね。

WEBの業界でも昔の技術が注目をあびることも多いです。
そんな中でもJavaScriptはJQueryなどの登場で注目を浴びている技術です。
10年以上前にJavaScriptを利用してブラウザでゲームを作って遊んでいたのを思い出します・・・。

そんなわけで、JQueryを活用した便利な技を紹介したいと思います。

デザイン上ではカッコ良かったのに、現実は・・・

WordPressなどのCMSの場合、文字数が決まっていないためレイアウトに苦戦します。
ボックス型のレイアウトにした場合、文字数によって高さがガタガタになってしまいますよね。
文字数を予測してHeightを指定することも出来ますが、文章が短かった場合不要なスペースが空いてしまいます。
そんな問題を解決してくれるJavaScriptを紹介します。

CMSを導入した場合、文字数や画像サイズなどあらゆることを想定してデザイン・HTMLコーディングをする必要があります。ただし、どんな記事が入ってくるかわからず、ワイヤーフレームやデザインではサンプルテキストで作ってしまいます。
しかし、実際に運用してみると・・・理想とはかけ離れたレイアウトになってしまうことがあります。

cmsjq_15030201.png

現実では、テキスト文字数がバラバラで、レイアウトが崩れてしまいます。
CMSでなければ、文字が決まっているので高さを調節してサイトを作れますが、CMSが導入されているページではそんなことは出来ません。
しかし、jQueryAutoHeight.jsを利用することで、そんな問題も簡単に解決してくれます。

ダウンロード方法

以下からダウンロードしてみましょう
https://github.com/tinybeans/jQueryAutoHeight/releases

設置方法

導入は簡単です。
Jqueryを読み込んだ後、jQueryAutoHeight.jsを読み込むだけで利用できます。

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jQueryAutoHeight.js”></script>
<script type=”text/javascript”>
jQuery(function($){
$(クラス名).autoHeight();
});
</script>

利用方法

利用方法も簡単です。先ほど設置したJSに、揃えたいボックスのクラス名を記述するだけです。

cmsjq_15030202.png

あら簡単。自動的ボックスの最大の高さを取得して、各ボックスの高さを揃えてくれます。

ん・・・?
二行目に無駄な空白が多い?

大丈夫です。
次に、行ごとに高さをそろえる方法を説明します。

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jQueryAutoHeight.js”></script>
<script type=”text/javascript”>
jQuery(function($){
    $(クラス名).autoHeight({column:3, clear:1});});
</script>

上記のようにオプションを記述することで、行ごとに高さを揃えてくれます。
今回の例は3列のため、columnに3を指定しています。列数に合わせて値を変えてください。

cmsjq_15030203.png

簡単ですね。

このようにJqueryを利用してCMSから登録された情報に合わせて、CSSを調整することで。
デザイン的にも美しいサイトを作ることが可能です。
今後も制作に困ったときに解決してきた便利なネタを提供していきたいと思います。

0

Web制作未経験の新卒がシステムエンジニアになるために勉強しておくこと前のページ

WordPressを使った簡単なオリジナル(っぽい)フォトブログ制作2次のページ

ピックアップ記事

  1. 新しい販売形態であるDtoCについて考えてみる
  2. AIに求められているものは、実は意外な物だった
  3. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  4. 新型コロナウイルスで日本の働き方改革が起こる

関連記事

  1. Web関連

    Web制作会社でなくとも知っておきたい。ECサイト構築の前に考えておくべきこと

    一言でWeb制作と言っても、作るサイトによって手順もノウハウも変わって…

  2. Web関連

    ロボット産業拡大中!気になるロボット集めてみました。

    最近新聞を読んでいると、人工知能やパーソナルロボットというキーワードを…

  3. Web関連

    テレビ会議システムについて

    皆さんは、テレビ会議システムを使ったことは、ありますか?テレビ会議シ…

  4. Web関連

    医療出版業界のWebコンバージョンアップ戦略

    ティファナは、業種を絞らず様々なクライアントとお付き合いをさせて頂いて…

  5. Web関連

    ミュージシャンのWebを利用したプロモーション

    こんにちは。音楽が好きで好きでたまらない杉山です。昨今、Webを活用…

  6. Web関連

    顧客満足度向上ってどうすればいいの?仕事をとおして学んだこと

    最近、CS推進や顧客満足度向上のために対策を行う企業も増えてきました。…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    基本を見直す!デザインの基本原則
  2. Web関連

    顧客満足度向上ってどうすればいいの?仕事をとおして学んだこと
  3. Web関連

    効率的!マーケティングオートメーションって?
  4. Web関連

    仕事に役立つiPhoneアプリ(上)
  5. Web関連

    企業の存続はHRテックにかかっている?
PAGE TOP