HOME  /WordPress(応用)
 /Flexboxを使ったヘッダの作成方法
2020年02月03日

Flexboxを使ったヘッダの作成方法

このサイトのヘッダはBootstrapのナビゲーション・バーとflexboxを使ってデザインしています。

Bootstrapのナビゲーション・バーを使う事により、スマホのヘッダ画面が簡単に作れる為に採用しています。
またPCやタブレットのヘッダはflexboxの機能を使う事により、簡単に綺麗なメニュが作れるようになっています。

1.画面デザイン仕様

<PC&タブレットの画面>

<タブレットの画面>

<スマホの画面>

Flexboxは1行づつ処理する考え方になります。

上記の3つの画面を処理する考え方は下記のストーリになります。

①PC&タブレット画面は上部に青線を表示するが、スマホではこれを非表示にする。

②コンテナの中にBootstrapのナビゲーション・バーを配置するとし、このコンテナの左右の余白をデバイス種類毎に変更する。

③コンテナの中にあるナビゲーション・バーの背景をPC&タブレットでは白、タブレットでは黒にする。

④ナビゲーションバーの1行目にはサイトタイトルとメニュアイコンを左右端に配置する。
但し、PC&タブレットのメニュアイコンは非表示にする。

⑤ナビゲーションバーの2行目にはディスクリプションと検索BOXを左右端に配置する。
但し、タブレットの場合は縦に配置する。

⑥ナビゲーションバーの3行目にはメニュを表示する。
スマホの場合はメニュアイコンの開閉で操作する。

⑦コンテナの最後にパンくずを表示する。

2.表示プログラムとCSS

上記を実現する表示プログラムとCSSは下記になります。

<body <?php body_class(); ?>>
<div id='top-bar'>&nbsp;</div>    <!--①青線-->
<div id='header-contener'>      <!--②コンテナ-->
	<nav class="navbar navbar-inverse"> <!--③ナビゲーション・バー-->
		<div id='header-line1'>       <!--④サイトタイトルとメニュアイコン-->
			<div id="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></div>
			<?php my_navbar_button('#navbar-menu');?>
		</div>
		<div id='header-line2'>		    <!--⑤ディスクリプションと検索BOX-->
			<div id='description'><?php bloginfo( 'description' ); ?></div>   
			<div id='search-box'> <?php my_searchform(2);?></div>	            
		</div>
		<div class="collapse navbar-collapse" id="navbar-menu"> <!--⑥メニューの表示 -->
			<?php wp_nav_menu( array (
					'theme_location' => 'primary',
					'container' => false ,
					'items_wrap' => '<ul>%3$s</ul>') ); ?>
		</div>
	</nav>
	<?php my_breadcrumb($wp_query,$post,1); ?><!--⑦パンくずの表示-->
</div>

<上記プログラムに対応するCSS設定>

①PC&タブレット画面には上部に青線を表示するが、スマホではこれを非表示にする。
上部バーは「id=’top-bar’」を使っているのでこのIDをCSSで処理します。

/* ヘッダ上部の設定 */
#top-bar{
	height:10px;
	background:#1e73be;}
@media screen and (max-width:767px){  /*スマホの場合は省略*/
 #top-bar{display:none;}
}

バーは色(#1e73be)で高さ(10px)で、スマホの場合は省略しています。

②コンテナの中にBootstrapのナビゲーション・バーを配置するとし、このコンテナの左右の余白をデバイス種類毎に変更する。
コンテナは「id=’header-contener’」を使っているのでこのIDをCSSで処理します。

/* ヘッダコンテナの設定 */
#header-contener{ /* PCの場合は左右に8%の余白 */
margin:0 8%;}                
@media screen and (min-width:768px) and (max-width:991px){
 #header-contener{margin:0 2%;} /* タブレットの場合は左右に2%の余白 */
}
@media screen and (max-width:767px){
 #header-contener{margin:0 0;} /* スマホの場合は画面枠一杯 */
}	

margin(a b)は、a:上下、b:左右のマージンになります。

