このブログはスマートフォンだとこんな風に表示されます。
トップページ上部、下部。
記事ページ上部。
Seesaaブログの標準テンプレート（ブルー）を使用中。スマホに乗り換えてからこのデザインを見る機会が増え、だんだん飽きてきました。
しかし2013年2月現在、用意されてる公式テンプレートはたったこれだけ。これでも増えたほうです。
ならば自分の手でアレンジを。
PC/携帯版のスタイルシートやHTMLはいじり慣れてきたけれど、スマホ版はスタイルシート開いても見慣れない記述が多く放置してました。「これはどこに対応してるんだろ？」と調べようにも、スマートフォン版はHTMLをいじれないので、これが何ともわかりづらいのです。
「Seesaa スマートフォン デザイン」なんて検索しても、詳しく解説してくれるサイトはあまりないし、プレビュー機能もなんだかいまいち。
時間はたっぷりあるので、これを機に改造を試みたいと思います。以下、素人が手を出してみた軌跡を記しておきます。
まずは管理画面を、デザイン＞スマートフォン＞デザイン一覧と進み、編集するスタイルシートを選択。
◆今回の目標：色を変える
とりあえず一番変化がわかりやすい色からいじってみます。デフォルトがグレー・ブルー・ピンク・グリーンしかないので、それ以外の色に変えてみましょう。
色の設定はスタイルシート一番下あたり、/*--- template color ---*/以降に結構まとまっているようです。おお、親切。片っ端から変えて、変化を調べてみました。変更した部分を赤で示しています。なお、日本語のコメントはこちらが勝手に加えたもので、公式にはありません。
/*--- template color ---*/
/*--- １．記事・コメントページ等での記事タイトル、カテゴリ別ページでのタイトル ---*/
.title,
a .photoArticleTitle,
.comments-head,
.trackback-head,
.category-name,
.recentPhotoTitle,
.photoDetailTitle,
.photolistTitle{
color:#CC6600;
}
/*--- ２．記事ページ下部postedのライン ---*/
.posted{
border-top:1px dotted #FFCC33;
}
/*--- ３．記事一覧・コメント等のライン ---*/
.navi-line,
.blog-list,
.trackback-url,
.trackback-body,
.comments-body,
.recentPhotoTitleWrap,
.comments-head,
.trackback-head,
.category-name,
.recentPhotoTitle,
.photoDetailTitle,
.photolistTitle{
border-bottom:1px dotted #FFCC33;
}
.date,
.photoBlogList,
.photoDetailList{
border-bottom:1px dotted #FFCC33;
border-top:1px dotted #FFCC33;
}
/*--- ４．コンテンツ部分の背景 ---*/
#iphone-container,
.archive select,
.category select,
.powered{
background-color:#FEFFCB;
}
/*--- ５．ページ送り・記事リストをタッチした時の薄い背景 ---*/
.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:#FEFFCB;
}
ざっくりとこんな感じでした。
とりあえず１に濃い色、２〜５にそれより薄い色を好きなように入れれば、だいぶ変わります。春らしく黄色・オレンジ系にしてみました。どれ、見てみようじゃないか。
……なんとまぁ珍妙な。
ページ送りの矢印の画像、ヘッダー、リンクの色などがまだ青くて気になります。それぞれ直していきましょう。
・リンクの色
一番上/*--- common ---*/のところに全体の設定があるので、まず全体のリンク色をいじります。
a{
color:#CC6600;
text-decoration:none;
}
これだけではまだ記事リストのタイトルが青いままなので、/* --- index --- */で囲まれた部分の下あたりから記事リストの設定をいじります。メモ帳か何かにコピーして、↑上のカラーコードを置換したほうが手っ取り早い気もする。
/* --- 記事リスト：記事タイトル --- */
a .list-title{
color:#CC6600;
}
/* --- 記事リスト；コメントの色 --- */
a .list-posted{
color:#CC6600;
}
とりあえずリンクの色と一緒でいいか。ついでに背景を薄い黄色にしたら、白文字だった部分が目立たなくなってしまったので、ここもオレンジにしておきます。color:#FFF;となっていた部分を適当に修正。置換、置換。
だいぶ青さが減ってきました。
・ページ送りの矢印など、画像の部分
残すはブログタイトルと矢印のみです。このあたりは画像が使われているので、代わりの画像を用意できるならばURLを入れ替えるといいよね。
ページ送りの矢印に該当するのは、/* -- Header -- */のこの部分。
/* -- 「←前の記事」 -- */
.prev-article-on a{
display:inline;
padding:5px 10px 5px 10px;
background:url("https://blog.seesaa.jp/img/iphone_bg/gray/arrow_left.png") no-repeat left 8px;
margin-right:3px;
}
/* -- 「TOP↑」 -- */
.back-blogtop a{
display:inline;
padding:5px 10px 5px 10px;
background:url("https://blog.seesaa.jp/img/iphone_bg/gray/ico_top.png") no-repeat right 4px;
margin-right:3px;
}
/* -- 「次の記事→」 -- */
.next-article-on a{
display:inline;
padding:5px 10px 5px 10px;
background:url("https://blog.seesaa.jp/img/iphone_bg/gray/arrow_right.png") no-repeat right 8px;
}
それぞれ変えてあげましょう。サイズが合わなかったら前後にあるpaddingやらmarginやらを適当にいじればいいんじゃないかな。私は画像を用意するのが億劫なので、それぞれbackgroundの行を丸々消しました。矢印はなくなりましたが、まぁ問題ない。
画像のためにぽっかり空いた余白は、それぞれ数値をそろえてあげればスッキリ。四つ並んだ値は前から、上・右・下・左の順です。
padding:5px 15px 5px 10px; こうなってたら右の余白が多いので
padding:5px 10px 5px 10px; 左に合わせてあげる。
画像が使われている部分はURLのおかげで突出して長くなっているから、探しやすいと思うので省略します。
記事リストの右側にも「＞」こんな画像が使われてます。これもいらないや。
「コメントを読む」や「書き込む」のボタンにも背景画像が使われています。ここは丸ごと取りさらってしまうと寂しいので、背景色を指定して、角を丸くしてみました。あ、ここも文字色が白なので、オレンジに変えておこう。
/* -- コメントを読む -- */
.commentView a,
.trackbackView a{
display:block;
text-align:center;
color:#CC6600;
line-height:1.0;
font-weight:bold;
padding:11px 0px;
background-color:#FEFFCB;
-webkit-border-radius:4px;
-moz-border-radius:4px;
}
/* -- 書き込む -- */
.comments-buttons input{
display:block;
text-align:center;
color:#CC6600;
line-height:1.0;
font-weight:bold;
margin:0px auto;
padding:11px 0px;
width:271px;
border:none;
background-color:#FEFFCB;
-webkit-border-radius:4px;
-moz-border-radius:4px;
}
丸くするとかその辺は正直よくわからないから、なんかイイカンジのをコピペしてきました！ググって猿真似は人類の基本ですよね。使い方間違ってるかもしれないけど、一応私の手元では思ったとおりに表示されてます。
参考：画像を使わずにCSSだけで角を丸くする方法 [ホームページ作成] - All About
・ブログタイトル
これも画像なので、ロゴを作ってURL置き換えればオリジナリティ溢れるデザインにできそうです。ロゴを作る場合はコンテンツでブログタイトルを消した方がいいかもしれません。今度やってみよう。
今回は画像を使わずに、それっぽいグラデーションにしてみました。
/* -- Header -- */
#banner{
margin:0px 0px;
text-align:left;
padding:10px 0px 0px 0px;
background: -webkit-linear-gradient(top, #FEFFCB 0%, #F8973E 100%);
background: -webkit-gradient(linear, left top, left bottom, from(#FEFFCB), to(#F8973E));
background-color:#FEFFCB;
}
グラデーションにするとスマホっぽさ倍増ですね。ダサい？気にしない！
・こうなった
左がiPod touchのSafari、右がAndroidのSleipnirで表示したトップページ。
矢印等の画像を削ってしまいましたが、なんとか青から黄色に変更できました。
PC版のスタイルシートをいじったことのある人ならば、クラス名などはほとんど同じなので感覚でわかるかと思います。「ここをいじると色が変わるよー」ということで、参考までに。
せっかく作ったので黄色×オレンジのテンプレートを置いておきます。→テキストファイル
コピーしてご自由に使ってください。画像系（クラス名photo〜）のところはコンテンツを導入していないため未確認です。色を変える場合は、リンクの色#CC6600、ラインの色#FFCC33、背景色#FEFFCBを検索して、それぞれ好きな色に置き換えてみてください。他にも変えたかも……ま、いいか。
ついでに、今までいじくってきたSeesaaブログカスタマイズの軌跡をカテゴリにまとめました。素人知識ですが、参考になれば幸いです。
他にもまだまだ気になるところがあるので、変更したら記録しておきます。
