simplicityで ナビメニュー を作成すると、
次のようにタイトルとサイト概要の下にナビメニューが表示されます。

↓ デフォルトのナビメニューの例

このナビメニューをタイトル横やサイト概要横に設置したいと思う人も多いはず

でもsimplicityのカスタマイズ画面ではナビをタイトル横に変える設定はありません。

しかし設定が用意されていないだけで、
CSSを少し改造すれば簡単にナビメニュー位置を変えれるんですよね。

ここでは simplicityでヘッダー横にナビメニューを表示する方法 を解説します。

ナビメニューをヘッダーに設置する利点

ここでは次画像のように、ヘッダー内に設置されたナビメニューを作成します。

ヘッダー内にメニューを埋め込むメリットは次のような点です。

• ヘッダー横の空きスペースを有効活用できる
• ファーストビューで記事に目が行きやすくなる
• デフォルトで表示されるナビメニューより目立つ
• デザイン的にもオシャレになる

ヘッダーにナビメニューを埋め込むことで今までナビメニューにとられていたスペースがなくなる上に、ヘッダー横のスペースも活用できて一石二鳥です。

あとオシャレな感じのメニューも作れるので、デザイン面でもプラスになります。

ヘッダー横にナビメニュー表示させる方法

ではヘッダーにナビメニューを表示させる手順を解説します。

その手順は次の通り…

header.phpの編集

まずsimplicityでヘッダー出力している「header.php」というPHPファイルを編集します。

そのためには、メニューから「外観」ー＞「テーマの編集」をオープン。

テーマ編集画面を開いたら「header.php」というファイルを探して開き、
その中で次のようにヘッダーロゴ表示を行っている部分を見つけてください。

上の画像でオレンジ色で囲った部分がそうです。

この部分を 次のように改造 すればOK。

  <!-- ここから追加 -->
  <div id="header_navi">
  <!-- ここまで -->>
              
      <div class="alignleft top-title-catchphrase">
           <?php get_template_part('header-logo');?>
      </div>
      
      <!-- ここから追加 -->
      <ul>
          <li><a href="xxx">WordPress</a></li>
          <li><a href="xxx">プラグイン</a></li>
          <li><a href="xxx">javascript</a></li>
          <li><a href="xxx">CSS<a></li>
          <li><a href="xxx">SEO</a></li>
      </ul>
              
  </div>
<!-- ここまで -->

「<!-- ここから追加 -->」から「<!-- ここまで -->」の部分をヘッダーロゴ出力の部分に追加してください。

そして追加したコードで、ナビメニュー の代わりになるのが次のリストです。

<ul>
  <li><a href="xxx">WordPress</a></li>
  <li><a href="xxx">プラグイン</a></li>
  <li><a href="xxx">javascript</a></li>
  <li><a href="xxx">CSS<a></li>
  <li><a href="xxx">SEO</a></li>
</ul>

URLやリンクテキストなどは自分のサイトに合ったものに書き換えてください。

編集が終わったら「ファイルを更新」ボタンを押して更新完了です。

style.cssの編集

次にテーマの編集画面から「style.css」というCSSファイルを開いてください。

そしてそのCSSファイルの最後に 次のような内容 を追加します。

/** ヘッダーにナビメニューを追加 **/

@media screen and (max-width: 1110px){
  #navi{
    display: block;
  }
  
  #header_navi ul{
    display: none;
  }
}

@media screen and (min-width: 1110px){
  #navi{
    display: none;
  }

  #header_navi{
    display: flex;
  }

  #header_navi:first-child{
    flex: 1;
  }
  
  #header_navi ul{
    flex: 1;
    flex-wrap: wrap;
      
    display: flex;
    margin: auto 0px;
    padding-right: 100px;
    list-style-type: none;
  }
  
  #header_navi ul li{
    width: calc(20% - 1px);
    text-align: center;
  }
  
   #header_navi ul li {
     border-left: 1px solid gray;
   }
 
   #header_navi ul li:first-child{
     border-left: 1px solid transparent;
   }
  
  #header_navi ul li a{
    text-decoration: none;
  }
}

この内容を追加したら「ファイルを更新」を押して更新。

ファイル更新してページを見てみると、
次のようにヘッダーにナビメニューが表示されましたよね？

ここではCSSを使って、

• 画面幅1110px以上でナビメニューを表示
• 画面幅1110px未満でナビメニューを隠す