③コンテナの中にあるナビゲーション・バーの背景をPC&タブレットでは白、タブレットでは黒にする。
ナビゲションバーのクラスは「class=”navbar navbar-inverse”」を使っているのでこのnavbarでCSSで処理します。

/* Bootstrap navbar設定 */
.navbar{  /* PC系の背景は白 */
margin-bottom:0;	/* navbarは下に余白が入るのでこれを削除 */
background:#fff;
	border:none;}
@media screen and (max-width:767px){  /* スマホの場合は黒に変更 */
 .navbar{background:#000;}
}

④ナビゲーションバーの1行目にはサイトタイトルとメニュアイコンを左右端に配置する。
但し、PC&タブレットのメニュアイコンは非表示にする。
ナビゲーションバーの1行目は「id=’header-line1’」を使っているのでこのIDをCSSで処理します。

/* ヘッダの1行目:ロゴとメニュアイコンの配置 */
#header-line1{   
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	margin-top:10px;}
#site-title a{
	font-size:24px;font-size:1.5rem;
	color:#000;
	text-decoration:none;}
#site-title a:hover{color:#1e73be;}
@media screen and (max-width:767px){/* スマホの場合はタイトルは白 */
 #header-line1{margin-top:0;}
 #site-title a{color:#fff;}
}

※1.「display:flex;」で横1行、「justify-content:space-between;」で左右端配置、「align-items:flex-end;」で下揃えを指定しています。

※2.メニュアイコンをPC&タブレットで非表示にするのは、メニュアイコン関数の中で指定しています。

⑤ナビゲーションバーの2行目にはディスクリプションと検索BOXを左右端に配置しています。
但し、タブレットの場合は縦に配置する。
2行目は「id=’header-line2’」を使っているのでこのIDをCSSで処理します。

/* ヘッダの2行目:ディスクリプションと検索BOX */
#header-line2{   
	display:flex;
	justify-content:space-between;
	align-items:flex-end;}
#description{
	font-size:16px;font-size:1rem;
	padding:5px 0;}
#search-box{width:30%;padding:5px 0;}
@media screen and (max-width:767px){ /* スマホの場合は縦書きで色は白 */
 #header-line2{flex-direction:column;align-items:flex-start;}
 #description{color:#fff;padding:5px;}
 #search-box{width:100%;padding:5px;}
}

※1.PC&スマホの場合は1行目と同じ設定なので1行表示で左右端配置で下揃えになります。
また検索BOXの幅は30%にしています。

※2.しかしスマホの場合は「flex-direction:column;」で縦表示に変更すると共に「align-items:flex-start;」で左基準のデフォルトに戻しています。
また検索BOXの幅は100%です。

⑥ナビゲーションバーの3行目にはメニュを表示します。
スマホの場合はメニュアイコンの開閉で操作する。
メニュは「 id=”navbar-menu”」を使っているのでこのIDをCSSで処理します。

/* メニュ  *******************************/
/* PC系の時の設定 */
@media screen and (min-width:768px){
	#navbar-menu *{transition:0.5s;}
	#navbar-menu{	
		margin-left:-10%;margin-right:-10%;
		padding-left:10%;padding-right:10%;
		border-top:solid 3px #1e73be;
		border-bottom:solid 3px #1e73be;}
	#navbar-menu ul{
		margin:0;
		display:flex;}
	#navbar-menu li{
		width:16.6666667%;
		padding:5px;
		border-left:solid 1px #1e73be;
		background:#c6e2ff;}
	#navbar-menu li:nth-of-type(6n) {
		border-right:solid 1px #1e73be;}
	#navbar-menu li a{
		font-size:12px;font-size:0.75rem;
		color:#2f4f4f;font-weight:bold;
		display:block;text-align:center; /*li要素全体をリンク対象にして文字はセンタ配置*/
text-decoration:none;}
	#navbar-menu li:hover{background:#fcfcfc;color:#2f4f4f;}
	#navbar-menu li.active{background:#fff;color:#008b45;}
}
/* スマホの設定*/
@media screen and (max-width:767px){
	#navbar-menu li a{color:#fff;text-decoration:none;}
	#navbar-menu li a:hover{color:#fafad2;}
}

