2011年02月07日

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

Seesaaブログには、iPhone用のブログデザインが用意されています。

iPhoneでブログにアクセスすると、PCと同じブログデザインか、iPhone用のデザインかを選択することができます。

例えばこのブログの場合、iPhoneでこのブログにアクセスするとご覧のように表示されます。

SD_057_01.png

この画面の右上にあるiPhone専用ページを表示リンクをタップすると、下図のようなiPhone用ページが表示されます。

SD_057_02.png

この画面で、右上のPCをタップすると、元のPC用画面を表示することができます。

Seesaaブログには現在、4種類のiPhone用デザインが用意されています。

SD_057_03.jpg

先ほどこの記事に掲載したのはgreenのデザインのもので、他にbluegraypinkがあり、全て構成は同じで色違いになっています。


さて、Seesaaブログはデザインの自由度が非常に高いというのはお伝えしている通りなのですが、実はこのiPhone用のデザインも自分でカスタマイズすることができます。

例えば、私のもう一つのブログであるo(^0^)o ほくほくポートフォリオのiPhone用のページは、blueテンプレートをカスタマイズしてご覧のようなデザインにしています。

▼▼▼ 変更前 ▼▼▼
SD_057_04.jpg

▼▼▼ 変更後 ▼▼▼
SD_057_05.jpg

いかがですか?
かなり自由にiPhone用ページのデザインを変更できるのが、お分かり頂けると思います。

そこで今回から数回にわたり、このo(^0^)o ほくほくポートフォリオのiPhone用ページデザインを例として、iPhone用デザインのカスタマイズ方法を解説していきたいと思います。

また、シリーズの最後にはこのiPhone用デザインのCSSも公開する予定です。

お楽しみに。

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

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ



ラベル:iPhone CSS
posted by o(^0^)o ほくほく at 19:59| Comment(0) | iPhoneブログデザイン | このブログの読者になる | 更新情報をチェックする

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(https://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(https://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ブログデザイン | このブログの読者になる | 更新情報をチェックする
×

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