文字を大きくする(タイトル/サブタイトル/サイドカラム) カスタマイズ編

今回は、スタイルシートをカスタマイズすることにより、タイトル・サブタイトル・サイドカラムの文字サイズの変更の方法を解説します。

人気blogランキング現在7位!(^^)
鬼ブログランキング/起業・独立2位!
(^o^)/
鬼ブログランキング/ブログカスタマイズ3位!
(^o^)/

参考デザインは、フォト ⇒ 花03 で解説します。下記画像は、デフォルト(初期設定)のままのデザインですが、タイトル、サブタイトルが小さくインパクトにかけ、サイドカラムのフォントサイズが xx-small で、少し見にくいので、これをカスタマイズしてみます。
※掲載画像は、元画像を70%縮小しています。

フォト花03

管理画面 ⇒ ブログの設定/管理 ⇒ デザインの設定

デザインの設定

上記の画面の右下にカスタマイズとあり、

CSSやHTMLを自分で編集したい!
とういう気合の入った方はこちらから
どうぞ!

とあります。(^^) これをクリックします。

カスタマイズ

すつるとスタイルシートが記述された画面が出てきますので、
この記述のフォントサイズ指定されているところを変更します。

スタイルシート

このスタイルシートの中で、タイトルとサブタイトルを指定しているのが下記の記述です。

タイトル
.blogtitle{
      color:#CC0000;
      font-size:18px; ←文字サイズ 18px を 36px に変更
      font-weight:bold;
      padding:160px 0 0 20px;
      margin-bottom:-40px;
      text-align:left;
      }

サブタイトル
.description{
       color:#CC0000;
       font-size:12px; ←文字サイズ 12px を 24px に変更
       font-weight:bold;
       padding:0 0 0 20px;
       text-align:left;
       }


サイドカラムのタイトルとテキストは次の記述です。

.sidetitle{
      font-size:xx-small; ←文字サイズ x-small に変更
      font-weight:bold;
      color:#006600;
      padding:5px;
      text-align:center;
      border:1px solid #CCCCCC;
      }

.side{
   font-size:xx-small; ←文字サイズ x-small に変更
   text-align:left;
   line-height:125%;
   padding:5px 10px;
   margin-bottom:35px;
   }

赤文字のように変更したら、保存をし、CSS(スタイルシート)を再構築します。すると下図のようになります。

文字サイズ変更

タイトル、サブタイトル、サイドカラムタイトル、サイドカラムテキストの文字が大きくなりましたが、タイトルとサブタイトルがダブってしまいました。

※『まぐまぐ!』から発行しています。は、設定より -2 小さくなるようにプラグイン内で設定されています。

これは、タイトルの margin-bottom を変更することで調整できます。

※スタイルシートの各要素の説明はこちらをご参照ください。 → HTMLクイックリファレンス

.blogtitle{
      color:#CC0000;
      font-size:36px;
      font-weight:bold;
      padding:160px 0 0 20px;
      margin-bottom:-40px; ← -40px を -70px に変更
      text-align:left;
      }

保存 ⇒ 再構築:スタイルシート ⇒ 完了!

文字サイズ変更完了
最初に掲載したデフォルト画面と比べるとよく分かります。見やすくなりました。
フォト花03

文字のサイズ等は適当な数字に変換して、再構築をしながらお好みのサイズ、配置にしてみてください。

ちなみにこの画像にするのに、デザインを確認しながら4回ほど再構築を繰り返して完成させました。(^^;)

トライ&エラーで頑張りましょう!!

注) ソースをカスタマイズする時は、メモ帳などのエディタにコピー&ペーストをして保存しておくことをおススメします。(初期設定はいつでも戻すことは出来ます。)


鬼ブロランキングがリセットされたようです。。。(^^;)
よろしくお願い致します!!

人気blogランキング現在7位!(^^)
鬼ブログランキング/起業・独立2位!
(^o^)/
鬼ブログランキング/ブログカスタマイズ3位!
(^o^)/


サイトマップはコチラ ⇒ ◆コンテンツ一覧◆
 
   
メルマガ登録 ID: 0000160275
ブログ作成入門講座
 
バックナンバー powered by まぐまぐトップページへ
Posted by ブログ作成入門講座 at 21:20│Comments(4)TrackBack(0) | Edit
この記事へのトラックバックURL
http://trackback.blogsys.jp/livedoor/blomal/28917579
この記事へのコメント
リセットされたおかげで順位がさがってしまったあ。
しかもPC壊れてもた〜。
Posted by oshika2413 at 2005年07月25日 23:38
> しかもPC壊れてもた〜。

あらら・・・(^^;)。
そう言えば、Saki さんも壊れて2005年夏モデルを買ったとか。
うらやまし〜。。。

バックアップは大丈夫?
Posted by blomal at 2005年07月26日 12:48
こんにちは!

今日はokiさんブログと一日中仲良しでした。

ブログのカスタマイズは無理だろうと思っていままでやっていませんでしたが、そろそろ手をつけても良いのではないかと思いまして・・・。


一番初めにスタイルシートでタイトル文字や文章の文字を大きくしました。

これは簡単にできました。
(ありがとうございます。)

サイドバーの文字は変更できませんでした。
いくら探しても変更するタグが見つからない・・・。

まぐまぐに登録するフォームは何度やっても失敗ばかりでしたが、
私なりに個別記事に貼り付けられました。

ついでに他の文章も・・・。

本当にありがとうございました。



いつもいつもわかりやすい説明で助かります。


これからもどうぞ宜しくお願いいたします。


ありがとうございました。







Posted by aikankyo at 2006年05月10日 18:18
aikankyo さん、こんばんは。いつもコメント、ありがとうございます!

カスタマイズも思った通りにいけば楽しいし、
うまくいかないとイライラしたり。。(^^;)

ちなみにサイドカラムの文字変更は aikankyo さんのブログの
コメントで説明しますね。

では、頑張りましょう!!

 oKi
Posted by ブログ入門講座〜今日からブロガー at 2006年05月11日 21:38
 
 
AX