2014年12月03日

このブログについて

このブログでは、Seesaaブログのデザインのカスタマイズ方法をご紹介しています。

Seesaaブログというのは本当に自由度の高いブログで、HTMLレベルやCSSレベル等、様々なデザインのカスタマイズが可能です。
やろうと思えば、完全オリジナルのデザインにすることもできてしまいます。

例えば、このブログのタイトル文字を大きくする方法をご紹介しましょう。

★ブログのタイトル文字を大きくする方法★

<手順1>
デザインでこねこ(左サイドバー)を選択します。

<手順2>
1のスタイルシート編集画面で、#banner h1 a要素のプロパティを以下のように変更します。

  ●変更前 : #banner h1 a {font-size:x-large;}
  ●変更後 : #banner h1 a {font-size:36px;}

そうすると、タイトル文字の大きさが以下のように変わります。

▼▼▼ 変更前 ▼▼▼
title_before.JPG

▼▼▼ 変更後 ▼▼▼
title_after.JPG

このように、Seesaaブログのデザインは、自分の好みに合わせて自由にカスタマイズすることが出来るのです!

このサイトでは、そのSeesaaブログのデザイン変更方法をご紹介していきたいと思います。

SeesaaブログのPC版デザインの変更方法、およびiPhone版デザインの変更方法をそれぞれ掲載しています。

左サイドメニュー記事の一覧を掲載していますので、ご自分の目的に応じて各記事をご覧いただければと思います。
記事の一覧は、PC版ブログデザインiPhone版ブログデザインがあります。

それでは、自由自在なSeesaaブログのデザイン変更をお楽しみください。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 12:03| Comment(3) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする

2011年02月20日

【第70回】ここまでのまとめ(第61回〜第69回)

こんにちは、ほくほくです。

最近は、すっかりiPhone用デザインの記事が中心になっていますね。
第70回の今回は、第61回から第69回に掲載した内容の概要をお伝えします。

なお、それ以前の記事については、こちらをご覧下さい。

  ◆【第10回】ここまでのまとめ(第1回〜第9回)
  ◆【第20回】ここまでのまとめ(第11回〜第19回)
  ◆【第30回】ここまでのまとめ(第21回〜第29回)
  ◆【第40回】ここまでのまとめ(第31回〜第39回)
  ◆【第50回】ここまでのまとめ(第41回〜第49回)
  ◆【第60回】ここまでのまとめ(第51回〜第59回)



【第61回】iPhone用ページのHTMLを確認する

iPhone用のデザインをカスタマイズする前提として、iPhone用ページのHTMLの確認方法をご紹介しました。

iPhoneのブックマークレットを利用して確認する方法です。

SD_061_01.PNG



【第62回】iPhone用ページのクラス構成図

いよいよiPhone用デザインのカスタマイズ!
・・・とその前に、SeesaaブログのiPhone用ページのデザイン構成を図示しました。

どの部分を修正すれば良いか、折に触れてご参照下さい。

SD_062_01.jpg



【第63回】iPhone用タイトルの背景画像を変更する

いよいよiPhone用デザインのカスタマイズに入っていきます。

この回に修正したのは、一番目立つタイトル部分。
Seesaaブログのテンプレートでは色背景でしたが、画像を背景にしてみました。

編集するのは、#banner-name要素です。

▼▼▼ 変更前 ▼▼▼
SD_063_01.PNG

▼▼▼ 変更後 ▼▼▼
SD_063_03.PNG



【第64回】iPhone用タイトルのボタンを調整する

SeesaaブログのiPhone用テンプレートにデフォルト表示される、タイトル部分のボタン。
この調整を、CSSで行いました。

.banner-buttonクラスなどを編集します。

SD_064_01.PNG



【第65回】iPhone用タイトル文字を変更する

第64回でボタンの表示や位置などを調整した結果、タイトル文字の表示が少しおかしくなっています。
そこでこの回では、タイトル文字の表示位置やサイズを調整し、タイトル部分の最終化を行っています。

修正するのは#banner-name要素などです。

SD_065_01.PNG



【第66回】iPhone用ブログ説明文のデザインを変更する

タイトル部分が完成したので、次はブログ説明文の部分です。

この部分は、いろいろと試行錯誤した結果、説明文だけではなく、画像も表示できるようにしてみました。

SD_066_01.PNG



【第67回】iPhone用ナビゲーションの文字サイズを変更する

この回で修正したのは、ナビゲーションリンクの部分です。

地味な修正ですが、ページ全体を見ると結構変更したくなる箇所です。

編集するのは.naviクラスです。

SD_067_01.PNG



【第68回】iPhone用日付見出しの色を変更する

この回で日付の見出しを変更すると、ブログの見た目がガラッと変わります。

編集するのはh2要素の.dateクラスです。

SD_068_01.PNG



【第69回】iPhone用記事見出しの文字サイズを変更する

記事の見出しの文字サイズを変更します。

編集するのはh3要素の.titleクラス。
ここまで来ると、iPhone用デザインのトップページは完成間近です。

SD_069_01.PNG



それでは、あと少しでトップページのデザインを完成させ、その後記事ページのデザインカスタマイズに入っていきます。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
ラベル:まとめ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする

2011年02月10日

【第60回】ここまでのまとめ(第51回〜第59回)

こんにちは、ほくほくです。

第60回の今回は、第51回から第59回に掲載した内容の概要をお伝えします。

なお、それ以前の記事については、こちらをご覧下さい。

  ◆【第10回】ここまでのまとめ(第1回〜第9回)
  ◆【第20回】ここまでのまとめ(第11回〜第19回)
  ◆【第30回】ここまでのまとめ(第21回〜第29回)
  ◆【第40回】ここまでのまとめ(第31回〜第39回)
  ◆【第50回】ここまでのまとめ(第41回〜第49回)



【第51回】カテゴリ記事一覧の文字サイズを変更

ブログ記事の末尾に表示される、同じカテゴリの最新記事一覧の文字サイズを変更する方法です。

CSS上では、.listCategoryArticleクラスのfont-sizeを変更することになります。

SD_051_02.JPG



【第52回】記事フッターの文字サイズを変更する

ブログ記事の一番最後に表示されているpoted byの箇所の文字サイズ変更方法です。

CSS上では、.postedクラスが編集対象となります。

SD_052_02.JPG



【第53回】コメント欄の文字サイズを変更する

この回では、コメント欄の文字サイズを変更する方法をお伝えしました。

コメント欄は複数のクラスが入り組んで構成されていますが、コメント欄全体の文字を一括で指定する場合は#commentsで設定します。

SD_053_02.jpg



【第54回】コメント見出しの文字サイズ変更

第53回ではコメント欄全体の設定を行いましたが、この回ではコメント欄の一部、見出し部分のみの文字サイズ変更を行いました。
さらにこの回では、文字を斜体にする設定も行っています。

SeesaaブログのCSSでは、.comments-headクラスが相当します。

SD_054_01.JPG



【第55回】コメント本体部分の文字サイズを変更する

第54回で変更したコメント見出しに対して、この回ではコメント本文部分の文字サイズ変更を行ってみました。

編集するCSSは.comments-bodyクラスになります。

SD_055_01.JPG



【第56回】コメントフッターの文字サイズを変更する

コメントの文字サイズ変更シリーズ最終回。

この回で変更したのは、コメントのフッター部分の文字サイズです。
第55回の方法でも文字サイズの変更は可能ですが、この回の方法はフッターのみを変更する場合に有効です。

編集するCSSは.comments-postクラスです。

SD_056_01.JPG



【第57回】iPhone用のブログデザインを変更する

SeesaaブログのiPhone用デザイン変更シリーズの第1回目です。

この回ではまず、Seesaaブログで設定可能なデザインテンプレートを紹介した上で、実際に私が変更したブログデザインを掲載しました。
この回以降しばらく、iPhone用ブログデザインの変更シリーズが続きます。

SD_057_05.jpg



【第58回】iPhone用デザインを変更する画面

iPhone用ブログデザイン変更の基本として、SeesaaブログのiPhone用CSS変更画面の操作方法をご紹介した回です。
また、PC用のデザインとは異なる、iPhone特有のデザインについて簡単に説明しています。

SD_058_03.jpg



【第59回】WindowsPCでiPhone用ページを表示する方法

実際にiPhone用デザイン変更に入る前に、WindowsPCでiPhone用サイトを閲覧できる便利なiBBDemoというツールをご紹介しました。

SD_057_05.jpg



以上が、第51回から第59回までに掲載した内容となります。

いよいよiPhone用デザインシリーズが始まりました。

Seesaaブログで用意されているテンプレートを編集し、徐々に自分独自のデザインが作られていく過程をお楽しみください。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする

2011年02月06日

【第56回】コメントフッターの文字サイズを変更する

前回は、コメント本体部分、すなわちコメント本文とコメントフッターの文字サイズを同時に定義しているクラスの変更を行いました。

