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

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