Xeoryをカスタマイズしてみよう!ヘッダー編(追記アリ)

セオリー

バズ部Xeoryっていうテーマを無料提供してるのをご存知ですか?

バズ部のサイトは、SEO対策でかなり参考にさせてもらってて、メルマガまで購読してます。
ファンです。

ファンなら使うしかないでしょ?

Xeoryはこちらからダウンロードできます。

ブログ仲間の松原潤一さんのブログにも紹介されてます。
バズ部のWordPressテーマ『Xeory』がすごすぎるポイント9個!早速レビューするよ!

スポンサーリンク


Xeory BaseとXeory Extension

Xeory Base(ブログ型)とXeory Extension(サイト型)が出てるんですが、サイト型のExtensionももちろんブログとして使えます。だってwordpressのテーマだからw

でも、extensionのほうは、なんていうかすべてがビッグサイズなんです。
トップページのヘッダー部分も、こんなかんじで画面を占めてしまう感じ。
セオリー1 この画面いっぱいな感じ、サムネイルも大きなのって海外のwordpressテーマでは流行ってるみたいなんだけど、あまりビッグサイズすぎるのも、私の手には負えそうにない。
サイズはcssいじれば調整できるんだろうけど、basicのほうが扱いやすそうだったので、私はBasicを選びました。

 

Xeoryをカスタマイズしよう

で、すっごくシンプルなので、これからすこしずつカスタマイズしていこうと思います。

私がやったカスタマイズを、こちらで紹介していこうというわけです。
初心者の方に少しでも参考になればと思って。

基本的な設定は、こちらの使い方マニュアルをクリックすると、Wordpressのインストールのことから書いてあります。
まぁ、この画面が見れてるってことは、インストールできてるってことなんだろうけどw

セオリー2

おすすめプラグインとかも書いてあるので、親切ですね。

ウィジェットの設定で、サイドバーをある程度作ってみてください。

 

そして、これからがカスタマイズだ!!!

毎日いっこずつカスタマイズしていきます。
一度に全部はしません。大変だし苦手だしめんどくさいからw

まずは上からやっていきましょう。

 

ヘッダー画像をスライダー形式で入れる

ヘッダー画像を設定します。
スライダー式にしようと思うので、ヘッダー画像を3枚用意しました。
サイズは1400×400。

作れない人は私にご依頼ください。1枚2000円で作りましょう。
って、そんな宣伝は置いといて

 

ヘッダー用意したら、プラグインの検索で「meta slider」というのを検索、インストール、有効化してください。

そしたらMeta Sliderと出るので、クリック。
セオリー3 新規スライダーをクリック。
セオリー4
スライドを追加をクリックして、画像をアップロードして、スライダーを追加っていうのをクリック。

セオリー5 セオリー6
右に出る「設定」で幅や高さを入力し、「高度な設定」で高度な設定をしますw

セオリー8 高度な設定というのは、そこに書いてある設定のことで、別に高度ではないけどお好みで設定してください。

 

保存をすると、ショートコードが作成されるので、「テンプレートに含める」に書いてあるコードをコピーして、外観/テーマ編集/header.phpを開きます
セオリー10
<header id=”header” role=”banner” itemscope=”itemscope” itemtype=”http://schema.org/WPHeader”>
<div>

この下に、さっきのコードを貼ります。それで終了。

 

なんだけど、このままではヘッダー画像の下に、ブログのタイトルがテキスト表示されるので
それが嫌な人は、

<header id=”header” role=”banner” itemscope=”itemscope” itemtype=”http://schema.org/WPHeader”>
<div>
このコードと

<?php header_social_buttons();?>

このコードの間に書いてあるコードを消します。

何て書いてあったのか、消してしまったのでちょっとわかりませんwww

meta sliderのコードは消さないようにね。

 

で、画面いっぱいに設定してたはずなのに、ご覧のとおり、画面いっぱいにならない。
cssのheaderの記述のとこにwidth: 100%; と加えてみても、ダメ。

これについては、あとで時間があればもっと詳しく見てみます。
分かれば追記しますね。

ヘッダー画像を画面横幅いっぱいにする方法

昨夜、ちょっと見てたら、なんとなくわかったのでシェアしておきますね。

MetaSliderで横幅100%に指定したら、だいたいそのまま100%に表示されるはずなんですが、
Xeoryの場合、header.phpでヘッダーの領域が

これで囲まれてたんです。

cssで見てみると、wrapは1200pxに指定されてたので、1200pxをはみ出ることができなかったんですね。

なので、 class=”wrap” この部分を削除しました。

header.phpのこの部分ですね。
<header id=”header” itemscope=”itemscope”
itemtype=”http://schema.org/WPHeader” role=”banner”>
<div class=”wrap”>
⇒ <div> にする
<!– logo –>
<!–?php     echo do_shortcode(““); ?–></div>
</header>

 

