2011年02月27日

【第77回】iPhone用CSS公開 ― Stripe Purple ―

第57回からの一連の記事で編集してきた、SeesaaブログのiPhone用カスタマイズCSSを公開します。

SeesaaブログをiPhoneで見た時のデザインが、こんな感じになります!

<トップページ>
SD_077_01.PNG SD_077_02.PNG

<記事ページ>
SD_077_03.PNG SD_077_04.PNG


下記★CSSはこちら★をクリックするとCSSが表示されますので、どうぞご自由にご利用下さい。

なお、このCSSの適用先画面については第58回をご覧下さい。

また、以下の点にご注意下さい。


◆1.背景画像の取得

ヘッダーの背景画像(※1の箇所)は、このブログの中のディレクトリに格納されています。
いつか、このブログがなくなる可能性も無きにしもあらずなので、画像を取得してご自分のサイト内にアップロードして使用することをお薦めします。
背景画像の取得方法などは、第63回をご覧下さい。


◆2.アイコン画像の変更

ブログ説明文の箇所に表示されているアイコン画像(※2の箇所)は私のものですので、ご自身の好きなアイコンに差し替えて下さい。
変更方法は、第66回で解説しています。

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

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

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

2011年02月26日

【第76回】iPhone用コメントの文字サイズを変更する

今回は、iPhone用デザインのコメント欄の文字サイズを変更します。

第62回でご紹介したように、Seesaaブログのコメント欄は複数のクラスで構成されています。

今回は、第74回で実施した本文の文字サイズ変更に合わせて、コメント欄全体をfont-size:90%にしてみましょう。

▼▼▼ 変更前 ▼▼▼
<縦表示>
SD_076_01.PNG

<横表示>
SD_076_02.PNG

▼▼▼ 変更後 ▼▼▼
<縦表示>
SD_076_03.PNG

<横表示>
SD_076_04.PNG

それでは、iPhone用CSS変更画面を開いて、CSSを編集していきましょう。

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

#comments要素にfont-sizeプロパティを追加する。

▼▼▼ 変更前 ▼▼▼
#comments {
background-color: white;
margin: 5px 10px 10px 5px;
padding: 0px;
border: 1px solid #375D81;
-webkit-border-radius: 8px;
-webkit-box-shadow : 3px 3px 3px gray;
}

▼▼▼ 変更後 ▼▼▼
#comments {
background-color: white;
margin: 5px 10px 10px 5px;
padding: 0px;
border: 1px solid #375D81;
-webkit-border-radius: 8px;
-webkit-box-shadow : 3px 3px 3px gray;
font-size: 90%;
}

うまくデザインが変更されたでしょうか。

これで、この一連のiPhone用デザイン変更は完了となります。
今回まで変更してきたCSSを、トップページのCSSにも適用しておきましょう。

次回、今まで編集してきたCSSを公開します!

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

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

2011年02月25日

【第75回】iPhone用引用書式を追加する

私は、ブログの記事を書く時に、よく引用(blockquote)を使用します。

しかし、SeesaaブログのiPhone用CSSには、引用のデザインは定義されていないんですよね。

こんなふうに、味気ない表示になってしまいます。

▼▼▼ 変更前 ▼▼▼
<縦表示>
SD_075_01.PNG

<横表示>
SD_075_02.PNG

そこで今回は、この引用に書式を追加してみたいと思います。
例えば、こんな感じです。

▼▼▼ 変更後 ▼▼▼
<縦表示>
SD_075_03.PNG

<横表示>
SD_075_04.PNG

この引用の書式は、私がo(^0^)o ほくほくポートフォリオのPC版で使用しているテンプレートと同じにしてみました。
これだと、PC版のCSSからコピーしてくるだけですみますので。

★iPhone用引用書式を追加する方法★

iPhone用CSSに、blockquote要素のデザインを追加する。

▼▼▼ 変更前 ▼▼▼
なし

▼▼▼ 変更後 ▼▼▼
blockquote{
border:1px dashed #A7A7A6;
background:#FFFFE8;
padding:5px;
margin:10px;
}

