2011年02月16日

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

前回までで、iPhone用ページのタイトル部分の変更が完了しました。

今回は、その下にあるブログ説明文部分の変更を行っていきます。

今回の変更を行った結果がこちらです。

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

<横表示>
SD_065_02.PNG

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

<横表示>
SD_066_02.PNG

まずご覧頂ければわかるかと思いますが、ブログ説明分部分に私の著者を表す画像を表示しました。

Seesaaブログで用意されているiPhone用デザインは、何か味気ない感じがしたので、ちょっと遊んでみました。
この部分には、65px × 65px の画像を表示できるようにしています。

それから、iPhoneのSafariはサイト幅や位置関係を解釈して自動で文字サイズを調整する機能が実装されていますが、私のサイトでは逆に拡大して欲しくないので、文字サイズを指定しました。

その他ブログ説明文欄は、全体的に枠で囲い、文字表示位置を微調整しています。

ブログ説明文欄の枠線は、PCサイトと違って角丸の枠線。
これは、iPhoneのSafariがレンダリングエンジンのWebKitを採用しているからで、IEでは表示できません(通常の角が四角の表示になります)。
-webkit-border-radiusプロパティを設定すると、Safari上でこのような綺麗な角丸枠線が描けます。

それでは、iPhone用CSS変更画面を開いて、編集に入っていきましょう。
なお今回修正するクラスは、第62回で説明した通りID属性の#banner-description要素となります。

★iPhone用ブログ説明文のデザインを変更する方法★

#banner-descriptionのプロパティを修正する。
枠線や文字スタイル、文字表示位置のプロパティは削除。
角丸の枠線を-webkit-border-radiusプロパティで設定し、左右にマージンを10px設定。
さらに、文字サイズと枠の高さを調整する。

背景画像に65px×65pxの著者画像を表示できるようにし、文字が背景画像にかからないようパディングを左に80pxとる。

▼▼▼ 変更前 ▼▼▼
#banner-description {
background-color: #BFF7F5;
border-bottom: 1px solid #BBDDFF;
color: #183152;
font-style: italic;
padding: 5px;
text-align: right;

}

▼▼▼ 変更後 ▼▼▼
#banner-description {
background-color: #BFF7F5;
color: #183152;
-webkit-border-radius: 8px;
margin: 0px 10px 0px 10px;
font-size: 77%;
height: 52px;
background-image: url(http://hokuhoku-portfolio.up.seesaa.net/image/auther.jpg);
background-repeat: no-repeat;

padding: 5px 5px 5px 80px;
}

これで、ブログ説明文部分のデザイン修正は完了です。

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

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


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

2011年02月15日

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

前回までで、SeesaaブログのiPhone用デザインのタイトル背景画像と、ボタンのデザイン修正を行いました。

でも現状だと、タイトル文字がボタンの後ろに隠れてしまいます。
そもそもボタンがあると、タイトル表示部分が短くなってしまうため、タイトルを短くするか文字サイズを小さくしなければなりません。

かといって、このPC用表示ボタンは、削除したくありませんし・・・

ということで、今回は上部にボタン分の隙間を空けてタイトル文字を表示する設定を行います。
あと、タイトル文字サイズの微調整。
さらに、今回でタイトル部分のデザインを仕上げてしまいます。

今回の修正を行うと、iPhone用デザインはご覧のように変更されます。

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

<横表示>
SD_064_02.PNG

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

<横表示>
SD_065_02.PNG


それでは今回のCSS修正を行いますので、iPhone用CSS変更画面を開いて下さい。

★iPhone用タイトル文字を変更する方法★

タイトル文字表示部を表す#banner-name要素で、paddingプロパティを調整し、表示部の高さを表すheightプロパティを追加する。
また、文字サイズを設定する。

さらに、背景画像の表示位置を調整し、不要な枠線や背景色は削除する。

▼▼▼ 変更前 ▼▼▼
#banner {
border-bottom: 3px solid #DDEEFF;
color: white;
margin: 0;
margin-bottom: 15px;
}
#banner-name {
background-color: #183152;

