クリックで画像を大きくしたい(Highslideのすすめ)
Highslideは、ページにある小さい画像をクリックしたとき、大きい画像を「ぺろ~ん」と飛びだして表示してくれるJavaScriptのライブラリです。
![]()
2011年4月15日
Highslideは、ページにある小さい画像をクリックしたとき、大きい画像を「ぺろ~ん」と飛びだして表示してくれるJavaScriptのライブラリです。
![]()
2010年6月23日
Amazonアフィリエイトのタグ作成スクリプト『Amazon Quick Affiliate (JP)』を愛用しております。
Amazonに仕様変更があったのか、商品名のところに<span>で文字列に対する指定が付けくわえられていることがあります。
たとえば、
"狂乱家族日記 九さつめ (ファミ通文庫) [文庫]"
という商品名は、
"狂乱家族日記 九さつめ (ファミ通文庫) <span style="text-transform: capitalize; font-size: 16px;">[文庫]</span>"
となっています。
自分のところではこのタグはじゃまなので、取りのぞく処理を付けくわえました。
スクリプトの100行目を書き換えます。
var title = document.getElementById('affiliate_title').value;
これを、
var title = document.getElementById('affiliate_title').value.replace(/<.+?>/g,"");
にします。
行末のvalueのあとに.replace(/<.+?>/g,"") を付けくわえるだけです。
spanタグだけじゃなくて、タグに囲まれた[文庫]までも取りのぞきたい場合は変更点を、.replace(/\s?<span.+?span>/g,"") にすると、spanタグの始まりからspanタグの終わりまでごっそり削除してくれます(spanタグの前に空白があればついでに削除します)。
仕様がもとに戻ったみたい。ほっ。
と思ったけどそうでもなかった。
2010年3月 3日
MTで、三点リーダー(…、てんてんてん、点点点)が三つのコンマに変換されてしまったり、下付きに表示されてしまったりする問題についての備忘録です。
これについては、「オンライン小説なオリジナル小説サイト うにたな」さんがくわしい。
→三点リーダーとMovable Type 4(問題解決) - オンライン小説なオリジナル小説サイト うにたな
[ブログ記事設定]内で[Word特有の文字を置き換える]という項目がある。デフォルトでは[Smart Replace]において[対応するASCII文字]にチェックがはいっていると思う。[置き換えない]に変更してほしい。
バージョンが4.1よりも古い場合(コメント欄も参照)→ MovableType4で三点リーダーを表示する方法 - オンライン小説なオリジナル小説サイト うにたな
これは下の画像にあるように、文字列の中央に点点点がほしいのに、コンマがならんでいるように下に配置されてしまう現象です。

