SQLの窓

2016年12月13日


Seesaa ブログのカテゴリ管理画面で、ブラウザのコンソールを使って jQuery で順序をソートする

Seesaa ブログのカテゴリ管理画面で、ブラウザのコンソールを使って 10 番毎の数字にリセットする の続きですが、ソートするとなるといったん配列にデータをため込む必要があります。

ここでは、_sortdata と言う変数を使用していますが、なんでもかまいません。Seesaa のカテゴリ管理画面で F12 でデベロッパーツールを開き、_sortdata が存在しない事を確かめればいいです。

ソートするので、sort メソッドを使用しますが、ソート対象はオブジェクトになるので、比較関数を実装する事になります。

オブジェクトは、{ title: "文字列", sort: jQueryの番号フィールドのオブジェクト } と言う形式で作成しているので、以下のソースのように title だけ見てソートさせます。

そののち、jQuery の $.each と言う、配列の処理用のメソッドを使ってソートされた順に数値をセットしていくだけです。



$(this).parent().parent().find("input") は、$(this) が td の中の アンカーです。その親の親となるのは、テーブルの tr になるわけです。なので、その中から必要な 入力フィールドを find で取得しています。
var _sortdata = [];
$(".wordlimit").each(function(){
   _sortdata.push({ title: $(this).text(), sort: $(this).parent().parent().find("input") })
});
_sortdata.sort(function(a,b){
   if ( a.title < b.title ) {
      return -1;
   }
   else {
      return 1;
   }
});
$.each(_sortdata,function(idx,val){
   _sortdata[idx].sort.val( idx*10+100 );
})
※ Google Chrome で、コンソールでタイプして作成しました




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

タグ:jquery Seesaa
posted by lightbox at 2016-12-13 19:18 | Comment(0) | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする

Seesaa ブログのカテゴリ管理画面で、ブラウザのコンソールを使って 10 番毎の数字にリセットする

こえいう作業に、jQuery は最適で、いまどきはどこでも jQuery がページで使えることが多いです。Seesaa の管理画面でも使用可能なので、F12 でコンソールを開けて、まず入力フィールドのグループを取得します。

F12 で開いているデベロッパーツールのインスペクタで入力フィールドを調べれば、対象の入力フィールドは以下の記述で取得できる事が解ります。
$( "input[name*='sort_number']" )

これだけでは、目的は達成できないので、おのおののフィールド毎の処理にする為、.each でループ処理にします。
$( "input[name*='sort_number']" ).each(function(){
   console.log( $(this).val() );
})

これで目的はほぼ達成されたようなものですが、function(idx){} という連番が使えるので以下のようにすると完成です。
$( "input[name*='sort_number']" ).each(function(idx){
   $(this).val(idx*10+100);
})

ぜひ、Seesaa のカテゴリ管理画面で実行してみてください。

ちなみに、この方式で行くと『リンク』は以下のようになります
$( "input[name$='content_link__sort_number']" ).each(function(idx){
   $(this).val(idx*10+100);
})
※ エキスパートモードからでないと、失敗する可能性があります。



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

posted by lightbox at 2016-12-13 12:54 | Comment(0) | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする

2016年02月05日


Seesaa のソーシャルボタンのテンプレート上の設定( 古いテンプレートから最新に変更する手順 )

かなり前から、Seesaa のソーシャルボタンが表示されなくなったのは気がついていたのですが、どうせ仕様変更だろうと放置していましたが、少し気になったので調べてみるとやはりそうでした。( 2013-06-05 時点の記述です )

Seesaa の公式の内容

設定> 詳細設定> ソーシャルボタン: ブログ・ヘルプ

内容は、『リニューアルに伴うテンプレート記述方法の変更』です。つまり、古い仕様で書かれている部分を新しくして下さいとの事。

