wordpress

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

投稿日:

画面サイズ取得

 

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

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

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

 

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
-, , ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ヘッダー画像変える

ヘッダー画像やスライダーをページ毎に変える方法

  WordPressで作成したページで、ヘッダー画像やスライドショーをページごとに変えたい! 今回やってみたことは、条件分岐でヘッダーの画像部分を振り分けるといった方法です。 プラグインな …

ヘッダー固定

【簡単】wordpress スクロールするとヘッダーが固定される

  ①一番最初に見えるヘッダーをカスタマイズ header.phpファイルに使っているテーマにより若干違いはありますが、下記のようなコードが記述されていると思います。 <div id= …

masonry column

MasonryをやめてCSSのcolumnにした

  不具合連続のMasonry   2日間くらい「Masonry」に悩まされ、できたと思ったら不具合が発生の繰り返し、 主な不具合は、 ・画像と画像が重なる ・ブラウザを縮小したり …

リストメニューを順番に表示

メニューリストを横から順番に表示させる cssのみ

  cssだけで簡単にメニューなどのリストに動きを付けます。 今回は、右から現れてくるように作ってみました。 さっそくですが、以下にサンプルがありますので、興味がある方はコピペして使ってくだ …

スマートスライダー

Smart Sliderのプラグインで画像に網掛け

  スライダー画像に網掛けをする   簡単にフェードアウトやスライダーができるWordPressのプラグインで有名な【Smart Slider】を使って、画像に網掛けをしたいと思い …