<PC系のCSSのポイント>

※1.メニュの反応スピードを少し遅くするために「transition:0.5s;」を指定しています。

※2.画面枠まで3pxの線を引く為に左右のmarginを-10%、paddingを10%にしています。
数字自体は適当な数字でかまいません。

※3.メニュはUL、LIリストで出力されるのでULに「display:flex;」を指定し、LIリストを横表示にしています。

※4.LIリストは横に6個並ぶのでLIの幅を100%÷6にしています。尚、縦線は左だけ引いています。

※5.最後のLI(6個目)のだけ右に縦線を引いています。

※6.メニュ文字は「display:block;text-align:center;」で中心表示にしています。

※7.メニュBOXの色変更はhover(カーソルが来た時)、active(現在のメニュ)を指定しています。

<スマホのCSSのポイント>

※1.メニュボタンを挿入した時のメニュの色とカーソルが来た時の色だけ指定しています。
activeは、Bootstrapのjqueryで処理してくれないので指定していません。
やるとしたら自作のjqueryで可能と思いますが、そこまではこのサイトでは行っていません。

3.その他

上記プログラムの先頭に下記が記述されています。

<body <?php body_class(); ?>>

これはボディクラスにWordPressに自動でクラス名をつけてくれ!との指定になりますが、このサイトではこのクラスを利用したCSSは作成していないのであまり意味がありません。

よって<boby>だけで良いのですが、慣例としてそのまま記述しています。

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「Wordpress(応用編)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

「wprdpress-ad」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

今まではWordPressの更新にあまり気を使いませんでしたが、WordPress5.5に更新しようとするとエラーが発生して、更新できない事態に遭遇しました。そこで5.5に更新する裏技を紹介しています。

ここでは「WP-Mail-SMTP」プラグインと「Gmail API」を使ってWordPressからメールを送る方法を解説します。特徴はGoogleのセキュリティ審査で警告は出ないが、設定と運用が面倒な事です。

ここでは「WP-Mail-SMTP」プラグインと「Googleのアプリパスワード」を使ってWordPressからメールを送る方法を解説します。特徴は簡単で運用が簡単だがGoogleのセキュリティ審査で警告がでます。

Wordpressのセキュリティ強化の方法として「SiteGuard WP Plugin」と「Google Authenticator」の使い方を解説しています。

「Velvet Blues Update URLs」はWordpressのプラグインです。よって、WordPress稼動中にURLを変更するツールです。これを使ってサイトのURLを変更する方法を解説しています。

WordPressを構築した後、URL変更をしたい等のニーズが発生しますが、この時に重要なのはWordPressの稼働環境を理解する必要があります。ここでは「WordPressの稼働環境」と「MariaDBの中の構造」を解説しています。

「PHP7.0」から「PHP7.3」に変更したや、画面が途中で表示されないという問題が発生しました。この時に対応した内容を紹介しています。

「PHP Compatibility Checker」で「File has mixed line endings; this may cause incorrect results」の警告が出た時の対処方法を解説しています。

Jqueryでコントロールするページネーションです。
デバイスに全リストを送り、Jquryで何処を表示するか?のコントロールをします。

PHPでコントロールするページネーションを投稿ページ等に配置すると動作しない事があります。
これを解決する方法を解説しています。

このドキュメントではビジュアルエディタでモーダルウィンドウを使ったコンテンツを作成する方法を解説しています。更に1ページの中に複数のモーダルウィンドウ定義があっても対応できるJqueryにしています。

ビジュアルエディタで文書を作成する時、ボタンを作成したい時があります。
ここでは下記のBootstrapのボタンをビジュアルエディタで利用する方法を解説します。

ここでは引用

の設定と使い方を解説します。ポイントは見やすい引用BOXです。

親テーマのビジュアルエディタのCSSが「editor-style.css」でない場合はTinyMCE Advancedプラグインを利用するのに一工夫が必要になります。
ここではその解決方法を解説しています。