まず、古い記述( 記事コンテンツの HTML 部分の 『posted by』の直前にあります )
<% if:blog.bookmark_service %>
<script type="text/javascript" language="javascript" charset="utf-8">
//<![CDATA[
seesaa_bookmark_services = "<% blog.bookmark_service %>";
seesaa_article_page_url = "<% article.page_url %>";
seesaa_article_subject = "<% article.subject | remove_emoji | 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 %>
この仕様では、毎回 JavaScript が読み込まれて実行されていましたが、昨今 PC や通信速度の向上より、一括でやったほうがいいとなったのだと思います。よって以下のようにまるごと変更
<% if:blog.bookmark_service %>
<div class="bookmark" data-url="<% article.page_url %>" data-subject="<% article.subject | remove_emoji | nl2br | tag_strip | html %>"></div>
<% /if %>
で、一括部分は、『記事コンテンツ』の HTML 部分の最後のところに以下の内容を追加します。
<script type="text/javascript" language="JavaScript" charset="utf-8" src="<% site_info.blog_url %>/js/bl-bookmarks.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8">
var bookmark_services = "<% blog.bookmark_service %>".split('-').join('').split(",");
var seesaaBookmarks = new blBookmarks({bookmark_services:bookmark_services, blog_url:"<% site_info.blog_url %>"});
seesaaBookmarks.exe();
</script>
但し、このままでは横に並ばないので、外部 CSS を ヘッダ部分に追加します。
<link rel="stylesheet" href="http://blog.seesaa.jp/css/user-common.css" type="text/css" />

関連する記事

Google+、はてな、Twitter、Facebook のボタンを貼り付けるコードの一括取得

▼ 2013-06-05 時点では Google+ はブックマークの中だった
で、ここからが改造。以前から Google+ ボタンとは相性が悪かったせいか(どうかは解りませんが)、はてなブックマーク、Facebook、Twitter 以外のボタンは『ブックマーク』としてまとめられるみたいなので、Google+ボタンを外に出るようにしてみました。
現在は改造しなくても外に出てるようです

※ よって、以下は現在必要ありません。
外には出るんですが、バグってるみたいです。結局下のようにしなきゃなりません。また、その場合は Seesaa の設定の Google+ ボタンは OFF にします。

まず、最初に変更した部分の DIV の中に Google+ 用の DIV を貼り付けます。
<% if:blog.bookmark_service %>
<div class="bookmark" data-url="<% article.page_url %>" data-subject="<% article.subject | remove_emoji | nl2br | tag_strip | html %>"><div class="g-plusone" data-size="medium" data-href="<% article.page_url %>"></div></div>
<% /if %>

そして、記事コンテンツの HTML の最後に以下を貼り付けます
<!-- google --> 
<script type="text/javascript"> 
  (function() { 
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; 
    po.src = 'https://apis.google.com/js/plusone.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); 
  })(); 
</script> 
そして、CSS を追加すれば、Google+ ボタンは一番左になってしまいますが、使えるはずです。
これは使わなくていいです。右端に並ぶはずです。
.bookmark div {
	float: left!important;
}

関連する記事

Google+、はてな、Twitter、Facebook のボタンを貼り付けるコードの一括取得




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

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

2016年01月25日


Seesaa ブログで Twitter カードを使用する方法

Twitter カードは、ツイート内に投稿された URL 先のメタ要素を参照してツイートに画像や概要等を付加するルールです。( PC の場合は『全て表示』するとと表示されますが、スマホアプリからだと最初から表示されます)

▼ Android アプリにて


画像は固定にするのならばとても簡単です。今すぐにでも簡単に始める事ができます。

デザインから『記事』コンテンツを開いて HTML の先頭に以下のように書き込んで保存するだけです
( 単独の記事ページのみの設定ですが、意味が解れば他のページにも応用できます )
<% if:page_name eq 'article' -%>
<meta name="twitter:card" content="summary_large_image" >
<meta name="twitter:image" content="画像のURL" >
<meta name="twitter:site" content="@ユーザ名" >
<meta name="twitter:title" content="<% article.subject | tag_strip %>">
<meta name="twitter:description" content="<% article.body | tag_strip | oneline | text_summary(100) %>">
<% /if -%>

※ Seesaa の変数で記事情報を得るには、記事コンテンツで書く必要があります

記事毎に画像を変えるには

さすがに記事毎に画像を設定するには Seesaa だけでは無理があるので、外部サイトより PHP ページを呼び出して画像として扱います。
記事内で META 要素で画像を指定すると、後から記述した記事内の情報が優先されました。これで、Seesaa 内で簡単に完結できます。


▼ 外部で画像を用意する方法
パラメータとしては、記事 id を使うと都合がいいので、記事を書く場合は最初は必ず 『非公開』で保存します。保存すると、Seesaa の記事投稿ページの URL に id が表示されるのでコピー&ペーストで利用します。
<meta name="twitter:image" content="http://サイトドメイン/フォルダ/画像取得.php?id=<% article.id %>" />

