5月
20

【WordPress】ヘッダーにタイトルの画像を作って表示してみた。

screenshot

以前からやってみたかったこと

WordPress大好きなマヨです!
でもテーマを使っていると、他の人と似たりよったりで、
なんとか自分でヘッダー部分だけでも変えたいと思っていました。

自分にはデザインとかのスキルもないし、諦めていたのですが、
おかしくてもいいから、やりたかった。
ただそれだけ!(笑)

参考にさせて頂いたサイトさま

私は今、「Twetyeleven」というテーマの「子テーマ」を使っているので、
「子テーマ」については、以前記事に書きました。
こちらのサイトで、おおざっぱに把握しました。

『ヘッダーのレイアウト変更』WordPress Twenty Eleven:ヘッダーカスタマイズのあれこれ -其の参- | コピーライティング×デザイン×マーケティング実践記 | The Present Note

いつもこちらも、よく見てます。

Twenty Tenテーマのヘッダー部分のデザイン変更(1)〜サイトのロゴをいれてみる | Webourgeon

こちらで、コピペさせて頂きましたm(__)m

WordPress ヘッダータイトル文字を画像に変える | WordPress 不動産プラグインで不動産ホームページ 

まずは、画像作りから

フォトショは欲しくても買えないので、AdobeのPSEというソフトを使っています。

写真の加工と編集ソフト | Adobe Photoshop Elements 10

これしか使っていないので、他のソフトのことは知りませんけど、
大体は、この程度のことはできると思います。

  • PSEを起動して、新規作成で、適当な大きさを指定しました。
    縦80横300ぐらいで、透過を選んでいます。
  • 次にタイトルの「iPhone」のフォントを選びました。
    が、その後は日本語が使えないフォントだったので、仕方なく別のフォントをセレクトw
  • 画像はありあわせの、イラストをチョイスwww

Adobe Photoshop Elements 8

レイヤーはこんな感じ
Adobe Photoshop Elements 8

イラストはここから(∀`*ゞ)テヘッ
Adobe Photoshop Elements 8

結局、中身が3つに分かれちゃった
Adobe Photoshop Elements 8

最終的にサイズを決めてリサイズしてあります。
後でサイズが必要なので、メモっておきます。
ピクチャ

ヘッダーにいよいよ、作った画像を入れます。

ここでは、画像を選んでいません。
ヘッダー ‹ iPhoneとマヨテキメモ — WordPress

これも、なんか分からないけどやってます^^;
テーマの編集 ‹ iPhoneとマヨテキメモ — WordPress

cssファイルにこれを追加します。
テーマの編集 ‹ iPhoneとマヨテキメモ — WordPress

新規追加から画像をアップロードしてみても、私の場合はダメだったので(子テーマだからかな)
Transmitを使ってimagesフォルダーにアップロードしました。

ftp.dp19234868.lolipop.jp

本当は自分の子テーマにイメージフォルダーを作って、アップロードしないと、
バージョンアップの度に、タイトルが消えてしまうということになります。ftp.dp19234868.lolipop.jp

画像のURLは、右クリックでわかります。
スクリーンショット 2012-05-20 14.27.00

まとめ

出来上がったのが、これです!

iPhoneとマヨテキメモ | iPhoneとMacなど初心者マヨのメモ書き

自分で作ったので、文句は言えません( ー`дー´)キリッ

  • フォントが粗くて、ギザギザになってる。
  • 一番上には、なんだか灰色が残ってる。
  • イラストまでは、自分ではむりっす!
  • あと画像の保存は、gifじゃなくてpngの方がよかったかな。

なんか参考にはならないと思いますが、自分のメモとして残しておきます。
もうだって、わすれかけているもんw
で、やっぱり、プロはすごいな〜〜〜って感想です( ^ω^ )ニコニコ
でも、これからも出来る範囲で、ちょこちょこ弄っていきたいですね。

ではでは、☆。.:*:・’゜ヽ( ´ー`)ノ まったね~♪

Transmit 4.1.9(¥2,950)App
カテゴリ: 仕事効率化, ユーティリティ
販売元: Panic, Inc. – Panic, Inc.(サイズ: 19.6 MB)

【こちらの関連記事もご覧ください】


記事をお読み頂き、ありがとうございます!

記事の内容を気に入って頂けましたか?
もし気に入って頂けましたら、
ソーシャルボタンで共有頂ければ、とても嬉しいです♪


follow us in feedly RSS

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This blog is kept spam free by WP-SpamFree.