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

  1.プラグインAdvanced Custom Fieldsをインストール   左メニューのプラグイン→新規追加→検索窓に「Advanced Custom Fields」を入力す …

wordpress

WordPressとは?

WordPress(ワードプレス)って オープンソースのブログソフトとして、2003年に公開されました。 オープンソースとは、言葉通り、誰でも無償で自由に改良したり、再配布できるソフトウェアです。 ま …

ワードプレスで予約

WordPressで簡単に予約システムを導入

  ホームページから予約が取れる時代が当たり前になってきたんですねー 私もお客様からお問い合わせがあり、「予約が取れるようにして欲しい」っていうことで、数件取り入れたことがあります。 でも、 …

フォトギャラリー

WordPressでフォトギャラリーを作るのに3つのプラグインを入れてみた

  プラグインを使って簡単にフォトギャラリー   WordPressの固定ページ、投稿ページ、カスタム投稿ページに写真を並べて掲載するフォトギャラリーページは、プラグインを使って簡 …

wordpressテーマ

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

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