SQLの窓

2011年08月08日


Seesaaプログの「 同一カテゴリの最新記事」を使った記事下広告の設置方法と。ついでに Google の +1ボタンの設置。

if:list_category_article によって、インデックス(トップ)ページでは、先頭の記事の下
に展開され、単独記事ページでもその記事の下に展開される特殊な条件です。これをもし
使わない場合は、トップページの場合全ての記事が表示し終わってからでないと、付加コン
テンツを設置できないので、あまり良い形とは思えないのです。

ただ、同一カテゴリ内で記事が一つしか無いと表示されないのが難点です。

それと、位置的には近くに純粋に記事下の場所があるので、そこへ Google の +1 ボタンを
設置しています。これは、単独記事のみ表示されますが、テストの為 article.page_url 
を使ってhref 指定をしてみました
<!-- 本文 -->
<% if:page_name eq 'article' -%>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.entire_body | bodyfilter(article_info,blog) %>
<g:plusone count="false" href="<% article.page_url %>"></g:plusone>
<% if:list_tag %><div class="tag-word">タグ:<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>
<% else -%>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.first_body | bodyfilter(article_info,blog) %>
<% if:list_tag %><div class="tag-word">タグ:<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>
<% /if -%>

<!-- 同一カテゴリの最新記事 -->
<% if:list_category_article -%>

<div>
追加コンテンツ
</div>

<div class="listCategoryArticle">
【<% article_category.name %>の最新記事】<br />
<ul>
<% loop:list_category_article %>
<li><a href="<% article.page_url %>"><% article.subject | text_summary(100) %></a></li>
<% /loop %>
</ul>
</div>
<% /if %>

</div>

<% if:blog.bookmark_service %>
<script type="text/javascript" language="javascript" charset="utf-8"><!--
seesaa_bookmark_services = "<% blog.bookmark_service %>";
seesaa_article_page_url = "<% article.page_url %>";
seesaa_article_subject = "<% article.subject | jsescape | tag_strip %>";
seesaa_blog_url = "<% site_info.blog_url %>";
//--></script>
<script type="text/javascript" language="JavaScript" charset="utf-8" src="<% site_info.blog_url %>/js/bookmark.js"></script>
<% /if %>




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

posted by lightbox at 2011-08-08 20:51 | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする

2011年03月10日


Seesaa : IE専用 : リンクコンテンツのオートマチック登録(変更)、エクスポート、インポート( ブックマークレット )

2011/03/10 更新

☆ エクスポートとインポートを実装しました。
☆ Seesaa と さくらでデータの互換性をテストしました



ポップアップブロックを有効にしている場合は、blog.seesaa.jp を許可するように
ドメインを登録して下さい。さくらで使用する場合は同様にさくらの管理ページの
ドメインを登録して下さい

※ ブックマークレットですが、現在 IE 専用です

▼ IE専用ブックマークレット

Seesaa(さくら)専用オートマチックリンクデータ登録
▼ 1件ぶんのフォーマット
-----------------------
タイトル
URL
0
順序番号
-----------------------

まず、このようなフォーマットをエディタで事前に複数作っておくか、
リンクデータの管理画面で既存のリンクデータを取得し、
移行先のリンクデータの管理画面でそのデータを貼り付けて取得するか
どちらかの方法でデータを用意します

※ 以下のサンプルは XP+IE7 で、ポップアップを必ずタブにするようにしていますが、
※ そうで無い場合は、左上にウインドウが開きます。

まず、転送元のリンク管理ページを開いて、ブックマークレットを実行すると、
ポップアップが許可されていると、ウインドウが開きます
L001

以下のウインドウで、「リンク取得」ボタンでリンクデータを取得した後、
手動でクリップボードにコピーして加工するかそのまま利用します
L001

その後で、転送先のリンク管理ページを開いて同様にブックマークレット
を開いて、コピーしたデータを貼り付けてから「リンク適用」ボタンを
クリックします
すると、転送先のデータ行のほうがが少ない場合のみ自動的にデータを追加し、
そうで無い場合は、データ内容を既存行に転送します
L001

ここで「保存」ボタンを自分でクリックすると全て適用されます
L001
さくらのブログからリンクデータを移行する為に作成しましたが、テストはSeesaa 同士で
行っていますので、Seesaa 内でのリンクデータのコピーに利用できます。
注意。実行本体は、lightbox.on.coocan.jp にありますので、
Nifty のラクーカンが落ちていると動きません。





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