画像取得.php の内容は、データベースを使わない場合は以下のようになります
<?php
$_GET['img'] = 'http://winofsql.jp/logicalerror_k.jpg';
$type = "Content-Type: image/jpeg";


if ( $_GET['id'] == '431370653' || $_GET['id'] == '431586073' ) {
	$type = 'Content-Type: image/png';
	$_GET['img'] = "https://lh3.googleusercontent.com/-rcXr0TEtK9U/VneXBjsS7LI/AAAAAAAAc4c/V3aID9ySqMU/s600-Ic42/_img.png";
}
if ( $_GET['id'] == '430950219' ) {
	$type = 'Content-Type: image/png';
	$_GET['img'] = "https://lh3.googleusercontent.com/-rktBELHhoNY/VmhbqJ_Y8zI/AAAAAAAAc1U/2NdaaXuGO-U/s600-Ic42/_img.png";
}


header($type);

$pi = pathinfo($_GET['img']);
$ext = strtolower($pi['extension']);

if ( $ext == 'png' ) {
	$im = @imagecreatefrompng($_GET['img']);
}
if ( $ext == 'gif' ) {
	$im = @imagecreatefromgif($_GET['img']);
}
if ( $ext == 'jpg' || $ext == 'jpeg' ) {
	$im = @imagecreatefromjpeg($_GET['img']);
}

// 失敗
if(!$im) {

	//空の画像
	$im  = imagecreatetruecolor(200, 200);			// 200x200
	$bgc = imagecolorallocate($im, 255, 255, 255);		// 背景色(白)
	$tc  = imagecolorallocate($im, 0, 0, 0);		// 文字色(黒)

	imagefilledrectangle($im, 0, 0, 200, 200, $bgc);	// 背景を塗る

	// メッセージ
	// (5,5) は座標
	imagestring($im, 1, 5, 5, 'Error loading', $tc);

}
else {

	imagealphablending($im, false);
	imagesavealpha($im, true);

}

imagepng($im);
imagedestroy($im);

?>


このままでは、どんどんソースコードが長くなるので、データベースが使える場合は以下のようにして、データベースにデータを追加する事によって新しい記事に対応します。
<?php
$_GET['img'] = '画像データがない場合のデフォルトJPG画像の URL';
$type = "Content-Type: image/jpeg";

$host = "";
$db = "";
$user = "";
$pass = "";

$link = mysqli_connect($host, $user, $pass, $db);
mysqli_set_charset($link, "utf8");

$sql = "select * from links where target2 = '{$_GET['id']}'";
$result = mysqli_query($link, $sql);
if ($result) {
	if ( $row = mysqli_fetch_assoc($result) ) {
		$_GET['img'] = $row['URL'];
	}
}

$pi = pathinfo($_GET['img']);
$ext = strtolower($pi['extension']);
if ( $ext == 'png' ) {
	$type = 'Content-Type: image/png';
	$im = @imagecreatefrompng($_GET['img']);
}
if ( $ext == 'gif' ) {
	$type = 'Content-Type: image/gif';
	$im = @imagecreatefromgif($_GET['img']);
}
if ( $ext == 'jpg' || $ext == 'jpeg' ) {
	$type = 'Content-Type: image/jpeg';
	$im = @imagecreatefromjpeg($_GET['img']);
}

header($type);

// 失敗
if(!$im) {

	//空の画像
	$im  = imagecreatetruecolor(200, 200);			// 200x200
	$bgc = imagecolorallocate($im, 255, 255, 255);		// 背景色(白)
	$tc  = imagecolorallocate($im, 0, 0, 0);		// 文字色(黒)

	imagefilledrectangle($im, 0, 0, 200, 200, $bgc);	// 背景を塗る

	// メッセージ
	// (5,5) は座標
	imagestring($im, 1, 5, 5, 'Error loading', $tc);

}
else {

	imagealphablending($im, false);
	imagesavealpha($im, true);

}

imagepng($im);
imagedestroy($im);

?>


画像は自分で用意するので、mime タイプは拡張子で決定しています。

結果のチェック