/* 【第63回】でタイトルの背景画像を変更 */
background-image: url(http://hokuhoku-portfolio.up.seesaa.net/image/hdbg.png);

background-repeat: repeat-x;
border-bottom: 3px solid #6699BB;
font-size: x-large;

font-weight: bold;
padding: 8px;
text-align: center;
}

▼▼▼ 変更後 ▼▼▼
#banner {
color: white;
margin: 0;
margin-bottom: 15px;
}
#banner-name {

/* 【第63回】でタイトルの背景画像を変更 */
background-image: url(http://hokuhoku-portfolio.up.seesaa.net/image/hdbg.png);

background-repeat: repeat-x;
background-position: center top;
font-size: 125%;

font-weight: bold;
text-align: center;
padding-top: 40px;
height: 50px;

}

これで、iPhone用ページのタイトル部分の修正は完了となります。

次回は、ブログ説明文表示部分を修正します。

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

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

2011年02月14日

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

SeesaaブログのiPhone用ページには、タイトル部分に2つのボタンが表示されます。

1つが、Seesaaブログのトップページ(PC用サイト)に遷移するボタン。
もう1つが、ブログをPC用表示に切り替えるボタンです。

個人的には、iPhoneでブログを見に来た人が、Seesaaブログのトップページに行きたいとは思わないのではないかと思います。
よって私のサイトでは、Seesaaボタンは削除しました。

また、PC用表示に切り替えるボタンについても、色をブログデザインに合わせて紫色にしたり、文字サイズを少し小さくしたりしています。

ということで、今回はタイトル部分に表示されるボタンを調整してしまいましょう。

今回の修正によって、ブログデザインはご覧のように変化します。

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

<横表示>
SD_063_04.PNG

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

<横表示>
SD_064_02.PNG


★iPhone用タイトルのボタンを調整する方法★

ボタン全体の定義を表す.banner-buttonクラスのbackground-colorプロパティを変更し、ボタンの色を紫色にする。また、font-sizeプロパティを調整し、ボタンの文字サイズを少し小さくする。

右側のPC用表示ボタンについては、回り込みを解除して表示位置を絶対指定にするため、.banner-button-rightクラスを修正する。

左側のSeesaaボタンについては削除するため、.banner-button-leftクラスをdisplay:none;設定にする。

▼▼▼ 変更前 ▼▼▼
div.banner-button {
background-color: #375D81;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
list-style-type: none;
margin: 5px;
padding: 5px;
text-align: center;
width: 50px;
-webkit-border-radius: 8px;
}
div.banner-button-right {
float: right;
}
div.banner-button-left {
float: left;
}

▼▼▼ 変更後 ▼▼▼
div.banner-button {
background-color: #8531a6;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
list-style-type: none;
margin: 5px;
padding: 5px;
text-align: center;
width: 50px;
-webkit-border-radius: 8px;
font-size: small;
}
div.banner-button-right {
position: absolute;
right: 5px;
top: 5px;

}
div.banner-button-left {
display:none;
}

今回は、複数箇所を一気に修正してしまいました。
これで、タイトルのボタンに関する修正は完了です。

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

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

2011年02月13日

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

iPhone用のブログデザイン変更に入っていきます。

今回はまず、タイトルの背景画像を変えてみましょう。

今回の変更を行うと、iPhone用のブログデザインがご覧のように変わります。

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

<横表示>
SD_063_02.PNG

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

<横表示>
SD_063_04.PNG


なおこのシリーズでは、変更前のテンプレートはblueをベースにしています。

★iPhone用タイトルの背景画像を変更する方法★

背景に使用する画像を用意してブログにアップロードし、#banner-name要素のbackground-imageプロパティに設定する。

▼▼▼ 変更前 ▼▼▼
#banner-name {
background-color: #183152;
background-image: url(http://blog.seesaa.jp/img/iphone/bgHeader.png);
background-repeat: repeat-x;
border-bottom: 3px solid #6699BB;
font-size: x-large;
font-weight: bold;
padding: 8px;
text-align: center;
}

