インヂゴ: マグカン

<< Seesaaブログスマートフォン版、備忘録 | TOP | やっすいイヤホンを買ってから初めて後悔した >>
2013/02/25 Mon

インヂゴ

昨日、編集画面とにらめっこしてスマホ版のデザインを黄色くしてみたけど、十分したら飽きたのでやっぱり青に戻しました。今はこんな感じになってます。
広告を読み込む前の奇跡の一瞬をスクリーンショット。

全体を濃い青にして、ブログタイトルをグレー、記事ページのタイトルは赤、あとはデフォルトテンプレートのブルーのまんまです。シンプルイズベスト。

私はFC2やLivedoorのブログをスマートフォンで見る機会が多いけど、それらに比べてSeesaaのは全体的に文字が小さいのが気になります。しかも微妙に統一されていない。なので適当に大きくしておきました。

せっかくなのでスタイルシートを載せておきますね。
/*--- common ---*/
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p,
header, hgroup, section, article, aside, hgroup, footer, figure, figcaption, nav {
margin: 0;
padding: 0;
font-size: 100%;
}
* {
font-size:12px;
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
list-style: none;
margin:0;
padding:0;
}
body {
margin: 0;
padding:0;
line-height: 1.0;
-webkit-text-size-adjust: none;
}

header, hgroup, section, article, aside, hgroup, footer, figure, figcaption, nav{
display:block;
}
img{
border:none;
}
a{
color:#339999;
text-decoration:none;
}
.clear{
clear:both;
}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.seesaalogo{
margin:0px;
background:#fff;
}
#iphone-container{
text-align:center;
}
/*--- common ---*/

/*--- ad ---*/
.page-header-ad{
text-align:left;
margin:5px 10px;
}
.top-ad{
text-align:center;
}
.im_ad_block2{
padding-bottom:10px;
}
/*--- ad ---*/


/* -- Header -- */
#banner{
margin:0px 0px;
text-align:left;
padding:10px 0px 0px 0px;
background: -webkit-linear-gradient(top, #fffffff 0%, #999999 100%);
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#999999));
background-color:#e5e5e5;
color:#003366;
}
.navi{
padding:10px 0;
}
.banner-button-left a{
display:block;
width:55px;
height:28px;
text-indent:-9999px;
overflow:hidden
}
.banner-button-right a{
display:block;
width:55px;
height:28px;
text-indent:-9999px;
overflow:hidden
}
.banner-button-left{
float:left;
background:url("<a href="https://blog.seesaa.jp/img/iphone_bg/blue/seesaa_portal.png" target="_blank">https://blog.seesaa.jp/img/iphone_bg/blue/seesaa_portal.png</a>") no-repeat;
}
.banner-button-right{
float:right;
background:url("<a href="https://blog.seesaa.jp/img/iphone_bg/blue/pc_blog.png" target="_blank">https://blog.seesaa.jp/img/iphone_bg/blue/pc_blog.png</a>") no-repeat;
}
#banner h1{
margin:5px 0px 10px 0px;
text-align:center;
}
#banner h1 a{
font-size:16px;
color:#333;
margin:0px;
text-shadow: 1px 1px 1px #fff;
display:block;
}
#banner .description{
border-top:1px solid #000000;
padding:10px;
line-height:140%;
background-color:#fff;
text-align:center;
}
/* -- Header -- */

/* -- content -- */

/* --- index --- */

#list-content{
text-align:center;
margin:5px 5px 0 ;
padding:10px 5px 10px 5px;
background-color:#fff;
padding-bottom:5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-radius-topleft: 5px;
border-radius-topright: 5px;
}
/* --- pager --- */
.navi-line{
padding:15px 0 ;
margin:0 auto;
text-align:center;
}
.navi-top{
border-collapse:collapse;
line-height:1.0;
margin:0px auto 10px auto;
text-align:center;
font-size:12px;
}
.navi-bottom{
border-collapse:collapse;
line-height:1.0;
margin:10px auto 0px auto;
padding:15px 0px;
text-align:center;
margin-bottom:10px;
font-size:12px;
}
.navi-top td,
.navi-bottom td{
padding:0;
font-size:12px;
}

