Free!なランサー3

ふとした疑問やコアなお役立ち情報をお届けする情報サイト

簡単にブログタイトルを画像に変更する方法

      2014/12/31

6

やはりブログタイトルは画像もしくはロゴに限りますね!

名前は一番最初に見られるであろう場所であるため画像やロゴを追加してインパクトを持たせましょう。

と、言うよりそっちの方がとってもcoolでカッコイイです!

ではどうぞ↓

スポンサーリンク

Gush2のブログタイトルを画像に変更する方法

タイトル画像を用意する

まずはタイトル部分に置き換える画像を用意しましょう。

当ブログ、free na rancerはこんな感じの画像を用意しました↓

fnr

至ってシンプルですね。

画像サイズは300×60

サイズはブログのデザインにより変更してください。私はタイトル横のスペースに728×90のAdSense広告を入れるのでこのサイズにしています。

ファイルはpngで背景なしです。

私はフリーペイントソフトGIMPを使用しています。

タイトル画像の作り方も少し解説しているので参考にどうぞ

GIMPでブログのタイトルを格好良く作る方法~反射編~

GIMPに新しいフォントを追加する方法

コードを挿入する

上記の画像url部分に画像urlを

サイト名の部分に自分のサイト名を入力してください。

画像のアップロードとurlを取得する

用意したタイトル画像をメディア>新規追加でアップロードしてください。

アップロードした画像を確認してみるとファイルのurlとあるのでその部分をコピペします。

5

挿入する場所

上記のコードにアップロードした画像のurlとサイト名を入れたら挿入します。

外観>テーマ編集>ヘッダーと開いてください。

ヘッダー部分、一部抜粋↓

<h1 class=”top_title”><a href=”<?php echo home_url();?>” title=”<?php bloginfo(‘name’); ?>”><?php bloginfo(‘name’); ?></a></h1>の部分を入れ替えます。

6

ドンッッッ!!!

変更完了です。参考にしてみてください。

 - Gushカスタマイズ , , ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

  関連記事

wp ロゴ カスタマイズ
wordpressテーマ「Gush」をシンプルにカスタマイズする

そろそろ、ブログ(Gush)のカスタマイズが大体終わったので少しまとめたいと思い …

7
背景画像の前にもう一枚背景を追加する方法

どういう事?って感じですがタイトルのまんまです。 前回紹介した記事↓ ヘッダーの …

wp ロゴ カスタマイズ
当ブログ「Gush」カスタマイズ記事が紹介されました。

スポンサーリンク 紹介してくださったブログ 100万円を1億にするブログさんで当 …

ヘッダー 広告
ヘッダーに新しくウィジェットを追加して728×90のAdSense広告を設定する方法

ヘッダーに新しくウィジェットを追加したいと思います。 コピペでできますが今回は7 …

メニューバー位置変更
メニューバーの位置を変更する方法

Gush2はメニューバーがタイトルの上に表示されているのでタイトルの下に移動させ …

wp ロゴ カスタマイズ
メニューバーの位置を少しだけ移動させる

見ての通り、当ブログはメニューバーの位置を少しだけずらしています。 Gushのメ …

wp ロゴ カスタマイズ
wordpress無料テーマ「Gush」のカスタマイズ【補足】

このブログはElloraさんの作った 無料テーマ「Gush」を使用しています。 …

44
ヘッダーの背景画像を消す方法と他色々

なんやかんやでGushからGush2にテーマを変更することにしました。 やるから …