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で固定ページや投稿ページまたは、カスタム投稿タイプでテキストの色を変更したり、大きさを変更するなどしてプレビュー画面で確認したが、変わってない!ってことはないですか? また、cssや …

スライドショー条件分岐

スライドショーのショートコードをPCとスマホで変える

今回も引き続き、「Smart Slider 3」を使って条件分岐をやってみました。 なぜ、このようなことをするのかと言うと、 PCでは、横長の長方形(例えば、横幅1900px,高さ600pxくらい) …

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

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

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

svg div 変形

SVG div で変形を作る

  簡単に変形してダウンロード   おもしろいサイトを見つけましたので、紹介します。   説明をするより、サイトを開いて実用化するのはあなた次第(笑) トップページのヘッ …

CSSのcolumnでカテゴリー一覧ページにランダム表示

CSSのcolumnでカテゴリー一覧ページにランダム表示

  アーカイブの一覧表示をランダムにする   前回の記事に関連して、今回はアーカイブのページで試してみたいと思います。 カテゴリーなどの一覧表示に使用する『archive.php』 …