Nucleus」カテゴリーアーカイブ

Nucleusで指定した範囲に改行タグを入れない方法

Nucleusでは、編集画面で入力した改行は全て<br />タグに変換されます。
しかし、<pre>タグや<table>タグなどを使う場合には、間に<br />タグが入ってしまうと都合の悪いことも多々あります。

そんな時に役立つのが、NP_StripBRで、<%nobr%>と<%/nobr%>で囲った範囲に<br />タグを入れないようにしてくれます。

ところが、例えば<div>タグの前後に改行を入れたくない場合というのが結構あります。
前はいいのですが、特に後ろに改行が入ってしまうと、<div>のボックスと次の行の間に1行空いてしまうからです。

その場合、通常は次のように書きます。

ほげほげ<div class="english">What is this ?
This is a pen.</div>ふがふが

あるいは、NP_StripBRを使った場合は次のように書けます。

ほげほげ<%nobr%>
<%/nobr%><div class="english">What is this ?
This is a pen.</div><%nobr%>
<%/nobr%>ふがふが

しかしどちらも見づらく、あまり美しくありません。

そこで、<%nobr/%>というのを作ってみました。
これは、このタグの直後に現れる改行を消すというものです。

先ほどの例ですと、

ほげほげ<%nobr/%>
<div class="english">What is this ?
This is a pen.</div><%nobr/%>
ふがふが

といったように書けるようになります。

これでどれくらい嬉しくなるのか、人によると思いますが、ひとまずソースを公開しますので、使いたい方は使ってみて下さい。

はてなブックマークボタンが新しくなった!

はてなブックマークのブックマークするためのボタンが新しくなりました。
デザインが綺麗になって、そのページのブックマーク数も表示できるようになり、便利になっています。

デザインは3通り。
詳しくは下記の公式サイトをご覧下さい。

このブログでも早速新しいボタンに設置し直してみました。

AutoPagerizeに仮対応してみた

AutoPagerizeというGreasemonkeyがあります。
これは、ブログや検索結果のように、項目(記事)が並んでいるページで、ページ送りをクリックしなくても自動的に次のページを読み込んで、ページの下に続きの項目を繋げて表示してくれるプログラムです。

一度慣れるとやめられないというので僕も入れてみました。
そして、このブログも対応させてみました。

参考にしたのはこちらのページ。

AutoPagerizeにサイトを対応させるには、二つの設定をします。
ひとつは、次のページへのリンクに rel="next" という属性を追加します。
次に、項目(記事)一覧をタグで囲って、そのタグに autopagerize_page_element というクラスを指定します。

NP_ShowBlogsを使っている場合は、その中をいじります。
次のページへのリンクはすぐに見つかると思いますが、記事一覧の方、これは

$b->showUsingQuery($template, $query, 0, 1, 1);

という部分で出力しています。
この前後でタグを echo するといいでしょう。あまり美しいやり方ではありませんが。

という感じで、割と簡単に対応できたのですが、mixiチェックとTweetボタンが正常に動作してくれませんね。
よそのサイトを見ても同様だったので、仕方がないのかなあ。

また気が向いたらちゃんと調べてみて対応します。たぶん。

Facebookのいいね!ボタンを設置してみた

はてなスターmixiチェックTweetボタンはてブに追加するボタンに引き続き、Facebookが提供する「いいね!」ボタンを設置してみました。

ボタンを設置するためのコードは、Facebook DEVELOPERSLike Buttonページで生成します。
いくつかの選択肢に答えて「Get Code」ボタンを押すだけで、コードが取得でき、それをブログの好きなところに貼るだけでいいねボタンが設置できます。
コードには、iflame版とXFBML版がありますが、iflame版の方が評判がいいようですね。1

