customize
November 27, 2006
はてブ経由で[N]ネタフル見てたら、マウスオンでリンクがポップアップする。しかもサムネイル付き。
あれこれポップアップ系のツールなんかいなと思って、調べてみたら、サムネイル付きで検索結果を表示してくれる、新規の検索エンジンが提供するWebツールなんですね。
Snap
そういや、TechCrunchの紹介記事も見てたんだっけか。
TechCrunch Japanese アーカイブ » Snapであなたのサイトにも無料で検索プレビュー機能を
やり方は簡単。
サイトを登録して、発行されたタグをhtmlのヘッダー部分に貼り付けるだけ。
"あれこれポップアップ"系のツールは、入れてみたいなと思ってたんですが、そしたらついでにCSSもイジくりたいし…どうすんべと思考停止してたんで、とりあえず暫定的に入れてみますた。
おー仲々良いかも。
と、一人悦に入ってたら、どうもIEだとスクリプトエラーでサイト自体が表示されないっぽい…
orz
ネタフルさんのとこは、IEで開いても普通に見れるんだけどなあ…
あれこれポップアップ系のツールなんかいなと思って、調べてみたら、サムネイル付きで検索結果を表示してくれる、新規の検索エンジンが提供するWebツールなんですね。
Snap
そういや、TechCrunchの紹介記事も見てたんだっけか。
TechCrunch Japanese アーカイブ » Snapであなたのサイトにも無料で検索プレビュー機能を
やり方は簡単。
サイトを登録して、発行されたタグをhtmlのヘッダー部分に貼り付けるだけ。
"あれこれポップアップ"系のツールは、入れてみたいなと思ってたんですが、そしたらついでにCSSもイジくりたいし…どうすんべと思考停止してたんで、とりあえず暫定的に入れてみますた。
おー仲々良いかも。
と、一人悦に入ってたら、どうもIEだとスクリプトエラーでサイト自体が表示されないっぽい…
orz
ネタフルさんのとこは、IEで開いても普通に見れるんだけどなあ…
今日のブクマ/2006/11/26(日付が変わってしまた…)
- [N] The Very Best Covers Of 有頂天
そのネタフルさんで見つけた記事。
うひょー、宝島(B5版時代限定)なラインナップだなあ(笑)
そろそろこの辺のバンド(ヒカシューとかゼルダとか)の音源を、iTMSとかでも売ってくんないかしら。 - ymlabの日記 - Gmailと、GSpaceで、オンラインストレージ
Gmailをオンラインストレージとして使うFirefoxのプラグイン。
でも、最近、FirefoxよりもSleipnirの方が早かったような気もして、またプニルに戻ろうかと思案中。
え、Opera?
OperaはGoogle関連のサービスが使えないからなあ… - 紙きり1年戦争
おもすれー!と思って見てたら、今年お亡くなりになったとか。合掌。 - ∀
ヒゲも、こうやって見るとカッコいいような気がしてくる。
∀関連では、こういうのも。
「∀」成立の背景にあったもの
∀とGガン観てない僕は負け組ですかそうですか… - 栗本薫 THE COMIC
あんれまー、グインがついにマンガに!
でも原作には永遠に追いつけないなたぶん。 - The Mature Men, Bear, Chub Videos Thread - JustUsBoys.com Gay Community
最後は、フケ専×外専ゲイの方限定のアダルトサイト。
ノンケの読者さん(いるのか?)、あるいは18歳以下の君は、決して見ないように。
もし見てしまって、うわーホモって気持ち悪〜とか思っても、それはあなたの判断だし、まあいいんだけどさ(笑)
でも、ホモってこんなもんなんだぜ。
October 16, 2006
久しぶりに、ブログのカスタマイズネタ。
livedoorでも、livedoor クリップなんて、ソーシャル・ブックマークサービスが始まって、僕もちょろっと使い始めているんですが、そのクリップボタンをブログに表示するの巻。
以下、公式のヘルプページ辺りを参考に。
「clip!」ボタンを設置する カスタマイズ/管理 ブログ ガイド livedoor ヘルプ
これに加え、クリップアイコン が表示されるように、以下のようなタグをブログのカスタマイズ画面から、トップページその他のhtmlに付け足す。
で、このクリップ!ボタンを付ける位置なんだけれど、これまでは、はてブだけだったから、タイトルの横だったんだけど、タイトルの横に二つも三つも、この手のボタンがつくのはウザそうなので、文末に移動させる。
てか、これはユーザの使いやすさも、ちょっとだけ考えて。
普段からバシバシSBM使ってるアーリーアダプターな人は、既にbookmarkletをブラウザに入れてるだろうから、ブクマボタンなんざ関係ないだろうけど、そうじゃない人がブクマするときに、記事を読んで、わざわざタイトルに戻るためにスクロールして…ってやっぱ使いにくいよなーと思ってさ。
このブログをブクマする人なんざ、それほどいないんだけど(みんなー、ブクマしてくれよー)、こういうインタフェースのサジェスチョンも重要なんかなと。
インタフェースと云えば、はてなダイアリーなんかは、各記事のタイトル部分がパーマリンクになってて、livedoorブログは、文末に「この記事のURL」なんて表示が付くんですが、はてなの方が、絶対直感的だよねー。
ブクマボタンの追加を機に、そういうトコも、ちょちょっとイジくりますた。
通常なら、文末のパーマリンク周りは、こんな感じなんですが、
こっからパーマリンクのタグを取っ払って、はてブとlivedoorクリップ!のタグを追加。
取っ払ったパーマリンクは、記事のタイトル部分であるh3タグ辺りに挿入。
デフォルトは、
こうなっているところを、
こんな感じに。
あとは、CSSでちょいと整形。
へえ、ブログを始めた2年前からすると、htmlもCSSもわかってんじゃん>僕。めっちゃ満足(ホントか?)
ただ、ほんのちょっとhtmlやらCSSやらわかってくると、色んなブログからパクッて色んなブログを参考に、付け足し付け足しで来たもんだから、なんかソースがグダグダ…
一回、キチンと書き換えないと、ダメだよねえ…
関連記事
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="https://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やらわかってくると、
一回、キチンと書き換えないと、ダメだよねえ…
関連記事
May 09, 2006
April 08, 2006
Lightbox JSとか前々から試してみたいと思ってたんですが、JavascriptをFTPでアップしたりとか、ちょっとウザ。
そういや、CSSで画像ポップアップをやってるサイトが、はてブで人気エントリになってたなあとか思ってたら、
SEO業者ですら感動する驚異のCSSテクニック - 不定期更新 SEOコラム
CSSだけでLightbox.JSを再現したサイトを紹介してるだけで、問題のCSSに関して詳しく解説してる訳でもない。
でも、結局これって、Lucky bag::blogのe-luckさんがやってたことと同じなのかな。
Lucky bag::blog: CSS で画像ポップアップ
最初は拡大された画像を1px×1pxで飛ばしておいて、マウスオーバーでオリジナルサイズを表示させる、てな感じ?
CSSに追加するクラスは以下。
「.photo」と「.photo a.popup:hover」は各々、マウスオーバーしていないとき、しているときのサムネイル画像の設定。
「.photo a .large」と「.photo a.popup:hover .large」は、これも各々マウスオーバーしていないとき、しているときの拡大画像の設定。
拡大画像は通常状態のとき1px×1pxになってるけど、サムネイルはマウスオーバーのときに1px×1pxになってる訳ですね。
「.photo a.popup」及び「.photo a.popup:visited」は、マウスを戻したときの設定(?)。
で、このときに画像を以下のように記述。
上述で「width="XXX" height="XXX"」とした拡大画像のサイズは、CSSの「.photo a.popup:hover .large」に指定したサイズと同様でないといけないようです。
以上を踏まえてCSSにクラスの追加した後、試しにアップしてみたのがこちら。
ちょっとデカ過ぎたね>画像(笑)
表示も早いし仲々面白い効果が得られますが、拡大画像のサイズが固定されてしまうのが玉に瑕。CSSイジくったりと結局は手間だし。
てか、相変わらず、基本からじゃなくて、こういう飛び道具に喰い付いてしまうところが、僕の性格をあらわしているというか…
そういや、CSSで画像ポップアップをやってるサイトが、はてブで人気エントリになってたなあとか思ってたら、
SEO業者ですら感動する驚異のCSSテクニック - 不定期更新 SEOコラム
CSSだけでLightbox.JSを再現したサイトを紹介してるだけで、問題のCSSに関して詳しく解説してる訳でもない。
でも、結局これって、Lucky bag::blogのe-luckさんがやってたことと同じなのかな。
Lucky bag::blog: CSS で画像ポップアップ
JavaScript を使わずに、CSS を使ってサムネール画像の拡大画像をマウスオーバーで表示せる方法「CSS ~ Image Pop UP」を参考に、拡大画像をその場で表示させるサンプルを作ってみた。
最初は拡大された画像を1px×1pxで飛ばしておいて、マウスオーバーでオリジナルサイズを表示させる、てな感じ?
CSSに追加するクラスは以下。
img {※ Lucky bag::blog: :CSS で画像ポップアップのCSS設定を一部改変しています。下記のhtmlの記述も同様です。
border: none;
}
.photo {
position: relative;
top: 0;
left: 0;
width: 100px;
}
.photo a .large {
display: block;
position: absolute;
width: 1px;
height: 1px;
top: 0;
left: 0;
}
.photo a.popup,
.photo a.popup:visited {
display: block;
width: 100px;
top: 0;
left: 0;
}
.photo a.popup:hover {
background-color: 背景色;
}
.photo a.popup:hover .large {
display: block;
position: absolute;
width: 拡大時に表示するサイズ;
height: 拡大時に表示するサイズ;
top: 0;
left: 0;
}
「.photo」と「.photo a.popup:hover」は各々、マウスオーバーしていないとき、しているときのサムネイル画像の設定。
「.photo a .large」と「.photo a.popup:hover .large」は、これも各々マウスオーバーしていないとき、しているときの拡大画像の設定。
拡大画像は通常状態のとき1px×1pxになってるけど、サムネイルはマウスオーバーのときに1px×1pxになってる訳ですね。
「.photo a.popup」及び「.photo a.popup:visited」は、マウスを戻したときの設定(?)。
で、このときに画像を以下のように記述。
<div class="photo">
<a href="#" title="" class="popup"><img src="サムネイル画像のURL" width="xxx" height="xxx" alt="サムネイル画像" title="サムネイル" /><img src="拡大画像のURL" width="XXX" height="XXX" alt="拡大画像" title="拡大画像" class="large" /></a></div>
上述で「width="XXX" height="XXX"」とした拡大画像のサイズは、CSSの「.photo a.popup:hover .large」に指定したサイズと同様でないといけないようです。
以上を踏まえてCSSにクラスの追加した後、試しにアップしてみたのがこちら。
IEとFirefoxでは確認しましたが、キチンと表示されてる?
ちょっとデカ過ぎたね>画像(笑)
表示も早いし仲々面白い効果が得られますが、拡大画像のサイズが固定されてしまうのが玉に瑕。CSSイジくったりと結局は手間だし。
てか、相変わらず、基本からじゃなくて、こういう飛び道具に喰い付いてしまうところが、僕の性格をあらわしているというか…
March 02, 2006
February 13, 2006
January 19, 2006
December 03, 2005
いまもまだCSSのことなんかわかっていないのですが、以前は、この記事にも書いた通り、管理ページの「ブログの説明」(description)のところに、無理矢理ロゴ画像を貼り付けてて、タイトル自体はCSSで背景と同色にして、サイズも1pxにしてました。
livedoor blog Hack?(笑)
新環境ではタグが使えなくなってまして、この方法も使えず「どうすんべ」と思ってたんですが、一発奮起して差し替えてみたのがこのロゴ。
ロゴ画像作成に使用したのは、こちら。
LogoShader
込み入った本格的なことは出来ませんが、軽いし、フリーソフトなのでお手軽かと。
で、これで適当に作ったロゴをPhotoshopで加工して、こちらを参考にして貼り付けました。
hail2u.net>Weblog>Fahrner Image Replacement hacks
キチンと理解している訳ではないのですが、この方法だと、CSSを切っていても、生のhtmlはちゃんと表示されるようです。
ただ、livedoor blogの場合は、H1要素に「blogtitle」という名前が付けられているので、そこだけは注意。
あとはサイズの調整をして完成。
でも、そのサイズ調整が一苦労で。
今回は、何故かFirefoxだとバチンと本文とサイドバーの高さが合ったんですが、IEだとグチャグチャになってしまって。
その刷り合わせに小一時間かかりました。
未だにIEとNN系のCSSの表示の差を、キチンと理解してないんだなーと反省。
まあ、目標としてた「ちょっと小洒落た雰囲気」には一応なったので、良しとしますか。
てか、ロゴ作ったあとで、なんかフランツのニューアルバムに似てねえ?とか思ったり…
You Could Have It So Much Better
決してフランツにインスパイヤされた訳ではなく、フランツのアート・ディレクターも僕も、ロシア構造主義に敬意を表してるだけなんですよ(笑)
livedoor blog Hack?(笑)
新環境ではタグが使えなくなってまして、この方法も使えず「どうすんべ」と思ってたんですが、一発奮起して差し替えてみたのがこのロゴ。
ロゴ画像作成に使用したのは、こちら。
LogoShader
込み入った本格的なことは出来ませんが、軽いし、フリーソフトなのでお手軽かと。
で、これで適当に作ったロゴをPhotoshopで加工して、こちらを参考にして貼り付けました。
hail2u.net>Weblog>Fahrner Image Replacement hacks
キチンと理解している訳ではないのですが、この方法だと、CSSを切っていても、生のhtmlはちゃんと表示されるようです。
ただ、livedoor blogの場合は、H1要素に「blogtitle」という名前が付けられているので、そこだけは注意。
あとはサイズの調整をして完成。
でも、そのサイズ調整が一苦労で。
今回は、何故かFirefoxだとバチンと本文とサイドバーの高さが合ったんですが、IEだとグチャグチャになってしまって。
その刷り合わせに小一時間かかりました。
未だにIEとNN系のCSSの表示の差を、キチンと理解してないんだなーと反省。
まあ、目標としてた「ちょっと小洒落た雰囲気」には一応なったので、良しとしますか。
てか、ロゴ作ったあとで、なんかフランツのニューアルバムに似てねえ?とか思ったり…
You Could Have It So Much Better
決してフランツにインスパイヤされた訳ではなく、フランツのアート・ディレクターも僕も、ロシア構造主義に敬意を表してるだけなんですよ(笑)
November 20, 2005
以前、使っていた、ちびたさんの本文幅可変の3カラム・デザインは、本当に使い易くって。
livedoor blogが新環境に移ってからも、「あー、またあのテンプレ使いてー」と思ってました。
で、昨日、休日出勤してガリガリ仕事したおかげで、今日は、まるまる一日ぼんやりとした日だったので、その、可変幅の3カラムが出来ないものかと、色々いぢくりまわした結果、どうにか出来上がりましたので、ここにお披露目させていただき申す。
てか、ちびたさんの、このCSSから、bannerとcontainer、サイドバー部分の設定を抜き出して、新環境デフォルトのCSSと折衷させただけなんですが。
ボックスモデル・ハックとか、3カラムにするために、本文と左サイドバーをwrapperで包んで、とか、一応勉強したのに、ほとんど役に立たなかった… orz
そのうち、ほんまもんの独自テンプレとか作ってみたいんですが、道のりは、遠いなあ…
気を取り直して。
ちびたさんには、本当に感謝です。ありがとうございましたm( _ _ )m
IEとfirefoxで確認はしておりますが、「ここ変だよー」と気づかれた方は、ご一報くださいませ。
よろしくお願いいたします。
livedoor blogが新環境に移ってからも、「あー、またあのテンプレ使いてー」と思ってました。
で、昨日、休日出勤してガリガリ仕事したおかげで、今日は、まるまる一日ぼんやりとした日だったので、その、可変幅の3カラムが出来ないものかと、色々いぢくりまわした結果、どうにか出来上がりましたので、ここにお披露目させていただき申す。
てか、ちびたさんの、このCSSから、bannerとcontainer、サイドバー部分の設定を抜き出して、新環境デフォルトのCSSと折衷させただけなんですが。
ボックスモデル・ハックとか、3カラムにするために、本文と左サイドバーをwrapperで包んで、とか、一応勉強したのに、ほとんど役に立たなかった… orz
そのうち、ほんまもんの独自テンプレとか作ってみたいんですが、道のりは、遠いなあ…
気を取り直して。
ちびたさんには、本当に感謝です。ありがとうございましたm( _ _ )m
IEとfirefoxで確認はしておりますが、「ここ変だよー」と気づかれた方は、ご一報くださいませ。
よろしくお願いいたします。
October 08, 2005
livedoor blog に「はてなブックマーク」ボタンを表示する その1、の続き。
さて、はてなブを表示するタグは解明出来たので、今度は、これを貼り付けるんだけれども、貼り付け先は、
「ブログの設定/管理」>「デザインの設定」>「カスタマイズ」
から、CSSはイジくらず、各々のページのhtml編集画面へ。
参考にさせていただいた、無ブロでビブロさんは、トラックバックやカテゴリのあとに付けられてまして、僕も最初これを試してみたんですが、livedoorの場合、カテゴリが二重になってるし、「Edit」ボタンも付けてるしで、ちょと五月蝿い感じが。
で、やっぱARTIFACT ―人工事実―みたくタイトル横に付けられないかと試行錯誤してましたら、出来ました偶然(笑)
まずは、トップページ及び個別記事のhtml。
次の部分に、赤字のタグを挿入してください。
<div class="datebody"><h2 class="date"><$ArticleDate$></h2></div>
<div class="blogbodytop"></div>
<div class="blogbody">
<div class="titlebody"><h3 class="title"><$ArticleTitle ESCAPE$><IfArticleRating><$ArticleRatingIcon$></IfArticleRating>
<a href="http://b.hatena.ne.jp/entry/<$ArticlePermalink$>">
<img src="http://d.hatena.ne.jp/images/b_entry.gif" width="16" height="12" style="border: none;"
alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a>
</h3></div>
次に、カテゴリアーカイブと月別アーカイブの場合。
<div class="fullbody">
<IfDateChanged><div class="datebody"><h2 class="date"><$ArticleDate$></h2></div></IfDateChanged>
<div class="blogbodytop"></div>
<div class="blogbody">
<a name="<$ArticleId$>"></a><h3 class="title"><$ArticleTitle ESCAPE$><IfArticleRating><$ArticleRatingIcon$></IfArticleRating>
<a href="http://b.hatena.ne.jp/entry/<$ArticlePermalink$>">
<img src="http://d.hatena.ne.jp/images/b_entry.gif" width="16" height="12" style="border: none;"
alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a>
<div class="titlebody"></h3></div>
各々で前後のタグは微妙に違うと思いますが、
ちなみに、ブックマークボタンの色は、デフォルトの青以外にも以下の通りありますので、blogの色味と合わないなーって場合は、画像リンクのURLを変更してみるとよろし。
今日は相方(…じゃないんだな、もう)も来ず、SさんZさんもご旅行行かれたり仕事が忙しかったりで、なーんもなくて、ひとりでショボーン(´・ω・`)としておりましたので、頑張って記事書いてみました。
嗚呼、なんか空しい…
さて、はてなブを表示するタグは解明出来たので、今度は、これを貼り付けるんだけれども、貼り付け先は、
「ブログの設定/管理」>「デザインの設定」>「カスタマイズ」
から、CSSはイジくらず、各々のページのhtml編集画面へ。
参考にさせていただいた、無ブロでビブロさんは、トラックバックやカテゴリのあとに付けられてまして、僕も最初これを試してみたんですが、livedoorの場合、カテゴリが二重になってるし、「Edit」ボタンも付けてるしで、ちょと五月蝿い感じが。
で、やっぱARTIFACT ―人工事実―みたくタイトル横に付けられないかと試行錯誤してましたら、出来ました偶然(笑)
まずは、トップページ及び個別記事のhtml。
次の部分に、赤字のタグを挿入してください。
<div class="datebody"><h2 class="date"><$ArticleDate$></h2></div>
<div class="blogbodytop"></div>
<div class="blogbody">
<div class="titlebody"><h3 class="title"><$ArticleTitle ESCAPE$><IfArticleRating><$ArticleRatingIcon$></IfArticleRating>
<a href="http://b.hatena.ne.jp/entry/<$ArticlePermalink$>">
<img src="http://d.hatena.ne.jp/images/b_entry.gif" width="16" height="12" style="border: none;"
alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a>
</h3></div>
次に、カテゴリアーカイブと月別アーカイブの場合。
<div class="fullbody">
<IfDateChanged><div class="datebody"><h2 class="date"><$ArticleDate$></h2></div></IfDateChanged>
<div class="blogbodytop"></div>
<div class="blogbody">
<a name="<$ArticleId$>"></a><h3 class="title"><$ArticleTitle ESCAPE$><IfArticleRating><$ArticleRatingIcon$></IfArticleRating>
<a href="http://b.hatena.ne.jp/entry/<$ArticlePermalink$>">
<img src="http://d.hatena.ne.jp/images/b_entry.gif" width="16" height="12" style="border: none;"
alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a>
<div class="titlebody"></h3></div>
各々で前後のタグは微妙に違うと思いますが、
- <h3>という見出しタグを閉じる直前につけること
- ただし、トップページ/個別記事のには、カテゴリアーカイブ/月別アーカイブにある<div class="titlebody">というタグがない
ちなみに、ブックマークボタンの色は、デフォルトの青以外にも以下の通りありますので、blogの色味と合わないなーって場合は、画像リンクのURLを変更してみるとよろし。
標準(青) | http://d.hatena.ne.jp/images/b_entry.gif | |
グレー | http://d.hatena.ne.jp/images/b_entry_dg.gif | |
緑 | http://d.hatena.ne.jp/images/b_entry_gr.gif | |
紫 | http://d.hatena.ne.jp/images/b_entry_pr.gif | |
茶 | http://d.hatena.ne.jp/images/b_entry_br.gif | |
赤 | http://d.hatena.ne.jp/images/b_entry_rd.gif | |
セピア | http://d.hatena.ne.jp/images/b_entry_sp.gif | |
ピンク | http://d.hatena.ne.jp/images/b_entry_pk.gif | |
抹茶 | http://d.hatena.ne.jp/images/b_entry_te.gif | |
ライトグレー | http://d.hatena.ne.jp/images/b_entry_lg.gif | |
ライトブルー | http://d.hatena.ne.jp/images/b_entry_lb.gif | |
白 | http://d.hatena.ne.jp/images/b_entry_wh.gif | |
オレンジ | http://d.hatena.ne.jp/images/b_entry_or.gif | |
ライム | http://d.hatena.ne.jp/images/b_entry_li.gif | |
黒 | http://d.hatena.ne.jp/images/b_entry_bl.gif |
今日は相方(…じゃないんだな、もう)も来ず、SさんZさんもご旅行行かれたり仕事が忙しかったりで、なーんもなくて、ひとりでショボーン(´・ω・`)としておりましたので、頑張って記事書いてみました。
嗚呼、なんか空しい…
October 07, 2005
キチンとしたCSSの勉強せずに、こんな小手先のことばかりやっておりますが。
加野瀬氏の本スレ(笑)であるARTIFACT ―人工事実―見てたら、いつの間にか、はてなブックマークやらMM/Memoやらdel.icio.usやら、いわゆるソーシャルブックマークサービスの追加ボタンが記事タイトル横に表示されてまして、へぇーと思ってたんですが、ちょろっと検索したらありましたありました。
無ブロでビブロ>Seesaaにはてなブックマークボタン
もしかして、これをイジくればlivedoorでも出来るんじゃね?と、仕事そっちのけで小一時間(ry
やりかたは、ほぼ同じなんですが、seesaaとlivedoorだと、記事のURLを示す特殊タグが違うので、そこを入れ替えます。
seesaa Blog
<a href="http://b.hatena.ne.jp/entry/<% article.page_url %>">
<img src="http://d.hatena.ne.jp/images/b_entry.gif" width="16" height="12" style="border: none;"
alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a>
livedoor blog
<a href="http://b.hatena.ne.jp/entry/<$ArticlePermalink$>">
<img src="http://d.hatena.ne.jp/images/b_entry.gif" width="16" height="12" style="border: none;"
alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a>
あと当該記事の管理人氏は、ブックマークボタンの画像を自分のblogにコピーされていますが、僕は"はてな"のヤツをそのまま使ったので、「<img src="http://〜」以降の画像URLを変更いたしました。
で、これをデザインカスタマイズ画面から、トップページやら個別記事やら各々のhtml編集画面で貼り付けるだけなんですが、いまから飲みに行くんで(笑)、今日のところはここまででその2に続く。
てか、こんなことしてもブクマしてくれる人なんざいないんだけどさ…(と、やさぐれてみる)。
加野瀬氏の本スレ(笑)であるARTIFACT ―人工事実―見てたら、いつの間にか、はてなブックマークやらMM/Memoやらdel.icio.usやら、いわゆるソーシャルブックマークサービスの追加ボタンが記事タイトル横に表示されてまして、へぇーと思ってたんですが、ちょろっと検索したらありましたありました。
無ブロでビブロ>Seesaaにはてなブックマークボタン
もしかして、これをイジくればlivedoorでも出来るんじゃね?と、仕事そっちのけで小一時間(ry
やりかたは、ほぼ同じなんですが、seesaaとlivedoorだと、記事のURLを示す特殊タグが違うので、そこを入れ替えます。
seesaa Blog
<a href="http://b.hatena.ne.jp/entry/<% article.page_url %>">
<img src="http://d.hatena.ne.jp/images/b_entry.gif" width="16" height="12" style="border: none;"
alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a>
livedoor blog
<a href="http://b.hatena.ne.jp/entry/<$ArticlePermalink$>">
<img src="http://d.hatena.ne.jp/images/b_entry.gif" width="16" height="12" style="border: none;"
alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" /></a>
あと当該記事の管理人氏は、ブックマークボタンの画像を自分のblogにコピーされていますが、僕は"はてな"のヤツをそのまま使ったので、「<img src="http://〜」以降の画像URLを変更いたしました。
で、これをデザインカスタマイズ画面から、トップページやら個別記事やら各々のhtml編集画面で貼り付けるだけなんですが、いまから飲みに行くんで(笑)、今日のところはここまででその2に続く。
てか、こんなことしてもブクマしてくれる人なんざいないんだけどさ…(と、やさぐれてみる)。
October 04, 2005
とWikiを更新中。
で、CSSを勉強するのに、一番カンタンなデザインがいいかなと、「デフォルト2005 (ブルー) 」というデザインに再度変更。
ただし、これまでのデザインとフォントサイズが違っている所為で、サイドバーずれが起きた記事がいくつか見られたので、下記の記事を参考に、本文のフォントサイズだけ変更しました。
livedoor Blog デザイン千本ノック!>文字(フォント)サイズの変更方法
変更点は、以下の通り。
あと、Wikiに記事を書く上で、色々と試行錯誤した結果、この記事(blog改造2 個別記事からの編集)についても、内容一部変更しております。
で、CSSを勉強するのに、一番カンタンなデザインがいいかなと、「デフォルト2005 (ブルー) 」というデザインに再度変更。
ただし、これまでのデザインとフォントサイズが違っている所為で、サイドバーずれが起きた記事がいくつか見られたので、下記の記事を参考に、本文のフォントサイズだけ変更しました。
livedoor Blog デザイン千本ノック!>文字(フォント)サイズの変更方法
変更点は、以下の通り。
.main,.mainmore{font-size: small;} | デフォルトの設定 | .main,.mainmore{font-size: x-small;} | 変更後 |
あと、Wikiに記事を書く上で、色々と試行錯誤した結果、この記事(blog改造2 個別記事からの編集)についても、内容一部変更しております。
August 31, 2005
以前も、この記事で書いたのですが、デザイン変更に伴い、なくなってしまった、個別記事から直接編集画面に移行出来るボタンをつけました。
以前と同じくこちら(小春日和の陽射しの中で:記事から直接編集画面へ)を参考にしてますが、livedoor blogの新環境だと、この当時とはタグに変更があり、ちょっとだけ手間取りました。
以下、自分に対して、覚え書き。
トップページのhtml画面では、以下に部分に編集用のタグ(太字)を挿入のこと。
個別記事、カテゴリ、月別も同様。
以前と同じくこちら(小春日和の陽射しの中で:記事から直接編集画面へ)を参考にしてますが、livedoor blogの新環境だと、この当時とはタグに変更があり、ちょっとだけ手間取りました。
以下、自分に対して、覚え書き。
トップページのhtml画面では、以下に部分に編集用のタグ(太字)を挿入のこと。
<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>|&n
bsp;<a href="<$ArticleCategory2Url$>"><$ArticleCategory2
$></a></IfArticleCategory2>
│<a class="aposted" href="http://blog.livedoor.com
/cms/article/edit?id=<$ArticleId$>">Edit</a>
</div>
<IfFirstArticle><div
id="ad"><$Advertise$></div></IfFirstArticle>
</div>
<div class="blogbodybottom"></div>
</div>
<IfDateFooter><div
class="dateend"></div></IfDateFooter>
</IndexArticlesLoop>
<!-- Loop End -->
個別記事、カテゴリ、月別も同様。
デザイン変更で消失してしまったアクセス解析のタグを貼り付ける。
ちなみに僕が使用しているのは、AccessAnalyzer.com。
一応有料ユーザなのでlivedoorオフィシャルのアクセス解析はついてるのだけれど、微妙に使いづらいっぽい。
AccessAnalyzerにログイン後、javascriptで動作してるらしいタグを発行し、コピペ。
管理ページで、
ブログの設定/管理>デザインの設定>カスタマイズ>トップページ
CSSはいじくらず、各htmlの編集画面へ。
「この内容で保存する」をクリック。
それぞれ個別、カテゴリ、月別ページで同じ作業をし、「Blogの再構築」で終了。
ちなみに僕が使用しているのは、AccessAnalyzer.com。
一応有料ユーザなのでlivedoorオフィシャルのアクセス解析はついてるのだけれど、微妙に使いづらいっぽい。
AccessAnalyzerにログイン後、javascriptで動作してるらしいタグを発行し、コピペ。
管理ページで、
ブログの設定/管理>デザインの設定>カスタマイズ>トップページ
CSSはいじくらず、各htmlの編集画面へ。
</head>
<body>
← ここにタグを挿入
<…>
「この内容で保存する」をクリック。
それぞれ個別、カテゴリ、月別ページで同じ作業をし、「Blogの再構築」で終了。
August 29, 2005
新環境移行に伴い、旧環境時の設定に不具合が多数。
てか、再構築の遅いこと遅いこと。
こんなんじゃ、そりゃ皆ブーたれるわな。
とりあえずデザインをオフィシャルのものに変更したので、以前のデザインについて記録。
1.「ブログの設定/管理」より「ブログの説明」に以下のように(無理矢理)記述していた。
2.旧デザインのCSSとhtmlを以下に保管。
CSS
トップページhtml
カテゴリアーカイブhtml
月別アーカイブhtml
個別記事ページhtml
あー、また一からやり直すのか…
てか、再構築の遅いこと遅いこと。
こんなんじゃ、そりゃ皆ブーたれるわな。
とりあえずデザインをオフィシャルのものに変更したので、以前のデザインについて記録。
1.「ブログの設定/管理」より「ブログの説明」に以下のように(無理矢理)記述していた。
<img src=
"https://image.blog.livedoor.jp/daddyscar/
imgs/d/4/d454c060.JPG" width="159"
height="83" border="0" alt="タイトル" hspace="5"
class="pict" align="center"/>
<br> SFとミステリとロックとその他もろもろ。
で、実はそのもろもろの中身が重要。<br>
2.旧デザインのCSSとhtmlを以下に保管。
CSS
トップページhtml
カテゴリアーカイブhtml
月別アーカイブhtml
個別記事ページhtml
あー、また一からやり直すのか…
May 17, 2005
教えてくださいとリクエストいただいたので、ご説明をば。
ただし、テクニカルなことは、まったくわからないので、参考にさせていただいた弱小エンジニアの小言さんの、この記事を、素人なりに読み解く、と思っていただければ幸いでございます。
説明に入る前に、まず、これはlivedoor blogを念頭におかれていますので、他のblogサービスで有効かどうか、不明でありんす。ご注意ください。
また、これをおこなうには、javascriptファイルを、アップロードしなければなりません。
以前のlivedoor blogなら、どんなファイルでもアップ出来たのですが、容量拡大以降、無料版は、画像ファイルのアップロードしかサポートされてませんので、これもご注意を。
どうしても無料でってんなら、s**s**とかをファイル保管庫にするって手もありますが、そんときは自己責任で。
続きを読む
ただし、テクニカルなことは、まったくわからないので、参考にさせていただいた弱小エンジニアの小言さんの、この記事を、素人なりに読み解く、と思っていただければ幸いでございます。
説明に入る前に、まず、これはlivedoor blogを念頭におかれていますので、他のblogサービスで有効かどうか、不明でありんす。ご注意ください。
また、これをおこなうには、javascriptファイルを、アップロードしなければなりません。
以前のlivedoor blogなら、どんなファイルでもアップ出来たのですが、容量拡大以降、無料版は、画像ファイルのアップロードしかサポートされてませんので、これもご注意を。
どうしても無料でってんなら、s**s**とかをファイル保管庫にするって手もありますが、そんときは自己責任で。
続きを読む
May 07, 2005
今日はめずらしく(?)夜半を過ぎる前に自宅に戻ってまいりましたので、blogの改造をちょこっとだけ。
このblogを始めて、もう半年以上になり、記事投稿の件数も250件を超えました。
まあ、世の有名ブロガーの皆様からすると、「そんなのまだまだだぞよ」とか云われそうなんですが、それでもやっぱ、以前の記事を改稿したり、リンク切れのチェックとかがちょっと手間。
そこで、小春日和の陽射しの中でさんの、こちらの記事(記事から直接編集画面へ)を参考にして、blogの記事から直接編集画面へ飛べるEditボタンを付けてみました(コメントやTB、カテゴリのあとにある「Edit」がそれ)。
これで改稿も楽チン楽チン。
ついでに(失礼)、コメント欄のURL表示を、自動的にリンク生成するスクリプトもつけてみました。
自分でも思うのですが、コメント欄にあるURLをいちいちコピペするのって、これもやっぱ手間じゃないですか(手間手間云ってると、そのうち駄目人間になるヨカーンもしますが…)。
これは、地獄変00さんのこちらの記事(livedoor Blogのコメント欄に引用部強調機能をつける)を参考に。
どちらも、該当記事のとおりにやれば、簡単に出来ますので、livedoor blogユーザの方は、お試しあれ。
このblogを始めて、もう半年以上になり、記事投稿の件数も250件を超えました。
まあ、世の有名ブロガーの皆様からすると、「そんなのまだまだだぞよ」とか云われそうなんですが、それでもやっぱ、以前の記事を改稿したり、リンク切れのチェックとかがちょっと手間。
そこで、小春日和の陽射しの中でさんの、こちらの記事(記事から直接編集画面へ)を参考にして、blogの記事から直接編集画面へ飛べるEditボタンを付けてみました(コメントやTB、カテゴリのあとにある「Edit」がそれ)。
これで改稿も楽チン楽チン。
ついでに(失礼)、コメント欄のURL表示を、自動的にリンク生成するスクリプトもつけてみました。
自分でも思うのですが、コメント欄にあるURLをいちいちコピペするのって、これもやっぱ手間じゃないですか(手間手間云ってると、そのうち駄目人間になるヨカーンもしますが…)。
これは、地獄変00さんのこちらの記事(livedoor Blogのコメント欄に引用部強調機能をつける)を参考に。
どちらも、該当記事のとおりにやれば、簡単に出来ますので、livedoor blogユーザの方は、お試しあれ。
April 21, 2005
以前から、やってみたかったんですが、音ログや、google adsenseなどのjava scriptを使ったプラグインを使っていると、不具合が出るらすぃので、ファビヨってますた。
音ログなどの場合、普通は、フリーエリアにそのまま貼り付けるだけですが、個別記事へのサイドバー表示をしたいなら、Scriptのソースをhtmlファイルとしてアップして、それをインラインフレームで、サイドバーに表示させるという方法をとらないと、サイドバーが記事の下にずれるらしいのです(ガガーン)。
htmlの知識なんざねえっす。
ま、でも素人なりにやってみました。
あら、簡単に出来るじゃん。
参考にさせていただいたのは、livedoor blog styleさんのこちら(#1)と、こちら(#2)の記事です。
livedoor blog styleさん、どうもありがとうございましたm( _ _ )m
個別記事へのサイドバー表示は、上記#1の記事を参考にして、コピペしちゃえば、ホントに簡単に出来ます。
問題は、#2に書かれてるjava scriptのhtml化なんですが、これも、この記事を参考にすれば、そんなに難しくありませんでした。
ようは気合です(笑)
ひとつだけ、#2の記事で、html化のときに「width=幅」と「height=高さ」を合わせないと、サイドバーが崩れるとされてますが、これは、「width=幅」だけ注意しとけばいいみたい。
各自、自分のテンプレのサイドバーの幅(CSSをじっくり見ると、"#links"のあとに、"width:○○px"と書かれたところがあると思います)に合わせればオケ。
その後、書き出したhtmlをうpし(ちなみに、無料版では画像ファイルのうpしかサポートされてないので、どうしてもタダでという人は、s**s** b**gとかをファイル保管庫にするしかないです)、それをフリーエリアに貼り付けます。
これも#2の記事を参考に、コピペするだけ。
ただし、このときは、「width=幅」と「height=高さ」を調整してください。「width=幅」は上述と同じでかまいませんが、「height=高さ」は、何度か試してみて、ちょうどいい高さに合わせてください。
で、完成(やっほーい)。
#1と同じ手順で、カテゴリ別記事と月別記事にも、サイドバーを表示させることが出来ます。
僕はすべてのページでサイドバー表示させ、それに附随して、これまで別ウインドウで飛ばしていた各記事へのリンクを、同じウインドウで開くように変更しました。完璧。
2時間もあれば出来ますので、livedoor bolgユーザーの方はお試しあれ。
音ログなどの場合、普通は、フリーエリアにそのまま貼り付けるだけですが、個別記事へのサイドバー表示をしたいなら、Scriptのソースをhtmlファイルとしてアップして、それをインラインフレームで、サイドバーに表示させるという方法をとらないと、サイドバーが記事の下にずれるらしいのです(ガガーン)。
htmlの知識なんざねえっす。
ま、でも素人なりにやってみました。
あら、簡単に出来るじゃん。
参考にさせていただいたのは、livedoor blog styleさんのこちら(#1)と、こちら(#2)の記事です。
livedoor blog styleさん、どうもありがとうございましたm( _ _ )m
個別記事へのサイドバー表示は、上記#1の記事を参考にして、コピペしちゃえば、ホントに簡単に出来ます。
問題は、#2に書かれてるjava scriptのhtml化なんですが、これも、この記事を参考にすれば、そんなに難しくありませんでした。
ようは気合です(笑)
ひとつだけ、#2の記事で、html化のときに「width=幅」と「height=高さ」を合わせないと、サイドバーが崩れるとされてますが、これは、「width=幅」だけ注意しとけばいいみたい。
各自、自分のテンプレのサイドバーの幅(CSSをじっくり見ると、"#links"のあとに、"width:○○px"と書かれたところがあると思います)に合わせればオケ。
その後、書き出したhtmlをうpし(ちなみに、無料版では画像ファイルのうpしかサポートされてないので、どうしてもタダでという人は、s**s** b**gとかをファイル保管庫にするしかないです)、それをフリーエリアに貼り付けます。
これも#2の記事を参考に、コピペするだけ。
ただし、このときは、「width=幅」と「height=高さ」を調整してください。「width=幅」は上述と同じでかまいませんが、「height=高さ」は、何度か試してみて、ちょうどいい高さに合わせてください。
で、完成(やっほーい)。
#1と同じ手順で、カテゴリ別記事と月別記事にも、サイドバーを表示させることが出来ます。
僕はすべてのページでサイドバー表示させ、それに附随して、これまで別ウインドウで飛ばしていた各記事へのリンクを、同じウインドウで開くように変更しました。完璧。
2時間もあれば出来ますので、livedoor bolgユーザーの方はお試しあれ。
April 06, 2005
以前、bokuさまから指摘を受けたのですが、これまでの、あの夕焼けのテンプレートだと、Firefoxではレイアウトが何故か崩れてしまってまして、テンプレの作者さんに問い合わせ等してみたのですが、どうしても原因がわかりませんでした。
最初のテンプレートは、livedoorデフォルトのものを3カラム化しただけだったのですが、これはレイアウトが崩れず、「それだったら、ふたつのテンプレを見比べて、折衷してしまえばいいか」などと甘いことを考えていたものの、毎夜毎夜飲み歩いてて(…orz)、書きたい記事も書けてないのに、そんな時間が捻出出来る筈もありません。
よって、テンプレ変更することにいたしました(以前のテンプレを提供いただきました作者のちゅんさま、ごめんなさい)。
今回のテンプレもLivedoor Blog Templatersにお世話になりました。
作者である、ちびたさまのサイトはこちら(CHIBI-LOG)です。
大感謝であります。
最初のテンプレートは、livedoorデフォルトのものを3カラム化しただけだったのですが、これはレイアウトが崩れず、「それだったら、ふたつのテンプレを見比べて、折衷してしまえばいいか」などと甘いことを考えていたものの、毎夜毎夜飲み歩いてて(…orz)、書きたい記事も書けてないのに、そんな時間が捻出出来る筈もありません。
よって、テンプレ変更することにいたしました(以前のテンプレを提供いただきました作者のちゅんさま、ごめんなさい)。
今回のテンプレもLivedoor Blog Templatersにお世話になりました。
作者である、ちびたさまのサイトはこちら(CHIBI-LOG)です。
大感謝であります。
March 11, 2005
なるものに登録してみたんですが…
サイドバーにフリースペース・プラグインを足して、そこに吐き出されたソースコードを貼ってみても、なーんも出ません(左サイドバーの下にある、不自然な四角)。
なんでだろ?
とりあえず、この記事の中にも貼ってみるテスト。
続きを読む
サイドバーにフリースペース・プラグインを足して、そこに吐き出されたソースコードを貼ってみても、なーんも出ません(左サイドバーの下にある、不自然な四角)。
なんでだろ?
とりあえず、この記事の中にも貼ってみるテスト。
続きを読む
March 09, 2005
ボビーさんのトコ見てたら、音ログなんて面白そうなものが。
なるほど、iTunesと連動してる訳ねフムフム。
で、早速設置。
最初、ちょっと手間取りましたが(JavaScriptをFTPでうpしなければならないのかと思い込んでた)、.blogのPOQUEを使ったFlash版もあるのを発見して、ようやく設置完了。
でも、音ログ開発日記にあるコードは、もしかしたら間違いが? そのまま貼り付けただけじゃ、RSSと連動しなかったから。
で、開発日記のコメント欄を参考に、[POQUE ] 設置方法にあるソースメーカーを使ってみたらバッチリ。
ソースメーカーの「アップロードしたpoques.swfのURLを入力」には
http://rss.otolog.jp/poque.swf
「あなたのサイトのRDFファイルのURLを入力」には
http://rss.otolog.jp/ユーザー名
と入力して(あとは適当)、「ソースを作成する」をクリックすると、ソースが吐き出されますので、livedoor blogの方ならフリースペース・プラグインを追加して貼るだけです。
ホント、こんなに作る人って、凄いよねえ(遠い目)。
よし、ライブラリを充実させるために、明日は、Tahiti 80とThe Mars Volta、買って来なきゃ(笑)
続きを読む
なるほど、iTunesと連動してる訳ねフムフム。
で、早速設置。
最初、ちょっと手間取りましたが(JavaScriptをFTPでうpしなければならないのかと思い込んでた)、.blogのPOQUEを使ったFlash版もあるのを発見して、ようやく設置完了。
でも、音ログ開発日記にあるコードは、もしかしたら間違いが? そのまま貼り付けただけじゃ、RSSと連動しなかったから。
で、開発日記のコメント欄を参考に、[POQUE ] 設置方法にあるソースメーカーを使ってみたらバッチリ。
ソースメーカーの「アップロードしたpoques.swfのURLを入力」には
http://rss.otolog.jp/poque.swf
「あなたのサイトのRDFファイルのURLを入力」には
http://rss.otolog.jp/ユーザー名
と入力して(あとは適当)、「ソースを作成する」をクリックすると、ソースが吐き出されますので、livedoor blogの方ならフリースペース・プラグインを追加して貼るだけです。
ホント、こんなに作る人って、凄いよねえ(遠い目)。
よし、ライブラリを充実させるために、明日は、Tahiti 80とThe Mars Volta、買って来なきゃ(笑)
続きを読む
November 28, 2004
livedoorBlogで3カラムにする手順[整理版](小春日和の陽射しの中で)
こちらの記事を参考にして、トップページを3カラム(って、これは"column"の日本語訳ですよね)化してみました。
で、増やした右のサイドバーは、目次としました(とりあえず11月分のみですが)。
おお、なんとも感慨深い。
でも、良くも悪くも、ちょっと「痛い」かも…
こちらの記事を参考にして、トップページを3カラム(って、これは"column"の日本語訳ですよね)化してみました。
で、増やした右のサイドバーは、目次としました(とりあえず11月分のみですが)。
おお、なんとも感慨深い。
でも、良くも悪くも、ちょっと「痛い」かも…
Recent Articles
Categories
Archives