Seesaaブログのデザイン変更ワザスマートフォン専用ページを表示Seesaaブログのデザイン変更ワザcssやHTMLを編集してSeesaaブログのデザインを自由に変えてみよう!御朱印集めが楽しくなるiPhoneアプリ御朱印マップを公開しています。ダウンロードはこちらからどうぞ。Seesaaブログで、投資関係のブログを3年半ほど書いています。そのブログを続けている中で、CSSやHTMLを編集してSeesaaブログのデザイン変更にチャレンジしてきました。Seesaaブログって、かなり自由にデザインをカスタマイズできるのがいいですね!このブログでは、その様々なカスタマイズ方法をご紹介していきます。投資関係のメインブログはこちらです。【第66回】iPhone用ブログ説明文のデザインを変更する前回までで、iPhone用ページのタイトル部分の変更が完了しました。今回は、その下にあるブログ説明文部分の変更を行っていきます。今回の変更を行った結果がこちらです。▼▼▼<縦表示><横表示>まずご覧頂ければわかるかと思いますが、ブログ説明分部分に私の著者を表す画像を表示しました。Seesaaブログで用意されているiPhone用デザインは、何か味気ない感じがしたので、ちょっと遊んでみました。画像を表示できるようにしています。それから、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とる。[必須入力]※画像の中の文字を半角で入力してください。※ブログオーナーが承認したコメントのみ表示されます。Seesaaブログ×この広告は180日以上新しい記事の投稿がないブログに表示されております。