Gushのヘッダーにロゴを入れてh1を別のところに変える

公開日:  最終更新日:2015/03/11

ヘッダーにロゴ画像を入れる

ブログのロゴ画像を作ったのでヘッダーのタイトル部分に入れようとおもいます。

13

まずはheader.phpからカスタマイズします。

<div id="header"><!-- header -->
<header>
<div class="hgroup">
<!-- このh1の行を消して -->
<h1 class="top_title"><a href="<?php echo home_url();?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>

<!-- このロゴをいれるimgタグにかえる-->
<a href="<?php echo home_url();?>" title="<?php bloginfo('name'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/ロゴ画像" alt="サイトロゴ"></a>



h1に各カテゴリー名が表示されるようにする

つぎはh1です。初めのままではブログのタイトル名がh1になっていますが、私のブログはそれほどブログタイトルは重要ではないと考えましたので各記事ページが属しているカテゴリー名をh1に出そうとおもいます。

またheader.phpです。先ほど入れたロゴの上にh1を入れます。

<div id="header"><!-- header -->
<header>
<div class="hgroup">

<!-- ここから -->
<div id="h_box">
<?php if (is_single()) { ?>
  <h1><?php $cat = get_the_category(); ?>
<?php $cat = $cat[0]; ?>
<?php echo get_cat_name($cat->term_id); ?>
|<?php bloginfo('name'); ?>
  </h1>
	<?php } else { ?>
<h1>
<?php bloginfo('name'); ?>
</h1>
 <?php } ?>
</div>
<!-- ここまで -->


<a href="<?php echo home_url();?>" title="<?php bloginfo('name'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/blog_logo.png" alt="サイトロゴ"></a>


style.cssに付け足す(ヘッダ見出しのところにかくと後でわかりやすい)


#h_box{
text-align: right;
padding-top: 10px;
margin-right:20px;
}
#h_box h1{
font-size: 14px;
color: #666;
font-weight: normal;
}


解説します。single.phpを使うページ(投稿記事ページ)はカテゴリーがあれば「親カテゴリー名|ブログ名」と表示。なければブログ名

その他のページ(トップページ名など)はブログ名

今回はこんな設定にしました。

変更後

ヘッダーカスタマイズ

スマホ表示

スマホサイトのヘッダー

少しずつ変えていきますので、宜しくお願いします。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを投稿

  • 自分の写真
    name
    Aya imai

    三人の子を持つ主婦です。パソコン、編み物など 下手の横好きですが、いろんな事をやりたがります。 どれも大した知識はありませんが、上達を目指しがんばります。

Category

PAGE TOP ↑