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画像とスマホ画像で切り替える方法

スポンサーリンク

 - WordPress

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

Twitter でIT便利帳を

  関連記事

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

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

GTmetrix
GTmetrixのSpecify image dimensions改善方法

GTmetrixというウェブサイトの表示速度を計測してくれるサイトがあります。こ …

WordPress
WPプラグイン「Akismet」の設定方法、APIキーの取得

新しいサイトを立ち上げるたびに必要なのがWordPressのプラグイン「Akis …

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

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

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

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

Wordpressプラグイン
FacebookのOGPの設定はAll in one SEO Packが簡単!

今までOGPの設定をするとき、WordPressプラグイン「Open Graph …

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

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

失敗し泣き崩れる様子
[WordPress]functions.phpの編集時に、サイト画面を真っ白にしてしまった場合の直し方

WordPressでfunctions.phpを編集時に、画面を真っ白にしたこと …

アフィリエイト表示が切れている
【Stinger3】記事の中にGoogle AdsenseやAmazonアソシエイトを入れる方法

ブログ内に以下のAmazonアソシエイトを貼り付けようとしたら、下側が表示されな …

WordPressカテゴリーとサブカテゴリーにまとめてチェックを入れる
WordPressのカテゴリーを一括変換する方法と注意点(具体例付き)

先日、WordPressの既存のカテゴリーをサブカテゴリーに下げて、新しい親カテ …