ところが、ここで作ったデザインは、どうもこのブログにはマッチしません。
現在右上に各種ボタンを置いているのですが、Facebookの「いいね!」ボタンは、ボタンの右にいいね!された数を表示するための余白があり、右揃えで配置するには向かないようです。
また、数をボタン上部に表示するデザインもありますが、これでは他のボタンと縦幅が揃いません。

というわけで、いっそのこと、一番多くの情報を表示する設定にして、記事の下に表示することにしました。
ぱっと見分かりづらいですが、記事を最後まで読んでくれた方ならきっとその存在に気付いてくれるはず!

  1. 噂ではXFBML版はうまく機能しないときがあるのだとか。

はてブに追加するボタンを設置してみた

元々はてなが用意しているアイコンのデザインが B! ← こんなんでクソダサかったので、付けるのを躊躇していたのですが、適当な画像をはてなから拾ってきて勝手にサイズ変更して貼り付けました。

貼り付け方はこんな感じで、これまでで一番簡単。

<a href="http://b.hatena.ne.jp/entry/add/<%blogurl%><%itemlink%>"><img src="./image/hatena-append.gif" width="22" height="20" alt="このエントリーをはてなブックマークに追加" /></a>

でした。

ちなみにはてなツールバーとかを入れてると、クリックしたときの挙動が変わったりします。

Tweetボタンを設置してみた

このブログに Twitter が提供するツイートボタンを設置してみました。
設置の方法はmixiチェックとほぼ同じ。というか、mixiチェックがデファクトスタンダードに合わせたんでしょうね。

前述のページで項目を選択していくだけで、ボタンを設置するためのコードを教えてくれるのですが、少しカスタマイズしたかったので、ここの技術仕様書を参考に、自分でコードを書きました。

こんな感じ。

<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-url="<%blogurl%><%itemlink%>" data-text="<%title%>">Tweet</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

mixiチェックと違って固有のキーは必要ありません。
それから、ツイートに含ませるテキストを自由に設定できるのもおもしろいですね。

mixiチェックを設置してみた

このブログに mixi が提供するmixiチェックを設置してみました。
Wordpress と Movable Type 用には、プラグインが用意されているのですが、nucleusには無いので、せっせとコードを書きました。

とは言っても設置は簡単。
ここの技術仕様書を参考に、ちゃちゃちゃっとやっちゃいました。

まずは、mixi Developer Dashboardで新規サービスを追加します。

あとはこんな感じのコードをテンプレートに追加します。

<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="********" data-url="<%blogurl%><%itemlink%>" data-button="button-1">Check</a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>

チェックをするページのURLを指定すると、自動的にそのページのtitleタグを読んでくれます。
なお、********の部分はmixiから貰うチェックキーで、mixiにサービスを追加したときに発行されます。

とはいえ、デザインが今ひとつ気に入らないので、あとでちょこちょこと修正するかもしれません。:P

はてなスターを設置してみた

このブログにはてなが提供するはてなスターを設置してみました。
はてなスターってはてなダイヤリーにしか設置できないのかと思ったら、外部ブログでも普通に設置できるんですね。

設置の仕方はここに書いてあったのですが、記事内容がごちゃごちゃしていて分かりにくいですね。
でも実際に設置するのは簡単で、以下の2ステップで完了します。

Nucleusの編集画面を開くのが遅い

Nucleusで過去に書いた記事を編集しようと、リンクを開くと、開くのに1~2分かかってしまっていました。
調べてみたところ、どうやらNP_Headerというプラグインの処理が時間を食ってたみたい。
このプラグインは主にSEO対策で使うもので、headタグ内にKeywordsなどのmetaタグを埋め込むことができるんですけど、使ってなかったので削除してしまいました。

SEOとか一時期は考えたこともあったんですけど、こんなニッチなブログにSEOしてもしょうがないかなって最近は思ってます。^^;

コメントスパム対策

昨日、本ブログのある記事に対して秒間1回くらいの間隔でコメントスパムが書き込まれてしまったので、急遽コメント機能を停止し、本日対策用のプラグインを探して入れてみました。