ヘッダー以外の画面サイズ取得をやってみた
投稿日:
ワードプレスを使っていて、最初に表示されるページのデザインで使えそう。
全画面表示にするために、ディスプレイのサイズ(高さ)を自動で取得して表示させる方法は試したことがありましたが、
今回は、ヘッダー部分を引いた高さを取得する方法を試してみました。
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 テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた③
1.プラグインAdvanced Custom Fieldsをインストール 左メニューのプラグイン→新規追加→検索窓に「Advanced Custom Fields」を入力す …
-
-
WordPress(ワードプレス)って オープンソースのブログソフトとして、2003年に公開されました。 オープンソースとは、言葉通り、誰でも無償で自由に改良したり、再配布できるソフトウェアです。 ま …
-
-
WordPressでフォトギャラリーを作るのに3つのプラグインを入れてみた
プラグインを使って簡単にフォトギャラリー WordPressの固定ページ、投稿ページ、カスタム投稿ページに写真を並べて掲載するフォトギャラリーページは、プラグインを使って簡 …
-
-
WordPress無料有料【LIQUID PRESS】子テーマを作ろう
プロが選ぶWordPressテーマテンプレート【LIQUID PRESS】 レスポンシブWordPressテーマ 「LIQUID PRESS」 累計2千DL突破! 日本語対 …
- PREV
- 楽天カード キャンペーン
- NEXT
- ショートコードでPHPファイルを読み込む