Seesaaカスタマイズ: マグカン

TOP / Seesaaカスタマイズ

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カスタマイズ

2013/02/24 Sun

Seesaaブログスマートフォン版、備忘録

このブログはスマートフォンだとこんな風に表示されます。

　
トップページ上部、下部。

記事ページ上部。

Seesaaブログの標準テンプレート（ブルー）を使用中。スマホに乗り換えてからこのデザインを見る機会が増え、だんだん飽きてきました。

しかし2013年2月現在、用意されてる公式テンプレートはたったこれだけ。これでも増えたほうです。

ならば自分の手でアレンジを。

PC/携帯版のスタイルシートやHTMLはいじり慣れてきたけれど、スマホ版はスタイルシート開いても見慣れない記述が多く放置してました。「これはどこに対応してるんだろ？」と調べようにも、スマートフォン版はHTMLをいじれないので、これが何ともわかりづらいのです。

「Seesaa　スマートフォン　デザイン」なんて検索しても、詳しく解説してくれるサイトはあまりないし、プレビュー機能もなんだかいまいち。

時間はたっぷりあるので、これを機に改造を試みたいと思います。以下、素人が手を出してみた軌跡を記しておきます。

◆公式テンプレートの色を変える

posted by あいだ at 20:48 | Comment(0) | Seesaaカスタマイズ

2012/03/09 Fri

備忘ロッカー

定期的にデザインを変えたくなるのは、ほとんどのブロガー及びサイト運営者に共通する心理だと思います。

さらに私は「知識やセンスはないくせにこだわりはある」というやっかいな性分。新しく導入したテンプレートもそのままでは使わず、「ここか？ここがええんか？」といじり倒し、微調整を繰り返さないと気が済みません。結果、既存のテンプレートを適用しようにも表示がおかしくなってしまい、改装の度に労力を要するブログとなってしまいました。こんなことを七年続けているので、もはや取り返しがつかない状態。何を参考にしてどこを変えたのかすら覚えてません。もっと汎用性のある改造をすればいいものを、それができないから困ってるんです。

「変えたところを記録しておけばいいんじゃないかな」と今更ながら思い始めました。前置きはこのくらいにして、追記にて変更点をメモしておきます。ブログカスタマイズ（に素人が手を出した有様）に興味のある方はどうぞ。

続きを読む

posted by あいだ at 23:58 | Comment(0) | Seesaaカスタマイズ

2010/03/01 Mon

Seesaaブログカスタマイズとモバイルとわたしとさかな

なぜ「ギョギョー！」なのですか？「ウオー！」ではだめなのですか？

……はい、そんな事業仕分けごっこ（さかなクンの鳴き声編）はさておき、今日も元気にSeesaaカスタマイズネタで角を攻めていこうと思う次第でございます。前回に引き続き、携帯向けのデザインを少しでも使いやすく！をモットーに、マイナーすぎるポイントを解説します。解説というよりは、勝手に変更した箇所の覚え書き程度ですが、何かの役に立てれば幸い。

◆コメント投稿者の入力したURLのリンクを名前に張って、コメント情報を一行で表示させる

posted by あいだ at 22:22 | Comment(0) | Seesaaカスタマイズ

2010/02/07 Sun

Seesaaブログカスタマイズとモバイルとわたし

Seesaaブログで、モバイル向けのカスタマイズを紹介してるサイトが少なかったので、個人的にこうした方が見やすそうだな、と思ってカスタマイズしたところを記してみます。

他のサービス（FC2とかJUGEM）にはテンプレートが選択できたり、設定できる項目がたくさんあったりするんだけど、Seesaaは携帯向けテンプレートはないし、背景・リンク・文字の色くらいしか項目がないから、細かい部分はHTMLをいじらなければならない。デフォルトの状態はこんな感じ（Seesaaお知らせブログ）。これじゃあちょっと物足りないよね、って思う人も多いはず。

あまり需要はないかもしれないけれど、何かの役に立てれば幸いです。

◆コメント数を各記事のタイトル下に表示させて、直接コメントページに移動できるようにする

posted by あいだ at 16:24 | Comment(2) | Seesaaカスタマイズ