ヘッダー以外の画面サイズ取得をやってみた
投稿日:
ワードプレスを使っていて、最初に表示されるページのデザインで使えそう。
全画面表示にするために、ディスプレイのサイズ(高さ)を自動で取得して表示させる方法は試したことがありましたが、
今回は、ヘッダー部分を引いた高さを取得する方法を試してみました。
header.phpなどの中身で引きたい部分(除きたい部分)を確認
例えば、
<div id=”head-area”>
などのID名を確認(クラス名になっていればクラス名を確認)
トップページやホームページで高さを取得したい部分を確認
例えば、固定ページの本文に指定している場合は、
<div class=”contents-area”>
などのクラス名を確認
front-page.phpやpage.phpの中にある部分を指定したい場合は、
同じく、クラス名を確認
jsファイルに記述
続いて、jsファイルに記述して実行させる。
(jsファイルを作っていない場合は、header.php部分に記述してもいいかな)
// ヘッダー以外の画面サイズ取得 $(function(){ var nH = $('#head-area').outerHeight(true);// ヘッダーの高さを取得 var wH = $(window).height();// 表示画面の高さを取得 var hH = wH - nH;// 表示画面とヘッダーの差分を算出 $('.contents-area').css('height', hH + 'px');// 算出した差分をヘッダーエリアの高さに指定 });
以上、私が試してみた方法です。
関連記事
-
-
【簡単】wordpress スクロールするとヘッダーが固定される
①一番最初に見えるヘッダーをカスタマイズ header.phpファイルに使っているテーマにより若干違いはありますが、下記のようなコードが記述されていると思います。 <div id= …
-
-
今回も引き続き、「Smart Slider 3」を使って条件分岐をやってみました。 なぜ、このようなことをするのかと言うと、 PCでは、横長の長方形(例えば、横幅1900px,高さ600pxくらい) …
-
-
WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた②
1.プラグインCustom Post Type UIをインストール 左メニューのプラグイン→新規追加→検索窓に「Custom Post Type UI」を入力すると出てきます。 インスト …
- PREV
- 楽天カード キャンペーン
- NEXT
- ショートコードでPHPファイルを読み込む