そしたら、横幅一杯にはなったんだけど、上にへんなスペースが空くんです。
style.cssを見てみると、このpaddingで36ってなってる。
だからこれを0にします。

すると上のスペースがなくなった!
/* —————————————-
* header
—————————————- */
#header {
background: #fff;
padding: 36 0 32px;   
⇒     36を0にする
border-bottom: 1px solid #efefef;
width: 100%;
}
 

ただここで問題が!!!

この設定をしたら、スライダーが機能しなくなったw

なんで??誰か教えてw

まぁ、スライダー使わずに、画像にすればいいかな?って感じだけど。

header.phpでスライダーを指定してる

このタグを消して、画像を入れるタグをかけばいいんじゃないかな。
<!–?php     echo do_shortcode(““); ?–>
<header id=”header” role=”banner”
itemscope=”itemscope” itemtype=”http://schema.org/WPHeader”>
<div>
<!– logo –>
<?php
    echo do_shortcode(“[metaslider id=コード”);  これを消して、画像の記述をする
?>
 

というかんじで、今、ご覧のようなヘッダーになってます。
スライダーはまだそのままにしてます。動き出すかもしれないのでww

セオリー

12 件のコメント

  • おはようございます^^
    えみと申します。

    早速、ご質問ですが、
    ヘッダーのBlogタイトルの直下に
    サブタイトルを表示させたいのですが、
    上手くいきません。
    ご依頼可能でしょうか?

    よろしくお願いします。

    • もしXeory Baseをお使いでしたら、サブタイトルは表示されない仕組みになっているみたいなので、
      header.phpの中くらいに

      $logo_wrap = ( is_front_page() || is_home() ) ? ‘h1′ : ‘p’ ;
      ?>
      < id=”logo” itemprop=”headline”>
      “>< ?php echo $logo_inner; ?>
      >

      このような部分があるので、サブタイトルを加えてください。

      $logo_wrap = ( is_front_page() || is_home() ) ? ‘h1′ : ‘p’ ;
      ?>
      < id=”logo” itemprop=”headline”>
      “>< ?php echo $logo_inner; ?>

      サブタイトル
      ←これを加えます
      >

      なお、この記事で私がやってるヘッダーのカスタマイズ(画面幅いっぱいのスライダー)をすると、タイトルもサブタイトルも表示されないので、どちらも表示させたい場合は、カスタマイズはしないでください。

      上のコード変更で、このようになります。
      サブタイトル

    • えみ様

      お返事が遅くなり、申し訳ありません!

      ブログタイトルの下にサブタイトルを表示させたいとのことですが
      お使いのテーマは、Xeory Base ですか?

  • りりちこ様

    ご返信とアドバイスありがとうございます。
    はい、Xeory Baseです。
    早速、実践します。

    ありがとうございました。

    • えみ様

      こちらこそ、ブログを見ていただきありがとうございます!
      うまくいかなかったら、また連絡くださいね^^

  • 初めまして。xeory base について質問したいのですがよろしいでしょうか?
    ワードプレスのテーマをxeory base に変更しらた、前のテーマのヘッダー画像が変に反応してしまい、ヘッダー部分にテキストが表示されてしまいます。
    消したいのですが消し方が分かりません。
    もし消し方がお分かりでしたら教えて頂けると助かります。
    宜しくお願いします。

    山岸

    • xeory baseは、デフォルトでヘッダー部分にブログタイトルが表示されるはずです。
      消したかったら、その部分にロゴ画像を入れるとか、header.phpでブログタイトルを呼び出すコードをコメントアウトするという方法があると思います。

      いま、セオリーを使ってないので、詳しいコードがわからなくてすみません。

  • 固定ページを作るとデフォルトで題名とコンテンツの箱が用意されているのですが、この箱とバックグラウンドイメージを消して真っ白な状態にしたいのですが、どのようにしたらよいでしょうか?
    Xeory Extentionを使ってみてます。

    • コメントありがとうございます。
      コンテンツのdivを消してしまうと、左寄せでかっこわるくなりますが、それは大丈夫ですか?

      このコメント欄ではすべて書ききれないのでやり方だけ説明しますと
      固定ページのphpファイルの名前を変えたものをもう一つ作って、phpファイルの中で題名を消したりコンテンツのボックスを消したりしたものを
      固定ページのテンプレートとしてアップロードします。
      そして固定ページ作成でそのテンプレートを選択して記事を書きます。

    • 投稿ページならsingle.phpの中のheader.phpを読み込んでるの位置を、移動したい場所に変更したらいいかと思います。

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

    ABOUTこの記事をかいた人

    りりちこです。福岡在住の主婦で、2児の母です♪ webデザインやネットビジネスでお小遣い稼ぎをしており、稼ぎたい方のサポートもしてます。 詳しいプロフィールはこちらから!