Seesaa ブログの、ホワイト(右サイドバー)の幅を広〜く変更する為の CSS 設定

変更するのは、以下の6つの CSS セレクタです。

1) #container : 800px を 1130px に
2) #content : 532px を 800px に
3) #links : 195px を 300px に
4) .blog : background-image 関連を削除
5) .text : background-image 関連を削除
6) .posted : background-image 関連を削除


これらは、とても単純なお話で、最大幅が 800px だったものを 1130px に変更する手順です。もともと、800px の中に (532 + 195 + 20) = 747 < 800 という定義だと考えられます。20px は、margin-left です。多少の見逃しがあるかもしれませんが、実際 Google Chrome のデベロッパーツールでリアルタイムに変更すると、(800 + 300 + 20) = 1120 < 1130 で収まりました。

4) 5) 6) は、記事の範囲を背景画像で表現していたので削除しています。必要ならば、新たに画像を作成して使うか、CSS の追加で罫線等を引けばいいと思います。

Seesaa独自タグ簡易リファレンス

Seesaa の記事カテゴリをソートする IE 拡張

めったに使う事はありませんが、カテゴリが増えて来ると自分でさえ何があったか探してしまう事があります。また、それは多くなったからなので順序を変えるとなると結構面倒です。



このスクリプトをダウンロードして実行し、IE が実行中の場合はいったん終了して再度実行します。そうすると、右クリックで表示されるメニューに追加されます。※ 表示順のフィールドの中で右クリックして下さい

1) そのまま実行すると、カテゴリ名でソートされるのでアルファベットが最初になります。
2) SHIFT キーを押しながら実行すると、その逆になります。
3) CTRL キーを押しながら実行すると、記事数の多い順になります

※ 実行しても、「表示順の変更」ボタンを押すまで反映されません。

▼ アンインストールは以下のコマンドを実行して下さい。
reg delete "HKCU\Software\Microsoft\Internet Explorer\MenuExt\Seesaa 用カテゴリソート"

Seesaa独自タグ簡易リファレンス

Seesaa : 記事の投稿者に、記事編集用のダイレクトリンクを作成して、日付フォーマットに『年月日』を追加する

article.page_url 変数を、JavaScript の変数 strno にセットして、正規表現で url から アーティクル番号を取り出して管理画面内の記事編集の url に作り直してリンクを作成しています。

このリンクをクリックした後、そのブログの編集画面に移動するのは、複数のブログを管理している場合、一覧のうち先頭のブログか、既に編集の為に開いているブログである必要があります( 前もって Seesaa にログインして、そのブログを選択しておく必要があります )

変更する場所は「コンテンツ」の「記事」から「コンテンツHTML編集」です
※ この例では、posted で検索するといいと思います。

<div class="posted">

class="posted" という div セクションがあるので、その後に続く記述を変更します

▼ 変更前

posted by <% article.nickname %> at <% article.createstamp | date_format("%H:%M") -%>

▼ 変更後
※ 2014/04/16 : article.id が使えるのでこのほうが簡単です

posted by <a href="https://blog.seesaa.jp/pages/my/blog/article/edit/input?id=<% article.id %>" target="_blank"><% article.nickname %></a> at <% article.createstamp | date_format("%Y-%m-%d %H:%M") -%>

▼ 以下は同じ結果ですが、参考です。正規表現で URL から情報を取得して利用しています

posted by 
<script type="text/javascript">
(function(){
 var strno = '<% article.page_url %>';
 strno.match( /article\/([^\.]+).html/ );
 document.write( '<a href="https://blog.seesaa.jp/pages/my/blog/article/edit/input?id=');
 document.write( RegExp.$1+'" target="_blank"><% article.nickname %></a>' );
})();
</script>
 at <% article.createstamp | date_format("%Y-%m-%d %H:%M") -%>

日付は管理上年月日を明示したほうがいいと思います。

複数のブログを管理している場合、先頭以外のブログの編集画面を開いていても、一定時間( かなり長いですが )経つと、先頭ブログに戻ってしまうので、それに気が付かず記事を更新しようとすると、失敗したというページ表示がされる場合がありますが、そのページをそのまま置いておいて、他のタブでもう一度今更新しようとしたブログの編集画面を開きます。

その後、更新に失敗したページに戻って『再読み込み』すると正しく更新されて編集画面が戻って来ます。

また、編集中に誤ってブラウザのタブを閉じてしまっても、Google Chrome であれば、『最近使ったタブ』から開く事によって、入力中の内容も戻って来ます。

Seesaa独自タグ簡易リファレンス

Seesaa のタグページの「タグクラウド」のリンク先を一覧表示( ドメイン/tag/articles/タグ名 )に変更する

シーサーのブログでは、ドメイン/tag/タグ名 という URL でタグページに移動して、タグクラウドから、タグを含んだ記事の一覧を表示してくれるのですが、最初のリンクでは、一覧表示数が何故か限定されていて、使いにくいものになっています。

そこで、最初から「次のページ」へ移動可能な一覧ページのリンクに JavaScript で変更してしまいます。( ドメイン/tag/articles/タグ名 )

HTML のテンプレートの真ん中くらいにあるので、tag_cloud("tag_cloud"); の後に以下のコードの該当部分をコピーしてやると、とても使いやすくなると思います。

<% if:page_name eq 'tag' -%>
<div class="tag">
<script type="text/javascript" language="javascript" src="<% site_info.blog_url %>/js/tag_cloud.js"></script>
<div id="tag_cloud">
<% loop:list_tags -%><a href="<% blog.tag_url(tag) %>" class="_tag" title="<% tag.word | html %>/<% count %>"><% tag.word | html %></a>
<% /loop -%>
</div>
<script type="text/javascript" language="javascript"><!--
tag_cloud("tag_cloud");
var tag_base = document.getElementById("tag_cloud");
var tag_target = tag_base.getElementsByTagName("a");
var tag_len = tag_target.length;
var tag_href = "";
for( var tag_i = 0; tag_i < tag_len; tag_i++ ) {
	if ( tag_target[tag_i].className == '_tag' ) {
		tag_href = tag_target[tag_i].href;
		tag_href = tag_href.replace("\/tag\/","/tag/articles/");
		tag_target[tag_i].href = tag_href;
	}
}
--></script>
<br />

また、記事毎に付加されているタグにも実装したい場合は、article.id を使用して記事毎のタグを表示する領域の id をユニークにする必要があります。

▼ 記事コンテンツ内のコード

<% if:list_tag %><div id="tag_base<% article.id %>" class="tag-word">タグ：<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %>
</div>
<script type="text/javascript" language="javascript"><!--
var tag_base = document.getElementById("tag_base<% article.id %>");
var tag_target = tag_base.getElementsByTagName("a");
var tag_len = tag_target.length;
var tag_href = "";
for( var tag_i = 0; tag_i < tag_len; tag_i++ ) {
	tag_href = tag_target[tag_i].href;
	tag_href = tag_href.replace("\/tag\/","/tag/articles/");
	tag_target[tag_i].href = tag_href;
}
--></script><% /if %>

Seesaa独自タグ簡易リファレンス

さくらインターネットで取得したドメインを使用して、そのサブドメインを Seesaa に設定する

ここでは、「さくらインターネット」で行っていますが、通常同様の処理を各ドメインを取得したサービスで行えるはずです。

▼ 今回、独自ドメインに設定した Seesaa のブログ
形から入るWEBアプリ

現在、Seesaa で取得したサブドメインである、rfpwebapp.seesaa.net からもアクセスできますし、さくらインターネットで取得したドメインを使って、yourwebapp.winofsql.jp でもアクセスできます。

先にマップするドメインを作成してから Seesaa 側で更新する必要があります





さくらインターネットは、ドメインを取得している必要がありますが、通常さくらインターネット内でサブドメインを作る手順とは異なり、サーバーコントロールでは無く「会員メニュー」のドメインメニューを使用します。



さらにその中の左側下部にあるネームサーバーメニューで「CNAME」(別名)を追加します






※ 追加後、「データ送信」が必要です

注意するのは、一つ。c.seesaa.net. で解るように最後にドットが必要なところです。さくらの設定が終わると、「別名」は最小TTL後(※1)を目安に有効になって、seesaa に移動するようになり、seesaa で完全に更新が済んでおればそのブログが表示されます。seesaa では、ビルドされたページ(※2)は全てドメインが新しいものに変更されます。

※1 :  3600秒が指定されていましたが、だいたいにおいて、かなり早く有効になっています。( 3600は最少ではありますが、タイミング的には 3600 もかかるのはまれだと思います )
※2 : 最新の情報に更新を実行すると確実にビルドされます

なかなか反映されない場合

新しい CNAME にアクセスして、Seesaa の『リクエストされたページが見つかりません。削除または移動された可能性があります。』と言うページが出たら、ほぼ反映されていると思います。

もし、反映が遅い場合は、最小TTL の 値を 60 に変更して、反映を確認したら 3600 へ戻せば良いと思います。

(注意) Seesaa 側の反映に時間がかかる場合もあるようですが、これは待つしかないと思います。こちらでは、10分ほどで反映が完了しましたが、ブログ設定で『最新の情報に更新』はかならず実行しておく必要があります。


この記事の作成日付 : 2012-07-29

Seesaa独自タグ簡易リファレンス

Seesaa の 『カテゴリのHTML編集』で、カテゴリの一覧を見やすくする。

レイアウトとして、右サイドに position:absolute で、フッターを移動して運用しています。本来のフッターの位置のまま使うにしても、カテゴリが多くなるとスペースが無駄になるので、float:left を使って一行に二つのエントリを表示していますが、それだけだとまとまりが解りにくいので、集団の先頭でタイトルを付加しています。

結果は以下のようになっています。

<div class="sidetitle2"><% content.title %></div>
<div class="side" style='width:300px'>
<% content.header -%>
<% loop:list_category -%>

<% if:category.name eq 'VIDEO' -%>
<div class="sttl" style='float:left;margin:10px 0 10px 0;'>ビデオ レビュー</div>
<% /if -%>
<% if:category.name eq 'パノラマ' -%>
<div class="sttl" style='float:left;margin:10px 0 10px 0;'>Google ストリートビュー</div>
<% /if -%>
<% if:category.name eq 'マンガ : ドラマ' -%>
<div class="sttl" style='float:left;margin:10px 0 10px 0;'>漫画</div>
<% /if -%>
<% if:category.name eq '知恵メモ' -%>
<div class="sttl" style='float:left;margin:10px 0 10px 0;'>知恵メモ</div>
<% /if -%>
<% if:category.name eq '独り言' -%>
<div class="sttl" style='float:left;margin:10px 0 10px 0;'>独り言</div>
<% /if -%>
<% if:category.name eq '動画' -%>
<div class="sttl" style='float:left;margin:10px 0 10px 0;'>メディア</div>
<% /if -%>
<% if:category.name eq '何でやねん' -%>
<div class="sttl" style='float:left;margin:10px 0 10px 0;'>その他</div>
<% /if -%>

<table style='float:left;border-spacing:0px;'>
<tr><td style='vertical-align:top;width:140px'>

<a href="<% category.page_url %>"><% category.name | tag_break %></a>(<% category.article_count | __or__ | echo("0") %>)

</td></tr>
</table>

<% /loop -%>
<% content.footer -%>
</div>

<br style='clear:both;'/>

<br style='clear:both;'/> は、最後に必ず必要です。こうしないと後続するコンテンツで意図せずに float してしまいます。

Seesaa独自タグ簡易リファレンス