October 16, 2006

この記事をクリップ!

久しぶりに、ブログのカスタマイズネタ。

livedoorでも、livedoor クリップなんて、ソーシャル・ブックマークサービスが始まって、僕もちょろっと使い始めているんですが、そのクリップボタンをブログに表示するの巻。
以下、公式のヘルプページ辺りを参考に。

「clip!」ボタンを設置する カスタマイズ/管理 ブログ ガイド livedoor ヘルプ

これに加え、クリップアイコン この記事をクリップ! が表示されるように、以下のようなタグをブログのカスタマイズ画面から、トップページその他のhtmlに付け足す。

<a href="http://clip.livedoor.com/redirect?link=
<$ArticlePermalink$>&title=<$BlogTitle URIESCAPE$>%20-%20&
lt;$ArticleTitle URIESCAPE$>&ie=euc" class="ldclip-redirect" title="この記事をクリップ!">
<img src="http://parts.blog.livedoor.jp/img/cmn/clip_16_12_b.gif" alt="
この記事をクリップ!" style="border: medium none ; vertical-align:
middle;" height="12" width="16"></a>


で、このクリップ!ボタンを付ける位置なんだけれど、これまでは、はてブだけだったから、タイトルの横だったんだけど、タイトルの横に二つも三つも、この手のボタンがつくのはウザそうなので、文末に移動させる。

てか、これはユーザの使いやすさも、ちょっとだけ考えて。
普段からバシバシSBM使ってるアーリーアダプターな人は、既にbookmarkletをブラウザに入れてるだろうから、ブクマボタンなんざ関係ないだろうけど、そうじゃない人がブクマするときに、記事を読んで、わざわざタイトルに戻るためにスクロールして…ってやっぱ使いにくいよなーと思ってさ。
このブログをブクマする人なんざ、それほどいないんだけど(みんなー、ブクマしてくれよー)、こういうインタフェースのサジェスチョンも重要なんかなと。

インタフェースと云えば、はてなダイアリーなんかは、各記事のタイトル部分がパーマリンクになってて、livedoorブログは、文末に「この記事のURL」なんて表示が付くんですが、はてなの方が、絶対直感的だよねー。
ブクマボタンの追加を機に、そういうトコも、ちょちょっとイジくりますた。

通常なら、文末のパーマリンク周りは、こんな感じなんですが、

<div class="posted"><$ArticleAuthor$> at <$ArticleTime$>|
<a href="<$ArticlePermalink$>">この記事のURL</a>
<IfArticleAllowComment>│<a href="<$ArticlePermalink$>#comments">
Comments(<$ArticleCommentCount$>)</a></IfArticleAllowComment>
<IfArticleAllowPing>│<a href="<$ArticlePermalink$>#trackback">
TrackBack(<$ArticlePingCount$>)</a></IfArticleAllowPing><IfArticleCategory1>│
<a href="<$ArticleCategory1Url$>"><$ArticleCategory1$></a> 
</IfArticleCategory1><IfArticleCategory2>| <a href="<$ArticleCategory2Url$>">
<$ArticleCategory2$></a></IfArticleCategory2></div>



こっからパーマリンクのタグを取っ払って、はてブとlivedoorクリップ!のタグを追加。

<div class="posted"><$ArticleAuthor$> at <$ArticleTime$>  
<!--はてブを追加--->
<a href="http://b.hatena.ne.jp/entry/<$ArticlePermalink$>">
<img src="http://d.hatena.ne.jp/images/b_entry_dg.gif" style="border:
medium none ; vertical-align: middle;" width="16" height="12"
alt="このエントリーを含むはてなブックマーク" title="このエントリーを含む
はてなブックマーク" /></a>
<!--はてブ終了---> 
<!--livedoorクリップ!を追加--->
<a href="http://clip.livedoor.com/redirect?link=<$ArticlePermalink$>
&title=<$BlogTitle URIESCAPE$>%20-%20<$ArticleTitle URIESCAPE$>&ie=euc"
class="ldclip-redirect" title="この記事をクリップ!"><img src="
http://parts.blog.livedoor.jp/img/cmn/clip_16_12_b.gif" alt="この記事を
クリップ!" style="border: medium none ; vertical-align: middle;"
height="12" width="16"></a>
<!--livedoorクリップ!終了--->
|<IfArticleAllowComment>│<a href="<$ArticlePermalink$>#comments">
Comments(<$ArticleCommentCount$>)</a></IfArticleAllowComment>
<IfArticleAllowPing>│<a href="<$ArticlePermalink$>#trackback">
TrackBack(<$ArticlePingCount$>)</a></IfArticleAllowPing><IfArticleCategory1>│
<a href="<$ArticleCategory1Url$>"><$ArticleCategory1$></a> 
</IfArticleCategory1><IfArticleCategory2>| <a href="
<$ArticleCategory2Url$>"><$ArticleCategory2$></a></IfArticleCategory2>
<!--個別記事からのedit-->
│<a class="aposted" href="http://blog.livedoor.com/cms/article/edit?id=
<$ArticleId$>">Edit</a>
<!--個別記事からのedit終了-->
</div>



取っ払ったパーマリンクは、記事のタイトル部分であるh3タグ辺りに挿入。

デフォルトは、

<div class="titlebody"><h3 class="title">
<$ArticleTitle ESCAPE$><IfArticleRating>
<$ArticleRatingIcon$></IfArticleRating>
</h3></div>


こうなっているところを、

<div class="titlebody"><h3 class="title">
<a href="<$ArticlePermalink$>">
<$ArticleTitle ESCAPE$></a>
<IfArticleRating><$ArticleRatingIcon$>
</IfArticleRating></h3></div>


こんな感じに。

あとは、CSSでちょいと整形。

.title a:link, h3 a:visited, h3 a:active {
color:#000000;text-decoration:none;}
.title a:link, h3 a:hover {
color:#ffffff;text-decoration:none;background:#000000;}


へえ、ブログを始めた2年前からすると、htmlもCSSもわかってんじゃん>僕。めっちゃ満足(ホントか?)


ただ、ほんのちょっとhtmlやらCSSやらわかってくると、色んなブログからパクッて色んなブログを参考に、付け足し付け足しで来たもんだから、なんかソースがグダグダ…

一回、キチンと書き換えないと、ダメだよねえ…


関連記事
daddyscar at 00:37   このエントリーを含むはてなブックマーク   この記事をクリップ! Comments(0)TrackBack(0)blog |   customize Edit

トラックバックURL

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔   
 
 
 
Profile
daddyscar




紹介するほど
自己確立してないし
まあ、ただの日記なんだけど
それでだけ終わるのも
能がないっていうか
パラノ体質が許さないってか

で、一応ゲイなんですが
それに限らず色々書いてきます
でも、やっぱゲイであることから
離れることは出来ないかも



RSSを登録


Archives
Recommend

Mr.インクレディブル



Strangeways, Here We Come



伝奇集



ファントム・オブ・パラダイス



Watchmen



Mahler: Symphony No.9



デッドゾーン デラックス版



デビルマン (2)



The Stone Roses



IT〈1〉



Mixed Up



ブルーベルベット



半神



Slow Motion World of Snowpony



祈りの海



Loveless



ウィチャリー家の女



ティ-ンエイジャ-・オブ・ジ・イヤ-



戦闘妖精・雪風(改)



The Buried Life



密閉教室



Roxy Music



虚空の眼