[ヘッダー]この記事は約7分で読めます。前回、賢威のヘッダー画像横にSNSアイコンを設置する方法を紹介しました。応用編として、ヘッダー画像(タイトルテキスト横)にグローバルナビを移動する方法を紹介します。ヘッダーは大きな画像をドカンと掲載してファーストビューにインパクトを与えるサイト、ヘッダー画像・タイトルテキストは最小限にしてコンテンツをファーストビューで見せるサイト。前者はアフィリエイトサイトに多く、後者はSEOサイトに多いイメージです(個人的に)。どちらが良い・悪いはなく、完全に好み(訪問者を含めた)です。賢威カスタマイズ研究所は、後者のヘッダー部スッキリパターンで運営しています。スマホ対応もしており、PCではヘッダー横のグローバルナビを表示し、スマホでは通常のグローバルナビ(メニューアコーディオン)を表示します。design.cssを修正ヘッダーのサイト説明文を削除し、グローバルナビを追加ヘッダーにリストタグでグローバルナビを設置して、CSSで微調整します。ヘッダー画像横に表示される説明文は消しています。今回の対応で自然と消えますが、詳細を確認したい場合は以下の記事をご覧ください。テーマ編集」から「header.php」を開きます。?></div></div><!--▲ヘッダー-->説明文を表示していたソースをグローバルナビのリストタグに変更しています。削除した説明文表示ソースは以下の通りです。?></p></div>スマホの場合は、追加したグローバルナビが表示されないように、ナビ前後に以下のスマホ条件文を挿入しています。?>PCのみ表示が可能となります。加えて、初期のグローバルナビをスマホのみ表示するために、「header.php」をさらに修正します。?>逆の条件文を初期のグローバルナビ前後に追加しました。PCで非表示・スマホで表示することができます。追加したグローバルナビをスタイルで微調整します。100%}「transition(CSS3)」を利用して、ホバー時のアクションを追加しているため、スタイルが少し煩雑になっています。この辺はお好みでカラーなど変更してください。CSS3を利用すると、結構いろいろなアニメーションが可能になりますので、別の記事で紹介します。姉妹サイト(WebLink)アフィリエイトで稼ぐ方法!アフィリエイト通信コメントを残す返信をキャンセルする。Reserved.このページの先頭へ。