何でもありのカオスなブログ

STINGER|ブログのタイトルを消してヘッダー画像だけに変更する方法!

   

stinger3

リクエストに答えていくよっ!

どもー、ひろ@tekito-daro)でーす(・∀・)ノ

以前、ブログのタイトルを消すのってどうやるんですかー?って質問が着てたのでそのアンサー記事なるものを書いてみますよー!

タイトルを消すって表現が正しいのかはわからんけど…。

STINGERはデフォルト状態だと、タイトル+ヘッダー画像みたいな構成になってるんですがそれをこのブログみたいに変更したいとのこと。

わかる、わかるぞその気持ッ!

俺も『ブログ=ヘッダー画像にタイトル入れて表示』みたいなイメージがあったんで弄ったんですよねー。やっぱり同じような考えの人っているんだなぁ( ==)旦シミジミ

タイトルのフォント変えてもいいんだけど、画像のほうがやっぱインパクトあって記憶に残ると思うしね!

今回はわかりやすく、STINGERのデフォルト状態からいじってみますよー!

あ、いじる前にに必ずバックアップ取ろうな!

SPONSORED LINK

まずはheader.phpの構成について理解しよう!

細かいことはいいから、とりあえずタイトル消したい!って人はここ飛ばしてコピペ用のとこまで行っちゃってくださいな。

どれがタイトルを表示しているとか、タイトル周りでいじりそうなモノを知っておけば後から弄る時にきっと役立つはず!と、言うことで簡単に見てみましょう。あくまでもカスタマイズでいじりそうな場所だけね。

ブログからみたヘッダーの構成

STINGER ヘッダー構成_compressed

  1. ブログタイトル
  2. ブログの説明(キャッチフレーズ?)
  3. ヘッダー画像
  4. メニュー

だいたいこんな感じですかね。

次にコードから見てみましょう。header.phpをTeraPadなどで開いて見るとわかりやすいかも。

コードと照らしあわせて見よう!

上に書いた構成が、コードでどこに書かれているのかわかれば、後はそこをちょちょっと弄れば簡・単・ヨ!ってことで見ていきましょう!

STINGER タイトル STINGER 画像 STINGER メニュー

とまぁこんな感じ。わかるかな?

つまり、タイトルを消したかったら1を、ヘッダー画像がいらなきゃ3を消せば消えます。まぁ画像ないと寂しいから消す人いないと思うけどw

STINGER でブログタイトルを表示したくないならココを消そう!

ここまで読んだ人はすでにわかってそうだけど。

まずはheader.phpを開きます。今ブログに使ってるテーマを弄りたい場合は、FTPソフトでDLしてくるのが早いかも。

開いたら、80行目くらいにこんなコードが見えると思います。

<div id="container">
<div id="header">
  <div id="header-in">
    <div id="h-l">
      <p class="sitename"><a href="<?php echo home_url(); ?>/">
        <?php bloginfo('name'); ?>
        </a></p>
      <?php if (is_home()) { ?>
      <h1 class="descr">
        <?php bloginfo('description'); ?>
      </h1>
      <?php } else { ?>
      <p class="descr">
        <?php bloginfo('description'); ?>
      </p>
      <?php } ?>
    </div>
    <!-- /#h-l --> 
  </div>
  <!-- /#header-in --> 
</div>
<!-- /#header -->

この中の84~86行目がブログタイトルを表示しているのでそこを消せばOK!消すとこんな感じになります。

タイトル削除

もし、画像の上にある部分が邪魔だーって思ったら

<div id="container">
<div id="header">
  <div id="header-in">
    <div id="h-l">
      <p class="sitename"><a href="<?php echo home_url(); ?>/">
        <?php bloginfo('name'); ?>
        </a></p>
      <?php if (is_home()) { ?>
      <h1 class="descr">
        <?php bloginfo('description'); ?>
      </h1>
      <?php } else { ?>
      <p class="descr">
        <?php bloginfo('description'); ?>
      </p>
      <?php } ?>
    </div>
    <!-- /#h-l --> 
  </div>
  <!-- /#header-in --> 
</div>
<!-- /#header -->

87行目~95行目を消せばOK!タイトルも紹介文も両方いらなければ、<div id=”header”>~<!– /#header –>まで全部消してOK!

これでPC側は一応消えることは消えました。が、この状態でスマホから見ると・・・

スマホから見た状態

/(^o^)\ コレじゃ何のサイトか全然わからん!と、言うことで

スマホでヘッダー画像を表示させよう!

お次はsmart.cssをイジイジ。開いたら、『#container #gazou』で検索してもらうと523行目くらいにこんなのがあると思います。

#container #gazou {
display: none;
}

この部分をとりあえずこうしておきましょう。

#container #gazou {
//display: none;
}

 

これでこんな風に画像が表示されると思います!

STINGER スマホ ヘッダー画像

ヘッダー画像にリンクをつけてホームに戻れるようにしよう!

このままじゃ画像は表示できたけど、ホームに戻るのがめんどくさいのでヘッダー画像にリンクを貼って戻れるようにしておきましょう!

header.phpを開いて、<div id=”gazou”>を探すべし。

<div id="gazou">
  <div id="gazou-in">
    <?php if (is_home()) { ?>
    <?php //カスタムヘッダー画像// ?>
    <?php if(get_header_image()): ?>
    <p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
    <?php endif; ?>
    <?php } else { ?>
    <?php //カスタムヘッダー画像// ?>
    <?php if(get_header_image()): ?>
    <p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
    <?php endif; ?>
    <?php } ?>
  </div>
  <!-- /#gazou-in --> 
</div>
<!-- /#gazou -->

ココの<?php if(get_header_image()): ?>の後ろにある、<p id=”headimg”>~ってやつを<a href=”<?php echo home_url(); ?>/”></a>で囲んでやればおk!

<div id="gazou">
  <div id="gazou-in">
    <?php if (is_home()) { ?>
    <?php //カスタムヘッダー画像// ?>
    <?php if(get_header_image()): ?>
      <a href="<?php echo home_url(); ?>/">
    <p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
    </a>
    <?php endif; ?>
    <?php } else { ?>
    <?php //カスタムヘッダー画像// ?>
    <?php if(get_header_image()): ?>
      <a href="<?php echo home_url(); ?>/">
    <p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
      </a>
    <?php endif; ?>
    <?php } ?>
  </div>
  <!-- /#gazou-in --> 
</div>
<!-- /#gazou -->

これでヘッダー画像にトップに戻るリンクがつきました!( ´ー`)フゥー...ツカレタ。

めんどくさい人のためのコピペ用

こまけぇこたぁーいいんだよ!って人はこれをコピペして<div id=”container”>~<!– /#gazou –>までそっくり変えてくださいな。

<div id="container">
<div id="gazou">
  <div id="gazou-in">
    <?php if (is_home()) { ?>
    <?php //カスタムヘッダー画像// ?>
    <?php if(get_header_image()): ?>
      <a href="<?php echo home_url(); ?>/">
    <p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
    </a>
    <?php endif; ?>
    <?php } else { ?>
    <?php //カスタムヘッダー画像// ?>
    <?php if(get_header_image()): ?>
      <a href="<?php echo home_url(); ?>/">
    <p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
      </a>
    <?php endif; ?>
    <?php } ?>
  </div>
  <!-- /#gazou-in --> 
</div>
<!-- /#gazou -->

後は、smart.cssで523行目を

#container #gazou {
//display: none;
}

これに変えればおk。

ひとこと

とりあえずこれでPC・スマホ両方ともタイトル消してヘッダー画像を表示できるはず・・・!

もしこれから自分でカスタマイズ色々やりたいなーって思ってる人は、とりあえずドットインストールを見てから色んな人のカスタマイズ記事を読んでみると「ナルホドネ!」って感じに理解できるようになると思うのでオススメですよー!

そんじゃまた(・∀・)ノシ

 - カスタマイズ