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ブログデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
×

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