テキストタイトル表示(ブログ名)をロゴ画像に変更し、追加でブログの説明をヘッダーに表示する

デフォルトでは、ブログ名がタイトル表示として、左上に表示される。

このブログ名は「eigerでツクルMovableType」と設定したので、テキストで表示されている。

デフォルトのタイトル表示はブログ名

このテキスト表示部分をロゴ画像に入れ替えることができる。

トップページのメイン画像の設定と同様に、アップロードした画像のタグに変数を設定することでロゴ画像に置き換える。

  1. メニュー[アイテム] > [新規]
  2. ファイルを選択]をクリックして、画像をアップロードする。推奨サイズは幅200px以上
  3. アップロードした画像アイテムをクリックし、[タグ]フォームに、@SITE_LOGOと入力し、[変更を保存]をクリックする。

    アイテムにロゴ画像をアップロードして設定を行う
  4. すべてのページを再構築すると、各ページの左上がロゴ画像に変更される。

ロゴ画像に変更されたページロゴ画像(タイトル画像)に下に、ナビゲーションメニュー、さらにその下部にトップページであれば、メイン画像が表示される。

通常の今までのブログでは、ブログ名をh1、ブログの説明をh2やpタグでページ上部に表示させていたが、このテーマでは「ブログの説明」がページに表示される設定にはなっていない。

メニュー[設定] > [全般] の「ブログの説明」フォームに入力された内容は、ページには表示されないが、head部分の3箇所のmetaデータに自動で設定されている。

  • meta name="description"
  • Open Graph Protocol形式データの property="og:description"
  • Microdataデータの itemprop="description"

の「content」内にセットされている。

その設定は、モジュールテンプレート > [HTMLヘッダー]モジュールに設定されている。

上記設定でSEO最適化としても充分であるが、あえてロゴ画像の左側にテキスト表示として反映するために、テンプレートを改造する。

  1. メニュー[デザイン] > [テンプレート] > モジュールテンプレート リストの「バナーヘッダー]をクリックする。
  2. ブログの説明が反映されるMTタグ「MTBlogDescription」を追加する。
    最後の行に、<p id="title_desc"><$mt:BlogDescription$></p>
    を追加して、[保存]する
  3. 再構築を行う。
  4. このままでは、ロゴ画像に下に表示されるので、CSSを追加してロゴ画像の左側に表示するようにする。
    (今回、追加したCSSは新スタイルシートファイル[eiger-style.css]として、追加している)

ロゴ画像とブログの説明が表示されたヘッダー部

尚、ロゴ画像の幅が大きい場合は、テキスト表示は必要なかも知れない。

しかし、ロゴ画像にブログの説明部分も含めた文字画像を入れる場合は、縮小したときに文字画像は見難くなるので、注意する。