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 : Stripe Purple for iPhone

Arranged by o(^0^)o ほくほくポートフォリオ
http://hokuhoku-portfolio.seesaa.net/

Opened on Seesaaブログのデザイン変更ワザ
http://seesaa-blog-design.seesaa.net/
***************************************************/

/*
#183152: header/footer
#375D81
#BFF7F5
#E1FFFC
#F6FFFF: background
*/

/* 全体
--------------------------------------------------*/
body {
margin: 0;

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

/* 【第72回】で文字サイズ自動調整を解除 */
-webkit-text-size-adjust: none;
}



/* ブログ全体
--------------------------------------------------*/
#iphone-container {
background-image:none;
width:auto;
}

/* ヘッダー (タイトル+説明文)
--------------------------------------------------*/
#banner {

/* 【第65回】で枠線削除 */
/* border-bottom: 3px solid #DDEEFF; */
color: white;
margin: 0;
margin-bottom: 15px;
}

/* ヘッダーのボタン
--------------------------------------------------*/
div.banner-button {

/* 【第64回】でボタンの色を変更 */
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;

/* 【第64回】で文字サイズを小さく設定 */
font-size: small;
}

div.banner-button-right {

/* 【第64回】で回り込みを解除し表示位置設定 */
position: absolute;
right: 5px;
top: 5px;
}

div.banner-button-left {

/* 【第64回】で非表示設定 */
display:none;
}

div.banner-button a {
color: white;
text-decoration: none;
}

/* タイトル表示部分
--------------------------------------------------*/
#banner-name {

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

/* 【第65回】でタイトルの背景画像を上付け中寄せ */
background-position: center top;

/* 【第65回】で枠線削除と背景色削除 */
/* background-color: #183152; */
/* border-bottom: 3px solid #6699BB; */

font-weight: bold;
text-align: center;

/* 【第65回】で文字サイズと文字表示位置を調整 */
font-size: 125%;
padding-top: 40px;
height: 50px;
}

/* タイトル文字リンク
--------------------------------------------------*/
#banner-name a {
color: white;
text-decoration: none;
text-shadow: #BFF7F5 -1px -1px 0;
}

/* ブログ説明文部分
--------------------------------------------------*/
#banner-description {
background-color: #BFF7F5;
color: #183152;

/* 【第66回】で枠線、文字右寄せ、文字イタリックは削除 */
/* border-bottom: 1px solid #BBDDFF; */
/* font-style: italic; */
/* text-align: right; */

/* 【第66回】で角丸枠線を追加し左右の隙間を設定 */
-webkit-border-radius: 8px;
margin: 0px 10px 0px 10px;

/* 【第66回】で文字数に合わせて文字サイズとボックスの高さを設定 */
font-size: 77%;
height: 52px;

/* 【第66回】で65px×65pxの著者画像を表示できるように修正(※2) */
background-image: url(http://hokuhoku-portfolio.up.seesaa.net/image/auther.jpg);
background-repeat: no-repeat;

/* 【第66回】で背景に文字がかからないよう隙間調整 */
padding: 5px 5px 5px 80px;
}

/* フッター部分
--------------------------------------------------*/
#footer {
color: white;
margin: 0;
padding: 5px;
text-align: center;

/* 【第71回】で背景色を変更し画像を追加 */
background-color: #8531a6;
background-image: url(http://blog.seesaa.jp/img/iphone/bgHeader.png);
background-repeat: repeat-x;
}

#footer a img {
-webkit-border-radius: 8px;
}

/* ナビゲーション
--------------------------------------------------*/
div.navi {
margin: 10px 0;
text-align:center;

/* 【第67回】で文字サイズを設定 */
font-size: 90%;
}

div.navi a {
padding: 5px;
}

/* 日付見出し
--------------------------------------------------*/
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;

/* 【第68回】で背景色と文字色、文字サイズ、影色を変更 */
background-color: #8531a6;
color: #FFFFFF;
font-size: 100%;
text-shadow: #BFF7F5 0 1px 0;
}

/* 記事見出し全体
--------------------------------------------------*/
div.blogbody {
background-color: white;

/* 【第69回】で枠線を削除しマージンを変更 */
/* border: 1px solid #375D81; */
margin: 3px 10px 5px 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;

/* 【第69回】で文字サイズを変更 */
font-size: 100%;
}

/* 見出し:日付とコメント数
--------------------------------------------------*/
div.blogbody span.title-date {
font-size: 80%;
}

