当サイトおよび一部のページにはプロモーションが含まれています

この記事はシェアフリーですシェアしていただけると嬉しいです^^

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

この記事はシェアフリーですシェアしていただけると嬉しいです^^

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

ad

目次

まずは現状把握

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

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

まとめ

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

全手数料無料自動適用リンク(公式特設ページへ)/

    リンク先(LINEMO公式特設ページ):https://www.linemo.jp/

    ※格安SIMは通常、契約事務手数料3300円、SIMカード発行手数料446円がかかります。

    2つめのLINEアカウント作成やMNP弾,Tinderなどの出会い系アプリのアカウント作成,SMS認証用に大人気!LINEの年齢認証もでき・初月日割り計算当月解約でもペナルティなし最安でアカウントを作るチャンスです!

    契約事務手数料0円、SIM発行手数0円、最低利用期間なし、解約金免除0円、解約違約金免除、MNP転出手数料0円、初月日割り計算実施中!上のバナーから開いて申し込みボタから申し込むと自動適用されます。

    LINEMO(ラインモ)の詳しい内容はこちら>>>

    ※全手数料無料は前触れなく突然終了する場合があります。

    ad

    この記事はシェアフリーですシェアしていただけると嬉しいです^^

    tamezatu.com@Zakkiフォローすると最新のお役立ち情報の更新を受け取れます( ・ω・)

    ad