PR

【Stinger3】ブログタイトルを画像にしてスマホ画面にも最適化させるという罠

Stinger3を使用し始めてしばらく経ちましたが大変気に入っています!ですが、ほかのwordpressサイトをみてもStinger3を使用しているページは一目見たらわかってしまいますし差別化したいなと思ってブログタイトルを文字から画像にしてみることにしました!その忘備録になります。

 

まずは現状把握

stinger3-title-text-before

こんなかんじに見事に文字ですね!なんか普通な感じがいいというか物足りないというか。

現状把握終了!

 

タイトル画像の作成

ここでひとつ気になったことがあります。画像サイズってどうしたら良いの?ということです。画像タイプはPNGの透過タイプで作成します。

Stinger公式サイトをみると横280ピクセルならスマートフォンからみてもはみ出すことなく表示されるとのことなので280×72ピクセルで作成することにします。

150510-0002

こんな感じにPhotoShopで作成しました。フォントに選択の難しさを改めて痛感しました!

 

 ファイルをアップロードする

150510-0003

メディアを追加から作成した画像をアップロードします。

アップロード後は、画像のURLをコピーしておきましょう、次のステップで使用します!

 

header.phpの変更

「外観」-「テーマの編集」をひらいてヘッダー(header.php)を開きます。

<p class=”sitename”><a href=”<?php echo home_url(); ?>/”>

の下にある  <?php bloginfo(‘name’); ?> の部分を書換えます。

 

before

<?php bloginfo(‘name’); ?>

after

<a href="<?php echo home_url(); ?>/"><img alt="ページタイトル" src="https://tamezatu.com/wp-content/uploads/2015/05/title_280x72.png" width="280" height="72" /></a>これで変更は完了です。

 

変更後確認

150510-0004

ちょっとはかっこよくなったようなそうでもないような^^

まとめ

そもそもアクセス数もかなり少ないこのブログでタイトルを画像にしたところで何も変わらんよ!と思ったりもしますが自己満足というかこのサイトへの愛情表現ですのでこれでいいんだ!と思っています。今後も役にたつ情報を提供できるように頑張っていきます。

 

 

タイトルとURLをコピーしました