▼▼▼ 変更後 ▼▼▼
#banner-name {
background-color: #183152;
background-image: url(http://hokuhoku-portfolio.up.seesaa.net/image/hdbg.png);
background-repeat: repeat-x;
border-bottom: 3px solid #6699BB;
font-size: x-large;
font-weight: bold;
padding: 8px;
text-align: center;
}

これで、タイトルの背景画像は変更されます。


ところで、今回用意した背景画像は、以下のようなものです。


この画像を、横方向に繰り返し表示(background-repeat: repeat-x;)しています。

この画像は、SeesaaブログのPCサイト用のテンプレートStripe Purpleのヘッダー画像から作成したものです。

参考までに、以下でその画像の作成方法をご紹介します。

★タイトル用背景画像を作成する方法★

<手順1>
SeesaaブログのテンプレートStripe PurpleのCSSを見て、タイトルの背景画像のURLを取得する。

タイトルの背景画像は、#bannar要素のbackground-imageプロパティに記載されています。

SD_063_05.jpg

<手順2>
手順1で取得したURLをブラウザのアドレスバーにコピーし、取得したい画像を表示する。
画像をブラウザに表示できたら、右クリックして名前を付けて画像を保存する。

SD_063_06.jpg

<手順3>
取得した画像をExcel上に挿入し、画像の不要な箇所をトリミングする。

トリミングについては、第19回の記事をご覧下さい。
この作業の結果、この画像が出来上がります。


左右に繰り返し表示してもおかしくならないように、上手く画像の一部を切り出して下さいね。
なお、トリミング後に画像サイズを、縦が80pxになるように修正しています。

<手順4>
加工後の画像をブログにアップロードし、そのURLをCSSに貼り付ける。

私は画像加工があまり得意ではないのですが、それでもご覧のような手順で簡単にできます。

是非試してみて下さい。

今回はここまでです。

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

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

2011年02月12日

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

今回は、iPhone用ページのクラス構成図を見てみましょう。

今後、iPhone用CSSデザインを変更していくにあたり、参考になります。

少し長くなりますので、目次を付けておきます。

★iPhone用ページのクラス構成図−目次−★

 1.トップページのクラス構成
 2.記事ページのクラス構成(1)−ヘッダー部−
 3.記事ページのクラス構成(2)−フッター部−



1.トップページのクラス構成

第58回でお伝えした通り、SeesaaブログのiPhone用デザインは、トップページと記事ページの2つが用意されています。

下図は、そのうちトップページのクラス構成図になります。

SD_062_01.jpg

まず、図にはありませんが、大外にbody要素があります。
また、これも図に掲載していませんが、その内側にiPhone用サイト全体を表す#iphone-containerがあります。

その2つの要素の内側が、ヘッダー部分を表す@#bannarと、ブログ本体部分を表すE#contentに大きく2分されています。

ヘッダーの@#bannarの中は、ブログタイトルを表示するC#banner-nameと、ブログの説明文を表示するD#banner-descriptionに分かれています。
そしてC#banner-nameの上に、SeesaaブログへのリンクボタンB.banner-button-leftクラス、およびPC用デザインでブログを表示するボタンのA.banner-button-rightクラスがあります。

一方で、ブログ本体のE#contentの中には、まず一番上に広告が表示されます。
その下に、ナビゲーションを表示するF.naviクラスがあります。

その下からが記事の一覧を表示する部分になり、G#index-article-list、そのすぐ内側に.blogクラスがありますが、トップページではこの2つは同じ位置づけとなっています。

各記事を表す.blogクラスは、日付ヘッダーを表示するHh2の.dateクラスと、見出しを表示しているI.blogbodyクラスがあります。
I.blogbodyクラスの中には、さらに記事タイトルを表示するJh3の.titleクラスと投稿日時を表示するK.title-dateクラスが入っています。
ちなみに、図には記載していませんが、記事タイトルの右側にある≫は、.arrowというクラスで制御されています。