今回は、その中のコメントフッター部分のみの文字サイズを変更してみましょう。

SD_036_02.jpg

この図でいうと、D.comments-post部分の変更になります。

★コメントフッターの文字サイズを変更する方法★

CSSの.comments-postクラスにfont-sizeプロパティを追加する。

▼▼▼ 変更前 ▼▼▼
.comments-post {
padding:5px 10px;
text-align:right;
border-bottom:dotted 1px #999;
margin-bottom:5px;
}

▼▼▼ 変更後 ▼▼▼
.comments-post {
padding:5px 10px;
text-align:right;
border-bottom:dotted 1px #999;
margin-bottom:5px;
font-size:8pt;
}

こうすると、コメントのフッター部分の文字サイズだけが小さくなります。

▼▼▼ 変更前 ▼▼▼
SD_053_01.JPG

▼▼▼ 変更後 ▼▼▼
SD_056_01.JPG

ちなみに、第52回までの文字サイズは、px(ピクセル)単位で解説を行ってきました。

第53回以降のコメント欄シリーズでは、今回の8ptのように、pt(ポイント)単位で解説しています。

どちらが良いとか、どちらでなければならないということはないのですが、それぞれ以下の特徴があります。

<px(ピクセル)>
 コンピュータのディスプレイの1ピクセルを1とする単位。
 実際の表示サイズは、ディスプレイの解像度に依存する。

<pt(ポイント)>
 1ptは72分の1インチ。

ということなのですが、実際に私が自分で使っている範囲では、特にその違いを感じません。

ですので、文字サイズを定義する時は、お好きな単位を使って下さい。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする

2011年02月05日

【第55回】コメント本体部分の文字サイズを変更する

前回は、コメントの見出し部分の文字サイズを変更しました。

今回はそれ以外の部分、すなわちコメント本文と、そしてPosted byで始まるコメントフッターの文字サイズを同時に変更してみます。

下の図でいうと、B.comments-bodyの部分になります。

SD_036_02.jpg

★コメント本体部分の文字サイズを変更する方法★

.comments-bodyクラスにfont-sizeプロパティを追加する。

▼▼▼ 変更前 ▼▼▼
.comments-body {
margin:0px;
padding:0px;
}

▼▼▼ 変更後 ▼▼▼
.comments-body {
margin:0px;
padding:0px;
font-size:8pt;
}

そうすると、コメント欄の文字サイズがご覧のように変化します。

▼▼▼ 変更前 ▼▼▼
SD_053_01.JPG

▼▼▼ 変更後 ▼▼▼
SD_055_01.JPG

ここで注意点ですが、今回の修正で変更されるのは、コメント本文とコメントフッター部分です。
同時に2か所の文字サイズが変更されます。

これは、.comments-bodyクラスが、その2つを内包しているからです。

このように、CSSはその適用範囲を良く考えて設定する必要があるので、注意しましょう。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする

2011年02月04日

【第54回】コメント見出しの文字サイズ変更

前回は、コメント欄全体の文字サイズの変更を行いました。

今回は部分的に、コメントの見出し部分の文字サイズのみを大きくしてみましょう。

下の図でいうと、A.comments-headの部分です。

SD_036_02.jpg

いつも文字サイズの変更ばかりで面白くないので、今回は文字サイズを大きくすると同時に、文字を斜体に変えてみます。

★コメント見出しの文字サイズを変更し、書式を斜体にする方法★

.comments-headクラスにfont-sizeプロパティを追加する。
また、文字を斜体(イタリック)にするために、同じクラスにfont-styleプロパティを追加する。

▼▼▼ 変更前 ▼▼▼
.comments-head{
font-weight:bold;
margin:0px;
padding: 0px 0px 10px 0px;
}

▼▼▼ 変更後 ▼▼▼
.comments-head{
font-weight:bold;
margin:0px;
padding: 0px 0px 10px 0px;
font-size:16pt;
font-style:italic;

}

この変更によって、コメント欄はご覧のような形に修正されます。

▼▼▼ 変更前 ▼▼▼
SD_053_01.JPG

▼▼▼ 変更後 ▼▼▼
SD_054_01.JPG

今回は、勢いでfont-styleプロパティもご紹介してしまいました。

あまり使用することはないかもしれませんが、文字に関するプロパティは数が多いです。
一度参考書などで、一通り見ておくと、ブログの表現力が向上すると思います。

今回は以上です。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする

2011年02月03日

【第53回】コメント欄の文字サイズを変更する

