Shopサラ
Jepun Bali(ジェプンバリ)
株式会社スタンダード
株式会社クリーンクリエイト
Seeass BlogはシステムでPCサイトと携帯サイトの切り分けをしています。
PC版と違ってカスタマイズのキャパシティは少ないのですが、今回は携帯用の表示画面にバナーを張ってみましょう。
マイブログから
『デザイン』→『コンテンツ（モバイル）』
エキスパートを選択
種類を 『自由選択』にして『コンテンツの追加』ボタンをクリックします。
今回はMicroAdの携帯用のバナーを貼りますので、
タイトルに『MicroAd』、自由入力欄に取得したバナーのコードを入力します。
『保存する』をクリックして保存します。
編集モード：ノーマルにて作ったタイトルでコンテンツが出来上がっていると思いますので、これをおきたい場所に移動します。
Powered By の上に今回はおきました。
Firefoxの携帯表示を使って確認します。
きちんと表示できていました。
携帯の場合はコンテンツも少ないので簡単です。
このサイトでWordpress、Seesaaなどのライターソフトとして紹介している『Windows Live Writer』なのですが、このソフトバックアップ機能がない。
レジストリなんかちょこちょこやれば何とかできそうだなんて思っていたらこんなソフトを見つけました。
『Windows Live Writer Backup – Windows Live Writer Plugins』
Windows Live Writerのバックアップとレストアをやってくれるソフトです。
そっ気のない風貌ですがなかなか役に立ってくれます。
ダウンロードはこちら
Windows Live Writer Backup – Release: Version 3.0 Final
インストールして
クリックで起動します。
チェックマークでバックアップするものを選択できます。
『Backup』でバックアップ
こんなアイコンのファイルができます。
『Restore』で復元できます。
Wordpressではプラグインを使って「Follow me」バッジをつけましたが Seesaa にもつけてみたいと思います。
WordpressにtwitterのFollow meバッジを表示してくれるプラグイン『WP FollowMe』
で紹介したようにWordpressではプラグインで簡単にFollow meバッジをつけることができたのですが、Seesaaではそういうわけにもいきませんので、『twitter follow badge』というWebサービスのを使います。
まずは
http://www.go2web20.net/twitterfollowbadge/
にアクセスします。
項目に情報を記入します。
Twitter account:登録してあるTwitterアカウントを記入します。
Label:表示を選べます。
Color:色を変えることができます。
Side:右側につけるか左側につけるかを選べます。
From top:トップからの位置をピクセルで指定できます。
『UPDATE CODE』をクリックします。
コードが発行されます。
このコードをSeesaaに貼り付けます。
『デザイン』→『HTML』→『HTML名』でソース編集画面を開きます。
一番下まで行って、</body>の上に先ほどのコードを貼り付けます。
保存をクリックして終了です。
Follow meバッジが表示されました。
Seesaaに限らず、HTMLが編集できるサイトなら使えますので覚えておくと役に立ちますよ。
Seesaaにtwitter機能が追加されて早半月ほど経ちます。
興味のある方はもう使われているとは思いますが、おせっかいで記事にしてみました。
Wordpressの投稿時にTwitterにつぶやいてくれるプラグイン『Post to Twitter』でも書いてはいるのですが、この機能のいいところは手間をかけずに露出を多くすることができる。
更新をタイムリーにアナウンスすることができる。
なんてふうに思っていますが、活用はともかく使ってみたいツールだと思います。
利用にはtwitterの登録が必要になりますので、
そろそろtwitterを使ってみるか・・・。
を参考に新規登録をしてください。
Seesaaの『設定』、『ブログ設定』に
”Twitterとの連携”という項目がありますので、このTwitterの認証を行うで機能させることができます。
クリックすると
になりますので、Twitterで取得した『ユーザー名やメールアドレス』、『パスワード』を入力し『許可する』をクリックします。
『記事投稿時にTwitterに投稿』の ”しない” を
”する” して 『ブログ設定の変更』をクリックし終了です。。
これでSeesaa更新時にTwitterにつぶやきが送られます。
SeeSaaでタイトルは『ブログタイトル』、『記事タイトル』の順で順で表示されます。
TOPページ
これを『記事タイトル』、『ブログタイトル』の順で表示するように変更します。
これは、検索エンジン対策で多くのキーワードをロボットに拾ってもらい検索で表示させようという意図もあるのですが、サイトを見てる人のユーザビリティにもいいのではと思っています。
SeeSaaの『デザイン』→『HTML』から編集するHTMLの編集画面に入ります。
<title><% blog.title %><% if:extra_title %>: <% extra_title %><% /if %></title>
ここの部分を変更します。
<% blog.title %>を移動するのですが ”: ”も<% /if %>の前に移動して下い。
<title><% if:extra_title %><% extra_title %>:<% /if %><% blog.title %></title>
こうなります。
記事タイトルが最初になりました。全部は見えてませんがコードでは
<title>SeeSaaブログのデザインをカスタマイズする（タイトルのポイントなど）:SeeSaaブログをカスタマイズする方法</title>
となっています。
ものすごいSEOとは言えませんが興味のあるかたはお試しください。
SeeSaaデザインも大体出来上がってきました。
遊びでタイトルのポイントと多少の修正を加えてデザインの完成とします。
まずポイントの画像を用意します。今回は 29×25px で作りました。
背景を透明で使うためGIFとします。
SeeSaaの ”記事投稿” → ”ファイルマネージャー” で画像をアップします。
CSSを変更します。
■h3の変更
h3 {
padding: 0px 0px 0px 15px;
font-size:12px;
font-weight:bolder;
background-image:url(http://blog.seesaa.jp/img/bg/lightgray_1/title.gif);
background-repeat:no-repeat;
font-family:Verdana;
}
padding を
padding: 0px 0px 10px 32px;
に変更します。
background-image のURLを
http://cat99.up.seesaa.net/image/title.gif
に変更します。
変更前
変更後 
■.listCategoryArticleの変更
最新記事部のバックを白くします。
.listCategoryArticle{
margin-top:5px;
padding:5px;
border:solid 1px #FFE2E2;
}
background-color:#FFF;
を付け加えます。
■#footerの変更
#footer{
clear:left;
height:50px;
}
background-color:#F3FFCC;
を付け加えます。
変更前
変更後
■imgの追加
このままだと指定のない画像に枠線が付いてしまいますのでCSSの中に
img {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
を付け加えます。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
最初からみると 
が
こうなりました。
記事部分の区切りが分かりにくいのでバックに色を入れてみることにした。
CSSを変更します。
■.blogの変更
.blog {
padding:0px 5px 50px 5px;
text-align:left;
font-family:Verdana;
}
ＢＯＸの下が開きすぎているようなので
padding:0px 5px 50px 5px;
を
padding:0px 15px 5px 15px;
に変更
background-color:#F3FFCC;
margin-bottom:20px;
border-top:2px solid #89C319;
border-bottom:2px solid #89C319;
を付け加えます。
日付の上のボーダーが邪魔になったのでとります。
■.dataの変更
.date{
font-family:Verdana;
font-size:10px;
clear:left;
color:#AFAFAF;
margin-top:0px;
margin-bottom:0px;
padding:12px 0px 25px 0px;
border-top:1px solid #D3D3D3;
}
border-top:1px solid #D3D3D3;
をとります。
padding:12px 0px 25px 0px;
を
padding:12px 0px 0px 0px;
に変更します。
■.titleの変更
.title{
margin-top:0px;
margin-bottom:0px;
font-weight:bold;
}
margin-top:0px;
を
margin-top:10px;
に変更します。
文字も大きくしたいので
font-size:14px;
を足します。
これは日付がない場合TOPとタイトルがくっつきすぎてしまうためです。
そこで .date 側のbottomのpaddingを少なくし、 .title 側のTOPのmarginを多くしました。
変更前
変更後
こうなりました。
完成も間近です。
header部が変更されだいぶイメージが変わったのでそれに合わせサイドバーなどを変更します。
CSSを変更します。
■まずはカレンダー部
.calendarhead {
padding:4px 0px;
font-weight:bold;
background-color:#F1F1F0;
text-align:center;
color:#5D5D5D;
font-size:12px;
font-family:Verdana;
width:100%;
}
の background-color:#F1F1F0;
を background-color:#89C319;
color:#5D5D5D;
を color:#FFF;
.calendarhead a{
color:#5D5D5D;
}
.calendarhead .calendarday{
color:#5D5D5D;
}
の color:#5D5D5D;
を color:#FFF;
にそれぞれ変更します。
■sideberタイトル部
.sidetitle {
padding:4px 10px 4px 10px;
font-weight:bold;
background-color:#ECECEB;
font-family:Verdana;
}
の background-color:#ECECEB;
を background-color:#89C319;
に変更し color:#FFF;
を追加します。
緑ばっかりになってしまったので、リンクのテキストをオレンジにします。
a{
color:#7C9907;
text-decoration:none;
}
のカラーを ＃FF6633 に変更します。
変更前
変更後
こんな風に変わりました。
デザインのコツとしては、同系色や反対色をうまく使うと少ない色でうまくまとまります。
まず背景を用意します。今回は #banner 部は 950px × 150px になっていますのでそのサイズに合わせてillustratorにてつくりました。
これをSeeSaaの ”記事投稿” → ”ファイルマネージャー” でアップし元ファイルの場所（今回は”http://cat99.up.seesaa.net/image/hader-1.png”）を覚えておいてください。
CSSを変更します。
#container の変更
#container{
margin:0px auto 0px auto;
width:950px;
color:#5D5D5D;
font-size:12px;
font-family:Verdana;
text-align:center;
}
に
background-image:url(http://cat99.up.seesaa.net/image/hader-1.png);
background-repeat:no-repeat;
を追加します。
やり方としてはいくつかあるのですが、backgroundを使いました。
background-repeat:no-repeat; でリピートしない設定となります。
これに合わせてテキストの色と位置を変えます。
#banner の変更し位置を修正します。
#banner{
margin:0px;
text-align:left;
height:150px;
}
に
padding:10px;
を追加します。
h1 a を変更しタイトルの色を変更します。
h1 a{
color:#5D5D5D;
text-decoration: none;
font-weight:bolder;
}
の #5D5D5D を
＃FFF に変更します。
.description を変更しサイト説明の色を変更します。
.description {
font-family:Verdana;
font-weight:bold;
padding:0px 10px 0px 0px;
}
に
color:#FFF；
を追加します。
初めのヘッダ部です
変更後のヘッダ部です
これだけでサイトの印象がガラッと変わります。
サイトデザインのテンプレートは『ライトグレー(両サイドバー)』を選択しましたが、サイトの幅が％でブラウザに合わせて変わるようになっています。
これを変更し固定幅となるようにします。
幅を決めるのは４つ
・全体の幅 #container を950pxに
・左サイドバー #links-left を180pxに
・右サイドバー #links を180pxに
・コンテンツ部 #content を530pxに
それぞれ変更します。
CSSを開き
1: #container{
2: margin:0px auto 0px auto;
3: width:100%;
4: color:#5D5D5D;
5: font-size:12px;
6: font-family:Verdana;
7: text-align:center;
8: }
width:100%; を width:950px; に変更
1: #links-left {
2: font-weight:normal;
3: width:23%;
4: float:left;
5: margin: 0px 0px 0px 0px;
6: text-align:left;
7: }
1: #links {
2: font-weight:normal;
3: float:left;
4: width:23%;
5: margin: 0px 0px 0px 30px;
6: text-align:left;
7: font-size:12px;
8: }
の width:23%; をそれぞれ width:180px; に変更
1: #content {
2: margin:0px 0px 0px 30px;
3: float:left;
4: width:54%;
5: }
の width: を 530px; に変更します。
固定幅に変更できました。
