SeeSaaを使ってWeb構築、カスタマイズや便利TOOLなどのメモ
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; に変更します。
固定幅に変更できました。
サイトを作ったことのある方は当然知っていることなのですが、CSSの簡単な見方を説明します。
まずはWeb開発に便利なツール『Web Developer』で書いたFireFoxのアドオンを使うと便利です。
Divの要素を表示させるとこのようになります。
これで変更したいCSSの部分を確認しながらCSSを書き換えていくこととなります。
たとえば、タイトルの部分は 
となって、CSSの部分は
1: h1 {
2: margin:0px;
3: padding-top:50px;
4: padding-bottom:10px;
5: font-weight:bolder;
6: font-size:24px;
7: font-family:Verdana;
8: }
であることが分かります。
そして、大きさを変えたいときは
font-size:24px;
を
font-size:20px;
などと変更すれば文字は小さくなります。
左のサイドバーは
#links-left
であることが分かりCSSの
1: #links-left {
2: font-weight:normal;
3: width:180px;
4: float:left;
5: margin: 0px 0px 0px 0px;
6: text-align:left;
7: }
この部分を変えることで変更できます。
SeeSaaブログのデザインをオリジナルにするにはHTML（デザイン→HTML→HTML名） 
とCSS（デザイン→デザイン一覧→タイトル）
を変更して行います。
ブログの色やヘッダの画像を変更するぐらいならCSSを変更するだけで結構見栄えが違ってきます。
ブラウザ上で変更してもいいのですが、一応ローカルで編集し確認してからアップしたいと思います。
①まずは適当にフォルダを作ります。
②ブラウザで自サイトを表示しソースコードをindex.htmlとしフォルダの中に保存します。このとき
<link rel="stylesheet" href="http://cat99.seesaa.net/styles-index.css" type="text/css" />
を
<link rel="stylesheet" href="styles-index.css" type="text/css" />
と変更します
③SeeSaaでCSSを表示し（デザイン→デザイン一覧→タイトル）内容をコピーします。
④styles-index.css というファイル名で保存します。
index.htmlをクリックするとローカルにて自サイトが表示できます。
一部表示できないものがあったりしますがデザイン変更には問題ありません。
この後、ローカルにてCSSを確認しながら変更し、SeeSaaのCSSを更新することで本サイトのデザイン変更が完了します。
『Seesaa ブログをWindows Live Writer で投稿する設定』でSeesaaへのLive Writerからの投稿を紹介したのだが、LiveWriterのバージョンアップで投稿のアップがうまくいかないとのことなので調べてみた。
状態としては、
①アップがうまくいたっりいかなかったりする。
②カテゴリが取得できずデフォルトのルートにしか投稿できない。
さっそくLiveWriterをインストールしてみる。バージョンは”14.0.5027.0923”
設定の時に指定する『文字セット』が問題っぽい。規定でシフト-JISになっている。UTF-８だと思ったのだが…。
で『ブログ』→『ブログ設定の編集』→『詳細設定』で文字セットを”UTF-８”した。
これで問題は解決したように思うのだが、どうでしょう？
てっきりもう書いていたかと思っていたのだが、『SeesaaでGoogleウェブマスターツールは使えないんでしょうか？』って聞かれたので過去記事を見てみたら『Seesaaで・・・』どころかGoogleウェブマスター自体書いてなかった。
の応用になるので特に難しいことはありません。
Google アカウントのない方はまずはGoogleで取得します。
http://www.google.com/webmasters/sitemaps/?hl=ja
へ行きログインします。
サイトを追加し、”サイトの確認”までいったら確認の方法で”メタタグを追加”を選択しコピーします。
Seesaaにログインし『デザイン』の『HTML』で作業します。
<head>から</head>の間にペーストすればいいのですが、大抵の場合<meta ・・・>がありますのでその下にペーストすればコードもきれいになります。
こんな感じです。
『保存』をクリックし完了です。
Googleウェブマスターツールに戻り、『確認』をクリックすれば”・・・成功しました。”になるのですが、Seesaaの場合はHTMLの変更が反映されるまで時間がかかるのでちょっと待ってから『確認』をクリックしましょう。
成功したらサイトマップを追加します。”サイトマップ”の”サイトマップを追加”に行きます。
種類の選択を”一般的なウェブページのサイトマップを追加”にしURLに”sitemap.xml”を入力します。
”一般的なウェブページのサイトマップを追加”をクリック。
これで終了です。
自分がSeesaaをよく人に勧める理由の中に、Htmlを編集できるということがある。
Htmlの知識があれば、自分好みのBlogにできるわけだが、スクリプトなども埋め込めるのでサイトのアクセス解析ツール”Google Analytics”を埋め込んでみよう。
Google アカウントのない方はまずはGoogleで取得します。
http://www.google.com/analytics/ja-JP/sign_up.html
一緒の画面からGoogle Analyticsにログインし、"プロファイルを追加"、 進めていきトラッキングコードを取得します。
このトラッキングコードをｈｔｍｌの</body>の前に張り付けることとなります。
Seesaaにログインし『デザイン』の『HTML』で作業します。
念のために”HTMLの追加”で新しく編集するためのHTMLを作っておきましょう。
でそれを開いて</body>のまえにコピーしたトラッキングコードを貼り付けます。
『保存』をクリックし完了です。HTMLは新しい方を適用しておきましょう。
Seesaaの場合Analytics 設定の『ステータスを確認』をクリックしても即座に認識してくれませんでした。ちょっと時間がかかるようです。
『ブログ アカウントの追加』で 
『ブログ ホームページのURL』 ブログのURL、
『ユーザ名』 登録したメールアドレス
『パスワード』 登録パスワード
次へ をクリック
『使用するブログの種類』 Movable Type API
『ブログのリモート投稿 URL』 http://blog.seesaa.jp/rpc
を入力
ポイントはAPIのタイプ、seesaaのXML-RPC APIはBlogger、MetaWeblog、Movable Typeと互換性があるのでその関連のBlog種類を選ぶ。
————————————————————–
LiveWriterのバージョンアップで投稿のアップがうまくいかない場合はこちら