今回は、コメント欄の文字サイズを変更してみます。

Seesaaブログのコメント欄の構成は、第36回で解説したように、ご覧のような形となっています。

SD_036_02.jpg

このように複数のID・クラスが入れ子になって構成されているので、どの部分の文字サイズを変更するかによって、修正するCSSが異なります。

今回は、コメント欄全体の文字サイズを一括で変更してみましょう。

上の図でいうと、@#commentsの箇所を変更することになります。

★コメント欄の文字サイズを変更する方法★

#commentsfont-sizeプロパティを追加する。

▼▼▼ 変更前 ▼▼▼
#comments {
padding:10px 0px 10px 10px;
margin-top:25px;
background:#fff;
background-image:url(http://seesaa-blog-design.up.seesaa.net/image/marble02.jpg);
background-repeat:repeat;

}

▼▼▼ 変更後 ▼▼▼
#comments {
padding:10px 0px 10px 10px;
margin-top:25px;
background:#fff;
background-image:url(http://seesaa-blog-design.up.seesaa.net/image/marble02.jpg);
background-repeat:repeat;

font-size:16pt;
}
(注)灰色字箇所は、第38回で変更した箇所です。

この変更によって、コメント欄はご覧のような形になります。

▼▼▼ 変更前 ▼▼▼
SD_053_01.JPG

▼▼▼ 変更後 ▼▼▼
SD_053_02.jpg

簡単・・・ですが、あまり見栄えが良い例ではありませんね。
あくまでも参考として下さい。

なお、コメント欄の背景がマーブル模様になっているのは、上記の通り第38回で変更したからです。
興味のある方は、参考にして下さい。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(1) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする

2011年02月02日

【第52回】記事フッターの文字サイズを変更する

いよいよ今回で、こねこ(左サイドバー)テンプレートで定義されている文字サイズのうち、記事部分の調整が完了します。

今回変更するのは、記事の末尾に表示されるフッターです。

SD_052_01.jpg

この文字サイズを変更してみましょう。

さて、SeesaaブログのCSSでこの部分を定義しているのは.postedクラスです。
従って今回は、この中のfont-sizeプロパティを変更することになります。

★記事フッターの文字サイズを変更する方法★

.postedクラスのfont-sizeプロパティの値を変更する。

▼▼▼ 変更前 ▼▼▼
.posted {font-size:x-small;}

▼▼▼ 変更後 ▼▼▼
.posted {font-size:10px;}

この変更により、記事フッターの文字サイズはご覧のように変更されます。

▼▼▼ 変更前 ▼▼▼
SD_051_02.JPG

▼▼▼ 変更後 ▼▼▼
SD_052_02.JPG

第47回から今回までの一連の方法で、ブログの記事部分の文字サイズは全て再定義が可能です。

是非ご自分の好みに合う文字サイズに変更してみてください。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 19:20| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする

2011年02月01日

【第51回】カテゴリ記事一覧の文字サイズを変更する

今回は、記事の末尾に掲載されるカテゴリ記事一覧の文字サイズを変更してみます。

SD_051_01.jpg

この部分は、Seesaaブログでは、.listCategoryArticleというクラスで定義されています。

さらにこの部分は箇条書きとなっているので、HTMLの箇条書きを表すul要素、およびその中の個々の箇条書き部分を表すli要素の組み合わせで、CSSが定義されています。

CSSでは、IDやクラスの中のHTML要素にのみスタイルを設定する場合、半角スペースを空けてそれぞれの要素を記載していきます。

従って今回の修正対象は、.listCategoryArticleクラスの中のul要素の中のli要素なので、CSS上では以下の記述となっています。

  .listCategoryArticle ul li {}

今回は、この中のfont-sizeプロパティを変更するわけです。

★カテゴリ記事一覧の文字サイズを変更する方法★

.listCategoryArticle ul lifont-sizeプロパティの値を変更する。

▼▼▼ 変更前 ▼▼▼
.listCategoryArticle ul li {font-size:x-small;}

▼▼▼ 変更後 ▼▼▼
.listCategoryArticle ul li {font-size:13px;}

このように変更すると、記事末尾のカテゴリ記事一覧の文字サイズがご覧のように変わります。

▼▼▼ 変更前 ▼▼▼
SD_049_03.JPG

▼▼▼ 変更後 ▼▼▼
SD_051_02.JPG

なお、Seesaaブログのこねこ(左サイドバー)テンプレートのデフォルト設定では、この部分は小文字になっています。
しかし今回の修正では、記事本文の文字サイズと同じ大きさにしてみました。

