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にはデフォルトで、画像をリンクする設定になっています。スマホで …

WordPress
「All in one SEO pack」でTwitterカードを簡単に設定する方法

WordPress(ワードプレス)のプラグイン「All in one SEO p …

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

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

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

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

有料アドオンVA Social Buzz + SWで好きな場所にバイラルメディア風SNSボタンを表示

バイアルメディア風のSNSボタン(Facebookいいね)を簡単に設置できるWo …

WorePress
WordPressのビジュアルリッチエディタが表示されず入力や編集ができないときにする方法

cある日、WordPressを立ち上げいざ編集をしようとしたら、入力が全くできま …

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

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

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

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

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

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

ブログ
独自ドメインを取得してWordPressでブログを始める手順6つ

独自ドメインを取得してWordPressでブログを始めるための流れをご紹介します …