LinkWithInを辞めてMTプラグイン「TagSupplementals」で関連記事を表示するようにした

タイトルにあるように、手軽に導入できたLinkWithInから、新しい関連記事プラグインに差し替えました。

理由は以下の３つ

CSSでスタイルが弄れなかった（onmouseoverイベントでa:hoverのようなことをしていた）
タイトルが長いとマウスオーバーした時に、はみ出してかっこわるい
そんなに関連してない記事が出ちゃう（きがする）

LinkWithInの（悪）カッコ悪いところ

文字がはみ出ちゃってる！

自作プラグインを作ろうとして挫折

MovableTypeにはプラグインというものがあって、知恵と技術さえあれば自分だけのプラグインを開発してブログをチューンナップできる仕組みになっています。

私も技術職のはしくれ。

いっちょやってみっかと始めたものの、みっかと持たず挫折。

heartlogic天使あらわる

プラグイン作成計画がそうそうに暗礁に乗り上げてﾋﾟｨﾋﾟｨ泣いていた、そのとき！

(つд⊂)ｺﾞｼｺﾞｼ

「LinkWithin」的なものをMovable Typeで静的に

「記事を『もう1本』読んでもらうためのツール」として紹介している「LinkWithin」というブログパーツがあります。これに似た形で関連記事を表示するものを作ってみましたので公開します。

@heartlogicさん！天使かっ！

まさに求めていたものが、いま安良城紅。いや、私の手に。ｱｱｲｵｴｲ!!
使わない手は、どこにもない！

ちょー簡略化した手順

ダウンロード
アップロード
テンプレート作成
テンプレート埋め込み
スタイルシート編集
再構築

たったこれだけの手間で関連記事がずらり！MovableType初級者の私でもカンタンにできました！あとは、スタイルシートを自分好みに編集すればOKかとおもいます。

ちなみに、私のスタイルはこんな感じ。

div.related{
	margin:1em 22px 1em 8px;
	padding:8px;
}

ul.related{
	margin:1em 0 0 0;
	padding:0;
}


ul.related li.related_entry{
	font-size:11px;
	margin:2px;
	padding:0;
	float:left;
	display:block;
	width:110px;
}

ul.related li.related_entry a:hover{
	display:block;
	margin:0;
	padding:2px;
	width:106px;
	color: #AA0C0C;
	background-color:#fff;
}

ul.related li.related_entry a{
	display:block;
	margin:0;
	padding:2px;
	width:106px;
	background-color:#fff;
	color: #0044CC;
    text-decoration: underline;
    outline: none;
}

ul.related li.related_entry a div{
	margin:3px;
	width:100px;
	height:100px;
	padding:0;
	background-color:#fff;
	background-size:cover;
}