PR

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

全手数料無料自動適用リンク(公式特設ページへ)/詳細はLINEMO公式サイト特設ページ(https://www.linemo.jp/)でご確認ください

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

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

     

    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

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

    まとめ

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

     

     

    全手数料無料自動適用リンク(公式特設ページへ)/詳細はLINEMO公式サイト特設ページ(https://www.linemo.jp/)でご確認ください

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

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

       
      SEOStinger
      tamezatu-zakkiをフォローする
      タイトルとURLをコピーしました