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

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

フォト花03

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

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

ＣＳＳやＨＴＭＬを自分で編集したい！
とういう気合の入った方はこちらから
どうぞ！

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

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

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

タイトル
.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;
　　　}

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

文字サイズ変更

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

※『まぐまぐ！』から発行しています。は、設定より -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

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

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

トライ＆エラーで頑張りましょう！！

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

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

人気blogランキング現在７位！(^^)
鬼ブログランキング/起業・独立２位！(^o^)／
鬼ブログランキング/ブログカスタマイズ３位！(^o^)／

サイトマップはコチラ ⇒ ◆コンテンツ一覧◆
　

> しかもPC壊れてもた～。

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

バックアップは大丈夫？

こんにちは！

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

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

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

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

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

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

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

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

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

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

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

aikankyo さん、こんばんは。いつもコメント、ありがとうございます！

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

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

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

　oKi

名前:
メール:
URL:
情報を記憶:
コメント:

インフォトップ:ブログ作成入門

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