posted by lightbox at 2011-03-10 22:36 | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする

2010年01月04日


Seesaa で先頭から2件だけタイトルの下に広告を出す方法やその他の正攻法

この方法は、本来テンプレートが無く自由な位置に設置出来ない場合に、JavaScript を使って場所の移動を行って表示するものです。( その方法を使ってもいいかどうかは、広告を提供しているシステム側で確認しておく必要があります )

昔はこれでも良かった場合でも、最近はやはり固定位置に設置する必要があると思います。( JavaScript による方法は、間違ってクリックしてしまう可能性が大きいからです )

Seesaa では、独自タグによって、メインインデックス、記事、カテゴリ、アーカイブ毎に広告位置を変更する事ができます。JavaScript では無くそうした方法を取るほうが現在では推奨されます。

最も簡単な方法は、メインインデックスページの記事数を 1 にして、記事テンプレート内で固定にする方法です。こうしておけば、ページ内の広告数に制限があっても特に問題は出ません。

また、Seesaa では、メインインデックス と 記事の下に同一カテゴリ内に記事が2つ以上ある場合に表示されるセクションがあるので、先頭記事のみ記事の後に表示する事もできます。( この方法を使うと、メインインデックス と 記事で共通化できます。( 記事前に表示する場合はメインインデックスでは、全体 HTML で、記事では必ず記事は一つなので、記事テンプレート内で好きな場所です。)


▼ 以下は古い JavaScript のサンプルです
<div id="ad3" style='margin-left: 0px;margin-bottom: 25px;border: #a0a0a0 1px solid; padding: 8px; text-align: left'>
<table>
<tr>
<td valign=top>

<!--広告 : メイン -->

</td>
<td valign=top style='padding:20px;width:240px;'>

<div style='float:right;'>

<!--広告 : オプション -->

</div>

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

<div style='margin-left:30px;margin-top:20px;margin-right:20px;'>
<div id="ad4" style='margin-left: 0px;margin-bottom: 25px;border: #a0a0a0 1px solid; padding: 8px; text-align: left'>
<table>
<tr>
<td valign=top>

<!--広告 : メイン -->

</td>
<td valign=top style='padding:20px;width:240px;'>

<div style='float:right;'>

<!--広告 : オプション -->

</div>

</td>
</tr>
</TABLE>
</div>
</div>


<script type="text/javascript" src="Seesaaにアップロードしたad.jsのURL" charset="shift_jis"></script>


以下は ad.js です
try {
	var setTarget1 = 1;
	var setTarget2 = 2;
}
catch(e){}

try {
	var blogtxtbase,blogtxt;
	var baseDiv = document.getElementById("content");
	var len = baseDiv.getElementsByTagName("DIV").length;
	var len2,content_idx,content_idx2,content_cnt=0;
	for( content_idx = 0; content_idx < len; content_idx++ ) {
		if ( baseDiv.getElementsByTagName("DIV")[content_idx].className == 'blogbody' ) {
			content_cnt++;
			if ( content_cnt == setTarget1 ) {
				blogtxtbase = baseDiv.getElementsByTagName("DIV")[content_idx];
				len2 = blogtxtbase.getElementsByTagName("DIV").length
				for( content_idx2 = 0; content_idx2 < len2; content_idx2++ ) {
					if ( blogtxtbase.getElementsByTagName("DIV")[content_idx2].className == 'text' ) {
						blogtxt = blogtxtbase.getElementsByTagName("DIV")[content_idx2];
						if ( document.getElementById("ad3") ) {
							blogtxtbase.insertBefore(document.getElementById("ad3"),blogtxt);
						}
						break;
					}
				}
			}
			if ( content_cnt == setTarget2 ) {
				blogtxtbase = baseDiv.getElementsByTagName("DIV")[content_idx];
				len2 = blogtxtbase.getElementsByTagName("DIV").length
				for( content_idx2 = 0; content_idx2 < len2; content_idx2++ ) {
					if ( blogtxtbase.getElementsByTagName("DIV")[content_idx2].className == 'text' ) {
						blogtxt = blogtxtbase.getElementsByTagName("DIV")[content_idx2];
						blogtxtbase.insertBefore(document.getElementById("ad4"),blogtxt);
						break;
					}
				}
				break;
			}
		}
	}

}
catch(e){}







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

タグ:Seesaa 広告
posted by lightbox at 2010-01-04 19:23 | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする

2009年10月11日


Seesaa : リンクコンテンツを好きな場所に表示する

ここではリンクコンテンツの HTML 編集で、DIV でリンク全体で囲って ID を付けています。

HTML 上のオブジェクトは、他の DIV 等に appendChild してやると、その場所へ移動します。
( 元の場所には無くなって、実体のみが移動 )

これを利用して、ページの右の空いている場所に position:absolute で、固定位置に div を置いて、ページの幅がその内容を表示するのに必要なだけある場合移動させます。

こうしておくと、自サイトのフレームから参照する場合は移動されません。
<div id="java_link">
<div class="btitle" style='widthx:685px;'><% content.title %></div>
<% content.header -%>
<div class="side">
<table>
<% loop:list_link -%>
<tr><td style='vertical-align:middle;'><img style='margin-right:4px;' src="http://winofsql.jp/image/sab.gif" border="0"></td><td><a style='font-size:12px;text-decoration:none;' href="<% content_link.url %>" <% if:content_link.target %>target="_blank"<% /if %>><% content_link.title %></a></td></tr>
<% /loop -%>
</table>
<% content.footer -%>
</div>

</div>

<SCRIPT type="text/javascript">
if ( document.getElementsByTagName("BODY")[0].clientWidth > 1100 ) {
	(document.getElementById("rlink")).appendChild(document.getElementById("java_link"));
}
</SCRIPT>




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

タグ:Seesaa
posted by lightbox at 2009-10-11 19:54 | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする

2009年09月02日


Seesaaのリンク用HTMLテンプレート

今使っているものですが、タイトルの画像を変えると雰囲気も変わります
http://winofsql.jp/image/h5.png

これは、GIMP で作ったものですが、グラデーションを塗っただけです
※ GIMP2 は、ポータブル版(USBメモリ用にチューニングされたもの)がおすすめです

行単位の横三角も同様です
http://winofsql.jp/image/sab.gif

<style type="text/css"> 
.btitle {
	font-size:12px;
	font-weight:bold;
	padding: 0 0 0 10px;
	padding-left:10px;
	line-height:26px;
	height: 26px;
	color:black;
	border-style:solid;
	border-width:1px;
	border-color:#9192A3;
	text-align:left;
	width:98%;
	background:url(http://winofsql.jp/image/h5.png) repeat-x 0px 0px;
}

.btitle a {
	color:navy;
}
</style> 

.btitle a は、タイトル内にリンクを置いた時の色を設定しています
<br><br>
<div class="btitle"><% content.title %></div>
<% content.header -%>
<div class="side">
<table>
<% loop:list_link -%>
<tr><td style='vertical-align:text-top;'><img style='position:relative;margin-right:4px;top:2px;' src="http://winofsql.jp/image/sab.gif" border="0"></td><td><a style='font-size:12px;' href="<% content_link.url %>" <% if:content_link.target %>target="_blank"<% /if %>><% content_link.title %></a></td></tr>
<% /loop -%>
</table>
<% content.footer -%>
</div>




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

タグ:Seesaa
posted by lightbox at 2009-09-02 10:09 | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする

2009年08月03日


Seesaa : 記事の前後へ移動するナビケート用のリンクの文字列を短くする

この記事のタイトルも長いですが、そのままだと長すぎてレイアウト上の問題
もありますし、見た目もなんかスッキリしないので、短く切ってしまいます。
<% if:page_name eq 'article' -%>
<div class="navi">
<% if:previous_article -%><a href="<% previous_article.page_url %>">&lt;&lt;</a> <a href="<% previous_article.page_url %>"><% previous_article.subject | tag_strip | shorten(20) %></a> | <% /if -%>
<a href="<% blog.page_url %>">TOP</a>
<% if:next_article -%> | <a href="<% next_article.page_url %>"><% next_article.subject | tag_strip | shorten(20) %></a> <a href="<% next_article.page_url %>">&gt;&gt;</a><% /if -%>
</div>
<% /if -%>
shorten(バイト数) という関数を使って 20 バイトより以降を表示しないようにしています。最初漢字は大丈夫かなぁ・・・なんて思ってましたが特に問題は無いようです。

勝手に最後に .. を付けてくれるので、省略しているのが良く解るようになっています。| は、関数の結果を後続に渡す記号で、tag_strip という関数は、HTML タグを削除する機能を持っています

変更する場所は「コンテンツ」の「記事」から「コンテンツHTML編集」です





 関連する記事

Seesaa : HTMLテンプレートのタイトル部分



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

posted by lightbox at 2009-08-03 13:34 | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり