ブログタイトルをスマホ表示の時のみ画像に変更

ブログタイトルをスマホ表示の時のみ画像に変更

gush2のブログタイトルをスマホ表示時は画像を、ＰＣ等他はテキスト表示をさせるやり方を解説しています。

 

タイトルはブログの顔です。

 

ブログタイトルが長いブログでは、どうしてもスマホで観る時タイトルが崩れて訪問者は、その時点でブログを読んでくれません。

もちろん記事を読む人は、記事タイトルから検索して読んでくれると思います。
でも他の記事を読もうとする時、ブログのタイトルが目に入る時があると思います。

 

そんな時タイトルが崩れていたままだと、あなたはそのまま読みますか？私ならそんなブログは読みません。読んで感動がわきません。

今はスマホでブログを読む人が増えてきています。なのでスマホ読者をどうやったら増やすかを考えるべきです。

 

 

私のブログタイトル名は

 

「日本の最新ニュースや話題を届ける情報ステーション」

全角で２４文字です。

私の場合ブログタイトルが長いため、スマホで観た場合非常に観づらいです。

本当はタイトルを変更しようかな？っと思ったりしましたが、なんか今さらやってもＳＥＯ的見地から変更したくない。

逆にまだあまり読まれていない今がチャンスかも知れませんが・・・考え中・・・。

あまり深く考え込んでも仕方が無いので、スマホ表示の時のみタイトルを画像に変更しました。

タイトル画像の作成

 

利用したサイトはこちらです。

フリーフォントで簡単ロゴ作成

上記サイトをクリックすると以下の画面が表示されます。

 

 

• １．「表示するテキスト」

表示するテキスト欄にタイトル名を入力する。

その時スマホで表示する幅（300px）を考えて、どの部分で２行目にするか決める。

• ２．「幅」・「高さ」を決める。

スマホ表示なので幅⇒300px　高さ⇒80pxに変更した。

• ３．「サイズ」・「x座標」・「y座標」を決める。

「サイズ」は文字フォントの大きさ、「x座標」・「y座標」は枠と文字の間の隙間のサイズです。

• ４．「フォント名」を選択する

フォント名をプルダウンメニュウの中から選択します。

フォント名を「ロゴたいぷゴシック」を選択。

その横の「shadow」は、濃１と濃２にチェックした。

• ５．「背景色」を決めます

私の場合事前に色コードを調べていたので、そのコード番号を入力した。（4169E1）

• ６．「テキスト色」を決めます

文字の色は黒なので、（000000）。

• ７．「Drop Shadow 効果」にチェックを入れる

 

設定が終了した画面です。

 

プレビュー画面を見ながら各項目ごと設定して、よろしかったら「ダウンロード」ボタンをクリックします。

 

ダウンロードしたファイルを見ると、画像のサイズが違うと思います。

画像ソフト等（持っていない方はwindowsに付属している「ペイント」でも可能です）で幅のサイズを300pxに変更する。

ついでにファイル名も自分がわかりやすい名前で、名前を付けて保存する。

これでタイトル画像の作成が出来ました。

 

ワードプレスの「メディア」にアップロードします。

切り替えコードを付け加える

ブログ訪問者がスマホで観ているのか？ＰＣで観てるのか？によってブログタイトル表示を切り替えるコードを付け加えます。

 

WordPress管理画面→外観→テーマ編集より、「header.php」を開きます。

私の場合「header.php」も子テーマに作成してるので、子テーマ内の「header.php」を開きます。

以下のコードを探します。

 

[php]
<h1 class=”top_title”><a href=”<?php echo home_url();?>” title=”<?php bloginfo(‘name’); ?>”><?php bloginfo(‘name’); ?></a></h1>
[/php]

 

見つけたら削除して以下のコードをコピペします。
私の場合は

[php]

<?php if(is_mobile()) { ?>
<h1 class=”top_title”><a href=”<?php echo home_url();?>” title=”<?php bloginfo(‘name’); ?>”><img src=”https://www.y-taka.biz/wp-content/uploads/2014/11/sumaho-hedda-rogo.png” alt=”日本の最新ニュースや話題を届ける情報ステーション” /></a></h1>
<?php } else { ?>
<h1 class=”top_title”><a href=”<?php echo home_url();?>” title=”<?php bloginfo(‘name’); ?>”><?php bloginfo(‘name’); ?></a></h1>
<?php } ?>
[/php]

 

になります。

[php]
<?php if(is_mobile()) { ?>
<h1 class=”top_title”><a href=”<?php echo home_url();?>” title=”<?php bloginfo(‘name’); ?>”><img src=”ロゴ画像をアップロードしたＵＲＬ” alt=”ブログタイトル名” /></a></h1>
<?php } else { ?>
<h1 class=”top_title”><a href=”<?php echo home_url();?>” title=”<?php bloginfo(‘name’); ?>”><?php bloginfo(‘name’); ?></a></h1>
<?php } ?>
[/php]

上記コード内の「ロゴ画像をアップロードしたＵＲＬ」を削除して、あなたのワードプレスのメディアにアップロードしたＵＲＬを記述します。

次に「ブログタイトル名」を削除してあなたのブログタイトル名を記述します。

コードの削除と追記が終わったら「ファイルを更新」ボタンをクリックする。

 

スタイルシートの追記

 

子テーマに（持っていない人は親テーマの一番下に）追記します。
私の場合、子テーマの「images」フォルダーにもアップロードしていますので下記コードを追記する。
[css]
/*————————————–
ヘッダ見出し
————————————–*/
#header .top_title a {
color: #efefef;
text-shadow: 1px -1px 0 rgba(0,0,0,1);
font-weight: bold;
background: url(images/sumaho hedda rogo.png);/* スマホ用ヘッダー画像を追記 */
}
[/css]

 

子テーマの「images」フォルダーにアップロードしていない人は、下記コードを追記する。
[css]
/*————————————–
ヘッダ見出し
————————————–*/
#header .top_title a {
color: #efefef;
text-shadow: 1px -1px 0 rgba(0,0,0,1);
font-weight: bold;
background: url(img src=”ロゴ画像をアップロードしたＵＲＬ”);/* スマホ用ヘッダー画像を追記 */
}
[/css]

以上で完成です。

まとめ

カスタマイズしてみて、スマホ用のヘッダー画像を作成するのに時間が掛かりました。

センスがないので選ぶのに時間が掛かってしまった。

とりあえず、今のところこの画像で行きます。余裕がでてきたら、カッコイイヘッダー画像に変更する予定でいます。