Seesaaのテンプレートにないものは、自分で追加してみるのも一つの手ですね。

今回は以上です。

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

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

2011年02月24日

【第74回】iPhone用記事本文の文字サイズを変更する

今回は、記事の文字サイズを変更します。

文字サイズの変更は、PCブログデザインの方でもたくさん事例を紹介しました。

font-sizeプロパティを修正します。

▼▼▼ 変更前 ▼▼▼
<縦表示>
SD_074_01.PNG

<横表示>
SD_074_02.PNG

▼▼▼ 変更後 ▼▼▼
<縦表示>
SD_074_03.PNG

<横表示>
SD_074_04.PNG

記事本文の文字サイズを少し小さくしました。

★iPhone用記事本文の文字サイズを変更する方法★

.blogbodyクラスの中の.textfont-sizeプロパティを変更する。

▼▼▼ 変更前 ▼▼▼
div.blogbody div.text {
padding: 8px;
line-height: 130%;
}

▼▼▼ 変更後 ▼▼▼
div.blogbody div.text {
padding: 8px;
line-height: 130%;
font-size: 90%;
}

これで、今回の修正は完了です。

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

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

2011年02月23日

【第73回】iPhone用CSSを記事ページに展開する

さて、前回までで、ようやくiPhone用トップページのデザイン変更が完了しました。

今回からは、記事ページの方のデザイン変更に入っていきましょう。

・・・といっても、トップページのようにまたイチから作成する必要はありません。
今回はまず、今まで作成してきたトップページ用のCSSを、記事ページにも適用してしまいましょう。

iPhone用CSS変更画面の右上で記事リンクを押下して、表示される画面にトップページ用のCSSを貼りつけてみて下さい。

そうすると、以下のようにいきなりある程度デザインができあがっている状態になります。

▼▼▼ 変更前 ▼▼▼
SD_073_01.PNG

SD_073_02.PNG

SD_073_03.PNG


▼▼▼ 変更後 ▼▼▼
SD_073_04.PNG

SD_073_05.PNG

SD_073_06.PNG


ご覧のように、タイトル、ブログ説明文、ナビゲーション、日付見出し、記事見出し、フッターなどが、トップページと同じデザインになります。

もうこれで、ほぼOKですね!

でも、あと少し変更したい箇所があるので、次回以降でカスタマイズしていきましょう。

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

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

2011年02月22日

【第72回】iPhone用の文字サイズ自動調整を解除する

さて、実は前回で、iPhone用トップページのデザインは出来上がっています。

しかし、ここでちょっと注意事項があります。

こちらの図をご覧下さい。

▼▼▼ 変更前 ▼▼▼
<縦表示>
SD_069_01.PNG

<横表示>
SD_069_02.PNG

縦表示の時と横表示の時で、文字サイズが大きく変わっているのがわかるでしょうか。

これ、実はiPhoneのSafariの機能の一つ、文字サイズの自動調整機能なのです。

iPhone版Safariは、小さい画面に効果的にWEBページを表示するために、画面やページの幅、他パーツとの相対的な位置付けなどに応じて、文字サイズを自動で拡大してくたりします。
非常に便利な機能ですね。

でも今回の私のデザインでは、どちらかというと文字サイズは変わってくれない方がありがたいです。

そこで今回は、この文字サイズの自動調整機能を解除してしまいましょう。

▼▼▼ 変更後 ▼▼▼
<縦表示>
SD_072_01.PNG

<横表示>
SD_072_02.PNG


★iPhone用の文字サイズ自動調整を解除する方法★

body要素の中に、-webkit-text-size-adjust: none;を追記する。

▼▼▼ 変更前 ▼▼▼
body {
margin: 0;

/* 【第67回】で背景色を白に変更 */
background-color:#FFFFFF;

}

▼▼▼ 変更後 ▼▼▼
body {
margin: 0;

/* 【第67回】で背景色を白に変更 */
background-color:#FFFFFF;


-webkit-text-size-adjust: none;
}

この修正で、iPhoneを縦にしても横にしても、同じ文字サイズで表示されるようになります。
やっぱり個人的には、こちらの方が好みです。

さて、これでiPhone用トップページのカスタマイズは終了です。

次回からは、iPhone用記事ページのカスタマイズに入っていきましょう。

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

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

2011年02月21日

【第71回】iPhone用フッターの色を変更する

今回は、iPhone用デザインのフッターを変更してみましょう。

まず、フッターの背景色を、日付見出しと同じ紫色にします。
さらに、日付見出し部分に使われている透過PNGを使って、フッターを立体的に見えるようにします。

要するに、日付見出し箇所と同じようなデザインになります。

▼▼▼ 変更前 ▼▼▼
<縦表示>
SD_071_01.PNG

<横表示>
SD_071_02.PNG

▼▼▼ 変更後 ▼▼▼
<縦表示>
SD_071_03.PNG

<横表示>
SD_071_04.PNG

いかがですか?
これで、iPhone用のトップページはかなり統一感のあるデザインになったと思います。

それでは早速、iPhone用CSS変更画面で修正してみましょう。

★iPhone用フッターの色を変更する方法★

フッターのデザインを定義している#footer要素のbackground-colorプロパティを変更する。
また、日付見出し箇所に使用されている透過PNGを背景画像に設定し、横方向への繰り返し表示設定を追加する。

▼▼▼ 変更前 ▼▼▼
#footer {
background-color: #183152;
color: white;
margin: 0;
padding: 5px;
text-align: center;
}

▼▼▼ 変更後 ▼▼▼
#footer {
color: white;
margin: 0;
padding: 5px;
text-align: center;
background-color: #8531a6;
background-image: url(http://blog.seesaa.jp/img/iphone/bgHeader.png);
background-repeat: repeat-x;

}

さて、今回までの変更を加えた結果、iPhone用トップページはこのようなデザインになりました。

SD_071_05.PNG

もともとのblueのテンプレートから、個人的にかなり気に入ったデザインへと変わりました。

やっぱり、自分でデザインを変更するのっていいですね。

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

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

2011年02月19日

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

今回は、iPhone用トップ画面に表示されている記事見出しの文字サイズを変更します。

またそれに合わせて、記事見出し表示領域の微調整も行います。

現在編集中のデザインだと、記事見出しは日付の下に表示されている領域にあたります。

▼▼▼ 変更前 ▼▼▼
<縦表示>
SD_068_01.PNG

<横表示>
SD_068_02.PNG

▼▼▼ 変更後 ▼▼▼
<縦表示>
SD_069_01.PNG

<横表示>
SD_069_02.PNG

記事見出しのスタイルを定義しているのは、h3要素の.titleクラスです。
このクラスのfont-sizeプロパティを設定していきます。

あとは、記事見出し表示領域の余白を調整するために、その外側にある.blogbodyクラスも修正します。

★iPhone用記事見出しの文字サイズを変更する方法★

h3要素の.titleクラスで、font-sizeプロパティを設定する。
また、.blogbodyクラスで不要な枠線を削除し、余白を調整する。