うまくいっているかどうかは投稿すれば解りますが、Twitter に投稿せずに確認するには、Twitter のチェックページを使用します

Card validator

補足事項

世の中のこの手の情報は、Facebook とともに記述されている事が多いですが、Seesaa で Facebook の OGP で記事別画像を実現するには相当の技術的知識が必要なので最初からあきらめたほうがいいです。その理由は、Facebook 用のメタ要素は必ず HEAD 要素内に書く必要があるのに対して、Seesaa では、その情報を用意するのに、通常では BODY 要素内に書かざるを得ないからです。

がんばれば、実現できますが、相当の準備をもって臨まないと HTML が壊れてしまいますし、実現することによって発生する弊害の対応も発生するのでおすすめできません。

※ 記事タイトルは、Seesaa でも HEAD 内で変数を指定できます
<% if:page_name eq 'article' -%>
<meta property="og:type" content="article" />
<meta property="og:title" content="<% extra_title %>" />
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP" />
<% /if -%>




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

posted by lightbox at 2016-01-25 04:18 | Comment(0) | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする

2014年11月12日


IE拡張メニュー : Seesaa のリンクコンテンツを一瞬でソートする

ソートしても、Seesaa で更新するまで反映されません。


インストールは、ダウンロードした zip 書庫を解凍して、中の ie_seesaa_linksort.wsf をエクスプローラからダブルクリックして下さい。そうすると、メッセージボックスで更新しても良いかと聞かれるので「OK」を選択して下さい。
※インストールしたあと、既にIE が実行している場合はいったん閉じて下さい

アンインストールは以下のコマンドをコマンドプロンプトから実行して下さい
reg delete "HKCU\Software\Microsoft\Internet Explorer\MenuExt\Seesaa 用リンクソート"
▼ アンインストール実行画面
何も押さずにそのまま実行すると、タイトル内容でソートします。

SHIFT キーを押しながら実行すると、
URL のアーティクル番号の大きい順にソート

CTRL キーを押しながら実行すると、
URL のアーティクル番号の小さい順にソート

※ 必ずしもアーティクル番号が正しい順序とは限りませんが、数字の桁が同じであれば、新しい順または古い順になります
意図的な順序の場合は手作業でするしかありませんが、多くなってきて読む人が探しやすいようにするには、やはり通常のソートするのが一番です。

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

タグ:Seesaa IE拡張
posted by lightbox at 2014-11-12 14:43 | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする

2014年09月27日


Seesaa の特定のカテゴリ(複数)の場合のみ、記事の下に参照リンクやコンテンツを付加する方法

Seesaaブログの page_name 変数の3つ以上の OR 条件の記述方法 の発展形です。上記の場合は、HTML テンプレート内で書きましたが、今回は「記事コンテンツ」内です。

(重要)
article_category 変数は、以下のループの中でのみ有効です。OR 記述が有効なのは、article_category 等の単独変数のみで、article.category という変数には使用できません。
<% loop:list_article -%>
<% /loop -%>
特定のカテゴリ(複数)の場合のみ、記事の下に参照リンクやコンテンツを付加します。

どうやら、変数の種類によって「できる、できない」があるようで、カテゴリ名ではできませんでした。OR 条件の書き方のルールとしては、これではっきりしましたが常に2項になるように「かっこ」でくくればいいようです。
<% if: (((article_category eq '10046946') + (article_category eq '10046812')) + ((article_category eq '10047034') + (article_category eq '10046894'))) + (((article_category eq '10046774') + (article_category eq '10046952')) + (article_category eq '10047062') ) -%>

<div class="listCategoryArticle" style='margin-top:15px;'>
【VBScript関連のカテゴリ】<br />
<ul>
<li><a href="http://logicalerror.seesaa.net/category/10046946-1.html">VBS + ADO</a></li>
<li><a href="http://logicalerror.seesaa.net/category/10046812-1.html">VBS + JavaScript</a></li>
<li><a href="http://logicalerror.seesaa.net/category/10047034-1.html">VBS + Shell</a></li>
<li><a href="http://logicalerror.seesaa.net/category/10046894-1.html">VBS + WMI</a></li>
<li><a href="http://logicalerror.seesaa.net/category/10046774-1.html">VBS + インターネット</a>
<li><a href="http://logicalerror.seesaa.net/category/10046952-1.html">VBS + ファイルシステム</a>
<li><a href="http://logicalerror.seesaa.net/category/10047062-1.html">VBS + 特殊オブジェクト</a>
</ul>
</div>

