[MT4]オリジナルヘッダ

まずは、見栄えで一番重要な、ヘッダ部分をオリジナルのものに変えてみます。
デフォルトは、ブログのタイトルがテキストになっていますが、これを画像にします。
ただし、ソースコード上はテキストでブログのタイトルを入れておくようにします。
まず、モジュールテンプレート「ヘッダー」ですが、ほとんど変更する必要はありません。
トップページへのリンクのための<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 2016 セッションスピーカー
WordCamp Tokyo 2023 パネルディスカッションパネラー
WordBench京都、WordBench神戸、WordPress Meetup八王子など登壇多数

ご質問・ご相談などありましたら
お気軽にお問い合わせください


“[MT4]オリジナルヘッダ” への2件のフィードバック

  1. <h1>や<div>を<a>で囲むのはどうかと思いますよ?
    もう一度考え直してみてください。

  2. さくらぎけいのアバター
    さくらぎけい

    長い間、コメントが非表示になっていたようで申し訳ありません。>匿名様
    確かにおっしゃるとおりです。
    <h1>や<div>の中身を、<a>で囲むように変更してみます。

コメントを残す

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

Vektor Passport(ライセンス期間1年)
VK Filter Search Pro
Vektor WordPress Solutions
PAGE TOP