【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

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

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

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



関連記事



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

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

関連記事

構造化データエラー 解消 アイコン

WordPressテーマ「Stinger3」の構造化データエラーを解消(マークアップ)する方法

ENJILOGさんの記事で知り自身のウェブマスターツールでも確認したところ、同様のエラーが表示されて

記事を読む

WordPressにTwitterのフォローボタンを設置する方法

本当に今更ですが、Twitterを始めることにしました。 ブログ記事はもちろんのこと「かゆいところ

記事を読む

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

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

記事を読む

wp_upgrade_icon

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

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

記事を読む

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

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

記事を読む

wordpress アイコン

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

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

記事を読む

【WordPress】.htaccessを使ってURLをwwwありに統一する方法と注意点

WordPressで構築したサイトのURLを「wwwあり」に統一する方法と注意点についてまとめました

記事を読む

feedly_icon

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

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

記事を読む

WordPress用アクセス解析設置プラグイン「Ultimate Google Analytics」

WordPressのプラグイン「Ultimate Google Analytics」は簡単にGAのア

記事を読む

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

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

記事を読む

PC

Message

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

PC

法改正
働き方改革って何? 働き方改革関連法案をふまえて労使が取り組むべき5つのポイント

2019年4月1日から働き方が変わります。 2018年6

キャンパスライフ
採用担当者からアドバイス、楽しい大学生活を送るために必要な11のこと

こんにちは、しんこー(@yakudatsujoho)と申します

社会人になった今だから断言できる、大学生におすすめのアルバイト12選

こんにちは、社会人○○目のしんこー(@yakudatsujoh

もしもし ポリスメン
【最大報酬10万円】 身バレもなく安心、警察への匿名タレコミができる「匿名通報ダイヤル」

犯罪もしくは犯罪の可能性がありそうなシーンに出くわしたが、逆恨みが怖く

公的保障 アイコン
【公的保障】 取りっぱぐれは大損! 届け出をするだけでもらえるお金

自治体によっては届け出だけでもらえるお見舞い金や支援金などが存

→もっと見る

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