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

  関連記事

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

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

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

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

WorePress
WordPressプラグイン「AddQuicktag」で良く使うタグを簡単挿入しよう

WordPressの投稿画面で「B」を押すと、<b>タグでは無く&l …

WordPress
[WordPress]fluctやnendの広告が表示されない時は、JavaScriptプラグインをチェック!

別サイトで何ヶ月も前にスマホ広告のnend(ネンド)の申込をしました。すぐに許可 …

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

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

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

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

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

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

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

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

stinger3
[Stinger3]小見出しのデザインを変更する方法 - スタイルシート(CSS)

どうも、リョータ(@itbenricho)です。Stinger2からStinge …

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

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