なまら春友流

ラーメン屋店主兼ブロガーの春友がラーメン、ガジェット、日常について書くブログ

WordPressでブログタイトルを画像にする方法

Sponsored Links


13 wordpress logo1 1


ブログのヘッダータイトルを画像にしたのでその備忘録。
header.phpのbody内のh1タグの記述を変更すれば良いとのこと。
参考にさせていただいたのはこちらの記事。

WordPress タイトル文字を任意の画像ロゴに変更する | CORAL

具体的には上記記事を読んでいただければわかるのですが、私の行ったことを以下に。

Sponsored Links




1. まずは使用する画像をサーバにアップロード

まずはWordPressの管理画面から画像をアップロードする。

「メディア」→「新規追加」をタップ。

スクリーンショット 2012 05 06 11 45 43


↑ ファイルをDrag&Dropでサーバーにアップロードする。

スクリーンショット 2012 05 06 11 51 25


↑ アップロードしたファイルは「wp-content/Uploads」フォルダに格納されているのでそこのURLをコピー。

2. CSSを先に書いておく

上記記事の記述をそのまま使わせていただいた。
私はこのように style.css に記述。

[html]
/* タイトルを画像に変更 */

#site-title-logo {
width: 200px; /* ロゴの高さ */
height: 102px; /* ロゴの横幅 */
text-align: left;
margin-top: 40px; /* ロゴの上スペース */
margin-bottom: 40px; /* ロゴの下スペース */  
}
[/html]

ロゴの高さと横幅はアップロードしたファイルのサイズを記載。
先にCSSを指定するのはこの後に header.php を変更した際にすぐに反映されるようにするため。

3. h1タグを書き換える

私の場合、 header.php にh1タグが入っているのでそこを書き換えた。

[html]

LEAVE A REPLY

*
*
* (公開されません)

Return Top