【STINGER3】 ブログタイトルをテキストから画像に変えてみました

公開日: : WordPress

先日ハンドル名とサイト名を変更した旨の記事を書きましたが、それに併せてブログに親しみを持ってもらえるよう、タイトルをテキストから画像に変えてみました。

ブログタイトルをテキストから画像に変える

こちらの記事を参考にさせて頂きました。

【Stinger3】ブログタイトルを画像に変更する方法。加えてスマホに最適化させる

これまではタイトルはテキスト表記でした。

◆PC
STINGER3 タイトルを画像に変更

◆スマホ
STINGER3 タイトルを画像に変更

STINGER3 タイトルを画像に変更

いまいちパッとしないので、TwitterFacebookのヘッダー画像のデザインを流用して作ってみようと思います。

タイトル画像のサイズとアップロード

STINGER3の公式サイトでは、タイトルロゴのサイズは横320pxになっています。

WordPressテーマのSTINGER3公式サイト

なので私も320pxの画像を作成しました。
しかしこれだと、スマホで見た時に画像がはみ出してしまうようです。
280pxならはみ出すことはないようですが、そうなるとPCから見た時に小さくなってしまうので別途調整が必要です。後程説明します。

画像の名前は分かりやすく「rogo.png」にしました。
(※実際の「ロゴ」の綴りは「LOGO」だけども)

スマホで縮小表示されても劣化が少ないpngにしています。

今回作成したタイトル画像はこちらです。
しんこーの知恵袋 タイトル画像

この画像をアップロードします。

  1. WordPress管理画面の「メディア」→「新規追加」をクリック
  2. ファイルを選択してアップロード

アップロードしたらライブラリから編集を開き、代替テキスト(alt)としてブログ名を入力します。SEOでかなり重要なので必ず入れておいてください。

画像ファイルのURLもコピーしておきます。
STINGER3 タイトルを画像に変更

header.phpの編集

次にWordPress管理画面の「外観」→「テーマの編集」へと進み、テーマヘッダーを開きます。
STINGER3 タイトルを画像に変更

ヘッダー内に下記のコードがあるので探してください。Ctrl+Fでページ内検索ができます。

その中の

に書き換えます。

「サイトタイトル」には文字通りブログのタイトルを記入します。先程「メディア」の編集画面で「代替テキスト」の所に記入したものと同じです。

「画像のURL」には同様に先程コピーした画像のURLを記入します。幅と高さは画像の実サイズを記入してください。

以上でPC用の設定は完了です。

このように表示されました。
STINGER3 タイトルを画像に変更

画像をスマホサイズに合わせる

表示するスマホの端末によっては、ヘッダー画像の幅が320pxだとはみ出してしまうことがあるようです。

そこでスマホ用のスタイルシート「smart.css」を編集しました。

WordPress管理画面の「外観」→「テーマの編集」へと進み、今度は「smart.css」を開きます。
STINGER3 タイトルを画像に変更

そこに下記のコードを追記するだけです。

ついでに背景色にグレーがかかっていたのを白に変更し、このように変わりました。

◆PC
STINGER3 タイトルを画像に変更

◆スマホ
STINGER3 タイトルを画像に変更

実際に画面を見てみると、高さが100pxあるのでちょっと高く見えますね。
しばらくしたら「サイト名を変更しました」の表記を取って高さを調整しようと思います。

参考
http://equeko.info/wordpress/stinger3-for-lady/#i-2

PC

最後までお読みいただきありがとうございます。

お手数でなければ記事のご紹介をしていただけると嬉しいです。

ブログの情報はこちらでも配信しています。



follow us in feedly








関連記事



個人的に撮影した写真を公開しています。

旅行先や街中で気になったものを撮影・公開しています。
ダウンロード無料、商用利用OKです。写真AC

関連記事

WordPressに大量のコメントスパムが届くのでAkismetプラグインを有効化してみた

ブログを開設してから9ヶ月が経過し、更新頻度は低いもののおかげさまで少しずつアクセスも伸びてきま

記事を読む

feedly_icon

今更だけどWordPress4.0にfeedlyのRSS登録用ボタンを設置してみた

基本めんどくさいことは後回しの男、transamです。 本当に今更ですが、当ブログにf

記事を読む

wordpress アイコン

【STINGER3】WordPress記事本文中にアドセンスを表示させる最も簡単な方法

コード(タグ)を貼りつけるだけでそのページの内容にマッチした広告を自動的に配信してくれるアドセンス。

記事を読む

違う、そうじゃない

Akismetプラグインを有効化したところスパムコメントが全く来なくなった件

8月の下旬にWordPressのスパム対策プラグイン「Akismet」を有効化し、 WordPre

記事を読む

【STINGER3】 Excel to HTMLでテーブルがきれいに表示されるようcssを編集してみた

先日下記の記事をリライトしました。 蛍光灯が点きにくくなったらグローランプを交換しよう その

記事を読む

Crayon Syntax Highlighter icon

WordPress記事内にソースコードを表示させるプラグイン [Crayon Syntax Highlighter]使用方法

Crayon Syntax Highlighterは、WordPress記事内にhtmlやcssなど

記事を読む

wordpress アイコン

【WordPress・備忘録】 記事内の文字の色や大きさを変えるときに使うタグをまとめました

こんにちは、しんこー(@yakudatsujoho)です。 このブログがWordPressで構築さ

記事を読む

Google Analytics簡易結果表示プラグイン「G Analytics」の設定方法と使い方

Google Analytics(GA)は非常に便利なアクセス解析ツールですが、当然のことながら管理

記事を読む

【WordPress】効果的なping送信先一覧と設定方法

一昔前までは、ブログのアクセスアップにping送信が効果的といわれていましたが、現在ではその効果につ

記事を読む

wp_upgrade_icon

WordPressを最新のバージョンに更新(アップグレード)する方法

WordPressはセキュリティの改善などの理由から、高頻度でバージョンアップが行われていま

記事を読む

PC

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PC

WITTAMER(ヴィタメール) ビアゼリー アイコン
ベルギー王室御用達チョコレートブランド、ヴィタメールの限定商品「ビアゼリー」を食べてみた

どーもこんにちは。限定という言葉にめっぽう弱いしんこー(@yakuda

キリンビール神戸工場
【キリンビール工場見学】 発売前の神戸づくりを一足先に試飲してきたよ

今回が2度目の訪問となる、キリンビール 神戸工場へ見学に行ってきました

じゃがいも不足 アイコン
(17/05/10追記)【ポテトチップス 生産中止】 2016年の台風が原因の深刻なじゃがいも不足が発生

※2017年5月10日 追記 こんにちは。おっさんのくせにスナッ

EVANGELION STORE OSAKA
【LUCUA 1100 ルクア イーレ】 エヴァンゲリオンストア 大阪に行ってきた

今日は西暦2017年4月2日ですが、2年前の2015年には使徒襲来もな

ぎゅっと搾って 瞬間パック 厳選みかん ストレートジュース
【濃縮還元とストレートジュースの違い】 関西スーパーに売ってる「瞬間パック 厳選みかん」がうますぎる件

普段はフルーツジュースはほとんど飲まないのですが、近所の関西スーパーで

→もっと見る

  • 名前:しんこー
    仕事:WEB関連を10年ほど。デザインからコーディング、広告出稿、サイト分析、SEOなど幅広く手掛けている為、社内では「何やってる人?」と思われている。俺もわからん。

  • follow us in feedly





    Macintosh ブログランキングへ

    ブログランキング・にほんブログ村へ

PAGE TOP ↑