【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 アイコン

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

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

記事を読む

【WordPress】 データベース バックアップ用プラグイン「WP-DBManager」使用方法

WordPressで使用するデータベースを簡単にバックアップしてくれるプラグイン「WP-DBMana

記事を読む

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

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

記事を読む

wordpress アイコン

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

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

記事を読む

feedly_icon

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

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

記事を読む

違う、そうじゃない

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

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

記事を読む

1周年記念アイコン

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

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

記事を読む

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

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

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

記事を読む

wordpress アイコン

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

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

記事を読む

PC

Message

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

PC

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

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

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

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

ポテトチップス パクチー味
【実食レポート】 ポテトチップス パクチー味を食べてみた

これまでもみかん味やフォアグラ味、牛乳味など、ネタとも取れるさまざまな

映画ドラえもん のび太の南極カチコチ大冒険
【映画ドラえもん のび太の南極カチコチ大冒険 感想】 約20年ぶりにドラえもんの映画を観に行ってきました

こんにちは。自他共に認めるドラえもんオタク、しんこー(@yak

コールセンター 素材
もういい加減「テレアポ」なんていう原始的な営業活動やめませんか?

毎度、昨日は久々に仕事中、外部の人間にキレそうになったしんこー

→もっと見る

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

  • follow us in feedly





    Macintosh ブログランキングへ

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

PAGE TOP ↑