Seesaa Blogの携帯表示をカスタマイズする

Seeass BlogはシステムでPCサイトと携帯サイトの切り分けをしています。

PC版と違ってカスタマイズのキャパシティは少ないのですが、今回は携帯用の表示画面にバナーを張ってみましょう。

マイブログから

20091213140

『デザイン』→『コンテンツ(モバイル)』

20091213141

エキスパートを選択

 20091213142

種類を 『自由選択』にして『コンテンツの追加』ボタンをクリックします。

20091214148

今回はMicroAdの携帯用のバナーを貼りますので、

タイトルに『MicroAd』、自由入力欄に取得したバナーのコードを入力します。

20091213145

『保存する』をクリックして保存します。

編集モード:ノーマルにて作ったタイトルでコンテンツが出来上がっていると思いますので、これをおきたい場所に移動します。

20091213146

Powered By の上に今回はおきました。

Firefoxの携帯表示を使って確認します。

20091213147

きちんと表示できていました。

携帯の場合はコンテンツも少ないので簡単です。

Windows Live Writer の設定プラグインをバックアップするソフト『Windows Live Writer Backup-Windows Live Writer Plugins』

このサイトでWordpress、Seesaaなどのライターソフトとして紹介している『Windows Live Writer』なのですが、このソフトバックアップ機能がない。

レジストリなんかちょこちょこやれば何とかできそうだなんて思っていたらこんなソフトを見つけました。

『Windows Live Writer Backup – Windows Live Writer Plugins』

Windows Live Writerのバックアップとレストアをやってくれるソフトです。

 

2009117459 

そっ気のない風貌ですがなかなか役に立ってくれます。

ダウンロードはこちら

Windows Live Writer Backup – Release: Version 3.0 Final

2009117457

インストールして

 2009117458

クリックで起動します。

 2009117459

チェックマークでバックアップするものを選択できます。

『Backup』でバックアップ

2009117460

こんなアイコンのファイルができます。

『Restore』で復元できます。

Seesaa Blogに「Follow me」バッジをつける

WordPressではプラグインを使って「Follow me」バッジをつけましたが Seesaa にもつけてみたいと思います。

WordPressにtwitterのFollow meバッジを表示してくれるプラグイン『WP FollowMe』
で紹介したようにWordpressではプラグインで簡単にFollow meバッジをつけることができたのですが、Seesaaではそういうわけにもいきませんので、『twitter follow badge』というWebサービスのを使います。

まずは

http://www.go2web20.net/twitterfollowbadge/

にアクセスします。

20091022415

項目に情報を記入します。

20091022416

Twitter account:登録してあるTwitterアカウントを記入します。
Label:表示を選べます。
Color:色を変えることができます。
Side:右側につけるか左側につけるかを選べます。
From top:トップからの位置をピクセルで指定できます。

『UPDATE CODE』をクリックします。

 20091022417

コードが発行されます。
このコードをSeesaaに貼り付けます。

『デザイン』→『HTML』→『HTML名』でソース編集画面を開きます。

一番下まで行って、</body>の上に先ほどのコードを貼り付けます。

20091022422

保存をクリックして終了です。

20091022423

Follow meバッジが表示されました。

Seesaaに限らず、HTMLが編集できるサイトなら使えますので覚えておくと役に立ちますよ。

Seesaa Blog の投稿を『twitter』につぶやいてみる

Seesaaにtwitter機能が追加されて早半月ほど経ちます。
興味のある方はもう使われているとは思いますが、おせっかいで記事にしてみました。

WordPressの投稿時にTwitterにつぶやいてくれるプラグイン『Post to Twitter』でも書いてはいるのですが、この機能のいいところは手間をかけずに露出を多くすることができる。
更新をタイムリーにアナウンスすることができる。

なんてふうに思っていますが、活用はともかく使ってみたいツールだと思います。

利用にはtwitterの登録が必要になりますので、
そろそろtwitterを使ってみるか・・・。
を参考に新規登録をしてください。

Seesaaの『設定』、『ブログ設定』に

20091011352

”Twitterとの連携”という項目がありますので、このTwitterの認証を行うで機能させることができます。

クリックすると

20091011353

になりますので、Twitterで取得した『ユーザー名やメールアドレス』、『パスワード』を入力し『許可する』をクリックします。

20091011354

『記事投稿時にTwitterに投稿』の ”しない” を

20091011355

”する” して 『ブログ設定の変更』をクリックし終了です。。

これでSeesaa更新時にTwitterにつぶやきが送られます。

SeeSaaブログでタイトルをカスタマイズしてSEOする