▼▼▼ 変更前 ▼▼▼
div.blogbody h3.title {
margin: 0;
padding: 5px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
background-color: #BFF7F5;
border-top: 1px solid #white;
border-left: 1px solid #white;
background-image: url(http://blog.seesaa.jp/img/iphone/bgHeader.png);
background-repeat: repeat-x;
}
div.blogbody {
background-color: white;
border: 1px solid #375D81;
margin: 5px 10px 10px 5px;

padding: 0px;
-webkit-border-radius: 8px;
-webkit-box-shadow : 3px 3px 3px gray;
}

▼▼▼ 変更後 ▼▼▼
div.blogbody h3.title {
margin: 0;
padding: 5px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
background-color: #BFF7F5;
border-top: 1px solid #white;
border-left: 1px solid #white;
background-image: url(http://blog.seesaa.jp/img/iphone/bgHeader.png);
background-repeat: repeat-x;
font-size: 100%;
}
div.blogbody {
background-color: white;
margin: 3px 10px 5px 5px;
padding: 0px;
-webkit-border-radius: 8px;
-webkit-box-shadow : 3px 3px 3px gray;
}

以上で、今回の修正は完了です。

トップページの完成まであと少しです!

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

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

2011年02月18日

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

今回は、日付見出しのデザインを変更してみます。

そもそもSeesaaブログのblueテンプレートにおける日付見出しは、背景色と文字色が同色系で見にくいと思うのですが・・・

▼▼▼ 変更前 ▼▼▼
<縦表示>
SD_067_01.PNG

<横表示>
SD_068_03.PNG

それはさておき、ブログの全体的なデザイン整合性から、背景色は紫色に、そして文字色は白色にしたいと思います。
また、文字サイズも少し大きすぎると感じるので、小さくしてみます。
あと、文字の影の色も少し変更してみました。

▼▼▼ 変更後 ▼▼▼
<縦表示>
SD_068_01.PNG

<横表示>
SD_068_02.PNG

それでは、iPhone用CSS変更画面でCSSを修正していきます。

★iPhone用日付見出しの色を変更する★

h2要素の.dateクラスで、背景色を表すbackground-colorプロパティで紫色を、文字色を表すcolorプロパティで白色を設定する。
また、font-sizeプロパティとtext-shadowプロパティも変更する。

▼▼▼ 変更前 ▼▼▼
h2.date {
background-color: #375D81;
background-image: url(http://blog.seesaa.jp/img/iphone/bgHeader.png);
background-repeat: repeat-x;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
color: #183152;
font-size: 115%;

margin: 15px 0 10px 0;
padding: 5px;
text-shadow: #fff 0 1px 0;
}

▼▼▼ 変更後 ▼▼▼
h2.date {
background-image: url(http://blog.seesaa.jp/img/iphone/bgHeader.png);
background-repeat: repeat-x;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
margin: 15px 0 10px 0;
padding: 5px;
background-color: #8531a6;
color: #FFFFFF;
font-size: 100%;
text-shadow: #BFF7F5 0 1px 0;

}

これで、今回の修正は完了です。

なお、この日付見出しの背景画像として設定されているbgHeader.pngは、高さ20px、幅1pxの小さな画像です。
横方向に繰り返し表示されています。

この画像の役割は、日付見出しの上の方を白っぽくし、日付見出し全体を立体的に見せています。
画像の一部が白色、残りが透明色になっているようです。

背景色にこの画像を重ねて表示する結果、背景色を紫色一色に設定するだけで、表示上は立体的に見えているのです。

こういうデザインの方法もあるんですね。
参考になります。

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

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

2011年02月17日

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

今回は、iPhone用デザインのナビゲーション部分の文字サイズを変更します。

ナビゲーションというのは、広告の下に表示されている次の3件≫の箇所です。

▼▼▼ 変更前 ▼▼▼
<縦表示>
SD_066_01.PNG

<横表示>
SD_066_02.PNG

この部分の文字を、少し小さくしてみることにしました。

また、背景色が若干青がかっていて色がにじんだように見えるので、真っ白にしてみました。

▼▼▼ 変更後 ▼▼▼
<縦表示>
SD_067_01.PNG

<横表示>
SD_067_02.PNG

今回文字サイズを変更するナビゲーションは.naviクラスで、背景色を白くするのは大枠のbody要素になります。

★iPhone用ナビゲーションの文字サイズを変更する方法★

.naviクラスのfont-sizeプロパティを設定する。
また、背景色を白にするため、body要素のbackground-colorプロパティを修正する。

▼▼▼ 変更前 ▼▼▼
body {
background-color:#F6FFFF;
margin: 0;
}
div.navi {
margin: 10px 0;
text-align:center;
}

▼▼▼ 変更後 ▼▼▼
body {
background-color:#FFFFFF;
margin: 0;
}
div.navi {
margin: 10px 0;
text-align:center;
font-size: 90%;
}

これで、今回の修正は完了です。

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

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

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