繰り返しになりますが、Seesaaブログのデザインカスタマイズは非常に容易なので、自分の好きな形にどんどん変えてみましょう!

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 19:59| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする

2011年01月31日

【第50回】ここまでのまとめ(第41回〜第49回)

こんにちは、ほくほくです。

早いもので、このブログも始めてから50記事目に到達しました。

始めは軽い気持ちで書き始めたブログだったのですが、いざ書いてみるといろいろと書くことがあって・・・
いつの間にか50記事です。

さて、50回目の今回は、恒例のまとめ記事です。
第41回から第49回で解説したデザインカスタマイズ方法の概要をお伝えします。

なお、それ以前の記事については、こちらをご覧下さい。

  ◆【第10回】ここまでのまとめ(第1回〜第9回)
  ◆【第20回】ここまでのまとめ(第11回〜第19回)
  ◆【第30回】ここまでのまとめ(第21回〜第29回)
  ◆【第40回】ここまでのまとめ(第31回〜第39回)



【第41回】背景画像を変更する

ブログの背景画像を設定する方法をご紹介しました。

ブログの背景画像は、設定するクラスによって表示位置が異なりますし、またブラウザのスクロールに合わせてスクロールさせる/させないの選択、繰り返し表示の有無など、様々な設定が可能です。

ブログの表情が大きく変わる設定です。

SD_041_02.jpg



【第42回】文字サイズの定義方法

残った未解説部分で、一番大きな変更、それが文字サイズの変更です。

このブログをご覧頂いても分かる通り、ブログは様々な大きさの文字で構成されています。
そして、それらを変更することにより、ブログの見た目も変わっていきます。

幸い、Seesaaブログのテンプレートでは、文字サイズの定義はある程度まとめて記載されています。

この回ではまず、文字サイズの定義方法によってはブラウザに依存してしまうことを解説し、以降の文字サイズ変更シリーズにつなげていきます。

SD_042_01.jpg



【第43回】ブログ全体の文字サイズを変更する

ブログの文字サイズの変更方法として、まずブログ全体の基本的な文字サイズの変更を解説しています。

ブログでは、文字サイズの定義がいくつかありますが、それ以外の部分には全体定義のサイズが適用されます。
この回では、その全体定義部分の変更方法を解説しています。

SD_043_01.jpg



【第44回】ブログ説明文の文字サイズを変更する

ブログのタイトルの下に表示されている、説明文の文字サイズを変更する方法を解説しています。

この回をご覧頂いても分かりますが、基本的に文字サイズの変更は、どのクラスがどの部分に適用されているかを把握してしまえば、あとは非常に簡単な作業になります。

SD_044_02.jpg



【第45回】タグタイトルの文字サイズを変更する

タグタイトルという、あまり耳にしない、そして使用頻度のあまり高くない箇所の文字サイズの変更方法を解説しています。

使用頻度が少ないとはいえ、閲覧者に見えるところ。
そういう細かいところにまで気を配る方は是非ご覧下さい。

SD_045_02.jpg



【第46回】サイドタイトルの文字サイズを変更する

このブログで何度もご紹介してきた、サイドバーコンテンツのタイトル。

この回では、その文字サイズの変更方法をご紹介しています。

SD_046_02.JPG



【第47回】記事タイトルの文字サイズを変更する

記事のタイトルは、ブログ閲覧者が最も頻繁に目にするところでもあります。
従ってその文字のサイズは、閲覧者が見やすいように、ブログ全体のデザインとの関係性も考慮して設定する必要があります。

と書くとなんだか難しく聞こえますが、要するに記事タイトルの文字サイズの変更方法です。

簡単ですので、お試しください。

SD_047_01.JPG



【第48回】記事日付の文字サイズを変更する

記事の上部に表示される日付もまた、閲覧者が目にしやすい箇所です。

第47回と同じく、大きさを調整してみましょう。

SD_047_02.JPG



【第49回】記事タグの文字サイズを変更する

あと、記事の中で文字サイズが気になる箇所は、記事に付けたタグの文字サイズです。

これ以前の回をご覧頂いていれば、簡単に変更することができると思います。

SD_049_01.jpg



以上が、第41回から第49回に掲載した内容になります。

第42回以降、文字サイズの話一辺倒になっていますが、あと少しで一通りの説明が終わりますので、どうぞよろしくお付き合いください。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
ラベル:まとめ
posted by o(^0^)o ほくほく at 19:51| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。