/WordPress(応用)/Flexboxを使ったヘッダの作成方法2020年02月03日Flexboxを使ったヘッダの作成方法このサイトのヘッダはBootstrapのナビゲーション・バーとflexboxを使ってデザインしています。Bootstrapのナビゲーション・バーを使う事により、スマホのヘッダ画面が簡単に作れる為に採用しています。PCやタブレットのヘッダはflexboxの機能を使う事により、簡単に綺麗なメニュが作れるようになっています。1.画面デザイン仕様<PC&タブレットの画面><タブレットの画面><スマホの画面>Flexboxは1行づつ処理する考え方になります。上記の3つの画面を処理する考え方は下記のストーリになります。1PC&タブレット画面は上部に青線を表示するが、スマホではこれを非表示にする。2コンテナの中にBootstrapのナビゲーション・バーを配置するとし、このコンテナの左右の余白をデバイス種類毎に変更する。3コンテナの中にあるナビゲーション・バーの背景をPC&タブレットでは白、タブレットでは黒にする。4ナビゲーションバーの1行目にはサイトタイトルとメニュアイコンを左右端に配置する。PC&タブレットのメニュアイコンは非表示にする。5ナビゲーションバーの2行目にはディスクリプションと検索BOXを左右端に配置する。タブレットの場合は縦に配置する。6ナビゲーションバーの3行目にはメニュを表示する。スマホの場合はメニュアイコンの開閉で操作する。7コンテナの最後にパンくずを表示する。2.表示プログラムとCSS上記を実現する表示プログラムとCSSは下記になります。?><!--7パンくずの表示--></div><上記プログラムに対応するCSS設定>1PC&タブレット画面には上部に青線を表示するが、スマホではこれを非表示にする。上部バーは「id=’top-bar’」を使っているのでこのIDをCSSで処理します。#top-bar{display:none;}}バーは色(#1e73be)で高さ(10px)で、スマホの場合は省略しています。2コンテナの中にBootstrapのナビゲーション・バーを配置するとし、このコンテナの左右の余白をデバイス種類毎に変更する。コンテナは「id=’header-contener’」を使っているのでこのIDをCSSで処理します。b)は、a:上下、b:左右のマージンになります。3コンテナの中にあるナビゲーション・バーの背景をPC&タブレットでは白、タブレットでは黒にする。navbar-inverse”」を使っているのでこのnavbarでCSSで処理します。.navbar{background:#000;}}4ナビゲーションバーの1行目にはサイトタイトルとメニュアイコンを左右端に配置する。PC&タブレットのメニュアイコンは非表示にする。ナビゲーションバーの1行目は「id=’header-line1’」を使っているのでこのIDをCSSで処理します。a{color:#fff;}}※1.「display:flex;」で横1行、「justify-content:space-between;」で左右端配置、「align-items:flex-end;」で下揃えを指定しています。※2.メニュアイコンをPC&タブレットで非表示にするのは、メニュアイコン関数の中で指定しています。5ナビゲーションバーの2行目にはディスクリプションと検索BOXを左右端に配置しています。タブレットの場合は縦に配置する。2行目は「id=’header-line2’」を使っているのでこのIDをCSSで処理します。#search-box{width:100%;padding:5px;}}※1.PC&スマホの場合は1行目と同じ設定なので1行表示で左右端配置で下揃えになります。検索BOXの幅は30%にしています。※2.しかしスマホの場合は「flex-direction:column;」で縦表示に変更すると共に「align-items:flex-start;」で左基準のデフォルトに戻しています。検索BOXの幅は100%です。6ナビゲーションバーの3行目にはメニュを表示します。スマホの場合はメニュアイコンの開閉で操作する。id=”navbar-menu”」を使っているのでこのIDをCSSで処理します。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で可能と思いますが、そこまではこのサイトでは行っていません。上記プログラムの先頭に下記が記述されています。?>>これはボディクラスにWordPressに自動でクラス名をつけてくれ!との指定になりますが、このサイトではこのクラスを利用したCSSは作成していないのであまり意味がありません。よって<boby>だけで良いのですが、慣例としてそのまま記述しています。メモ以上でこのドキュメントの説明は完了です。関連ドキュメントはメニュの「WordPress(応用)タブ」か下記の関連記事一覧から探して下さい。このサイトには、Google広告が掲載されています。この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。<関連記事一覧>Bootstrapを使った検索ボタンの作成Bootstrapのインプットグループ機能を使った検索BOXを作成した事例です。検索BOXは関数化してボタンの色を指定できる様にしています。TinyMCEにコラップス機能を実装するコラップスとはアコーディオンなどのようにコンテンツを開閉できる機能でここではBootstrapのコラップス機能をビジュアルエディタで作る方法を解説しています。この機能はHTMLでコラップスを指定した場合に使える機能で、ビジュアルエディタで編集可能なコラップスにする為には自作jqueryでダイナミックにこの機能を与える必要がある。この方法を解説しています。表示デバイスと画面サイズの両方を使った判断方法PHPプログラムで表示するデバイスの種類が判ればプログラミングが簡単になります。そこでここではデバイス種類を取得する関数とデバイスの画面サイズを取得する方法を併用して、実使用上問題ない方法を解説しています。ビジュアルエディタとHTTP表示を一致させる方法ビジュアルエディタの表示と、HTTP表示を一致させる為には両方のCSSを合わせる必要があります。ここで注意しなければならない点は下記になります。1ビジュアルエディタのCSS「editor.style.css」は、コンテンツエリアだけのCSSである。2一方、HTTP表示のCSS「style.css」は、コンテンツエリア以外のヘッダーやページにも使うCSSである。よって両方のCSSを一致させるとは「editor.style.css」の定義を「style.cssのコンテンツ領域」に取り込む事を意味しています。Bootstrapのナビゲーション・バー機能を使うBootstrapのナビゲーション・バー(Navbar)機能を使うとスマホ画面がスマートになります。デフォルトでは使いづらいのでNavbarボタンの関数化とWordPressメニュを使う方法を解説しています。子テーマの作り方には色々な方法があります。ここで紹介している方法は親と子を明確に分離する方法なので、子テーマのCSSが親テーマのCSSと完全に分離するので見やすくすることができます。CSSのフォントとフォントサイズの設定ビジュアルエディタで文書を作成した際にどのフォントを使うか?は悩ましい所です。以前のサイトはあまり意味もわからず作成しましたが、この辺の意味が判ってきたのでここで解説します。投稿ページをデザインするこのコンテンツはこのサイトの投稿ページのデザインを解説した物です。ページデザインはFlexboxを採用して左にコンテンツ、右にウィジェットを配置しています。TinyMCEのeditor-style.cssの制限と回避方法TinyMCEの仕様は親テーマのeditor-style.css➡子テーマのeditor-style.cssの順番に読み込みます。ここでは子テーマのeditor-style.cssだけを使う方法を解説しています。イメージの設定とレスポンシブ対応TinyMCEで画像を取り扱うポイントは、画像に枠を付ける場合はどうするのか?と画像のレスポンシブ化は、どの様に実現するか?になります。ここではこれらの設定方法と使い方を解説しています。