ヘッダー以外の画面サイズ取得をやってみた

 

ワードプレスを使っていて、最初に表示されるページのデザインで使えそう。

全画面表示にするために、ディスプレイのサイズ（高さ）を自動で取得して表示させる方法は試したことがありましたが、

今回は、ヘッダー部分を引いた高さを取得する方法を試してみました。

 

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');// 算出した差分をヘッダーエリアの高さに指定
});

 
以上、私が試してみた方法です。