たくさんの要素が設定されていますので、どのクラスがどこを制御しているのか、しっかり確認して下さい。



2.記事ページのクラス構成(1)−ヘッダー部−

次に、記事ページのクラス構成です。

まず、記事ページの上の方を説明します。

SD_062_02.jpg

ブログのヘッダーを表示する@#bannarは、トップページと同じ構成です。

その下側に、これもトップページと同様にA#contentがあり、その中に広告とB.naviクラスが設定されています。

その下に、C.blogクラスがあります。
トップページと異なり、#index-article-listはありません。

その内側に、またトップページと同様に日付ヘッダーを表示するDh2の.dateクラスがあり、さらにその下にE.blogbodyクラスが、そしてその中にFh3の.titleクラスあります。

このように、トップページと記事ページの構成は、かなり共通化されています。

トップページと異なるのは、その下にブログ本文を表示するG.textクラスが存在することです。

ここまでのところ、トップページと記事ページが異なるのは以下の3点です。

 (1)記事ページには、.blogクラスの外側に#index-article-listがない。
 (2)記事ページには、h3.titleクラスの下に.textクラスがある。
 (3)記事ページには、h3.titleクラスの下に.title-dateクラスがない。

あと、トップページにあった.arrowクラスは、記事ページにはありません。



3.記事ページのクラス構成(2)−フッター部−

記事ページの下部は、ご覧のようになっています。

SD_062_03.jpg

記事の最後には、タグを表示するA.tag-wordクラスがあります。そしてその下に、投稿日時を表示するB.postedクラスです。

これで、ブログ本文を制御するB.blogbodyクラスは終了です。

その下に、コメント記入欄を制御するD#commentsがあります。
コメント欄は2つのE.comments-headがあり、その下にコメント各事項がF.comments-bodyクラスで表示されています。

これでD#commentsが終わり、次いでブログ本体を表す@#contentが終了します。

そしてその下に、G#footerがある形です。
ちなみにこのG#footerはトップページにも存在しますが、上の説明では割愛しました。

記事ページのクラス構成の説明は以上になります。



以上のように、トップページと記事ページのクラス構成は、かなり共通化されています。
トップページと記事ページで大きくデザインを変える必要がない限り、同じCSSで良いと思います。

今回のシリーズでは、トップページと記事ページで同じCSSを適用していきます。

それでは次回から、いよいよCSSの編集に入っていきましょう。

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

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

2011年02月11日

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

今回は、iPhone用ページのHTMLを表示する方法をご紹介します。

iPhone用のWEBページを編集するとき、そのWEBページのHTMLを確認したくなることがあります。

例えば、CSSを編集する時に、どの要素がHTMLのどの部分に適用されているかを調べる時などです。

しかし第59回でもご説明したように、WindowsのパソコンとブラウザでiPhone用ページを表示することはできません。
この回にご紹介したiBBDemoというツールにも、HTMLソースを表示する機能は現在のところ実装されていないようです。

そこで今回は、iPhoneでHTMLソースを表示するブックマークレットをご紹介します。

ブックマークレットというのは、iPhoneのSafariのブックマークから起動するスクリプトのことです。
様々なブックマークレットが作成・配付されていますが、今回のものを使用すると、iPhone上でご覧のようにHTMLソースを表示させることができます。

SD_061_01.PNG

あとは、このHTMLソースをコピーして、メールで送信したりEvernoteを使ったりすれば、Windowsのパソコン上でもHTMLソースを見ることができるようになります。

非常に便利です。

このブックマークレットは、こちらのサイトで提供されています。

  ◆iPhone.goodegg.jp iPhoneのSafariでHTMLソースを表示させる方法

iPhone用WEBページのHTMLソースを見たい方は、是非使ってみて下さい。

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

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

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

2011年02月09日

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

今回は、WindowsのパソコンでiPhone用のWEBページを表示するフリーウェアをご紹介します。

Seesaaブログでは、PC用のブログURLと、iPhone用のブログURLは同じです。
ブログにアクセスしてくるOSと、iPhoneで閲覧する場合にPC用デザインかiPhone用デザインかの選択によって、表示するデザインを制御しているようです。

要するに、Windowsのパソコンで、iPhone用のブログデザインを見ることができません。

もちろん、変更したiPhone用デザインを、直接iPhoneで確認すれば問題はありません。
でも、WindowsPCでもiPhone用のデザインを確認できた方が便利ですよね。

そんな時に便利なのが、iBBDemoというフリーウェア。

こんな感じで、iPhone用のブログデザインをWindows上に表示することができます。

SD_057_05.jpg

このiBBDemoというツールについては、こちらのサイトを参考にさせて頂きました。

  ◆ブログが作りたい! + FC2ブログの作り方 +

ツールの取得先からインストール方法、使用方法などが詳しく書かれているので、iBBDemoを使いたい方は是非そちらをご覧下さい。

iPhone用のデザインを変更した場合、最終的にはiPhoneで表示を確認してみる必要がありますが、それでもデザイン編集中のちょっとした確認には非常に便利なツールなので、是非使ってみて下さい。

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

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

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

2011年02月08日

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

SeesaaブログでのiPhone用デザインの変更は、iPhone用スタイルシート(CSS)変更画面で行います。

画面の操作方法は、以下の通りです。

★iPhone用CSS変更画面の操作方法★

<手順1>
Seesaaブログの管理画面で、デザインiPhoneを開く。

SD_058_01.jpg

<手順2>
(現在適用されている)編集したいデザインのタイトルをクリックする。

SD_058_02.jpg

<手順3>
iPhone用CSS変更画面が表示されるので、CSSを編集し、完了時にはスタイルシートを変更するボタンを押下する。

SD_058_03.jpg

この画面で、iPhone用デザインを変更することができます。

なお、SeesaaブログのiPhone用デザインでは、PC用デザインにとは異なる点があります。

@HTMLが変更できない

PC用デザインと異なり、iPhone用デザインにはHTML変更画面がありません。
従って、PC用画面のサイドコンテンツなどのように、新しいコンテンツを追加することができません。
iPhone用デザインの変更では、Seesaaブログが設定している内容のデザインの変更のみができます。

Aトップページと記事ページのCSSが分かれている

PC用のCSS変更画面では、全てのページにデザインを適用する画面がありますが、iPhone用CSS変更画面ではトップページ用と記事ページ用の設定画面が分かれています。
どちらの画面のCSSを変更するかは、iPhone用CSS変更画面の右上にあるトップまたは記事リンクを押下して選択します。

ただし、私の場合は、トップページ用と記事ページ用両方に当てはまるCSSを1つだけ作成し、それを2つのCSS変更画面それぞれに適用しています。

逆にいえば、トップページと記事ページで、全く別のデザインにすることも可能だということです。

SeesaaブログのiPhone用デザインを変更する時は留意して下さい。


さらに、iPhone用ページには、スマートフォン独自の注意事項があります。

こちらの画面を見て下さい。

SD_058_04.jpg

iPhone(を含むスマートフォン)は、このように画面を横にして見ることもできます。

iPhoneを横表示にした場合、画像や文字が拡大されたり、背景画像が途切れたりしてしまいます。

  ●背景画像が途切れないように、横方向に表示繰り返し設定を行う。
  ●文字サイズが拡大/縮小されないように、フォントサイズは数値で設定する。

といったような対応が必要になることがあります。

実際にiPhone用デザインを変更した場合は、縦表示と横表示の両方を確認することをお薦めします。


なお、iPhone用サイト作成の注意点については、こちらのサイトが非常に参考になります。

  ◆実践!iPhone&Androidサイト制作ガイド

iPhoneはPCとは異なる点が多いので、注意しましょう。

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

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

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

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

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