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 | 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 | 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 プログ管理支援 | このブログの読者になる | 更新情報をチェックする
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 ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり