1yard:　　customize

　　customize

November 27, 2006

Snap

はてブ経由で[N]ネタフル見てたら、マウスオンでリンクがポップアップする。しかもサムネイル付き。
あれこれポップアップ系のツールなんかいなと思って、調べてみたら、サムネイル付きで検索結果を表示してくれる、新規の検索エンジンが提供する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歳以下の君は、決して見ないように。
もし見てしまって、うわーホモって気持ち悪～とか思っても、それはあなたの判断だし、まあいいんだけどさ（笑）
でも、ホモってこんなもんなんだぜ。

daddyscar at 01:21

│Comments(1) │TrackBack(0) │Edit

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やらわかってくると、~~色んなブログからパクッて~~色んなブログを参考に、付け足し付け足しで来たもんだから、なんかソースがグダグダ…

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

関連記事

1yard:livedoor blog に「はてなブックマーク」ボタンを表示する　その1

1yard:livedoor blog に「はてなブックマーク」ボタンを表示する　その2

1yard:blog改造2　個別記事からの編集

daddyscar at 00:37

│Comments(0) │TrackBack(0) │Edit

May 09, 2006

なんとなく

色合いを変えてみた。

daddyscar at 21:47

│Comments(0) │TrackBack(0) │Edit

April 08, 2006

CSSによる画像ポップアップ

Lightbox JSとか前々から試してみたいと思ってたんですが、JavascriptをFTPでアップしたりとか、ちょっとウザ。

そういや、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 {
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;
}

※　Lucky bag::blog: :CSS で画像ポップアップのCSS設定を一部改変しています。下記のhtmlの記述も同様です。

「.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イジくったりと結局は手間だし。

てか、相変わらず、基本からじゃなくて、こういう飛び道具に喰い付いてしまうところが、僕の性格をあらわしているというか…

daddyscar at 21:16

│Comments(0) │TrackBack(0) │Edit

March 02, 2006

なんで？

昨日まではキチンと表示されていたのに、今日blogをたまたま開いてみたら、二つのサイドバーが被さって見える。

ここ数ヶ月、CSSをいじくった記憶はないのですが…

夢遊病か？
それとも、アダプテーションされた？

ちなみに、Firefoxではキチンと表示されておりますな。

IE系でこのblogをご覧の方、皆さんのもズレて表示されてますか？

それとも、僕が見てるコレそのものが幻覚なのか？

(((( ；ﾟДﾟ)))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ

daddyscar at 20:29

│Comments(2) │TrackBack(0) │Edit

February 13, 2006

てな訳で

毎度毎度のYouTubeの動画って、ソースの数字を書き換えるだけで簡単にサイズを変えられるって知ったので、プロフィール欄に貼ってみた。 *1

いや、これはYouTubeでみっけたおいしそうな（ヨダレ）外パパさんの後ろ姿であって、僕は、こんなイイ男ではありません。 *2

今日のところもあしからず。

*1 正確には、自由に記述出来るフリーエリアをプロフィール欄に使いました。livedoor blogでは動画やflashをプロフィール欄に貼ることは出来ませんので。

*2 ここ重要。フケ専のゲイは、こういうのが好きなんだよ。ほらそこ！テストに出るから、ちゃんとアンダーライン引いといて！

daddyscar at 23:58

│Comments(0) │TrackBack(0) │Edit

January 19, 2006

はてなブックマーク

自分のはてブのRSSをサイドバーに貼り付けてみたんすが、こりゃいかん、コメントまでは表示されねえんですな。

コメントがキモなのによう。

この辺、上手いこと表示出来るようなブログパーツをただいま物色中。

daddyscar at 19:14

│Comments(0) │TrackBack(0) │Edit

December 03, 2005

blogのタイトルをロゴ画像にする

いまもまだ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

決してフランツにインスパイヤされた訳ではなく、フランツのアート・ディレクターも僕も、ロシア構造主義に敬意を表してるだけなんですよ（笑）

daddyscar at 14:18

│Comments(2) │TrackBack(0) │Edit

December 02, 2005

blogのタイトルを

画像にしたんだけれども。

なんか会社の安いモニターじゃ、色が全然わからん。

帰ってから補修するんで、とりあえずシカトしといてくんろ。

daddyscar at 19:24

│Comments(0) │TrackBack(0) │Edit

November 20, 2005

本文幅可変の3カラム

以前、使っていた、ちびたさんの本文幅可変の3カラム・デザインは、本当に使い易くって。
livedoor blogが新環境に移ってからも、「あー、またあのテンプレ使いてー」と思ってました。

で、昨日、休日出勤してガリガリ仕事したおかげで、今日は、まるまる一日ぼんやりとした日だったので、その、可変幅の3カラムが出来ないものかと、色々いぢくりまわした結果、どうにか出来上がりましたので、ここにお披露目させていただき申す。

てか、ちびたさんの、このCSSから、bannerとcontainer、サイドバー部分の設定を抜き出して、新環境デフォルトのCSSと折衷させただけなんですが。

ボックスモデル・ハックとか、3カラムにするために、本文と左サイドバーをwrapperで包んで、とか、一応勉強したのに、ほとんど役に立たなかった…　orz

そのうち、ほんまもんの独自テンプレとか作ってみたいんですが、道のりは、遠いなあ…

気を取り直して。

ちびたさんには、本当に感謝です。ありがとうございましたｍ( _ _ )ｍ

IEとfirefoxで確認はしておりますが、「ここ変だよー」と気づかれた方は、ご一報くださいませ。
よろしくお願いいたします。

daddyscar at 23:59

│Comments(2) │TrackBack(0) │Edit

October 08, 2005

livedoor blog に「はてなブックマーク」ボタンを表示する　その2

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>

各々で前後のタグは微妙に違うと思いますが、

<h3>という見出しタグを閉じる直前につけること
ただし、トップページ／個別記事のには、カテゴリアーカイブ／月別アーカイブにある<div class="titlebody">というタグがない

の2点に気を付ければ、簡単だと思います。

ちなみに、ブックマークボタンの色は、デフォルトの青以外にも以下の通りありますので、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

今日は相方（…じゃないんだな、もう）も来ず、ＳさんＺさんもご旅行行かれたり仕事が忙しかったりで、なーんもなくて、ひとりでショボーン(´・ω・`)としておりましたので、頑張って記事書いてみました。

嗚呼、なんか空しい…

daddyscar at 17:44

│Comments(2) │TrackBack(1) │Edit

October 07, 2005

livedoor blog に「はてなブックマーク」ボタンを表示する　その1

キチンとしたCSSの勉強せずに、こんな小手先のことばかりやっておりますが。

加野瀬氏の本ｽﾚ（笑）であるARTIFACT ―人工事実―見てたら、いつの間にか、はてなブックマークやらMM/Memoやらdel.icio.usやら、いわゆるソーシャルブックマークサービスの追加ボタンが記事タイトル横に表示されてまして、へぇーと思ってたんですが、ちょろっと検索したらありましたありました。

無ブロでビブロ＞Seesaaにはてなブックマークボタン

もしかして、これをイジくればlivedoorでも出来るんじゃね？と、仕事そっちのけで小一時間（ｒｙ

やりかたは、ほぼ同じなんですが、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に続く。

てか、こんなことしてもブクマしてくれる人なんざいないんだけどさ…（と、やさぐれてみる）。

daddyscar at 18:39

│Comments(0) │TrackBack(0) │Edit

October 04, 2005

ちょこちょこ

とWikiを更新中。

で、CSSを勉強するのに、一番カンタンなデザインがいいかなと、「デフォルト2005 (ブルー) 」というデザインに再度変更。
ただし、これまでのデザインとフォントサイズが違っている所為で、サイドバーずれが起きた記事がいくつか見られたので、下記の記事を参考に、本文のフォントサイズだけ変更しました。

livedoor Blog デザイン千本ノック！＞文字（フォント）サイズの変更方法

変更点は、以下の通り。

.main,.mainmore{font-size: small;}	デフォルトの設定
.main,.mainmore{font-size: x-small;}	変更後

あと、Wikiに記事を書く上で、色々と試行錯誤した結果、この記事（blog改造2　個別記事からの編集）についても、内容一部変更しております。

daddyscar at 20:00

│Comments(0) │TrackBack(0) │Edit

August 31, 2005

blog改造2　個別記事からの編集

以前も、この記事で書いたのですが、デザイン変更に伴い、なくなってしまった、個別記事から直接編集画面に移行出来るボタンをつけました。

以前と同じくこちら（小春日和の陽射しの中で:記事から直接編集画面へ）を参考にしてますが、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 -->

個別記事、カテゴリ、月別も同様。

daddyscar at 20:14

│Comments(4) │TrackBack(1) │Edit

blog改造1　アクセス解析タグの貼り付け

デザイン変更で消失してしまったアクセス解析のタグを貼り付ける。

ちなみに僕が使用しているのは、AccessAnalyzer.com。
一応有料ユーザなのでlivedoorオフィシャルのアクセス解析はついてるのだけれど、微妙に使いづらいっぽい。

AccessAnalyzerにログイン後、javascriptで動作してるらしいタグを発行し、コピペ。

管理ページで、
ブログの設定/管理＞デザインの設定＞カスタマイズ＞トップページ

CSSはいじくらず、各htmlの編集画面へ。

</head>

<body>

　　　　　　← ここにタグを挿入

<…>

「この内容で保存する」をクリック。
それぞれ個別、カテゴリ、月別ページで同じ作業をし、「Blogの再構築」で終了。

daddyscar at 01:22

│Comments(0) │TrackBack(0) │Edit

August 29, 2005

blog改造0　旧デザインの覚え書き

新環境移行に伴い、旧環境時の設定に不具合が多数。

てか、再構築の遅いこと遅いこと。
こんなんじゃ、そりゃ皆ブーたれるわな。

とりあえずデザインをオフィシャルのものに変更したので、以前のデザインについて記録。

1.「ブログの設定/管理」より「ブログの説明」に以下のように（無理矢理）記述していた。

<img src=

"http://image.blog.livedoor.jp/daddyscar/

imgs/d/4/d454c060.JPG" width="159" 

height="83" border="0" alt="タイトル" hspace="5"

 class="pict" align="center"/>

<br>      ＳＦとミステリとロックとその他もろもろ。

で、実はそのもろもろの中身が重要。<br>

2.旧デザインのCSSとhtmlを以下に保管。

CSS
トップページhtml
カテゴリアーカイブhtml
月別アーカイブhtml
個別記事ページhtml

あー、また一からやり直すのか…

daddyscar at 17:46

│Comments(0) │TrackBack(0) │Edit

May 17, 2005

カテゴリーのツリー表示（リスト化）について

教えてくださいとリクエストいただいたので、ご説明をば。
ただし、テクニカルなことは、まったくわからないので、参考にさせていただいた弱小エンジニアの小言さんの、この記事を、素人なりに読み解く、と思っていただければ幸いでございます。

説明に入る前に、まず、これはlivedoor blogを念頭におかれていますので、他のblogサービスで有効かどうか、不明でありんす。ご注意ください。
また、これをおこなうには、javascriptファイルを、アップロードしなければなりません。
以前のlivedoor blogなら、どんなファイルでもアップ出来たのですが、容量拡大以降、無料版は、画像ファイルのアップロードしかサポートされてませんので、これもご注意を。
どうしても無料でってんなら、s**s**とかをファイル保管庫にするって手もありますが、そんときは自己責任で。

続きを読む

daddyscar at 19:44

│Comments(0) │TrackBack(0) │Edit

May 07, 2005

プチ改造

今日はめずらしく（？）夜半を過ぎる前に自宅に戻ってまいりましたので、blogの改造をちょこっとだけ。

このblogを始めて、もう半年以上になり、記事投稿の件数も250件を超えました。
まあ、世の有名ブロガーの皆様からすると、「そんなのまだまだだぞよ」とか云われそうなんですが、それでもやっぱ、以前の記事を改稿したり、リンク切れのチェックとかがちょっと手間。

そこで、小春日和の陽射しの中でさんの、こちらの記事（記事から直接編集画面へ）を参考にして、blogの記事から直接編集画面へ飛べるEditボタンを付けてみました（コメントやTB、カテゴリのあとにある「Edit」がそれ）。
これで改稿も楽チン楽チン。

ついでに（失礼）、コメント欄のURL表示を、自動的にリンク生成するスクリプトもつけてみました。
自分でも思うのですが、コメント欄にあるURLをいちいちコピペするのって、これもやっぱ手間じゃないですか（手間手間云ってると、そのうち駄目人間になるﾖｶｰﾝもしますが…）。
これは、地獄変00さんのこちらの記事（livedoor Blogのコメント欄に引用部強調機能をつける）を参考に。

どちらも、該当記事のとおりにやれば、簡単に出来ますので、livedoor blogユーザの方は、お試しあれ。

daddyscar at 01:42

│Comments(1) │TrackBack(0) │Edit

April 21, 2005

個別記事へのサイドバーの表示

以前から、やってみたかったんですが、音ログや、google adsenseなどのjava scriptを使ったプラグインを使っていると、不具合が出るらすぃので、ﾌｧﾋﾞﾖってますた。
音ログなどの場合、普通は、フリーエリアにそのまま貼り付けるだけですが、個別記事へのサイドバー表示をしたいなら、Scriptのソースをhtmlファイルとしてアップして、それをインラインフレームで、サイドバーに表示させるという方法をとらないと、サイドバーが記事の下にずれるらしいのです（ガガーン）。
htmlの知識なんざねえっす。

ま、でも素人なりにやってみました。

あら、簡単に出来るじゃん。

参考にさせていただいたのは、livedoor blog styleさんのこちら（#1）と、こちら（#2）の記事です。
livedoor blog styleさん、どうもありがとうございましたｍ( _ _ )ｍ

個別記事へのサイドバー表示は、上記#1の記事を参考にして、コピペしちゃえば、ホントに簡単に出来ます。
問題は、#2に書かれてるjava scriptのhtml化なんですが、これも、この記事を参考にすれば、そんなに難しくありませんでした。
ようは気合です（笑）

ひとつだけ、#2の記事で、html化のときに「width＝幅」と「height＝高さ」を合わせないと、サイドバーが崩れるとされてますが、これは、「width＝幅」だけ注意しとけばいいみたい。
各自、自分のテンプレのサイドバーの幅（CSSをじっくり見ると、"#links"のあとに、"width:○○px"と書かれたところがあると思います）に合わせればオケ。

その後、書き出したhtmlをうｐし（ちなみに、無料版では画像ファイルのうｐしかサポートされてないので、どうしてもタダでという人は、s**s** b**gとかをファイル保管庫にするしかないです）、それをフリーエリアに貼り付けます。
これも#2の記事を参考に、コピペするだけ。
ただし、このときは、「width＝幅」と「height＝高さ」を調整してください。「width＝幅」は上述と同じでかまいませんが、「height＝高さ」は、何度か試してみて、ちょうどいい高さに合わせてください。
で、完成（やっほーい）。

#1と同じ手順で、カテゴリ別記事と月別記事にも、サイドバーを表示させることが出来ます。
僕はすべてのページでサイドバー表示させ、それに附随して、これまで別ウインドウで飛ばしていた各記事へのリンクを、同じウインドウで開くように変更しました。完璧。

2時間もあれば出来ますので、livedoor bolgユーザーの方はお試しあれ。

daddyscar at 17:29

│Comments(3) │TrackBack(2) │Edit

April 06, 2005

再びデザイン変更

以前、bokuさまから指摘を受けたのですが、これまでの、あの夕焼けのテンプレートだと、Firefoxではレイアウトが何故か崩れてしまってまして、テンプレの作者さんに問い合わせ等してみたのですが、どうしても原因がわかりませんでした。
最初のテンプレートは、livedoorデフォルトのものを3カラム化しただけだったのですが、これはレイアウトが崩れず、「それだったら、ふたつのテンプレを見比べて、折衷してしまえばいいか」などと甘いことを考えていたものの、毎夜毎夜飲み歩いてて（…orz）、書きたい記事も書けてないのに、そんな時間が捻出出来る筈もありません。
よって、テンプレ変更することにいたしました（以前のテンプレを提供いただきました作者のちゅんさま、ごめんなさい）。

今回のテンプレもLivedoor Blog Templatersにお世話になりました。
作者である、ちびたさまのサイトはこちら（CHIBI-LOG）です。
大感謝であります。

daddyscar at 22:44

│Comments(0) │TrackBack(2) │Edit

March 11, 2005

Google AdSense

なるものに登録してみたんですが…

サイドバーにフリースペース・プラグインを足して、そこに吐き出されたソースコードを貼ってみても、なーんも出ません（左サイドバーの下にある、不自然な四角）。

なんでだろ？

とりあえず、この記事の中にも貼ってみるﾃｽﾄ。
続きを読む

daddyscar at 01:16

│Comments(3) │TrackBack(1) │Edit

March 09, 2005

音ログ設置しますた

ボビーさんのトコ見てたら、音ログなんて面白そうなものが。

なるほど、iTunesと連動してる訳ねフムフム。

で、早速設置。

最初、ちょっと手間取りましたが（JavaScriptをFTPでうｐしなければならないのかと思い込んでた）、.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、買って来なきゃ（笑）

続きを読む

daddyscar at 02:03

│Comments(1) │TrackBack(1) │Edit

March 07, 2005

デザイン変更

URL変更に伴いblogのデザインも変更してみますた。

いま、出先なので、詳細はあとでご報告いたします。ノシ

続きを読む

daddyscar at 18:12

│Comments(2) │TrackBack(0) │Edit

December 13, 2004

カスタマイズ

弱小エンジニアの小言というblogを発見し、そちらに掲載されているblogのミニカスタマイズというのに挑戦してみますた。

続きを読む

daddyscar at 00:12

│Comments(3) │TrackBack(0) │Edit

November 28, 2004

思考停止

livedoorBlogで３カラムにする手順[整理版]（小春日和の陽射しの中で）

こちらの記事を参考にして、トップページを3カラム（って、これは"column"の日本語訳ですよね）化してみました。

で、増やした右のサイドバーは、目次としました（とりあえず11月分のみですが）。

おお、なんとも感慨深い。

でも、良くも悪くも、ちょっと「痛い」かも…

daddyscar at 21:06

│Comments(0) │TrackBack(1) │Edit

Profile

daddyscar