【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

関連記事

違う、そうじゃない

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

Crayon Syntax Highlighter icon

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

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

記事を読む

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

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

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

記事を読む

1周年記念アイコン

[いつかバズる日を夢見て] ブログリニューアルから1年で月6000PV・ユーザー数4000に到達。個人のブログとしては良い方じゃないでしょうか

おかげさまで本ブログ『役立つ情報.com』がリニューアル(※後述)して1年が経ちました。 これ

記事を読む

wordpress アイコン

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

PC

Message

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

PC

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

  • follow us in feedly





    Macintosh ブログランキングへ

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

PAGE TOP ↑