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

  関連記事

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

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

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

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

WPプラグイン「Limit Login Attempts Reloaded」インストール画面
Widget logic teamから通知!WPプラグインLimit Login Attempts Reloadedの設定

先日、僕のWordpressのログイン後の画面にメッセージがやってきました。上が …

WorePress
[WordPress]記事内の画像リンクを全部まとめて外す方法

WordPressにはデフォルトで、画像をリンクする設定になっています。スマホで …

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

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

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

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

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

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

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

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

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

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

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

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