これはフォント指定に問題があります。欧文フォントが和文フォントより先に指定されていたり、欧文フォントだけしか指定されていなかった場合に、欧文フォントの配置が適用されてしまうことでこのように下付になってしまいます。
ですから、和文フォントを指定してやれば、この問題は解決します。
「ブログ」と「MTの入力画面(ブログの入力画面)」とで変更箇所が異なります。
ブログ本体のフォント指定は、テンプレートのスタイルシートを変更してやります。
このブログのテンプレートだと、フォント指定は以下のようになっていました。
* {
margin: 0;
padding: 0;
font-family: Verdana, Arial, sans-serif;
}
body {
font-size: 100%;
}
font-familyでフォントを指定しているので、並びの先頭に和文フォント名を記入しましょう。Windowsだとメイリオや"MS Pゴシック"がいいでしょう。
* {
margin: 0;
padding: 0;
font-family: "MS Pゴシック", Verdana, Arial, sans-serif;
}
body {
font-size: 100%;
}
ただフォント指定の継承を考えると下記の方が各部のフォント指定がしやすいので使い勝手がいいかな、と思います。
* {
margin: 0;
padding: 0;
}
body {
font-size: 100%;
font-family: "MS Pゴシック", Verdana, Arial, sans-serif;
}
これでブログの表示はなおります。(ブラウザのキャッシュに古いファイルが保存されている場合があるのでページを再読み込みしてやりましょう)。
他のテンプレートでも同様にフォントの指定箇所をさがして変更していってください。
ブログ全体に和文フォントを指定すると、装飾につかっている英語の文字のフォントまで変わってしまう場合があるので、「三点リーダーの表示が必要な箇所だけ和文フォントを指定する」か、「全体に和文フォントを指定し、装飾部分には個別に欧文フォントを指定する」かのどちらかの方針でフォントを指定していきましょう
MTの入力画面のフォントを変更する場合は、MTのシステムのスタイルシートmain.cssを変更する必要があります(バージョン4.34-jaの場合)。main.css は、MTのインストールディレクトリから mt-static → css とディレクトリをたどっていくとみつかります。
変更前: main.css
/* Movable Type (r) (C) 2001-2010 Six Apart, Ltd. All Rights Reserved
* This file is combined from multiple sources. Consult the source files for their
* respective licenses and copyrights.
*/:link,:visited{text-decoration:none;}html,body,div,
ul,ol,li,dl,dt,dd,
form,fieldset,input,textarea,
h1,h2,h3,h4,h5,h6,pre,code,p,blockquote,hr,
th,td{margin:0;padding:0;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}table{border-spacing:0;}fieldset,img,abbr,acronym{border:0;}address,caption,cite,code,dfn,em,strong,b,u,s,i,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}caption,th{text-align:left;}q:before,q:after{content:'';}a{text-decoration:underline;outline:none;}hr{border:0;height:1px;background-color:#000;color:#000;}a img,:link img,:visited img{border:none;}address{font-style:normal;}body{font-size:12px;line-height:1.3;color:#000;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;}a:link,
a:visited{color:#33789c;}a:hover,
a:active{color:#a2ad00;}.system a:link,
.system a:visited{color:#7f8833;}.system a:hover,
.system a:active{color:#33789c;}strong{font-weight:bold;}em{font-style:italic;}h1, h2, h3, h4, h5, h6{font-weight:bold;margin:1em 0 .25em;}h1{}h2{font-size:16px;}h3{font-size:14px;}p, ul{margin:0 0 .75em;}dt{font-weight:bold;}textarea{font-size:12px;}select,
input,
textarea{font-family:Arial,Helvetica,clean,HiraKakuPro-W3,Osaka,sans-serif;font-size:14px;}input,
textarea{padding:2px 0;vertical-align:middle;}select,
変更後: main.css
/* Movable Type (r) (C) 2001-2010 Six Apart, Ltd. All Rights Reserved
* This file is combined from multiple sources. Consult the source files for their
* respective licenses and copyrights.
*/:link,:visited{text-decoration:none;}html,body,div,
ul,ol,li,dl,dt,dd,
form,fieldset,input,textarea,
h1,h2,h3,h4,h5,h6,pre,code,p,blockquote,hr,
th,td{margin:0;padding:0;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}table{border-spacing:0;}fieldset,img,abbr,acronym{border:0;}address,caption,cite,code,dfn,em,strong,b,u,s,i,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}caption,th{text-align:left;}q:before,q:after{content:'';}a{text-decoration:underline;outline:none;}hr{border:0;height:1px;background-color:#000;color:#000;}a img,:link img,:visited img{border:none;}address{font-style:normal;}body{font-size:12px;line-height:1.3;color:#000;font-family:"MS Pゴシック","Helvetica Neue", Helvetica, Arial, sans-serif;}a:link,
a:visited{color:#33789c;}a:hover,
a:active{color:#a2ad00;}.system a:link,
.system a:visited{color:#7f8833;}.system a:hover,
.system a:active{color:#33789c;}strong{font-weight:bold;}em{font-style:italic;}h1, h2, h3, h4, h5, h6{font-weight:bold;margin:1em 0 .25em;}h1{}h2{font-size:16px;}h3{font-size:14px;}p, ul{margin:0 0 .75em;}dt{font-weight:bold;}textarea{font-size:12px;}select,
input,
textarea{font-family:"MS Pゴシック",Arial,Helvetica,clean,HiraKakuPro-W3,Osaka,sans-serif;font-size:14px;}input,
textarea{padding:2px 0;vertical-align:middle;}select,
8行目は"ダッシュボードのフォントの変更"、14行目が"入力フォーム内のフォントの変更"になっています。どちらも font-familyに"MS Pゴシック"を追加しています(好みに応じてメイリオにすることもできます)。
ブログでちゃんと表示できていれば、入力画面の文字はどうだっていいのなら、変更する必要はありません。
2010年2月22日
MTで脚注機能が使えるようになるFootnote Plugin。Wikiみたくかんたんに脚注がつくれるようになります。
脚注部分はタグで囲うんですがさらにそれを<fn>(こんなふうにカッコして書いておくと)</fn>
*1
、表示部分ではそのカッコをはずしてくれるという細かいところにまで気が配られているすぐれたプラグインです。
でも、このカッコの処理、半角でしかしてくれないので、全角でも処理してくれるように、ちょっと手をくわえてみました。
いじくるファイルは footnote.pl です。
気をつけてほしいのは、自分のブログで使っている文字コードでファイルを変更し保存しなければいけないことです。
変更には文字コードを扱えるエディタを利用してください。
変更箇所は、footnote.pl の138行目です *2 。
sub FootnoteString {
my ( $ctx, $args ) = @_;
my $fc = $ctx->stash('footnote_count');
my $tfc = $ctx->stash('footnote_total_count');
my $footnote = $ctx->stash('footnote_strings');
my $val = $args->{value_compiled}
|| ( $args->{value} ? _tag_compile($ctx,$args->{value}) : undef );
if ( defined $val ) {
$fc++; $tfc++;
$val =~ s/\s+(\w)/ $1/g;
$val =~ s/(\w)\s+/$1 /g;
$val =~ tr/\r\n//d;
$val =~ s|^\s*\((.*?)\)\s*$|$1|g;
my ( $fn ) = grep { $_->[0] eq $val } @$footnote;
if ( $fn ) {
push( @$fn, [ $fc, $tfc ] );
以下の文字列に書き換えます。
$val =~ s/^\s*(\(|()(.*?)(\)|))\s*$/$2/g;
$val =~ s/^\s*(\(|()(.*?)(\)|))\s*$/$2/g; の赤い部分が全角のカッコです。
ブログで使用している文字コードにによって、このカッコの文字コードも違ってきます。そのため、ブログで使用している文字コードを確かめて、その文字コードでファイルを変更、保存する必要が生じます。
変更したら、ファイルをサーバーにアップロードすれば完了です。
2009年5月 9日
MTCatEntriesで特定のカテゴリーの記事を表示する/しないの制御をしているんですが、書きかけで置いておいた古い記事などを清書して公開すると、それが表示されないことがあります。
ちょろっと試してみたら、どうやら、何個分の記事を表示するかを指定するlastnのオプションがダメみたいです。
MTの現バージョンは、作成日、編集日、公開日で記事が管理されているけど、MTCatEntriesは記事のソートを作成日でおこなっているみたい。(だから、lastnで記事数を絞り込まなくても、記事の並び順がそもそも意図したものと違ってくる)。
書いてすぐ公開している場合にはぜんぜん問題にはなりません。
対処としては、mt:unlessなどをつかうのがいいと思います。
→ 小粋空間: Movable Type のカテゴリーリストで特定のカテゴリーを非表示にする
特定のカテゴリーだけ表示は、mt:unlessの部分をmt:ifに変えます。(タグを閉じる方も変えてね)。
2009年5月 4日
FirefoxのスクリプトでAmazon Quick Affiliate (JP)というのがあります。これがアマゾン・アフィリエイトのタグを作成するのにすごく便利です。
画像のサイズを指定できるし、どういうタグを生成させるかも指定できます。

画面、Aの部分にタグが表示されます。
Bで画像の大きさを選択。
Cでタグのテンプレを自分で記述できます。
ふだんは下の画面のようにたたまれています。グレーの枠内の[open]の部分をクリックすると広がります。

利用にはアドオンのGreasemonkeyが必要です。Greasemonkeyで動作するってことはGoogle Chromeでも使えるのかな?
2006年11月25日
最近は妙なところにトラックバックを貼っていくひとがいます。
相手先のトラックバックは映画の話題だったりするんですが、映画とは関係ない記事に貼っていくんですね。
それも、複数のひとがおなじところに。
なんだろう? なんらかのソフトウェアをつかってるんじゃないかと思ってるんですが。
えーと、そのツール。「バグってますよ」
って、いってもツールをつかってトラックバックを貼ってるひとは、ここを読んだりしないんでしょうが。
さらにいえば、どこに貼ろうがかまいやしないんでしょうが。
2006年10月 9日
マインドマップは、関連ある物事に枝のように線ををのばしていって発想や考えの整理をする方法です。
FreeMindというフリーソフトで図を描いてfreeMindFlashBrowserというツールでWebに公開することができます。
図が右に寄っているのは、さいしょの点(好きのところ)の右側だけにしか枝をのばさなかったからです。
FreeMindの使い方は、FreeMind活用クラブの説明がわかりやすいと思います。
ブログで公開するときは、freeMindFlashBrowserをダウンロードしてきて、なかに入っている flashobject.js と visorFreemind.swf を自分のサイトにアップロードして、以下のようなスクリプトを書き込めばOK。
freeMindFlashBrowserはMINDMAPSにあります。みつけにくいと思うので直リンも。
自動で改行がはいるような設定にしていると、スクリプトの間に改行コードがはいってエラーがでて表示されなくなってしまうので、みっちりつなげた形にしてあります。
<div id="flashcontent" style='height: 350;'>
Flash plugin or Javascript are turned off.
Activate both and reload to view the mindmap
</div>
<script type="text/javascript" src="/flashobject.js"></script>
<script type="text/javascript">var fo = new FlashObject("/visorFreemind.swf", "visorFreeMind", "440", "350", 6, "#9999ff");fo.addParam("quality", "high");fo.addParam("bgcolor", "#ffffff");fo.addVariable("openUrl", "_blank");fo.addVariable("initLoadFile", "/archives/favorite.mm");fo.addVariable("startCollapsedToLevel","5");fo.write("flashcontent");</script>
これだと説明しづらいので改行してあるもので変更箇所を説明します。
<div id="flashcontent" style='height: 350;'>
Flash plugin or Javascript are turned off.
Activate both and reload to view the mindmap
</div>
<script type="text/javascript" src="/flashobject.js"></script>
<script type="text/javascript"><!--
var fo = new FlashObject("/visorFreemind.swf", "visorFreeMind", "440", "350", 6, "#9999ff");
fo.addParam("quality", "high");
fo.addParam("bgcolor", "#ffffff");
fo.addVariable("openUrl", "_blank");
fo.addVariable("initLoadFile", "/archives/favorite.mm");
fo.addVariable("startCollapsedToLevel","5");
fo.write("flashcontent");
// -->
</script>
赤い字で示してあるのが必要なファイルの名まえです。アップロードした場所を指定してください。favorite.mmはFreeMindでつくったマインドマップのファイルです。
青い字で示してあるのが表示サイズです。隠れちゃってるので横にスクロールさせていってね。440がこのブログでの横幅、350が高さです。好きな大きさに変更してください。ここをすべて100%と書き換えるとつかえるだけめいっぱいのサイズで表示してくれます。
ブログの狭い領域に表示させるよりは、別ページに広く表示させた方がいいと思います。
2006年9月27日
スラッシュドットに「トラックバックに相手の承諾が必要?」という記事があります。
タイトル通り、トラックバックを送ったら、「トラックバックですが、承諾のお伺いをコメント欄にに書くべきではありませんか? ブログで訴えるということをするなら、それってマナーだと思いますが。」といわれたという。
それってマナーなの?ってお話です。
トラックバックというのは、だれかの記事に刺激されて自分で記事を書いたときに、その相手の記事に送るというのがもともとの機能。(トラックバックを送ると、相手の記事に自分の記事へのリンクが作成されます。HPのリンク登録みたいなものです)。
だから、相手の記事に自分のところへのリンクを張るだけのやり方は「スパム行為」であると判断されます。
これが、いちばんお堅いトラックバックの考え方です。(こことかここの意見)。
ゆるい考え方になると、同類と思われる記事はお仲間なんだからリンクを張っちゃってもいいじゃない、とお仲間リンクを張るわけです。
ただし、一方的なリンクです。
このへんの考え方のちがいは「トラックバックをめぐる4つの文化圏の文化衝突——「言及なしトラックバック」はなぜ問題になるのか [絵文録ことのは]2006/01/06」で、きれいにグループわけされているのでぜひそちらを参考にしてください。
べつに自分の記事になんにもふれられてないのにトラックバックを張られるのはいやだなーと考えるひとがいるのはわかります。
エロサイトとかワンクリ詐欺のサイトへのトラックバックが張られたりするのはよくあります(自分のブログに勝手にエロサイト、ワンクリ詐欺のサイトへのリンクがつくられちゃうわけよ!)。
やってることは同じじゃないと思われてもしょうがありません。
実際、冒頭ののスラッシュドットにあげられた記事の、文句をいわれたブログ側は、かなりの数のトラックバックを無作為に張りまくるという、スパム的なやり方をしているところです。(だから、冒頭の記事の場合、トラックバックの考え方のちがいが出た、というよりも、スパム行為に対して相手が文句をいっているというのが本当のところでしょう)。
2006年7月17日
Google Sitemapというのは、検索大手のGoogleに自分のサイトにはこんなページがありますよっていうリスト(サイトマップ)を登録して、検索に反映してもらおうというシステムです。
ブログのように新しいページが頻繁にできあがり、トップページから個々のページまでのリンクの道筋が変化しやすいものは、Googleのチェックが行きとどかなくなりやすいので、サイトマップを登録しておくと、検索結果への効果がかなり期待できます。
実際にサイトマップをどうつくって、どう登録するかは、じだらくさんの「ようやく最終回MTでのsitemap構築方法 - google sitemapでgoogle対策やってみましたよ。 pt.3」に簡単にできる方法が載せられています。
サイトマップ自体は、テンプレートにコピペして構築するだけで、すぐできあがります。毎回、自動生成ですから楽ちんです。
あとは、GoogleのSitemapのページへいって、アカウントを登録、サイト確認のファイルを自分のサイトにつくってから、サイトマップがどこにあるのかURLを入れれば完成です。これも、じだらくさんのところの上記の記事に手順が載せられているので簡単にすることができます。