IT便利帳

コンピュータやタブレット端末の便利な使い方やこれは知らなかったといったことを紹介します。

WordPressのテーマ「Stinger3」のサイト名をテキストから画像に変更する方法

      2015/02/06  あとで読む   はてブする

.headerpng
本日Stinger2からStinger3に変更しました。その関係でStinger2で設定したことを再設定する必要があったので、忘備録を含めてそれらを紹介します。

第1弾は、サイト名をテキストから画像に変更する方法です。

スポンサーリンク

ヘッダー画像を削除する

1.下のようにStinger3の画像がデフォルトで追加されています。まずそれを削除します。Wordpressの[外観]→[ヘッダー]を選択してください。

stinger3デフォルト

 

2. その中に[ヘッダーの画像を削除]ボタンがあるのでそれを押し、[変更を保存]を押します。すると上のサイト名(IT便利帳)だけになりました。
.header3

 

スポンサーリンク

サイト名をテキストから画像に変更する

1.[メディア]→[新規追加]。中央にある[ファイルを選択]ボタンを押し、載せたい画像を選択します。
.header4
Stinger3は横幅が986pxなので、ぴったり合わせたい時はそれにあった画像を作りましょう。

 

2. [メディア]→[ライブラリ]を選択すると、追加した画像を確認できます。その画像にマウスを近づけると[編集]ボタンが出てくるのでそれをクリックします。
.header5

 

3. 追加した画像が確認できました。その画面の右側を見てください。
.header6

 

ここに画像の情報があります。サイズが986pxになっていますね。その中の[ファイルのURL]をコピーします。全選択しコピーしてください。

.header7

 

4. [外観]→[テーマ編集]→[ヘッダー(header.php)]の96行目から107行目に下のような表記があります。

 

これを以下のように書き換え、[ファイルを更新]ボタンを押します。
下の4行目にある<img src=”~”>の~に先ほどコピーしたURLを張り付けてください。(画像の保存先URLになります。)

 

すると追加した画像が表示されました。

.headerpng

 

まとめ

<div id”h-1″>から</div>までの変更です。<a href>~</a>は挟まれた所にジャンプします(ジャンプ先はTOP)。その間には、先ほど追加した画像が入っているので その画像をクリックしたらホームに戻るという設定になります。

画像の追加はStinger3以外にも可能です。もちろんタグが多少違いますが、Stinger以外のテーマでも変更できるので試してみてください。

(追記)

スマホで見ると画像ががおさまらず、はみ出している場合は、[外観]→[smart.css]内に「.sitename img{ max-width:100%; height:auto; }」を追加してください。

この記事もあわせて読んでみて下さい。
【関連】[WordPress]Stinger3のサイト名を、PC画像とスマホ画像で切り替える方法

「いいね!」で
最新情報をお届け!

Twitter でIT便利帳を

 - WordPress

スポンサーリンク

注目キーワード

スマモバ

U-NEXT

Kindle Unlimited

  関連記事

sitemap6
Google XML Sitemaps 4の調子が悪いので3にダウングレードしました

Google XML Sitemaps 4以上(現在4.0.4)は、サイトマップ …

蛍光ペン風にテキスト上をマーカーするCSS
蛍光ペン風にテキスト上をマーカーするCSSを設定してみた

色々なブログを拝見していると、とても気になるの強調サインがあります。それは蛍光ペ …

Wordpressプラグイン
WorPressプラグイン「Broken Link Checker」の使い方

WordPressプラグインに「Broken Link Checker」というの …

WorePress
[WordPress]テキストリンクの色を変更→クリックされやすくなるらしい

リンクの文字の色を変えるとクリックされやすくなるそうです。僕はWordPress …

WorePress
[WordPress]過去記事を最上位に固定表示する方法

過去にアップした記事をもう一度注目させたい時に、過去記事を一番上に固定する方法が …

WordPress「アップロードしたファイルをwp-content/uploads…に移動できませんでした」というメッセージ
WordPressで画像ファイルがアップロードエラーする場合の2つの解決法

最近Wordpressの「メディアを追加」で画像を選択するとエラーが出ることがあ …

サーバ移転
ロリポップからシックスコア(sixcore)へサーバー移転に成功!どこに躓いたか

サーバをロリポップからシックスコアに移転しました。理由は別のサイトのPVが増えて …

HTMLの使い方。とを両方使った例
ホームページHTML<p>と<br>の違いは応用例から理解しよう

僕がホームページを作り始めたのが1998年、丁度Windows 98 2nd e …

WorePress
[WordPress]記事中のmoreタグにAdsenseを追加できるプラグインAdMore

当ブログはWordPressで作成しています。Google Adsenseを表示 …

Stinger3のサイト名を、PC画像とスマホ画像で切り替える方法
[WordPress]Stinger3のサイト名を、PC画像とスマホ画像で切り替える方法

以前「WordPressのテーマ「Stinger3」のサイト名をテキストから画像 …