賢威のヘッダー画像横にアイコンや画像を設置する方法

この記事は約10分で読めます。

  • LINEで送る

ヘッダータイトルロゴ横にアイコン設置

賢威6.1のヘッダーにアイコンや画像を横並びで設置する方法を説明します。
SNSアイコンを例にして説明しますが、画像、グローバルナビやリンクなど多岐に利用できます。

以前、サイドバーにSNSアイコンを横並びで表示する方法を説明しています。
応用で対応しておりますので、よろしければ以下の記事もどうぞ。
拡散希望!!WordPressのサイドバーにSNSアイコンを横並びで表示する方法

HTMLとCSSの作成

横並びで表示するHTMLとCSSを作成します。
サイドバーの時と同様に、リストタグ(ul)とフロートスタイル(float)を利用します。

<div id="header-icon">
<ul class="sns-list">
<li><a href="http://www.keni-customize.net/feed/" title="RSSフィード" target="_blank"><img src="http://www.keni-customize.net/wp-content/uploads/2013/12/rss.png" width="48" height="48" alt="RSSフィード" title="RSSフィード"></a></li>
<li><a href="https://www.facebook.com/kenicustomize" title="facebook" target="_blank"><img src="http://www.keni-customize.net/wp-content/uploads/2013/12/facebook.png" width="48" height="48" alt="facebook" title="facebook"></a></li>
<li><a href="https://twitter.com/keni_customize" title="Twitter" target="_blank"><img src="http://www.keni-customize.net/wp-content/uploads/2013/12/twitter.png" width="48" height="48" alt="Twitter" title="Twitter"></a></li>
<li><a href="https://plus.google.com/116010355104162534069/" title="Google+" target="_blank"><img src="http://www.keni-customize.net/wp-content/uploads/2013/12/googleplus.png" width="48" height="48" alt="Google+" title="Google+"></a></li>
</ul>
</div>

SNSページや画像のURLは各ブログ用に変更してください。

「外観 > テーマ編集」から「header.php」の以下の部分にコードを追加します。

<!--▼ヘッダー-->
<div id="header">
<div id="header-in">

<div id="header-title">
<p class="header-logo"><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo.jpg" alt="<?php title_keni(); ?>" /></a></p>


<h1><?php h1_keni(); ?></h1>
</div>

<!--ここにコードを追加する-->

<div id="header-text">
<p><?php echo the_excerpt_keni(); ?></p>
</div>

</div>
</div>
<!--▲ヘッダー-->

ヘッダーが初期の状態での追加位置です。12行目に追加します。

また、このままでは説明文と重なって表示されてしまうので、説明文表示コードを削除します。
上記コードから、以下の3行を削除すればヘッダーへの追加は完了です。

<div id="header-text">
<p><?php echo the_excerpt_keni(); ?></p>
</div>

次にCSSへの追加を説明します。
「外観 > テーマ編集」から「design.css」に以下のスタイルを追加します。

#header-in #header-icon{
	float: left;
	width: 40%;
}

#header-in #header-icon:after{
	clear: both;
}

#header-in #header-icon ul{
	list-style: none;
}

#header-in #header-icon ul li{
	display: inline;
}

設置するためだけに必要なスタイルを記述しています。
位置などの微調整方法は、次に説明します。

アイコン位置の微調整

ヘッダータイトル画像横へのアイコン表示実現できたかと思います。
画像の大きさによってはアイコンの位置がズレることがあります。

ヘッダータイトル画像とアイコンの横位置

ヘッダータイトル画像は「width」で幅調整されています。
アイコン画像も同様に幅調整していますので、横位置を変更したい場合はCSSで調整します。

/*●ヘッダーロゴ(メインタイトル)*/
#header #header-title{
	float: left;
	width: 45%; /*ロゴ(メインタイトル)下の<h1>の1行の幅はこちらのwidthの値を変更*/
}

上記のスタイルがありますので、ここの「width」を増減させます。

#header-in #header-icon{
	float: left;
	width: 50%;
}

先ほど追加したアイコンのスタイル「width」も増減させます。
両者を足して100%以下になるように微調整してください。

アイコン縦位置

アイコンの縦位置が、タイトル画像の上部と同じ位置で表示されます。
縦位置をズラす場合には、CSSに以下のスタイルを追加します。

#header-in #header-icon ul{
	list-style: none;
	margin-top: 2.5em;
}

先ほど追加したスタイル「#header-in #header-icon ul」に対し、
「margin-top: 2.5em;」を追加します、数値は微調整してください。

レスポンシブデザインでの表示

レスポンシブデザインでもアイコンを横並びで表示するため、モバイルCSSを修正します。
「外観 > テーマ編集」から「mobile.css」に以下のスタイルを追加します。

#header-in #header-icon{
	float: none;
	width: 100%;
}

ヘッダーアイコンのスマホ表示

レスポンシブデザインでも横並びで表示されました。

スマートフォンでは非表示にする

スマホの場合、ヘッダーにそのまま表示しても良いのですが、
ファーストビューでSNSアイコンが表示されるのがイヤな方もいると思います。

パソコンの場合のみヘッダーにアイコンを表示し、スマホでは非表示にする方法です。
先ほど追加したHTMLソースに、以下の記述を追加します。

<?php if(!wp_is_mobile()){ ?>
<div id="header-icon">
<ul class="sns-list">
<li><a href="http://www.keni-customize.net/feed/" title="RSSフィード" target="_blank"><img src="http://www.keni-customize.net/wp-content/uploads/2013/12/rss.png" width="48" height="48" alt="RSSフィード" title="RSSフィード"></a></li>
<li><a href="https://www.facebook.com/kenicustomize" title="facebook" target="_blank"><img src="http://www.keni-customize.net/wp-content/uploads/2013/12/facebook.png" width="48" height="48" alt="facebook" title="facebook"></a></li>
<li><a href="https://twitter.com/keni_customize" title="Twitter" target="_blank"><img src="http://www.keni-customize.net/wp-content/uploads/2013/12/twitter.png" width="48" height="48" alt="Twitter" title="Twitter"></a></li>
<li><a href="https://plus.google.com/116010355104162534069/" title="Google+" target="_blank"><img src="http://www.keni-customize.net/wp-content/uploads/2013/12/googleplus.png" width="48" height="48" alt="Google+" title="Google+"></a></li>
</ul>
</div>
<?php } ?>

1行目と10行目にソースを追加しています、これを「header.php」に追加します。
スマートフォンの場合のみ非表示になります。

  • LINEで送る

コメントを残す

このページの先頭へ