WordPressでブログタイトルを画像にする方法
この記事は約 2 分で読めます。
ブログのヘッダータイトルを画像にしたのでその備忘録。
header.phpのbody内のｈ1タグの記述を変更すれば良いとのこと。
参考にさせていただいたのはこちらの記事。
WordPress タイトル文字を任意の画像ロゴに変更する | CORAL
具体的には上記記事を読んでいただければわかるのですが、私の行ったことを以下に。
1. まずは使用する画像をサーバにアップロード
まずはWordPressの管理画面から画像をアップロードする。
「メディア」→「新規追加」をタップ。
↑ ファイルをDrag&Dropでサーバーにアップロードする。
↑ アップロードしたファイルは「wp-content/Uploads」フォルダに格納されているのでそこのURLをコピー。
2. CSSを先に書いておく
上記記事の記述をそのまま使わせていただいた。
私はこのように style.css に記述。
/* タイトルを画像に変更 */
#site-title-logo {
width: 200px; /* ロゴの高さ */
height: 102px; /* ロゴの横幅 */
text-align: left;
margin-top: 40px; /* ロゴの上スペース */
margin-bottom: 40px; /* ロゴの下スペース */
}
ロゴの高さと横幅はアップロードしたファイルのサイズを記載。
先にCSSを指定するのはこの後に header.php を変更した際にすぐに反映されるようにするため。
3. h1タグを書き換える
私の場合、 header.php にh1タグが入っているのでそこを書き換えた。
<body> <!-- コンテナ --> <div id="container"> <!-- ヘッダー --> <div id="header"> <h1><a href="http://harutomo-ryu.com">なまら春友流</a></h1>
書き換える前は上記のようなHTML。
body内にｈ1タグが入っていてブログタイトルを表示するようになっている。
上記を以下のように書き換えた。
<body> <!-- コンテナ --> <div id="container"> <!-- ヘッダー --> <div id="header"> <h1 id="site-title-logo"><span><a href="http://harutomo-ryu.com/" title="なまら春友流" rel="home"></a></span></h1>
img src=”以下に先ほどアップロードしたURLをコピー。
そしてここの width と height 部分にもアップロードしたファイルのサイズを入力して更新。
以上でタイトルが画像に変更されるようになった。
トップページへのリンクもついている。
有益な情報をいただいたCORALさん、ありがとうございました。
この投稿のトラックバックURL: