MT導入基礎知識

Movable Typeとは?

ドメイン取得とサーバー確保

Movable Typeをインストールしよう

HTMLとCSSを理解する

テンプレートって何?

プラグインって何?

どんどんモジュール化しよう

pingを有効に活用しよう

テンプレートの基本的な構成

デザインのカスタマイズ

カスタマイズの前に

タイトルバナーの雰囲気をかえる

タイトルバナーを画像にする

H1~H6タグの見え方

サイトの背景を変更する

文字の色や大きさをかえる

サイドバーの見た目をかえる

表示内容のカスタマイズ

カテゴリーの並び順序を変更する

エントリーの並び順序を変更する

最近のエントリー一覧を表示する

サイドバーを右から左に変更する

サイドバーに表示する要素を変更する

カテゴリー一覧にエントリーも表示する

カテゴリーページにも最新エントリー一覧を表示する

入れておきたいプラグイン

cutfirstchar⇒変数タグの最初の数文字を削除する

CatEntries⇒特定カテゴリーを表示させないようにする

Update-n-Ping⇒記事を更新したときにも更新pingを自動的に送る

MailForm⇒メール問い合わせフォームを表示する

Mapper⇒地図画像を表示する

TinyMCE⇒ワープロ感覚でエントリー記事が作れる

参考になるサイト・情報

WWWの基本を勉強する参考サイト

Movable Typeに関するサイト

ブログアクセスアップにつながるランキングサイト

相互リンク

エラーが起きたときはチェックしてみよう

よもやま話

サイト立ち上げのきっかけ

ブログランキングに登録

メールフォームが機能しない・・・

グーグルマップを表示してみる







« カスタマイズの前に | メイン | ドメイン取得とサーバー確保 »

タイトルバナーの雰囲気をかえる




タイトルバナーの雰囲気が変わるだけで、サイト全体の雰囲気が変わってきます。
文字色や背景色を変更するだけでも、ちょっとしたイメージチェンジになるものです。

ということで、変更してみましょう。
デザインのみの変更のときは、スタイルシート(styles-site.css)を修正します。

その前に、HTML(メインページ等)で、タイトルバナー部分のタグを確認しておきましょう。

<div id="banner"> <div id="banner-inner" class="pkg"> <h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"> <$MTBlogName encode_html="1"$></a></h1> <h2 id="banner-description"><$MTBlogDescription$></h2> </div> </div>

デザインが関係しているタグが4箇所ありました。
id="banner"
id="banner-inner"
id="banner-header"
id="banner-description"

スタイルシート(styles-site.css)を開き、検索機能を使ってそれぞれのスタイルを探して、背景や文字に関係しそうなところを変更していきます。

#banner a { color: #fff; text-decoration: none; } #banner a:hover { color: #fff; }

まずこれが、タイトルバナーの文字のリンク表示の仕方を指定している部分です。
color: #fff; ⇒文字色に「白(#FFF)」が指定されています。
ネット上を探せば色見本が出てきますので、参考にしながら好きな色に変更してください。
text-decoration: none; ⇒文字飾りは「なし」のままで、変更する必要はありません。

※色見本の参考 ⇒ とほほの色入門・色見本

#banner { width: 710px; /* necessary for ie win */ background: #a3b8cc; }

続いてこれが、背景色を指定している部分です。
先ほど同様、色見本を参考に、「#a3b8cc」を好きな色に変更します。

#banner-header { margin: 0; color: #fff; font-size: 30px; font-weight: bold; line-height: 1; text-shadow: #36414d 0 2px 3px; } #banner-description { margin-top: 5px; margin-bottom: 0; color: #fff; background: none; font-size: 12px; font-weight: bold; line-height: 1.125; text-shadow: #36414d 0 1px 2px; }

ここは、ブログ名(banner-header)とブログ概要説明文(banner-description)のスタイルを指定する部分です。
「color: #fff;」のところは、先ほどと同じ文字色に揃えておきましょう。
文字の大きさは、「font-size: ○○px;」の数字を変更すれば変わります。好きな大きさに変更しましょう。

これで保存&再構成(S&R)して、どんな風に変わったか確認してみてください。



最新記事一覧