MT導入基礎知識

Movable Typeとは?

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

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

HTMLとCSSを理解する

テンプレートって何?

プラグインって何?

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

pingを有効に活用しよう

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

デザインのカスタマイズ

カスタマイズの前に

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

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

H1~H6タグの見え方

サイトの背景を変更する

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

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

表示内容のカスタマイズ

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

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

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

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

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

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

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

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

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

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

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

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

Mapper⇒地図画像を表示する

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

参考になるサイト・情報

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

Movable Typeに関するサイト

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

相互リンク

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

よもやま話

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

ブログランキングに登録

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

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







« Update-n-Ping⇒記事を更新したときにも更新pingを自動的に送る | メイン | MailForm⇒メール問い合わせフォームを表示する »

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




文字の大きさや色も、スタイルシート(デザインを規定するファイル)で簡単に変更することができます。

インデックステンプレートの『スタイルシート』を開いてください。
※参考:スタイルシートの構成については、先にこちらを参照ください。
 ⇒ テンプレートの基本的な構成

この中で、文字のサイズを指定するのが「font-size:~~」という要素、文字の色を指定するのが「color:~~」という要素です。サイトの中で、文字の大きさや色を変更したいデザインクラスのfont-sizeやcolorを変更するだけでOKです。

なお、よく変更を加える主な文字群は、大きく分けると下記の3箇所くらいです。

・archive-header
 ・・・大見出し:アーカイブページ(記事ページやカテゴリーページ)のページタイトル部分

・entry-header
 ・・・小見出し:各モジュール(記事や一覧等)のタイトル部分

・module-content
 ・・・本文:記事等のコンテンツ・本文にあたる部分

例えば、各記事の小見出し(タイトル部分)の文字を変更したい場合は、下記の部分を探してください。

.entry-header { margin-top: 0; border-left: 5px solid #dae0e6; padding: 0 0 0 10px; color: #666; font-size: 18px; }

Movable Type標準テンプレートでは、小見出しの文字色は濃グレー(color: #666;)、文字の大きさは18ピクセル(font-size: 18px;)になっています。
文字色を赤くするなら「color: #FF0000;」に、文字の大きさをやや控えめにするなら「font-size: 16px;」、というように変更して、保存&再構築(S&R)してください。

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


上記の他に、ページタイトルバナー部分の文字の大きさ・色も変更することができます。
「#banner-header」や「#banner-description」が該当する部分となりますが、詳細についてはこちらで説明していますので参照ください。
 ⇒ タイトルバナーの雰囲気を変える



最新記事一覧