<% /if -%>





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

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

2014年09月18日


Seesaaブログの page_name 変数の3つ以上の OR 条件の記述方法

他の変数での動作は確認していませんが、() による優先順位の指定によって常に、二つの条件( ここでは、+ 演算子の左右 )が確定してから他の比較を行うようにしないと、ページがエラーとなって構成されません。

何度か試すとうまくいくと思います。これによって、アーカイブとカテゴリとタグページだけ何かコンテンツを追加するという事が可能になります。

((A)+(B)) + ((C)+(D))
は OK のようです。

※ (A) は、page_name eq 'category' というように一つの条件式を表わすので、
※ () で優先順位を明示してやる必要があります。

page_name は、トップページ、単独記事、アーカイブ、カテゴリ、タグというそれぞれの記事の表示方法の特性にあわせてカスタマイズする為の重要な変数なので、OR 条件は記述を簡潔にする為に必要です。

※ AND 条件は、if: を入れ子にすれば指定できます
<% if: (( page_name eq 'category' ) + ( page_name eq 'archive' )) + ( page_name eq 'tag' ) -%>

<b>SQLの窓</b>

<% /if -%>

関連する記事

Seesaaブログの記事のカテゴリ番号毎に関連するリンクを付加する( OR 条件による複数カテゴリを一括 )




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

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

Seesaaブログ : 特定のカテゴリに属する記事のみ特定部分に HTML を付加する方法



これは、コンテンツの「記事」の コンテンツHTML編集で行います。記事本文は <% article.entire_body | bodyfilter(article_info,blog) %> というように書かれているので変更できませんが、その前後であれは付加する事ができます。

カテゴリ番号もたしか使えたはずですが、以前使っていて後からメンテナンスするのにどのカテゴリか解りづらいという欠点があったのでこちらがおすすめです。

但し、カテゴリ名を変更すると動かなくなるので注意して下さい。
<% if:article_category.name eq 'カテゴリ名' -%>

特定カテゴリで表示したい HTML の記述

<% /if -%>



※ カテゴリ番号の場合はこんな感じです

<% if:article.category eq '7154748' -%>

特定カテゴリで表示したい HTML の記述

<% /if -%>



※ この記事にも、カテゴリ特有のリンクを付加しています

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

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

2014年09月11日


Seesaa のデザインHTMLの中の、<% if:page_name eq 'tag' -%> セクションでは TAG ページ専用のコンテンツを書く事ができます。



TAG ページは、デフォルトではブログ内への特定のリンクと、サイドバーのコンテンツが表示されるだけなので、表示されているページの価値は殆ど無く、Google の言葉を借りれば『コンテンツがありません』となります。

これは、Seesaa および さくらインターネットのブログシステムを利用している上では宿命となります。

ですが、デザインHTML の中を見ると、page_name と言う Seesaa のテンプレート内で有効な変数を使い、個別の表示を行っている事が解ります。

ですから、この条件の成り立っている範囲になんらかのコンテンツを表示すれば、ユーザはリンク以外にも情報を得る事ができます。ただ、どのタグリンクからページ遷移しても、おなじ内容になるので、ブログの紹介やテーマやプロフィールなどに使うのがいいでしょう。
<% if:page_name eq 'tag' -%>

<div class="text">
コンテンツを作成する
</div>

