まずは、見栄えで一番重要な、ヘッダ部分をオリジナルのものに変えてみます。
デフォルトは、ブログのタイトルがテキストになっていますが、これを画像にします。
ただし、ソースコード上はテキストでブログのタイトルを入れておくようにします。
まず、モジュールテンプレート「ヘッダー」ですが、ほとんど変更する必要はありません。
トップページへのリンクのための＜a＞タグが、ブログのタイトルテキストに対してつけられています。今回はテキストの代わりに画像を使うので、ここを変更します。
トップページでは、タイトル部分が h1、その他では、div タグで指定されているので、これに対して＜a＞タグをつけます。
＜mt:If name=”main_index”＞
＜a href=”＜$mt:BlogURL$＞” accesskey=”1″＞
＜h1 id=”header-name”＞＜$mt:BlogName encode_html=”1″$＞＜/h1＞
＜/a＞
＜h2 id=”header-description”＞＜$mt:BlogDescription$＞＜/h2＞
＜mt:Else＞
＜a href=”＜$mt:BlogURL$＞” accesskey=”1″＞
＜div id=”header-name”＞
＜$mt:BlogName encode_html=”1″$＞
＜/div＞
＜/a＞
＜div id=”header-description”＞＜$mt:BlogDescription$＞＜/div＞
＜/mt:If＞
テキストを画像に差し替えるのは、スタイルシートで行います。
（custom.css で、該当部分を上書き指定します）
元のスタイルシートでは、背景画像の上にサイトのタイトルと概要のテキストが配置されていますが、これを、オリジナルの画像のみにしてテキストを隠します。
ただし、ソースからサイトのタイトルを無くすことはSEO上好ましくないので、スタイルシートで見えないようにします。
ヘッダは、次のクラスで指定されています。
.header-name （サイトのタイトル）
.header-description （サイトの概要）
この両方に、custom.css で次のスタイルを追加します。
Text-indent: -9999px;
次に、オリジナルヘッダの背景画像に合わせて、スタイルを調整します。
今回は、ヘッダーの左右センターに1枚絵を配置するので、下記のような指定になります。
#header {
background: #ffdddd url(img/common/header.jpg) no-repeat center 15px;
}
#header-content {
margin: 0px 0px;
}
これでブログタイトルが、表示上は画像、ソースコード上はテキストになります。
この記事を書いた人
-
FAシステムメーカー、国内最大手印刷会社製版部、印刷・ウェブ制作会社を経て、家庭の事情で実家に帰省して独立
現在はフリーランスと制作会社シニアディレクターのマルチワーク
ウェブ制作のほぼ全般を見渡せるディレクター業務が主だが、デザイン・コーディングも好き
1997年ブログ開設
WordPressコミュニティには2011年から参加
WordCamp Kansai 2025 セッションスピーカー
WordCamp Tokyo 2023 パネルディスカッションパネラー
WordCamp Kansai 2016 セッションスピーカー
WordBench京都、WordBench神戸、WordBench奈良、WordPress Meetup八王子など登壇多数
最新の投稿
ブログ2025年11月16日WordCamp Kansai 2025 で「触れるけど壊れないWordPressの作り方」についてお話しました
技術記事2025年6月15日ブロックテーマ時代のWordPress制作ワークフローとは
技術記事2025年3月7日WordPressに百千鳥フォントを入れて遊んでみました
ブログ2025年1月3日移転のお知らせ（2024年）
ご質問・ご相談などありましたら
お気軽にお問い合わせください
資料請求・お問い合わせにはメールアドレスが必要です
匿名 へ返信する コメントをキャンセル