Simplicity2のテーマのカスタマイズからできるヘッダー画像設定3つ、現在のヘッダー・ロゴ画像・背景全面の表示の比較をしてみました。
- ヘッダー画像の設定でスマホ・タブレット。パソコンの表示のしかた
- パソコンビューで、大・中・小画面で開いたときの表示の違い
ヘッダー画像を1070pxにして、全ての表示を統一させたかったので、調べた結果を画像で比較。あと私がわからなかった『現在のヘッダー』で高さ指定して画像を切り抜く手順と合わせて順番に紹介します。
CSSはダッシュボードの『外観』より、『テーマの編集』のSimplicity2 child: スタイルシート (style.css)の一番下にでもペーストしてください。
テーマのカスタマイズ、ヘッダー画像の高さ調節をする方法
Simplicity2はヘッダーの高さがデフォルトでは100pxですが、変更できるようになっています。はじめての設定で、現在のヘッダーから高さを例えば140px変更しても、デフォルトの100pxのままで、うまくいきませんでした。
デフォルトの100pxのままで文字が切れてしまう例
一度高さ調節ができると、親子テーマを削除・導入しても設定が残ったまま。いくつかサブドメインで設定し、どんな工程でヘッダー画像の高さ調節ができるか試しました。イロイロしてるうちロゴ画像を設定したあと現在のヘッダーが反映したので、成功例を紹介します。
ヘッダー画像を任意の高さで編集する手順
現在のヘッダーから任意の高さで画像編集できないとき、ダッシュボード『外観』より『カスタマイズ』、『ヘッダー』をクリックしたところにある下記の場所をチェックします。
- ヘッダーの高さを140pxなど任意の数字を入力
- ロゴを画像にするにチェックを入れる
- ロゴ画像を選択する
- 一旦保存
- 現在のヘッダーで新規画像を追加して編集。すると任意の高さで編集可能に！
- ロゴを画像にするのチェックを外す
私の環境では一旦ロゴを選択したあと、ヘッダー画像の簡単に高さ調整が可能になりました。まだできないとき、WordPressの機能を使って試せる方法を次に紹介しますね。
PHPを直接触る。ヘッダー画像を、メディアライブラリで縮尺する方法
ヘッダー画像・ブログタイトル・ブログの説明文ディスクリプションの記載のあるheader-logo.phpを直接さわる時に試した方法です。
WordPressの機能メディアライブラリで、画像を大きくできませんが縮尺できるので試しましたが、カスタマイザーほどの機能はありません。
- メディアより該当のヘッダー画像を準備
- 画像を編集をクリック
- 画像縮尺の変更で、元のサイズより小さく設定（任意の数字を入力）
- 縮尺変更で完成
もっと良い情報を検索からみつけたので、Simplicityを使っているならオススメ！Simplicity本家のリンク先でご覧ください。
LINKSimplicityにヘッダー画像を追加・変更をする方法
高さ調節がうまく行かないとき、functions.phpで指定
ヘッダーからグローバルナビまでの高さ調整が上手くいかず情報を探してたとき、製作者わいひらさんがSimplicityサイトで書いてたのを発見しました。
ヘッダーの高さを変更する命令をfunctions.phpで指定すれば、超簡単に現在のヘッダーから高さ調整も解決！編集場所は、ダッシュボード『外観』より『テーマの編集』からfunctions.phpを選択。そして下記コードをコピペで追記する方法です。
間違わずにできれば、超簡単！ただ、エラーが出たらビックリするかもしれません？念のため慎重に作業してくださいね。
※おかしなところに数字がスぺースが入ると管理画面に入れない真っ白エラーが出るので、バックアップと復元の準備を簡易的でもしてると安心です。
目次1.2簡易的なバックアップでもとるべき理由の小見出し1.2.2FTPソフトで簡易的バックアップとエラーが出たら5秒で復元など参考にどうぞ
数字など入らないよう、こんな感じでコードを貼り付ける
//カスタムヘッダー $custom_header_defaults = array( 'random-default' => false, 'width' => 1070, 'height' => 100, 'flex-height' => false, 'flex-width' => false, 'default-text-color' => '', 'header-text' => false, 'uploads' => true, ); add_theme_support( 'custom-header', $custom_header_defaults );
5行目の'height' => 100,部分の100を、画像に合わせた高さに変更すればOK！とあるので、高さを変更。私は元々の画像が1199×149だったので、140に合わせたら、今までやったことが、嘘のようにあっという間に任意の大きさに編集完了しました！
カスタマイザーにある、3つのヘッダー設定の表示比較
1070pxのヘッダー画像をどこに入れたら、パソコン・タブレット・モバイルの表示がどのように表示されるか気になりますよね。あとはPCビューで横幅が大・中・小画面のときの表示例など、気になったトコロを順番に載せました。
※テーマのカスタマイズのレイアウト（全体・リスト）より完全レスポンシブ表示を有効に設定した場合の表示です。
※ヘッダーの高さ指定をしている：140pxの場合とします。
現在のヘッダーに画像を入れたときの表示
現在のヘッダーに画像を入れると、PCのみ表示されるので、下へスクロールしてモバイルヘッダー背景画像も入れてください。
PC・モバイル・タブレットでのヘッダーの表示は同じだけど、PCビューの横幅を変更したときの表示が全く変わるのが、個人的に気になった所です。
- PCビューで1110px以上の大画面で表示
グローバルナビ（メインのコンテンツ+サイドバー）とサイズがピッタリ合ってます。
PCビュー：大画面の表示
- PCビューで1110px以内の中画面で開いたときの表示
PCビュー中画面で見たときのヘッダー
PC画面でタブレットサイズで表示したときは、見栄えが良いです。でも画面右側の画像が表示されない仕様。
- PCビューで更に小さい画面で開いたときの表示
PCビューで小さい画面で開いたとき
完全に見切れます。740px以下で見る人がどれだけ居るかは、アナリティクスのユーザーの環境：ブラウザとOS：OSにセカンダリディメンションでブラウザのサイズを指定して見てください＾＾
個人的にですけど、コレが気になるなら別の表示方法（後述）がオススメ！
- タブレットでの表示
画面いっぱいにヘッダー画像が表示されます。
- モバイルでの表示
画面いっぱいで表示するけど、ヘッダー下のスペースが気になります。
- どのデバイスから見ても同じヘッダー画像を表示したい！
- ブログの存在をユーザーに覚えてもらいたい！
と考える人なら下記の設定がオススメです。
『ロゴ画像』を設定したとき1070pxのヘッダー画像の表示
テーマのカスタマイズのヘッダーより『ロゴ画像』の場所に画像を追加して、『ロゴ画像にする』にチェックを入れると表示されます。
ロゴ画像用なのでタイトルは表示されず、キャッチフレーズも画像の外にきて良い感じになっているのを見てみましょう。
- PCビュー大画面
PCビューでグローバルナビより小さめの設定。右上にSNSフォローボタンを表示させている場合は、画像にかぶります。
- PCビューの中画面（タブレットサイズ）
良い感じですが、コンテンツ部分と画像を同じサイズにしたい場合、CSSで調整が必要。
- PCビュー小さい横幅の場合
タブレットと同じだけど、ヘッダーの高さ指定をしているため、画像下にスペースが気になる所。
- タブレットビュー
PCビューの中画面とほぼ変わりません。
- モバイルビュー
ディスクリプション下が広く感じますけど、背景が入ってくるので、気にならないです＾＾
※ヘッダーの画像をナビの幅いっぱい、コンテンツの幅と全く同じサイズに揃えたいとき、この設定でCSSを少しさわるとできます。（後述）
ヘッダー外側背景画像を設定している場合
ヘッダー全ての領域いっぱい画像を表示させた場合。
グローバルナビを画面いっぱいにして、モバイル画面のヘッダーの高さをデフォルトのままで設定した場合の表示例です。
- PCビュー大画面の場合
画面サイズが大きくなるにしたがって、画面下の見切れかたが大きくなります。
- PCビュー中画面（タブレットサイズ）
画像下にスぺースが空いてきたのが分かります。コンテンツ部分のmainとヘッダーとの間にボーダーがあります。
- PC画面から見る小画面
画面横幅が小さくなるほど、画像下のスペースが広くなります。
- タブレットiPadビュー
良い感じ！
- スマホから見たヘッダー
良い感じですけど、PC用ナビのボーダーが入ります。※iPhone6指定
Simplicity2ヘッダー画像の上にカブったブログタイトルを非表示にするCSS
ヘッダーにあるブログ名の指定は、id=”site-title”と指定されて、その中にトップに移動するリンクが入ってます。<a href=”トップのURL”>ブログ名</a>となっているので、ブラウザに表示されます。
Simplicityでブログ名をブラウザで非表示にするには、ヘッダーの設定を変えるか、CSSで見えなくさせればOK！
#site-title {
display: none;
}
これで非表示になります。ただし、ロゴ画像を使う設定に変更した場合、この記載があると画像が表示されない仕様です。ロゴ画像に変更する場合は、これをコードを削除する！と覚えていてくださいね。
このCSSを指定すれば下記のようにディスクリプションが画像のTOPへ変更されます。
ブログタイトルを消したときのディスクリプションの位置
支障があるようでしたら後述しているページの見出しヘッダー画像をコンテンツやPCナビいっぱいに表示させるCSSなどで指定するなども手です。
モバイルなどでヘッダーとコンテンツの広い隙間スペースを調整するCSS
テーマのカスタマイズでヘッダーの高さを指定してるので、PCビューで幅を小さくしたときや、設定によってはモバイルで表示したとき、高さが反映してスペースができます。
CSSで調整すればヘッダー下のスペースが良い感じになります。
/*ヘッダーで指定した高さを元に戻す*/
#h-top {
min-height: auto !important;
}
高さ指定を自動で元に戻すため、autoを指定。
カスタマイザーで指定したものは、ヘッド内でスタイルが指定されるからCSSの優先順位が高くなります。style.cssの方が優先度が低いから、!importantを使って優先度を最強にして反映させるコードです。
LINK初心者のCSSが反映されない原因の1つ！優先順位の詳細度とは
スマホでヘッダーとコンテンツの間に線が入っているのを消すCSS
パソコンで表示されるグローバルナビを横幅いっぱいに設定してるときに入るのがこの線です。
下記のコードをスタイルシートに書き込んだら消えますよ。
@media screen and (max-width:740px) {
#container #navi {
border: none;
}
}
横幅740px以下のとき、PCのナビに入ってるボーダーを非表示にするCSSです。
本家の設定を確認するためのリンクをどうぞ。
LINKSimplicityに画面幅いっぱいのヘッダー画像を設定する方法
ヘッダー画像をコンテンツやPCナビいっぱいに表示させるCSS
上述の見出し『ロゴ画像』を設定したとき1070pxのヘッダー画像の表示設定をして、CSSでコンテンツ部分やPCナビいっぱいにヘッダーの画像表示させます。
/* ヘッダー画像の四方余白なし */
#header #header-in #h-top .alignleft, #h-top #site-title {
margin: 0 auto;
}
/*ヘッダーで指定した高さを元に戻す*/
#h-top {
min-height: auto !important;
}
/*PC TAB 右サイド余白*/
#site-title a img {
width: 100%;
}
1つ目は、ロゴ用ヘッダー画像の四方に余白があるので、領域を指定して外側の余白を0にするCSSです。
2つ目は、上述見出しモバイルなどでヘッダーとコンテンツの広い隙間スペースを調整するCSSの説明通り。
3つ目はPCビュー中画面タブレットサイズでもし、右サイドに余白ができた場合の対処として、幅いっぱいになりなさいね。と100%を表示させました。
PCビュー：ビフォー
グローバルナビよりヘッダーが狭い
PCビュー：アフター
グローバルナビとヘッダーが揃ってキレい！
スマホビュー：ビフォー
スマホ画面いっぱいになってない
スマホビュー：アフター
ヘッダーがコンテンツとそろった！
これをするとディスクリプションの左端にスぺースがなくなります。調整したい場合は次。
サイト概要ディスクリプションの左側に余白が欲しいときのCSS
スマホビューで、左端いっぱいからサイトの概要が入ってるのを1文字分左へ寄せたいとき、1em左へと言う指定をしてます。※0.8とか1.2など小数点も指定できる。
/* サイトディスクリプションに余白 */
#site-description {
margin-left: 1em;
}
スマホビュー：アフター
ディスクリプションの左に1文字余白ができた！
さいごに
PCビューで、大・中・小画面で開いたとき、ヘッダー画像の表示の違いが気になったので比較しました。なによりヘッダー画像を全ての表示を統一させたかったからですけどねっ。
Simplicity2で、はじめて設定するテーマのカスタマイズ。私と同じように思ったあなたに届いたら嬉しいです＾＾
ヘッダー画像にモバイルメニューが重なっているのが気になる場合、カスタマイズが簡単に出来るページをどうぞ。
LINKSimplicity2のカスタマイズ！スマホメニューをヘッダー画像上に移動し装飾❦可愛いデザインをCSSでコピペ
では、かうたっくでした！
Comments