.pager-prev-on a,
.backtoArticle a{
display:block;
text-align:center;
margin-right:3px;
padding:5px 10px 5px 15px;
background:url("<a href="https://blog.seesaa.jp/img/iphone_bg/blue/arrow_left.png" target="_blank">https://blog.seesaa.jp/img/iphone_bg/blue/arrow_left.png</a>") no-repeat left 8px;
font-size:12px;
}
.backtoArticle a{
width:70px;
margin-left:5px;
font-size:12px;
}
.commentfinished{
color:#990000;
text-align:center;
padding:5px;
}
.pager-prev-off .no-link{
display:block;
padding:5px 10px 5px 15px;
text-align:center;
margin-right:3px;
background:#E6EAE1;
font-size:12px;
}
.pager-next-on a{
display:block;
text-align:center;
padding:5px 15px 5px 10px;
background:url("<a href="https://blog.seesaa.jp/img/iphone_bg/blue/arrow_right.png" target="_blank">https://blog.seesaa.jp/img/iphone_bg/blue/arrow_right.png</a>") no-repeat right 8px;
font-size:12px;
}
.pager-next-off .no-link{
display:block;
text-align:center;
padding:5px 15px 5px 10px;
font-size:12px;
}
.pager-on a{
display:block;
text-align:center;
padding:5px 0px 5px 0px;
width:28px;
margin-right:3px;
font-size:12px;
}
.pager-off span{
display:block;
text-align:center;
padding:5px 0px 5px 0px;
width:28px;
background:#E6EAE1;
margin-right:3px;
font-size:12px;
}
.pager-shorten{
text-align:center;
padding:5px 0px 5px 0px;
width:18px;
margin-right:3px;
font-size:12px;
}


.blog-list{
text-align:left;
overflow:hidden;
}
.blog-list a{
display:block;
height:60px;
padding:0;
margin:0;
}
.blog-list a:hover{
}
.arrow{
float:right;
background:url("<a href="https://blog.seesaa.jp/img/iphone_bg/blue/arrow.png" target="_blank">https://blog.seesaa.jp/img/iphone_bg/blue/arrow.png</a>") no-repeat right;
width:20px;
height:60px;
}
.list-blogbody{
float:left;
width:92%;
line-height:1.0;
}
.list-title{
padding:10px 5px 0px 10px;
}
a .list-title{
color:#000066;
font-size:14px;
}
.list-date{
text-align:right;
padding:3px 5px 0px 0px;
}
a .list-date{
color:#666;
font-weight:normal;
}
.list-posted{
padding:3px 5px 0px 0px;
text-align:right;
font-weight:normal;
}
a .list-posted{
color:#ed6a07;
}
/* --- index --- */

/* --- article --- */
#content{
text-align:center;
background-color:#fff;
margin:5px 5px 0;
padding:10px 5px 10px 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-radius-topleft: 5px;
border-radius-topright: 5px;
}
.article-navi{
border-collapse:collapse;
line-height:1.0;
margin:0px auto 10px auto;
width:215px;
border:solid 0px #000;
text-align:center;
display: -webkit-box;
display: -moz-box;
display: box;
}
.article-navi div{
display:inline;
}
.article-navi-bottom{
border-collapse:collapse;
line-height:1.0;
margin:0px auto 10px auto;
width:215px;
border:solid 0px #000;
text-align:center;
display: -webkit-box;
display: -moz-box;
display: box;
padding-top:10px;
}
.article-navi-bottom div{
display:inline;
}
.prev-article-on a{
display:inline;
padding:5px 10px 5px 15px;
background:url("<a href="https://blog.seesaa.jp/img/iphone_bg/blue/arrow_left.png" target="_blank">https://blog.seesaa.jp/img/iphone_bg/blue/arrow_left.png</a>") no-repeat left 8px;
margin-right:3px;
font-size:12px;
}
.back-blogtop a{
display:inline;
padding:5px 20px 5px 10px;
background:url("<a href="https://blog.seesaa.jp/img/iphone_bg/blue/ico_top.png" target="_blank">https://blog.seesaa.jp/img/iphone_bg/blue/ico_top.png</a>") no-repeat right 4px;
margin-right:3px;
font-size:12px;
}
.next-article-on a{
display:inline;
padding:5px 15px 5px 10px;
background:url("<a href="https://blog.seesaa.jp/img/iphone_bg/blue/arrow_right.png" target="_blank">https://blog.seesaa.jp/img/iphone_bg/blue/arrow_right.png</a>") no-repeat right 8px;
font-size:12px;
}
.next-article span{
display:inline;
padding:5px 10px 5px 15px;
margin-right:3px;
font-size:12px;
}
.prev-article span{
display:inline;
padding:5px 10px 5px 15px;
margin-right:3px;
font-size:12px;
}
.blog{
text-align:left;
}
.title{
font-size:16px;
font-weight:bold;
line-height:140%;
padding:10px 0;
}
.date{
text-align:right;
color:#999;
font-weight:normal;
padding:10px;
}
.text{
margin:10px 0 ;
line-height:150%;
font-size:16px;
}
.text a,b,strong,span{
font-size:16px;
}
.posted{
color:#999;
text-align:right;
padding:10px;
}
.bookmark{
text-align:right;
padding:10px;
}
.bookmark img{
margin-right:3px;
}
.bookmark iframe{
margin-right:3px;
}
#comments{
text-align:center;
}
.recentcommentContent{
background:#fff;
margin:0 0px;
padding:10px 0px 0px;
}
.comments-head,
.trackback-head,
.category-name{
text-align:center;
font-size:16px;
font-weight:bold;
margin:10px 0px;
padding-bottom:10px;
}
.commentView,
.trackbackView{
padding:5px 0;
}
.commentView a,
.trackbackView a{
display:block;
text-align:center;
color:#fff;
line-height:1.0;
font-weight:bold;
padding:11px 0px;
background:url("<a href="https://blog.seesaa.jp/img/iphone_bg/blue/post_bg.png" target="_blank">https://blog.seesaa.jp/img/iphone_bg/blue/post_bg.png</a>") no-repeat center;
}
.trackback-url{
text-align:right;
padding-right:5px;
padding-bottom:10px;
}
.trackback-body{
text-align:left;
padding:10px 0px;
}
.trackback-list{
padding-bottom:10px;
}
.comments-body{
text-align:left;
padding:10px 0px;
}
.comment-list{
padding-bottom:10px;
}
.comments-post{
padding:0px 10px;
text-align:right;
}
.comments-form{
margin:10px;
text-align:left;
}
.comment-form-input{
padding-bottom:10px;
}
.comment-form-text{
font-weight:bold;
margin:2px 0px;
padding:2px;
}
.comment-form-input input{
margin-top:3px;
width:95%;
padding-bottom:10px;
}
.comment-form-input textarea{
margin-top:3px;
width:95%;
height:150px;
}

.comment-need{
color:#fff;
line-height:1.0;
background:#f93;
padding:2px 5px;
margin-left:5px;
font-weight:normal;
font-size:10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.comment-need-text{
text-align:left;
margin:5px 0px;
}
.comments-buttons input{
display:block;
text-align:center;
color:#fff;
line-height:1.0;
font-weight:bold;
margin:0px auto;
padding:11px 0px;
width:271px;
border:none;
background:url("<a href="https://blog.seesaa.jp/img/iphone_bg/blue/post_bg.png" target="_blank">https://blog.seesaa.jp/img/iphone_bg/blue/post_bg.png</a>") no-repeat center;
}
.comments-article{
text-align:left;
}
.comment-error{
color:#990000;
}

.category,
.archive{
text-align:center;
margin:0px 0px 10px 0px;
background-color:#fff;
}
.category select,
.archive select{
    background-color: transparent;
    background-image: url("<a href="https://blog.seesaa.jp/img/iphone_bg/blue/select_arrow.gif" target="_blank">https://blog.seesaa.jp/img/iphone_bg/blue/select_arrow.gif</a>");
    background-position: 95% 50%;
    background-repeat: no-repeat;
    background-size: 7px 8px;
    border: 0 none;
    font-size: 14px;
    height: 30px;
    width: 100%;
    color:#fff;
	text-align:center;
	font-weight:bold;
}
.category select option,
.archive select option{
	text-align:center;
}

/* -- content -- */



/* -- photo -- */
.recentPhotoTitleWrap{
text-align:center;
margin:0px 0px 10px 0px;
background-color:#fff;
}
.recentPhotoTitle{
text-align:center;
font-size:16px;
font-weight:bold;
margin:10px 0px;
padding-bottom:10px;
}
.index-article-next .more{
text-align:right;
padding:5px 5px 5px 5px ;
}
.recentphotoList{
float:left;
width:100px;
text-align:center;
padding-bottom:5px;
}
.photoDetailTitle,
.photolistTitle{
text-align:center;
font-size:16px;
font-weight:bold;
margin:10px 0px;
padding-bottom:10px;
}
.photoBlogList{
text-align:left;
overflow:hidden;
}
.photoBlogList a{
display:block;
height:50px;
padding:0;
margin:0;
}
.photo-arrow{
float:right;
background:url("<a href="https://blog.seesaa.jp/img/iphone_bg/blue/arrow.png" target="_blank">https://blog.seesaa.jp/img/iphone_bg/blue/arrow.png</a>") no-repeat right;
width:20px;
height:50px;
}
.photo-list-blogbody{
float:left;
width:92%;
line-height:1.0;
}
.photo-list-title{
padding:15px 5px 0px 10px;
}
a .photo-list-title{
color:#2222D3;
}
.photo-list-date{
float:left;
padding:3px 5px 5px 10px;
}
a .photo-list-date{
color:#666;
font-weight:normal;
}

.photoDetail{
margin:10px 0px;
text-align:center;
}
.photoDetail img{
text-align:center;
width:90%;
}
.photoDetailNavi{
line-height:1.0;
text-align:center;
display: -webkit-box;
display: -moz-box;
display: box;
text-align:center;
margin:10px auto;
width:100px;
}
.photoDetailList{
text-align:left;
overflow:hidden;
}
.photoDetailList a{
display:block;
padding:0;
margin:0;
}
.photoArticleTitle{
padding:10px 5px 10px 10px;
}
a .photoArticleTitle{
font-weight:bold;
font-size:14px;
}


.otherUpload{
padding:20px 0px 10px;
}
.otherUploadInner{
padding:10px 0px;
}
.otherUploadList{
float:left;
width:100px;
text-align:center;
padding-bottom:5px;
}
.otherUploadListMargin{
padding-bottom:3px;
}
.otherUploadDate{
font-size:12px;
text-align:center;
}
.uploadListUnderSection{
padding:0px;
}


/* -- photo -- */

/* -- Footer -- */
.footercontainer{
background:#ffffff;
padding:10px 5px 10px;
margin:0 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-radius-bottomleft: 5px;
border-radius-bottomright: 5px;
}
#footer{
}
.changedeviceLinks{
background:#ffffff;
margin:0 0px;
text-align:center;
padding:5px 5px 5px 5px;
font-size:12px;
}
.changedeviceLinks span{
color:#000;
font-weight:bold;
font-size:12px;
}
.powered{
text-align:center;
padding:5px 0px;
color:#fff;
}

.pb5{
padding-bottom:5px;
}
/* Clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .clearfix{
	zoom: 1;
} /* IE6 */
*:first-child+html .clearfix{
	zoom: 1;
} /* IE7 */
.text:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .text{
	zoom: 1;
} /* IE6 */
*:first-child+html .text{
	zoom: 1;
} /* IE7 */


/*--- template color ---*/

.title,
a .photoArticleTitle,
.comments-head,
.trackback-head,
.category-name,
.recentPhotoTitle,
.photoDetailTitle,
.photolistTitle{
color:#CC0000;
}
.posted{
border-top:1px dotted #2B4279;
}
.navi-line,
.blog-list,
.trackback-url,
.trackback-body,
.comments-body,
.recentPhotoTitleWrap,
.comments-head,
.trackback-head,
.category-name,
.recentPhotoTitle,
.photoDetailTitle,
.photolistTitle{
border-bottom:1px dotted #2B4279;
}
.date,
.photoBlogList,
.photoDetailList{
border-bottom:1px dotted #2B4279;
border-top:1px dotted #2B4279;
}
#iphone-container,
.archive select,
.category select,
.powered{
background-color:#2B4279;
}
.prev-article span,
.next-article span,
.pager-next-on a,
.pager-on a,
.pager-prev-on a,
.backtoArticle a,
.prev-article-on a,
.back-blogtop a,
.next-article-on a,
.blog-list a:hover{
background-color:#cdeef3;
}
今も色の中では緑が一番好きだけど、液晶にはやっぱり青系が一番映える気がする、と最近思うようになりました。マイクロソフトもアップルも青いイメージ。すっかり洗脳されてる。こわい、こわい。
posted by あいだ at 22:22 | Comment(0) | Seesaaカスタマイズ
この記事へのコメント
コメントを書く