・・・としているので、スマホではナビメニューはヘッダーに表示されず、プルダウン式のメニューが代わりに表示されるようになります。

ナビメニューのカスタマイズ

最後にここで設置したナビメニューのカスタマイズ方法について少し紹介します。

カスタマイズするには次のようにstyle.cssを編集してください。

メニューの列数

メニューの列数はstyle.cssで追加したCSSコードの次の部分で調整しています。

#header_navi ul li{
  width: calc(20% - 1px);
  text-align: center;
}

widthプロパティに「calc(20% - 1px)」を指定することでメニューアイテム１つの幅はメニュー横幅全体の20%分から1ピクセルを引いた幅になります。

１アイテム当たり全体の20%の大きさを持つので次のように５列で表示されています。

もしこの列数を変えたい場合は「calc((100% / 列数) - 1px)」と指定してください。

例えば６列に変えたい場合は次のようにwidthプロパティを書き換えます。

width: calc((100% / 6) - 1px);

これで次のように６列のナビメニューになります。

また指定した列数を超えた場合は自動で折り返されるので見切れるという心配はありません。

文字サイズや色の変更

ナビメニューの文字の装飾を行っているのはstyle.cssに追加した次の部分です。

#header_navi ul li a{
  text-decoration: none;
}

なので例えばメニュー内の文字を太字にしてフォントカラーを緑色にしたいならこの部分にスタイルを追加します。

#header_navi ul li a{
  text-decoration: none;
  font-weight: bold;
  color: green;
}

変更したナビメニューは次のような見た目になります。

まとめ

simplicityではカスタマイズ画面にナビメニューの位置を変更する設定はありません。

しかし、ここで解説したようにテーマファイルを少しだけ改造するだけでヘッダー内にナビを表示することが可能です。

ここでは最低限のデザインしか紹介しなかったのでフォントサイズや色、列数などをサイトに合わせるとより洗練された綺麗なナビメニューが作れることでしょう。

以上ここではナビメニューをヘッダー横に表示する方法について解説しました。

The post simplicityでヘッダータイトルの横にナビメニューを表示する方法 first appeared on Fukuro Press.

WordPressではサイドバーや記事下などのウィジェットエリアにサイドバーや人気記事などのウィジェットを置いて機能を追加することができます。

特にsimplictyではプラグインなどを導入しなくてもウィジェット機能が豊富で初めから新着記事や人気記事を表示したり、SNSのフォローボタンなどを表示するウィジェットが用意されています。

ただsimplicityではヘッダーがウィジェットエリアに対応していないのでヘッダー内に何かウィジェットを置くということができません。

そこでここではsimplicityでヘッダーをウィジェットエリアに追加し、そこに検索ボックスなどのウィジェットを設置する方法について解説します。

ヘッダーとは

まずウィジェットの設置方法の前にWordPressにおけるヘッダーについて説明します。

ヘッダーとは次のオレンジ色の枠で囲んだサイトの一部分のことです。

この部分には次のような情報が表示されます。

• サイトタイトル
• サイトの簡単な説明
• SNSフォローボタン

ページを開いたときに一番最初に表示されるサイトの顔になる部分です。

ただしヘッダーにはその下に表示されるナビメニューは含まれません。もしナビメニューをヘッダーに含めたい場合は次の記事でそのやり方を解説してあります。

simplicityでヘッダータイトルの横にナビメニューを表示する方法

ヘッダーの空きスペースが無駄なのでナビメニューをタイトル横やサイト概要横に設置したいと思う人も多いと思いますが、simplicityのカスタマイズ画面ではそのような設定はありません。しかし設定は無くてもテーマのCSSなどを少しだけ編集するだけでそのようなカスタマイズは可能です。ここではヘッダーのタイトルやサイト概要横にナビメニューを表示する方法を解説します。

fukuro-press.com

2019-11-19 15:44

ここでやることはこのヘッダー部分に次の画像のように検索ボックスなどのウィジェットを設置することです。

ただしこのようにウィジェットを置くにはヘッダーをウィジェットエリアに登録する必要があります。ここで紹介するのはヘッダーをウィジェットエリアに登録してウィジェットを設置する方法です。

ヘッダーにウィジェットを設置する方法

では、ヘッダーにウィジェットを設置する方法について解説します。

その手順は次の通り

ウィジェットエリアの登録

