Home >
Blog > Article published in [Category:
], [Month:
2024/04]
Home >
Blog > Article published in [Category:
Web], [Month:
2014/06]
×[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
http://aintai.blog.shinobi.jp[PR]
comments powered by
忍者ブログユーザーの中には、このカスタマイズし放題なところが好きって理由の方が少なからずいるんじゃないかと思うんだけど、何を隠そう自分もそうでして。先代の Allegro Vivace からここを使い始めて、こよなく愛する事そろそろ9年目？
しかし「タグ付け機能」がないばかりに、わたしは他サービスに浮気したこともある。外部のタグ付けサービス（なんて名前だったかな？）があった頃は併用してなんとか忍者ブログでもやっていけたんだけど、そのサービスが終了しちゃってからのこの数年はカテゴリ機能だけで我慢しつづけていて････我慢して我慢して我慢してようやく最近諦めたよ！どうやら Ninja Tools さんは実装する気がないんだなと。このやろー！（篠田さんが残ってたらこんなことなかったんでは）
なので、自分でタグ機能を補完できないかこの数日模索していた。
実装するには
①タグ別のページを表示する②タグを各ポストに埋めるが必要になる。
まず①。「タグ別のページ」つまりタグで検索した結果(記事一覧)を得るために目を付けたのはもともと用意されている『検索機能』。aタグでなんとか検索結果を引っ張ってこられないか探したところ、助太刀忍者から
あんな質問や
こんな質問がでてきた。やっぱり同じこと考えてる人がいたんだ。
賢く技術のある方は
こうやって実装してるみたいだけど、正直「javascriptつかってもこの面倒臭さなの？」って思って、自分はもっと単純な方法でやってみた。
ちなみに助太刀忍者の掲示板でaタグによる取得方法が「使えなくなった」とされているけど、今現在はちゃんと取得できてる。
たとえば、"Google" というクエリを送れば
/Search?search=Google
で返ってくる。
これをもとに作ったのがこのタグ一覧（タグクラウド）
ソースは以下。
<ul class="TagCloud">
<li>
<a href="/Search?search=[Daily]">Daily</a>
</li>
<li class="Tag2">
<a href="/Search?search=[Haru]">Haru</a>
</li>
<li>
<a href="/Search?search=[Computing]">Computing</a>
</li>
<li>
<a href="/Search?search=[WebDesign]">WebDesign</a>
</li>
<li>
<a href="/Search?search=[HomeDecor]">HomeDecor</a>
</li>
<li class="Tag1">
<a href="/Search?search=[DIY]">DIY</a>
</li>
<li class="Tag2">
<a href="/Search?search=[Renovation]">Renovation</a>
</li>
<li class="Tag2">
<a href="/Search?search=[Music]">Music</a>
</li>
<li>
<a href="/Search?search=[Gestation]">Gestation</a>
</li>
<li class="Tag3">
<a href="/Search?search=[Google]">Google</a>
</li>
<li>
<a href="/Search?search=[Movie]">Movie</a>
</li>
<li>
<a href="/Search?search=[Painting]">Painting</a>
</li>
<li class="Tag3">
<a href="/Search?search=[NinjaTools]">NinjaTools</a>
</li>
</ul>
※表示されるタグ名にはついていないカッコ（[ ]）がクエリについている理由は、「埋め込みタグ」（後述）以外の「本文中の文字列」を拾わないようにするため。
次、②タグを各ポストに埋める。これが問題。
既存のポストを片っ端から開いて地道に埋めてく方法しか見つからなかった。
以下が、記事本文内に埋め込むコードのテンプレ。
とりあえず全てのタグを仕込んでおいて、各ポストに貼り付ける時に不要なものを削除する。
<div class="EntryHeaderTag">
<div id="TagBlock">
<a href="/Search?search=[Daily]">[Daily]</a>
<a href="/Search?search=[Haru]">[Haru]</a>
<a href="/Search?search=[Computing]">[Computing]</a>
<a href="/Search?search=[WebDesign]">[WebDesign]</a>
<a href="/Search?search=[HomeDecor]">[HomeDecor]</a>
<a href="/Search?search=[DIY]">[DIY]</a>
<a href="/Search?search=[Renovation]">[Renovation]</a>
<a href="/Search?search=[Music]">[Music]</a>
<a href="/Search?search=[Gestation]">[Gestation]</a>
<a href="/Search?search=[Google]">[Google]</a>
<a href="/Search?search=[Movie]">[Movie]</a>
<a href="/Search?search=[Painting]">[Painting]</a>
<a href="/Search?search=[NinjaTools]">[NinjaTools]</a>
</div>
</div>
そして、このタグを本文に埋め込んだように見せない工夫をCSSで。
.EntryHeaderTag {
position: relative;
left: 114px;
margin-top: -46px;
width: 450px;
height: 25px;
font-size: 11px;
color: #c6bcaf;
}
↑ ポジション指定で無理やりタイトル／メタデータの下にもってきてるだけ...（汗
表示はこうなる。
とりあえず、今日時点で Entry 354～315 までと
カテゴリDIY の27ポスト分へ埋め込んだ。
死ぬほど面倒臭かった。
やりきる頃に次の仕様変更がきて、結果ページへのアクセスが不能になったりしそう。
っていうか、あっ!!! このページ、全てのタグが引っかかっちゃう!!!
<!--entrybreak-->で回避(?)しよう･･･orz