<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");
--></script>
<br />
<% if:tag %><div class="tag-title">タグ&nbsp;/&nbsp;<% tag.word | html %></div><% /if -%>
<br />
<% loop:list_service -%>
<div class="tag-body">
<div class="tag-service"><% tag_service.title %></div>
<div class="tag-search"><a href="<% tag_service.page_url(tag) %>" target="_blank">'<% tag.word %>'&nbsp;で全体を検索する</a></div>
<% if:tag_service.service_key eq 'articles' -%>
<% loop:list_data -%>
<div class="tag-article">
<div class="tag-article-title"><a href="<% article.page_url %>"><% article.subject %></a>&nbsp;<span class="tag-article-posted">[<% article.createstamp | date_format("%Y/%m/%d %H:%M") %>]</span></div>
<!--<div class="tag-article-summary"><% article.entire_body | text_summary(240) | tag_strip %></div>-->
</div>
<% /loop -%>
<% /if -%>
<% if:tag_service.service_key eq 'photos' -%>
<% loop:list_data -%>
<div class="tag-photos">
<% thumbnail.fix_aspect(132) # サムネイルの長辺を132で固定。固定したくない場合は削除。 -%>
<table>
<tr>
<td height="140" valign="bottom"><a href="<% photo.page_url %>" target="_blank"><img src="<% thumbnail.page_url %>" border="0" width="<% thumbnail.width %>" height="<% thumbnail.height %>" /></a></td>
</tr>
</table>
<div class="tag-photos-title"><a href="<% photo.page_url %>" target="_blank"><% photo.title | text_summary(10) %></a><br />
<% if:photo_info -%>
サイズ:<% photo_info.width %>×<% photo_info.height %><br />
<% if:photo_info.size %>容量:<% photo_info.size | filesize %><% /if %>
<% /if -%>
</div>
</div>
<% /loop -%>
<% /if -%>
<% if:tag_service.service_key eq 'audios' -%>
<% loop:list_data -%>
<div class="tag-audios">
<div class="tag-audios-title"><a href="/pages/user/upload/<% audio.page_url %>" onclick="window.open('/pages/user/upload/<% audio.page_url %>','popup','width=490,height=320,scrollbars=no,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false" target="_blank"><% audio.title | text_summary(40) %></a>&nbsp;
<span class="tag-audios-posted"><% if:audio_info -%><% if:audio_info.author %>by <% audio_info.author %>&nbsp;&nbsp;<% /if %><% if:audio_info.duration %><% audio_info.duration | hms %>&nbsp;&nbsp;<% /if %><% if:audio_info.size %><% audio.size | filesize %>&nbsp;&nbsp;<% /if %><% /if -%></span></div>
</div>
<% /loop -%>
<% /if -%>
<% if:tag_service.service_key eq 'videos' -%>
<% loop:list_data -%>
<div class="tag-videos">
<table>
<tr>
<td height="140" valign="bottom"><div class="tag-videos-title"><a href="/pages/user/upload/<% video.page_url %>" onclick="window.open('/pages/user/upload/<% video.page_url %>','popup','width=480,height=550,scrollbars=no,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false" target="_blank"><img src="<% thumbnail.page_url %>" width="132" border="0" /></a></div></td>
</tr>
</table>
<div class="tag-videos-title"><a href="/pages/user/upload/<% video.page_url %>" onclick="window.open('/pages/user/upload/<% video.page_url %>','popup','width=480,height=550,scrollbars=no,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false" target="_blank"><% video.title | text_summary(15) %></a><br />
<% if:video_info -%>
<!--<% if:video_info.author %>by <% video_info.author %><br /><% /if %>-->
時間:<% if:video_info.duration %><% video_info.duration | hms %><% /if %><br />
容量:<% video.size | filesize %><br />
<% /if -%>
</div>
</div>
<% /loop -%>
<% /if %>
<% if:tag_service.service_key eq 'files' -%>
<% loop:list_data -%>
<div class="tag-files">
<div class="tag-files-title"><a href="/pages/user/upload/<% file.page_url %>" target="_blank"><% file.title | text_summary(15) %></a></div>
</div>
<% /loop -%>
<% /if -%>
<% if:pager -%>
<div class="tag-navi">
<% if:pager.previous_page %><a href="?page=<% pager.previous_page %>"><% /if %>≪前へ<% if:pager.previous_page %></a><% /if %>&nbsp;&nbsp;<% if:pager.next_page %><a href="?page=<% pager.next_page %>"><% /if %>次へ≫<% if:pager.next_page %></a><% /if %>
</div>
<% else -%>
<div class="tag-more"><a href="<% blog.tag_url(tag, tag_service.service_key) %>">≫もっと見る</a></div>
<% /if -%>
</div>
<% /loop -%>
</div>

<div class="text">
コンテンツを作成する
</div>

<% /if -%>

また、逆に TAG ページに表示したく無い内容は以下のように記述します
<% if:page_name ne 'tag' -%>

ここは、TAG ページに表示したくない内容

<% /if -%>




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

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

2014年09月04日


Seesaa のスマホページで使う、記事単位のPCページへの移動

