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 テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた②

  4.まずは、function.phpに追加 テーマによっては、変更しなくてもきれいに表示されることもあります。 ※function.phpに追加する前に、念のためfunction.php …

ポップアップ・ライトボックス風

画像クリックで 違う画像やテキストの入ったBOXを表示させる

  プラグインなしで、別の画像やテキストをlightboxのように表示させる   html   <a class="item-demo"> …

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

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

  前回の記事では、『メニューリストを横から順番に表示させる cssのみ』ということで、 cssだけで動きのあるメニューを作成しました。   今回は、jsファイルに書き込んで同じよ …

wordpressテーマ

WordPress無料有料【LIQUID PRESS】子テーマを作ろう

  プロが選ぶWordPressテーマテンプレート【LIQUID PRESS】   レスポンシブWordPressテーマ 「LIQUID PRESS」 累計2千DL突破! 日本語対 …

vegas2

WordPressで画像をかっこよく見せるVEGAS

  WordPressで画像をかっこよく見せる ワードプレスを使っていて画像を扱うことも多いと思いますが、サイトをかっこよくおしゃれに見せる方法の一つとして、画像に手を加えてインパクトを与え …