賢威でWordPress~ヘッダー説明文の変更

賢威5.0テンプレート」を設置すると、
ヘッダータイトルの横に、サイト説明文が入ります。

この部分の編集を解説しますね。

  • 説明文を入力する(無しにする)
  • 説明文のフォントの色を変える

大きく、この2つを解説します。

説明文を入力する

管理画面から、「外観」⇒「テーマ編集」を選択、

たくさんあるphpファイルの中から、
「headertext.php」を選択。

<div id=”header-logo”>
<p id=”logo-text”><a href=”<?php bloginfo(‘url’); ?>”><img src=”<?php bloginfo(‘template_url’); ?>/images/common/logo.jpg” width=”900″ height=”135″ alt=”<?php bloginfo(‘name’); ?>” /></a></p>
</div>
<div id=”header-text”>
<p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</div>

このソースの中から、「ここにテキストが入ります」の部分を編集します。

<div id=”header-text”>
<p>こんなふうにpタグを使えば</p>
<p>きれいに改行できますから、</p>
<p>このままコピペで使ってもOKですね</p>
</div>

このように、改行することもできますし、
リンクを入れることもできます。

当然、ここに何も文字を入れなければ、
説明文は表示されません^^;

説明文のフォントの色を変更する

ここでは、ブログ説明文のフォントの色を変更する方法を解説します。
ただし、このとき、ブログタイトルが画像ではなくテキストの場合、
両方一緒に変わりますのでご注意くださいね。

管理画面から、「外観」⇒「テーマ編集」を選択、

「cool-blueg12.css」を選択。
このファイル名は、テンプレートによって名前が違います。

/*——————————————————–
ヘッダー
——————————————————–*/

#header{
position: absolute;
top: 22px;
height: 150px;
background: url(images/common/bg-header.gif) left top repeat-x #222222;
font-size: 1.2em;
color: #ffffff;

という箇所を探します。
赤太字で書いた場所を、任意の色に変更します。
(例えば、#000 で黒になります。詳しくはこちらの色辞典で)

このとき、このソースの少し下にある、
こんなソースも書き換えておきましょう。

/*●ヘッダーロゴテキスト*/
#header-logo #logo-text{ font-size: 20pt; }
#header-logo #logo-text a{ text-decoration: underline; }
#header-logo #logo-text a:link{ color: #fff; }
#header-logo #logo-text a:visited{ color: #fff; }
#header-logo #logo-text a:hover{ color: #c60; }
#header-logo #logo-text a:active{ color: #c60; }

これは、テキストリンクの色の設定です。
特に、赤太字の2箇所は変更しておきましょう。
それぞれの役目は、以下のとおりです。

#header-logo #logo-text a:link まだ何もないときのリンクの色
#header-logo #logo-text a:visited 訪問済みのリンクの色
#header-logo #logo-text a:hover カーソルが載ったときのリンクの色
#header-logo #logo-text a:active カーソルが載った訪問済みリンク

ということで、説明文の設定変更でした。

あわせて読みたい関連記事

“賢威でWordPress~ヘッダー説明文の変更” への2件のフィードバック

  1. [...] 賢威でWordPress~ブログタイトルロゴの位置調整 賢威でWordPress~ヘッダー説明文の変更 賢威でWordPress~ブログのヘッダーを画像にする [...]

  2. [...] は変更されました。 でも、そしたら、今度は、ブログのタイトルや説明文の文字色が まったく読めなくなったりしますね。 この文字色を変更する方法は、こちらで解説しています。 [...]

サブコンテンツ

このページの先頭へ