初めにヘッダーをウィジェットエリアとして登録します。

まずWordPress内の「テーマの編集」またはFTPソフトでsimplicityテーマがインストールされているフォルダを開いて、「functions.php」というPHPファイルに次の内容を追加してください。

if (function_exists('register_sidebar')) {
 
register_sidebar(array(
  'name' => 'ヘッダー内',
  'id' => 'header1',
  'description' => 'ヘッダー内に表示されるウィジェットです。',
  'before_widget' => '<div class="header_widget">',
  'after_widget' => '</div>',
  'before_title' => '',
  'after_title' => ''
));

}

register_sidebar関数でウィジェットエリアを登録しています。

この関数で指定している各引数の意味は次の通りです。

• name
  ウィジェットエリアの名前。WordPressの「外観」ー＞「ウィジェット」を開いたときのウィジェットエリアの名前として表示されます。
• id
  ウィジェットエリアのID。他と重複しない分かりやすいID名をつけてください。
• description
  ウィジェットエリアの説明。これはnameと同様にWordPressのウィジェット画面でウィジェットエリアの説明として表示されます。
• before_widget
  ウィジェットを囲む開始タグ
• after_widget
  ウィジェットを囲む終了タグ
• before_title
  ウィジェットエリアに表示されるタイトルの開始タグ(<h2>や<h3>など)
• after_title
  ウィジェットエリアに表示されるタイトルの終了タグ(</h2>や</h3>など)

今回はタイトルはいらないので記述していません。

register_sidebar関数を追加したらfunctions.phpを保存して閉じてください。

ウィジェットエリアの設置

register_sidebar関数を呼び出しただけではウィジェットエリアは使用できません。ヘッダーのテンプレートファイル内でウィジェットエリアを設置する必要があります。

まずヘッダーを出力している「header.php」というファイルを開きます。

そして次の画像でオレンジ色で囲った部分を探してください。

このオレンジ色の部分はサイトタイトル・ロゴ画像、サイトの説明などを出力している部分です。この部分の下に次のPHPコードを追加してください。

<?php dynamic_sidebar(header1); ?>

dynamic_sidebar関数に先ほど登録したウィジェットエリアのIDを渡して呼び出すことでその場所にウィジェットが設置されるようになります。

ヘッダー内へのウィジェットの設置

ここまで設定すればウィジェット画面から検索ボックスなどのウィジェットを設置することが可能です。

ではメニューから「外観」ー＞「ウィジェット」を開いてください。

開いてウィジェットエリアを見てみると次のように「ヘッダー内」というエリアが新たに追加されています。

この場所には次のように他のウィジェットエリアと同じく検索ボックスなどのウィジェットをドラッグ&ドロップで置くことが可能です。

ウィジェットを設置して「保存」ボタンを押したらブラウザで適当なページを開いて見てください。次のようにヘッダー下に検索ボックスが表示されます。

スタイルの微調整

最後にウィジェットの表示の仕方を少しだけ微調整します。

ヘッダーに設置したウィジェットはPCでは特に問題なく表示されますが、スマホなどの画面幅の狭い端末だと次のように画面幅いっぱいに広がって表示されてしまいます。

そこでsimplicityの「style.css」を開いてスマホ用に次のようなCSSを追加します。

@media screen and (max-width: 740px){

  .header_widget{
    margin-left:6px;
    margin-right: 6px;
  }

}

画面幅が740ピクセル未満の場合は次のように左右にマージンが少しだけ空くので見やすくなります。マージンの大きさについては好きなように調整してください。

以上がヘッダーにウィジェットを設置する手順です。

もちろん検索ボックスだけではなく、プラグインで用意されたウィジェットやカスタムHTMLコードも好きなように設置可能です。

まとめ

simplicityではウィジェットエリアにヘッダーが登録されていませんが、ここで紹介したように少しテンプレートファイルにコードを追加するだけで簡単にウィジェットが設置できます。

ここではヘッダーの下にウィジェットエリアを設置していますが、コードの位置を変えればヘッダー上にウィジェットを置くことも可能です。

以上simplicityでヘッダー領域にウィジェットを設置する方法について解説しました。

The post simplicityでヘッダー内に検索ボックスなどのウィジェットを設置する方法 first appeared on Fukuro Press.

WordPressのテーマの１つである「simplicity」は内部SEO対策が簡単でレスポンシブに対応しているので多くのブログやサイトで使用されている人気のあるテーマです。

