STINGER7でヘッダー画像にリンクを付けてタイトルを非表示にする方法

   

8e0db9690b4151a5dfbe4658f929cdba_s
こんにちは!しょうです。

ブログを「STINGER7」に変更したんですけど…

ヘッダー画像をクリックしてホームに戻れるようにしたかったのですが、なかなかうまくいかず…

結局設定できるまでに2時間かかってしまいました…。

ブログタイトルも非表示にするまでに1時間。長かった~。

というわけで、どのようにSTINGER7でヘッダー画像にリンクを付けてタイトルを非表示にしたのか、その方法を紹介していきたいと思います!

STINGER7でヘッダー画像にホームリンクを付けるには?

まずは、ヘッダー画像にホームリンクを付ける方法からいきます。

css編集する際には、TeraPadなどを使って必ずバックアップを取っておいて、失敗しても元に戻せるようにしておきましょう

これを最初にしておかないと、万が一が起こったときに間違いなく後悔すると思うので。

さて、ヘッダー画像にホームリンクを付けるには「外観」→「st-header-image.php」を開きます。

60行目辺りにこんな感じの場所があると思います。

<?php else : // 通常のヘッダー画像 ?>
  <div id="gazou-wide">
    <?php if ( isset($GLOBALS['stdata35']) && $GLOBALS['stdata35'] === 'on' ) {
      get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー 
    } ?>
    <img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" >

ここの部分を少しいじっていきます。

いじると言っても、コピーペーストするだけなんですけどね。
上記の、

<img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" >

この部分を全て選択して、下記のコードをコピーし、選択した部分にペーストします。

<a href="<?php echo home_url('/'); ?>">
<img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" >
</a>

これをそのまま貼り付けるだけで、ヘッダー画像にホームリンクがつきます。

やり方が分かれば、とっても簡単ですね。

STINGER7でタイトルを非表示にする方法

ヘッダーにブログ名が書いてあるのに、その上にもブログタイトルが表示されていると、ちょっと変な感じがしますよね。

ヘッダーにホームリンクを貼り付けたので、上部にあるブログ名は消してしまいましょう。

編集するのは、「外観」→「テーマヘッダー(header.php)」です。

編集していくのは66行目辺りからです。

<!-- ロゴ又はブログ名 -->
      <p class="sitename"><a href="<?php echo esc_url( home_url( '/' ) ); ?>">
          <?php if ( get_option( 'st_logo_image' ) ): //ロゴ画像がある時 ?>
            <img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_option( 'st_logo_image' ) ); ?>" >
          <?php else: //ロゴ画像が無い時 ?>
            <?php echo esc_attr( get_bloginfo( 'name' ) ); ?>
          <?php endif; ?>
        </a></p>
      <!-- キャプション -->

編集といっても消すだけなので簡単です。

<!-- ロゴ又はブログ名 -->
        
        <!-- キャプション -->

この間の部分を消すことで、ブログタイトルは消えます。

分かれば作業時間5分もかかりませんね。

上部にまだ何か表示された場合は、今編集していたテーマヘッダー (header.php)の一番上の「!DOCTYPE」の前に書かれている文字が表示されている可能性があります。
表示されている文字だけ消すことで、タイトル部分に表示されていた文字も消えると思います。

説明文の非表示の仕方

ブログタイトルの下に、サイトの説明文が表示されますよね。

そのままでもいいかなと思ったんですが、気になってしまったので一緒に消すことにしました。

サイトの説明文いらないなと感じたら、下記の方法で消すことができます。

<!-- キャプション -->
      <?php if ( is_home() ) { ?>
        <h1 class="descr">
          <?php bloginfo( 'description' ); ?>
        </h1>
      <?php } else { ?>
        <p class="descr">
          <?php bloginfo( 'description' ); ?>
        </p>
      <?php } ?>
    </div><!-- /#header-l -->

「テーマヘッダー(header.php)」の74行目辺りの「キャプション」下から「#header-l」の上までを消すことで、説明文も非表示にすることができました。

<!-- キャプション -->
<!-- /#header-l -->

 

最後に

カスタマイズの方法は他にもあるかもしれないですが、私はこの方法で問題なく編集できたので、参考にしてみてください。

失敗して取り返しのつかないことになっても、責任は負えないのでバックアップをしっかりとしてから、編集に臨んでくださいね

うまく編集できることを祈っています。

最後までお読みいただきありがとうございました。

 - STINGER ,