2018年末にリリースされたWordPress5.0から標準エディタは「ブロックエディタ(Gutenberg)」に変更になりましたが「ビジュアルエディタ」を使い続ける方法を解説しています。

ビジュアルエディタの操作画面に幾つかのダッシュアイコンボタンを追加したサンプル事例を紹介しています。

広告を読み出すHTMLをそのまま記述すると、プログラムが見づらくなります。 その対策として関数を使う方法もありますが、ここではWordPressのウィジェット機能を使う方法を解説します。 1.サイドバーにAdSense広 […]

画像が多いサイトを作成するとどうしても表示スピードが遅くなります。 この対策の一つとして画像を圧縮する方法があります。   画像圧縮には色々なツールがありますが、ここでは「Compress JPEG & […]

WP Mail SMTP等でGMAILのSMTPサーバを利用する場合は、「アプリパスワード」又は「Google Cloud Platform」を利用する必要があります。ここでは「アプリパスワード」の設定方法を解説しています。

SynologyのDSMで80/443以外のポート番号を使ったWebサイトを構築する方法を解説しています。

SynologyでWordPressのURL変更を「Search-Replace-DB」で行う為には、ポート番号指定でDBを見に行く必要があります。ここではこの使い方を解説しています。

wordpress関数のwp_mailを使った事例を解説しています。このフォームのボタンはBootstrapで、ダブルクリックによる二重送信防止機能も付けています。

このコンテンツはこのサイトのフッタページのデザインを解説した物です。

このコンテンツはこのサイトのリストページのデザインを解説した物です。ページデザインはFlexboxを採用して左にコンテンツ、右にウィジェットを配置しています。またページ送りはBootstrapのページネーションを利用しています。

このコンテンツはこのサイトの投稿ページのデザインを解説した物です。ページデザインはFlexboxを採用して左にコンテンツ、右にウィジェットを配置しています。

PHPプログラムでコントロールするページネーションです。
やり方はWordPressのページネーションからデータを取得し、それをBootstrapのページネーションフォーマットで出力しています。

PC画面ではサイドバーがあっても良いが、幅が狭いスマホではこのエリアが確保できない。そこでスマホの場合は自動的にBootstrapのドロップダウンメニュに置き変えるサイドーバーの作り方を解説しています。

このコンテンツはこのサイトの固定ページのデザインを解説した物です。ページデザインはFlexboxを採用しています。またトップページはfront-page.phpを利用しています。

パンくずは一般的にはプラグインを利用しますが、ECサイト等でサイトに特化したパンくずにする為には自作のパンくずの方がカスタマイズ性に優れます。そこでここでは自作のパンくずを作る方法を解説しています。

Bootstrapのインプットグループ機能を使った検索BOXを作成した事例です。検索BOXは関数化してボタンの色を指定できる様にしています。

Bootstrapのナビゲーション・バー(Navbar)機能を使うとスマホ画面がスマートになります。但しデフォルトでは使いづらいのでNavbarボタンの関数化とWordPressメニュを使う方法を解説しています。

モーダルウィンドウとは新しいウィンドウを表示し、その操作が完了するまで親ウィンドウの操作ができないタイプのウィンドウのことです。ここではBootstrapのモーダルウィンドウ機能をビジュアルエディタで使う方法を解説しています。

ビジュアルエディタでBOXを作成する方法は①表機能を使う②スタイルで設定したBOXを使うがありますが、ここでは表機能を使ってBOX全体がリンク対象になるBOXを作成する方法を解説しています。

Bootstrapを導入するとBootstrapが持っているアイコンフォントが使える様になります。一方、WordPressもアイコンフォントを持っています。ここではこれらの使い方を説明しています。

ここではビジュアルエディタでタブ切替ができるコンテンツを作成方法を解説しています。更にここでは1ページに複数のタブ要素があっても対応できるjqueryプログラムにしてあります。

TinyMCEのスタイルは1つの段落に対する定義になります。よってこのスタイルで作成したBOXは、改行(Shift+Enter)しか使えません。しかしショートコードという新しい概念を利用すると段落変更(Enter)が使えるBOXを作る事ができます。ここではその作り方を解説しています。

TinyMCEで画像を取り扱うポイントは、画像に枠を付ける場合はどうするのか?と画像のレスポンシブ化は、どの様に実現するか?になります。ここではこれらの設定方法と使い方を解説しています。

このドキュメントではビジュアルエディタの段落、h2~h5及びリンクの設定とリンクの貼り方を解説しています。

TinyMCEではリストとして、オーダリスト

    とアンオーダーリスト

      が用意されていますが、決して使い易いものではありません。そこでこのサイトではTinyMCE Advancedのスタイル機能を使って半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。

ビジュアルエディタで文書を作成した際にどのフォントを使うか?は悩ましい所です。ここではどの様なフォントを指定するとどの様なフォントで表示されるのかを解説しています。

ビジュアルエディタで綺麗な表を作成する為に「TinyMCE Advanced」と「Bootstrap」の表機能を利用しています。ここではそれらの設定方法と利用方法を解説しています。

レスポンシブWebデザインとは、ユーザーが閲覧するデバイス幅に応じたデザインで表示させる技術のことで、有名所でBootstrapとFlexboxが挙げられます。ここでは両者の特徴と違いを解説しています。

Flexboxは素晴らしい機能ですがプロパティの設定に悩まされます。本稿では具体的な事例を挙げながらFlexboxの使い方を解説しています。

PHPプログラムで表示するデバイスの種類が判ればプログラミングが簡単になります。そこでここではデバイス種類を取得する関数とデバイスの画面サイズを取得する方法を併用して、実使用上問題ない方法を解説しています。

画面サイズを取得する為には①セッション機能をONにする。②ajaxを使ったJqueryプログラム③ajaxからのデータを受け取るphpプログラムが必要になります。またajax経路はWordPressのデフォルト経路ではなく独自経路を使っています。

WordPressで用意されている関数、is_mobileやwp_is_mobileを利用すると、アクセスしてきたデバイスの種類を意識したPHPプログラムを作成する事ができます。ここではこの設定方法と使い方を解説しています。但し、これは画面サイズではありません。

ここでは整形済みテキスト(pre)の設定と使い方を解説します。整形済みテキストのポイントは見やすいソーステキストの提供です。

Bootstrapのモーダルウィンドウの機能をビジュアルエディタで使うとどうしてもBootstrapの仕様の制限を受けます。
そこでこの投稿では自作のモーダルウィンドウの作り方を解説します。ここでは背景色の変更やコンテンツエリア幅の変更を可能としています。

コラップスとはアコーディオンなどのようにコンテンツを開閉できる機能でここではBootstrapのコラップス機能をビジュアルエディタで利用する方法を解説しています。更に1ページに複数のコラップスがあっても対応できるJqueryにしています。

TinyMCEのデフォルト設定ではインデントはpタグとimgタグしが使えません。またCSSを更新した時にスーパリロードしないと画面が更新されない等の問題点もあります。ここではこれらの問題点を解決して使い易いTinyMCEの設定方法を解説しています。

ビジュアルエディタのCSS「editor.style.css」を充実させると操作性は良くなりますが、「style.css」を維持する事が大変になります。ここではその管理方法の一例を紹介しています。

TinyMCEの仕様は親テーマのeditor-style.cs、子テーマのeditor-style.cssの順番に読み込みます。ここでは子テーマのeditor-style.cssだけを使う方法を解説しています。

Bootstrapはグリッドデザイン以外にボタンやナビゲーション等の色々な機能を持っており、これを利用するとかなり自由なデザインが可能になるツールです。このBootstrapをダウンロードし、HTTP画面やビジュアルエディタで使う方法を解説しています。

子テーマの作り方には色々な方法があります。ここで紹介している方法は親と子を明確に分離する方法なので、子テーマのCSSが親テーマのCSSと完全に分離するので見やすくすることができます。

phpmyadminのセキュリティ対策として①phpMyAdminを別名にする方法②phpMyAdminをrootでアクセスできなくする方法
③phpMyAdminアクセスをローカルに限定する方法を解説しています。