また設定から簡単にテーマの外観を変更することができ、カスタマイズ性もあります。

ただヘッダーを固定しようとした場合、そのような設定はsimplicityのカスタマイズ画面にはないので独自にスタイルを追加する必要があります。

そこでここではsimplicityで上部に表示されるヘッダーを固定し、スクロールしても常に表示され続けるようにする方法について解説します。

simplicityにおけるヘッダーとは

ヘッダーとは名前通りサイトの上部(ヘッダー)部分に表示されるコンテンツのことです。

simplicityの場合、デフォルトで次のような見た目になってます。

ヘッダー部分には次の内容が表示されます。

• サイト名
• サイトデスクリプション(概要)
• SNSなどのフォローボタン
• ヘッダー背景

ページを開いたときに一番最初に表示されるサイトの顔になる部分です。

ただしヘッダーのすぐ下に表示されるナビメニューはヘッダーには含まれていません。

もしsimplicityでナビメニューもヘッダーに含めたい場合、
以下の記事で解説した方法などを使ってください。

simplicityでヘッダータイトルの横にナビメニューを表示する方法

ヘッダーの空きスペースが無駄なのでナビメニューをタイトル横やサイト概要横に設置したいと思う人も多いと思いますが、simplicityのカスタマイズ画面ではそのような設定はありません。しかし設定は無くてもテーマのCSSなどを少しだけ編集するだけでそのようなカスタマイズは可能です。ここではヘッダーのタイトルやサイト概要横にナビメニューを表示する方法を解説します。

fukuro-press.com

2019-11-19 15:44

このヘッダーをカスタマイズするには、
メニューから「外観」ー＞「ヘッダー」と進み、カスタマイズ画面を開きます。

「ヘッダー」を開くと次のようにヘッダーのカスタマイズ画面がでてきます。

この画面でPCやスマホでのヘッダー画像やヘッダー高さ、タイトルテキストの代わりになるロゴ画像などを設定することができます。

ただしヘッダーを固定する設定項目はないので、次に紹介する方法で独自にスタイルを追加する必要があります。

simplicityでヘッダー固定する手順

ヘッダーを固定する手順は次の通り

まずメニューから「外観」ー＞「カスタマイズ」を開きます。

開くと現在使用しているsimplictyのカスタマイズ画面が開くので次のように一番下までスクロールして「追加 CSS」という項目を開いてください。

「追加 CSS」を開くと下の方に独自CSSコードを入力するテキストエリアが表示されます。

ヘッダーを固定するには、
このテキストエリアに 次のようなCSS を追加します。

@supports (transform: translateX(-50%)) and (-webkit-transform: translateX(-50%)){
  header{
    height: 100px;
  }

  #header{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%)

    width: 1070px;
    height: 100px;
    z-index: 100;
    margin: 0 auto;
  }
}

以上の内容を保存すればヘッダーが固定されて表示されます。

たったこれだけですが、このCSS内で何をしているのか次で少し説明します。

このCSSではまず「#header」内の次のコードで、ヘッダーを固定しているんです。

position: fixed;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);

「position: fixed」と指定することで画面内での位置が固定になります。

そして「left: 50%」で左側から５０%の位置にヘッダーの左端を置いて、「transform: translateX(-50%)」で要素の大きさの半分だけ位置を移動させることで画面横中央にヘッダーを表示させています。

またほんの一部ですが transformプロパティに対応していないブラウザ があるので、
その場合はヘッダーを固定しないように最初に@supportsを使って条件分岐させています。

@supports (transform: translateX(-50%)) and (-webkit-transform: translateX(-50%)){

このCSSコードを「公開」ボタンを押して公開するとスクロールされても追従し、画面上部に固定されたヘッダーの完成です。

完成ヘッダーはサイトを表示したときは普通のヘッダーと見た目は全く変わりません。

しかし下にスクロールしてみると次のようにヘッダーが上部で固定され、常に同じ位置に表示されるようになります。

こういう感じ

まとめ

ヘッダーの固定されたサイトというのはあまり多くないのでsimplicityでは固定ヘッダーの設定がないですが、このように独自スタイルを追加すれば簡単に固定ヘッダーは作成できます。

以上simplicityでヘッダーを上部に固定表示する方法について解説しました。

The post simplicityでヘッダー部分を画面上に固定表示する方法 first appeared on Fukuro Press.