【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

関連記事

Crayon Syntax Highlighter icon

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

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

記事を読む

wordpress アイコン

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

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

記事を読む

wordpress アイコン

WordPressのfunctions.phpがある場所について

WordPressをカスタマイズする際『functions.phpに追記』することがよくあるかと思い

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

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

記事を読む

wp_upgrade_icon

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

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

記事を読む

wordpress アイコン

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

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

記事を読む

blockquote icon

【WordPress】 STINGER3のblockquote(引用タグ)の背景を変えてみた

ブログで記事を書くときによそのページの本文やニュース記事の一部を引用することがあります。その場合はb

記事を読む

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

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

記事を読む

PC

Message

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

PC

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

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

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

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

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

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

【情報流出リスク】 フラグを立てられたら終わり? プライバシーを守るためには「物理的破壊」をするしかない

LINE流出はまさに新時代的事件 一昨年1月に「まだやるか!

ドラえもん in 3COINS
【3COINSとドラえもんがコラボ】 3COINS HEP FIVE店に限定グッズを買いに行ってきました

ドラえもんはもとより、藤子不二雄作品をこよなく愛するしんこー(

→もっと見る

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

  • follow us in feedly





    Macintosh ブログランキングへ

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

PAGE TOP ↑