何もしなくても、最初から PC ページへの移動ができるようになっていますが、Seesaa のコードでは、そのブログのトップページにしか移動しないので、新たに以下のようなコードを貼り付けるといいです。

※ 場所は、『ブログ説明』の『挿入テキスト(下部)』
<a href="javascript:document.cookie='force_pc=1; max-age=15768000; path=/'; document.cookie='force_sp=0; max-age=15768000; path=/'; document.location=document.location.pathname+'?'+(new Date()).getTime();">PCページのこの記事へ移動</a>
変更しているのは、document.location へセットしている内容で、document.location.pathname をセットして、現在の URL を再セットします。スマホページからスマホページですが、クッキーの正しい設定が事前に行われているので正しく動作しています。

(new Date()).getTime() を付加しているのは、ブラウザのキャッシュ制御がバグっていても正しく動作するように、毎回 URL を変更する為の追加文字列です。

戻す時の為に、PC ページ側での設定

PC 側でもそのままでは、トップページにしか戻らないので、以下のような処理を PC 用の HTML に書き込んでいます。
<script type="text/javascript">
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("iphone") > -1 || userAgent.indexOf("android") > -1 ) {
	str="";
	str+="<style type="text/css"> \n";
	str+=" \n";
	str+="#iphone-link { \n";
	str+="	display:none!important; \n";
	str+="} \n";
	str+="<span id="iphone-link2" style="width: 90%;display: block; padding-top: 3px; text-align: right; "><a href="javascript:document.cookie='force_pc=0; max-age=15768000; path=/'; document.cookie='force_sp=1; max-age=15768000; path=/'; document.location=document.location.pathname+'?'+(new Date()).getTime();">スマホページ(この記事)へ戻る</a></span> ";
	document.write(str);
}
</script>

#iphone-link で、元々のリンクを非表示にして、新しいリンクを作成しています。
※ 場所は、body の先頭です。



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

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

2014年08月27日


Seesaaの、Google+ とのプロフィール連携について

Googleプロフィールをブログと連携すると、Googleの検索結果などでこのブログの著者情報として表示できる場合があります。ブログのHTMLを編集している場合には、デフォルトHTMLにする、あるいは<% blog.profile_sns_tag %>タグを手動でHTMLに追加するまで有効になりません。連携する操作手順については、こちらでご確認ください
著者情報は、検索結果のタイトルの下の詳細部分の最初に『著者: night walker Lightbox』というような形で表示されると思います。(こちらのブログでは以前から独自に設定を行っているので表示されています) 『ブログのHTMLを編集している場合には』というのは、独自に変更を加えている場合は反映されないので、<% blog.profile_sns_tag %> タグを意図的にページのヘッダー部分に設定する必要があります。 このタグは、展開されると以下のようになります。 ※ 赤い枠内が、Seesaa のタグで展開されたもので、緑枠は以前から独自で設定していたものです。 Google+ 側の設定
1.Google+にログインし、プロフィールページに移動する。
2.プロフィールページの中にある「基本情報」をクリックし、さらにその中の項目「リンク」の編集をクリックする。
3.項目「寄稿先」のカスタムリンクを追加をクリックし、連携させたいブログのURLを入力し、保存をクリックする。
Seesaa のマニュアルにはこう書かれています。「寄稿先」は以下のようになります( 基本情報タブです ) Seesaa 側の設定 一応以下のようになればいいです。 補足情報 『Seesaa 側の設定』は、Seesaa として設定が正しいかどうかの確認処理であると思います。無くても動作するかもしれません。実際、独自に行った設定は、「寄稿先」では無く、『リンク』でなされていましたし、本来連携の確認処理というのはありません。 そもそも、Seesaa の説明でも『表示できる場合があります』とあいまいな表現になっています。これらに関係する情報は、以前アイコンが表示されていた時期にたくさん情報が発信されています。Google 検索で、最新の Googleの都合等調べてみるのもいいかと思います。

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

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

2014年08月25日


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
posted by lightbox at 2014-08-25 22:02 | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする

2014年07月15日


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



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



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

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

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

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




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

posted by lightbox at 2014-07-15 17:04 | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする

2014年04月16日


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="http://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="http://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
posted by lightbox at 2014-04-16 09:04 | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする

2014年04月12日


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

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

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

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

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


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

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

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

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

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


Windows
container 終わり

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

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり