[Stinger5] スマホのブログタイトルを画像に変更する

Tweet

Pocket

こんにちは、okutani(@okutani_t)です。WordPressのテーマである「Stinger5」は、デフォルトでスマホのブログタイトルは文字で表示されています。

そのままでは味気ないので、ブログタイトルを画像に置き換えてオシャレにしちゃいましょう。当ブログはStinger5を使っているので、同じ方法でタイトルを画像に変更して利用しています。

では、さっそく作業していきましょう。

スポンサーリンク

スマホ用タイトル画像を用意する

スマートフォン用に利用したい画像をあらかじめ用意しておきます。今回は「640×160px」の画像を用意しました。縦幅はお好きなサイズでOKです。

今回、Stinger5の子テーマ内に「images」フォルダを作成し、そこに用意したタイトル画像「s-logo.jpg」を設置。

子テーマを利用していない方は、ダッシュボードのメディアからアップロードしておきましょう。

後にタイトル画像が置いてある場所までのURLを利用するのでメモしておく必要があります。

ブログタイトルを画像に置き換える

では、実際にタイトル文字を画像に置き換えていきましょう。

「header.php」ファイル80行目あたりの下記コードを次のように書き換えます。子テーマで設定する場合は、親テーマから「header.php」を子テーマにコピーして編集すればOKです。

<?php else: //ロゴ画像が無い時 ?>
    <?php bloginfo( 'name' ); ?>
<?php endif; ?>

↓

<?php else: //ロゴ画像が無い時 ?>
  <?php if(is_mobile()) { ?>
    <img src="http://WordPressをインストールした場所/wp-content/themes/stinger5child/images/s-logo.jpg" />
  <?php } else { ?>
    <?php bloginfo( 'name' ); ?>
  <?php } ?>
<?php endif; ?>

上記のコードは

<?php if(is_mobile()) { ?>
  //ここにスマホ用の内容
<?php } else { ?>
  //ここにPC用の内容
<?php } ?>

を利用することで、PCのレイアウトとスマホのレイアウトを別々に設定できるようにしています。

「//ここにスマホ用の内容」の箇所に、アップロードした画像を読み込むことで、スマートフォン用のタイトル画像を読み込むようにしています。

CSSで見た目を整える

では次に、「style.css」に下記コードを付け加えます。

@media only screen and (max-width: 780px) {
    .sitename img {
     height: auto;
     max-width: 100%;
    }
}

このように設定することで、機種ごとに画面サイズの違うスマートフォンでもレイアウトが崩れず表示されます。では、きちんと画像が設置されているか確認してみましょう。

無事にタイトル文字を画像に変更することができました！

しかし、画像横に余白があるのが気になりますね。。気になる方は次の方法で設定できます。

画像横の余白をなくす

タイトル画像を配置すると画像横に余白ができてしまいました。次の方法をおこなうことで、横の余白を取り除いて横いっぱいに画像を表示させることができます。

取り除き方は二通りありますので、お好きな方を適宜設定してみましょう。

1. wrapperのpaddingを0にする

先ほど記述した子テーマのstyle.css内の「@media only screen and (max-width: 780px){}」に下記コードを追加します。

#wrapper {
  padding: 0;
}

実は、この方法だとタイトル画像だけでなく、サイト全体の横余白がなくなってしまいます。設定は簡単にできますが、タイトル画像横の余白のみを取り除くことができませんでした。

上記のやり方で不満がある方は、次の方法でタイトル画像の余白のみを取り除くことができます。

2. wrapperからheaderを外に出し、個別で設定する

タイトル画像はheaderの中にあり、headerはwrapperの中にあります。headerをwrapperの外に出し、個別で設定することでwrapperとheaderのレイアウトを別々に設定できます。

詳しくは下記のサイトに載っていました。参考にしてみてください。

参考【STINGER5カスタマイズ】ヘッダー周りのカスタマイズ | ガジェニュー

私は、レイアウト的に余白があってもいいかなと思ったので、どちらの方法も使わずにそのまま使っています。ご自身に合ったレイアウトで設定してみてください。

まとめ

PCレイアウトとスマートフォンレイアウトを切り分けて、スマホ用のタイトル画像を適切に設定できました。

画像横の余白の設定はお好きなように設定してみましょう。Stinger5ユーザーの方の参考になれば幸いです。

Tweet

Pocket

okutani (@okutani_t) のヒトコト

スマホでタイトルを画像に置き換えること自体はそこまで難しくないですね。header.phpとstyle.css両方を設定するので、ミスして大惨事にならないよう、バックアップをとってから作業しましょう。