/* 記事内容:本文
--------------------------------------------------*/
div.blogbody div.text {
padding: 8px;
line-height: 130%;

/* 【第74回】で文字サイズを変更 */
font-size: 90%;
}

/* 引用
--------------------------------------------------*/
/* 【第75回】で引用書式を追加 */
blockquote{
border:1px dashed #A7A7A6;
background:#FFFFE8;
padding:5px;
margin:10px;
}


/* 記事内容:タグ
--------------------------------------------------*/
div.blogbody div.tag-word {
margin-top: 6px;
float: left;
}
div.blogbody div.tag-word a {
text-decoration: none;
background-color: #BFF7F5;
margin: 3px;
padding: 0 3px;
font-size: small;
border: 1px solid #375D81;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-box-shadow: 1px 1px 0 gray;
}

/* 記事内容:フッターのブックマークボタン
--------------------------------------------------*/
div.blogbody div.bookmark {
text-align: right;
margin: 3px;
}

/* 記事内容:フッターの投稿日時
--------------------------------------------------*/
div.blogbody div.posted {
margin: 0;
padding: 3px;
background-color: #E1FFFC;
font-size: 80%;
text-align: right;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
border-left: 1px solid #white;
}

/* コメント:全体
--------------------------------------------------*/
#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;

/* 【第76回】で文字サイズを変更 */
font-size: 90%;
}

/* コメント:見出し
--------------------------------------------------*/
div.comments-head {
margin: 0;
margin-bottom: 3px;
padding: 3px;
background-color: #BFF7F5;
border-left: 1px solid #white;
}
a+div.comments-head {
border-top: 1px solid #white;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
background-image: url(http://blog.seesaa.jp/img/iphone/bgHeader.png);
background-repeat: repeat-x;
}

/* コメント:本文
--------------------------------------------------*/
div.comments-body div.text {
padding: 5px;
}

form div.comments-body {
padding: 5px;
}

div.comments-post {
margin: 0;
padding: 3px;
background-color: #E1FFFC;
text-align: right;
font-size: 80%;
border-left: 1px solid #white;
}
form div.comments-body {
text-shadow: 1px 0 0 gray;
}
input {
border: 1px solid #375D81;
margin-left: 5%;
width: 85%;
-webkit-border-radius: 5px;
-webkit-box-shadow: -1px -1px 0 #E1FFFC;
}
div.comments-buttons {
margin-top: 10px;
text-align: center;
}
input.input-submit {
width: 30%;
background-color: #BFF7F5;
border-top: 1px solid #E1FFFC;
border-left: 1px solid #E1FFFC;
border-bottom: 1px solid #375D81;
border-right: 1px solid #375D81;
-webkit-box-shadow: 1px 1px 0 #E1FFFC;
}
textarea {
border: 1px solid #375D81;
margin-left: 5%;
width: 85%;
-webkit-border-radius: 5px;
-webkit-box-shadow: -1px -1px 0 #E1FFFC;
}

/* トラックバック
--------------------------------------------------*/
#trackback {
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;
}
div.trackback-head {
margin: 0;
margin-bottom: 3px;
padding: 3px;
background-color: #BFF7F5;
border-top: 1px solid #white;
border-left: 1px solid #white;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
background-image: url(http://blog.seesaa.jp/img/iphone/bgHeader.png);
background-repeat: repeat-x;
}
div+div.trackback-head {
border-top: none;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
background-image: none;
}
div.trackback-body {
padding: 8px;
}

/* style for index */
#index-article-list h2.date {
margin-top: 0;
margin-bottom: 0;
}
#index-article-list div.blogbody {
background-color: white;
margin: 0;
border:none;
border-bottom: 1px solid #BFF7F5;
-webkit-border-radius: 0;
-webkit-box-shadow: none;
padding: 10px;
}
#index-article-list div.blogbody h3.title {
background-color: white;
-webkit-border-radius: 0;
}
#index-article-list div.blog a {
text-decoration: none;
color: black;
}
div.comment-error {
color: red;
text-align: center;
background-color: #E1FFFC;
padding: 5px;
font-weight: bold;
text-shadow: 0 1px 0 white;
}

ラベル:iPhone CSS 公開
posted by o(^0^)o ほくほく at 00:59| Comment(1) | iPhoneブログデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
参考にさせて頂きます。
Posted by KAZUN at 2014年05月15日 15:43
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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


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

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