こんにちは、まさきです。
このブログでは、 バズ部さんの無料テーマ「Xeory Base」 を使っています。
このテーマは無料でありながらシンプルで非常にクオリティが高く、wordpress初心者にもお勧めできると思います。
今回は、そんな「Xeory Base」の少し気になる部分の１つであるヘッダーをカスタマイズしていきたいと思います！
①.バックアップを取る
②.子テーマを編集する
③.ローカル環境で編集する
のいずれかを行ってください。
子テーマの作り方はこちら↓
ヘッダー画像の作成
まずは、自分のブログオリジナルのヘッダー画像を作りましょう。
フリー素材サイトから必要な素材を集めて画像編集ソフトでペタペタすれば出来上がりです。
画面いっぱいの画像になるため 横1200px以上 あることが望ましいです。
僕は、
・フリー素材は 「写真AC」
・画像編集は無料で使える 「PhotoScape X」
を使いました。
出来上がった画像がこちらになります。
サイズは、1920×280（6:1）です。
デザイナーさんに頼んだものには全く及びませんが、とりあえず使うぶんには問題ないはずです。
あとは、画像を埋め込んでいきましょう。
header.phpを編集
カスタマイズしない状態だと、下のようにタイトルが文字で表示されているだけでシンプルすぎるので、この部分を先ほど作った画像に変更していきます。
header.phpをSublime Textなどのエディタで編集します。
以下のコードの<div class=”wrap”></div>内でタイトルの文字を表示していることがわかります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <header id="header" role="banner" itemscope="itemscope" itemtype="http://schema.org/WPHeader"> <div class="wrap"> <?php $logo_image = get_option('logo_image'); $logo_text = get_option('logo_text'); if( !empty($logo_image) && get_option('toppage_logo_type') == 'logo_image') : $logo_inner = '<img src="'. get_option('logo_image') .'" alt="'.get_bloginfo('name').'" />'; else: if (!empty($logo_text) && get_option('toppage_logo_type') == 'logo_text') : $logo_inner = get_option('logo_text'); else: $logo_inner = get_bloginfo('name'); endif; endif; $logo_wrap = ( is_front_page() || is_home() ) ? 'h1' : 'p' ; ?> <<?php echo $logo_wrap; ?> id="logo" itemprop="headline"> <a href="<?php echo home_url(); ?>"><?php echo $logo_inner; ?></a> </<?php echo $logo_wrap; ?>> <?php bzb_header_social_buttons();?> <?php if( has_nav_menu( 'global_nav' ) ){ ?> <div id="header-menu-tog"> <a href="#"><i class="fa fa-align-justify"></i></a></div> <?php }?> </div> </header> |
なので、画像を表示するために以下のように変更します。
コードめちゃくちゃ短くなってますが大丈夫です笑。
1 2 3 4 | <header id="header" role="banner" itemscope="itemscope" itemtype="http://schema.org/WPHeader"> <a href="ブログのurl"> <img src="画像のurl" width="100%" alt="header"></a> </header> |
しかし、このままだとstyle.cssの影響で上下に余白が生まれてしまいます。
なので、続けてstyle.cssも編集します。
1 2 3 4 5 | #header { background: #fff; padding: 0px 0px 0px; /*変更箇所*/ border-bottom: 1px solid #efefef; } |
#headerのpaddingを0pxにすることで完全に余白を無くします。
これでヘッダー画像の調整は終わりです。
この設定だけでもブログの第一印象が大きく変わりインパクトに残りやすくなるはずです。
それでは、よいwordpressライフを。
あなたは天才です！とても分かりやすくて、本当にコピペだけで出来ました！本当に助かりました（＞▽＜）
ありがとうございます！全くの初心者ですが簡単にできました！
ただ、スマホ表示にした際に画像の上下に余白ができてしまうのですが、、やり方が間違っているのでしょうか。。
nontapさん、コメントありがとうございます！
返信が遅れてしまい申し訳ありません。
まだ解決していないようでしたら、下記メールアドレスに編集した部分のコードと現状の画面のスクリーンショットなどを
お送りいただけると詳しく対応することができると思います。
よろしくお願いします。
メールアドレス:masaki.prog@gmail.com