シンプル系・タイトルと概要の逆配置

シンプル系テンプレート（クリアブルー左やクリアオレンジ左右など）で、ブログタイトルとブログ概要のテキストの位置を変更するためのCSS編集サンプルです。

シンプル系テンプレートって配置がスッキリしているし文字が読み易い色合いも好きなんだけど、ブログの概要がブログタイトルよりも上にあるんですよね。そのまま使ってはいるものの、カスタムブルーみたいにブログタイトルの下にブログの概要を配置したいなんて思ったことありませんか？

gooブログアドバンスならテンプレート（HTML）編集で{$blogtitle}と{$bdescirption}のモジュールの配置を入れ替えてしまえば済む事ですが、gooブログ（無料版）ではHTML編集はできません。仕方がないので、ブログのタイトルや概要に bTitleLink や bDesc のクラスが指定されていることを利用して、CSS編集のみでブログタイトルとブログ概要の位置を入れ替えてみました。

「CSS(スタイルシート）の編集」画面でのCSS変更（追加）箇所は、以下の通り。

シンプル系テンプレート（通常）のCSS
クリアミント左メニュー 概要 タイトル /* ヘッダーの指定 */ #header { （中略） background-image: url(/images/tmp_sm_blue3/head_bg.gif); } /* ブログタイトルのリンク（<a href="#" class="bTitleLink">で使用） */ .bTitleLink { text-decoration: none; } /* ブログの概要 */ .bDesc { （中略） }

↓

シンプル系テンプレート（タイトルが上、概要が下）のCSS
クリアミント左メニュー タイトル 概要 /* ヘッダーの指定 */ #header { （中略） background-image: url(/images/tmp_sm_blue3/head_bg.gif); /* ヘッダの位置指定 */ position: relative; /* ヘッダの高さ指定 */ height: 80px; } /* ブログタイトルのリンク（<a href="#" class="bTitleLink">で使用） */ .bTitleLink { text-decoration: none; /* タイトルの位置指定 */ position: absolute; top: 10px; /* 上から10ピクセル */ left: 25px; /* 左から25ピクセル */ } /* ブログの概要 */ .bDesc { （中略） /* 概要の位置指定 */ position: absolute; bottom: 5px; /* 下から5ピクセル */ left: 25px; /* 左から25ピクセル */ }

指定した位置（ピクセル数）はあくまでサンプルです。お好みの値に変更したり、10%のような割合を指定することもできます。また、leftの代わりにrightを指定すれば右寄せも可能です。

この方法で変更できるテンプレート（対象テンプレート）は、以下の通り。

• クリアオレンジ左右　同左　同右
• クリアグレー左右　同左　同右
• クリアパープル左右　同左　同右
• クリアピンク左右　同左　同右
• クリアブルー左右　同左　同右
• クリアホワイト左右　同左　同右
• クリアミント左右　同左　同右（わは）

なお、本記事の方法でタイトルと概要の位置を指定しながらアクセスカウンタも設置したい場合は、「メニュー上部にカウンタ設置」の方法で行ってください。
「タイトル背景とカウンタ設置」の方法では、綺麗にカウンタ画像を表示するのは難しいかも知れません。

---

● シンプル系二段組・メニュー簡素化 2005年07月18日00:07
（シンプル系左メニューまたはシンプル系右メニューで「goo ブログ」の項目などを消して簡素化する例）
● シンプル系二段組・横幅可変 2005年07月02日21:45
（シンプル系左メニューまたはシンプル系右メニューで横幅を可変にする例）
● シンプル系・メニュー逆配置 2005年05月21日00:06
（シンプル系左右メニューで左メニューと右メニューの位置を入替える例）
● メニュー上部にカウンタ設置 2005年07月16日06:33
（シンプル系テンプレートのメニュー上部にカウンタを設置する例、本記事との併用が可能）
● タイトル背景とカウンタ設置 2005年05月07日08:15
（シンプル系テンプレートのタイトル背景にカウンタを設置する例、本記事との併用は勧められない）