SeeSaaでタイトルは『ブログタイトル』、『記事タイトル』の順で順で表示されます。

2009521070 

TOPページ

2009521071

これを『記事タイトル』、『ブログタイトル』の順で表示するように変更します。

これは、検索エンジン対策で多くのキーワードをロボットに拾ってもらい検索で表示させようという意図もあるのですが、サイトを見てる人のユーザビリティにもいいのではと思っています。

SeeSaaの『デザイン』→『HTML』から編集するHTMLの編集画面に入ります。

2009521073

<title><% blog.title %><% if:extra_title %>: <% extra_title %><% /if %></title>

ここの部分を変更します。

<% blog.title %>を移動するのですが ”: ”も<% /if %>の前に移動して下い。

<title><% if:extra_title %><% extra_title %>:<% /if %><% blog.title %></title>

こうなります。

2009521074

記事タイトルが最初になりました。全部は見えてませんがコードでは

<title>SeeSaaブログのデザインをカスタマイズする(タイトルのポイントなど):SeeSaaブログをカスタマイズする方法</title>

となっています。

ものすごいSEOとは言えませんが興味のあるかたはお試しください。

SeeSaaブログのデザインをカスタマイズする(タイトルのポイントなど)

SeeSaaデザインも大体出来上がってきました。
遊びでタイトルのポイントと多少の修正を加えてデザインの完成とします。

まずポイントの画像を用意します。今回は 29×25px で作りました。
背景を透明で使うためGIFとします。

title

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

に変更します。

変更前

WS00131

変更後
WS00136

■.listCategoryArticleの変更

WS00132 
最新記事部のバックを白くします。

.listCategoryArticle{
margin-top:5px;
padding:5px;
border:solid 1px #FFE2E2;
}

background-color:#FFF;
を付け加えます。

WS00135

■#footerの変更

#footer{
clear:left;
height:50px;
}

background-color:#F3FFCC;
を付け加えます。

変更前

WS00133 
変更後

WS00134

■imgの追加

このままだと指定のない画像に枠線が付いてしまいますのでCSSの中に

img {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}

を付け加えます。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

最初からみると
seesaa_before


 seesaa_after

こうなりました。

SeeSaaブログのデザインをカスタマイズする(記事部分を変更する)

記事部分の区切りが分かりにくいのでバックに色を入れてみることにした。

CSSを変更します。

■.blogの変更

.blog {
padding:0px 5px 50px 5px;
text-align:left;
font-family:Verdana;
}

BOXの下が開きすぎているようなので

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を多くしました。

変更前

WS00129

変更後

 WS00130

こうなりました。
完成も間近です。

SeeSaaブログのデザインをカスタマイズする(サイドバーとリンク色の変更)

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 に変更します。

変更前

WS00127

変更後

WS00128

こんな風に変わりました。

デザインのコツとしては、同系色や反対色をうまく使うと少ない色でうまくまとまります。

SeeSaaブログのデザインをカスタマイズする(headerの背景を画像にする)

まず背景を用意します。今回は #banner 部は 950px × 150px になっていますのでそのサイズに合わせてillustratorにてつくりました。

hader-1

これを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;
 
を追加します。

 

初めのヘッダ部です

WS00124

変更後のヘッダ部です

WS00126

これだけでサイトの印象がガラッと変わります。

SeeSaaブログのデザインをカスタマイズする(サイトの幅を変更する)

サイトデザインのテンプレートは『ライトグレー(両サイドバー)』を選択しましたが、サイトの幅が%でブラウザに合わせて変わるようになっています。

これを変更し固定幅となるようにします。

幅を決めるのは4つ
・全体の幅  #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; に変更します。

WS00124

固定幅に変更できました。

SeeSaaブログのデザインをカスタマイズする(CSSの見かた)

サイトを作ったことのある方は当然知っていることなのですが、CSSの簡単な見方を説明します。

まずはWeb開発に便利なツール『Web Developer』で書いたFireFoxのアドオンを使うと便利です。

WS124

Divの要素を表示させるとこのようになります。
これで変更したいCSSの部分を確認しながらCSSを書き換えていくこととなります。

たとえば、タイトルの部分は
WS119 
となって、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;

などと変更すれば文字は小さくなります。

WS121

左のサイドバーは

#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ブログのデザインをカスタマイズする(ローカルでサイト編集する準備)

SeeSaaブログのデザインをオリジナルにするにはHTML(デザイン→HTML→HTML名)
WS117

とCSS(デザイン→デザイン一覧→タイトル)WS118

を変更して行います。
ブログの色やヘッダの画像を変更するぐらいなら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を表示し(デザイン→デザイン一覧→タイトル)内容をコピーします。

WS119

④styles-index.css というファイル名で保存します。WS121

index.htmlをクリックするとローカルにて自サイトが表示できます。

一部表示できないものがあったりしますがデザイン変更には問題ありません。

この後、ローカルにてCSSを確認しながら変更し、SeeSaaのCSSを更新することで本サイトのデザイン変更が完了します。

Seesaa ブログをWindows Live Writer で投稿する設定 その2

『Seesaa ブログをWindows Live Writer で投稿する設定』でSeesaaへのLive Writerからの投稿を紹介したのだが、LiveWriterのバージョンアップで投稿のアップがうまくいかないとのことなので調べてみた。

状態としては、
①アップがうまくいたっりいかなかったりする。
②カテゴリが取得できずデフォルトのルートにしか投稿できない。

さっそくLiveWriterをインストールしてみる。バージョンは”14.0.5027.0923”

設定の時に指定する『文字セット』が問題っぽい。規定でシフト-JISになっている。UTF-8だと思ったのだが…。

WS102

で『ブログ』→『ブログ設定の編集』→『詳細設定』で文字セットを”UTF-8”した。

これで問題は解決したように思うのだが、どうでしょう?

SeesaaでGoogleウェブマスターツールを使う

てっきりもう書いていたかと思っていたのだが、『SeesaaでGoogleウェブマスターツールは使えないんでしょうか?』って聞かれたので過去記事を見てみたら『Seesaaで・・・』どころかGoogleウェブマスター自体書いてなかった。

『SeesaaでGoogle Analyticsをつかう』

の応用になるので特に難しいことはありません。

Google アカウントのない方はまずはGoogleで取得します。

http://www.google.com/webmasters/sitemaps/?hl=ja

へ行きログインします。
サイトを追加し、”サイトの確認”までいったら確認の方法で”メタタグを追加”を選択しコピーします。

WS041

Seesaaにログインし『デザイン』の『HTML』で作業します。

<head>から</head>の間にペーストすればいいのですが、大抵の場合<meta ・・・>がありますのでその下にペーストすればコードもきれいになります。

WS042

こんな感じです。
『保存』をクリックし完了です。

Googleウェブマスターツールに戻り、『確認』をクリックすれば”・・・成功しました。”になるのですが、Seesaaの場合はHTMLの変更が反映されるまで時間がかかるのでちょっと待ってから『確認』をクリックしましょう。

WS043

成功したらサイトマップを追加します。”サイトマップ”の”サイトマップを追加”に行きます。
種類の選択を”一般的なウェブページのサイトマップを追加”にしURLに”sitemap.xml”を入力します。
”一般的なウェブページのサイトマップを追加”をクリック。

WS044

これで終了です。

SeesaaでGoogle Analyticsをつかう

自分がSeesaaをよく人に勧める理由の中に、Htmlを編集できるということがある。

Htmlの知識があれば、自分好みのBlogにできるわけだが、スクリプトなども埋め込めるのでサイトのアクセス解析ツール”Google Analytics”を埋め込んでみよう。

Google アカウントのない方はまずはGoogleで取得します。

http://www.google.com/analytics/ja-JP/sign_up.html

一緒の画面からGoogle Analyticsにログインし、"プロファイルを追加"、 進めていきトラッキングコードを取得します。
このトラッキングコードをhtmlの</body>の前に張り付けることとなります。

Seesaaにログインし『デザイン』の『HTML』で作業します。
念のために”HTMLの追加”で新しく編集するためのHTMLを作っておきましょう。

WS040

でそれを開いて</body>のまえにコピーしたトラッキングコードを貼り付けます。

WS038

『保存』をクリックし完了です。HTMLは新しい方を適用しておきましょう。

Seesaaの場合Analytics 設定の『ステータスを確認』をクリックしても即座に認識してくれませんでした。ちょっと時間がかかるようです。

Seesaa ブログをWindows Live Writer で投稿する設定

『ブログ アカウントの追加』で
WS036 
『ブログ ホームページのURL』 ブログのURL、
『ユーザ名』 登録したメールアドレス
『パスワード』 登録パスワード

次へ をクリック

WS037 
『使用するブログの種類』 Movable Type API
『ブログのリモート投稿 URL』 http://blog.seesaa.jp/rpc
を入力

ポイントはAPIのタイプ、seesaaのXML-RPC APIはBlogger、MetaWeblog、Movable Typeと互換性があるのでその関連のBlog種類を選ぶ。

————————————————————–

LiveWriterのバージョンアップで投稿のアップがうまくいかない場合はこちら

Seesaa ブログをWindows Live Writer で投稿する設定 その2