2006年05月24日
divのcss
このトップページの上のINFOMATION部分にテーブルを使っていましたがFirefoxでうまく表現されていなかったのでdivに変えて、右下に紙が折れ曲がっている画像を使ってカスタマイズしてみました。
参考：Dynamic Drive CSS Library- Curly Corner Container
このサイトは様々なおしゃれなCSSのタグがあり、コピペだけでブログをカスタマイズできて助かります。（画像はアップロードします）
引用のCSSに使ってもいいと思います。
| 2006年05月02日
コメントトラックバック欄にサムネイル
コメント投稿時にurlを入れてくれてたらそのサイトのサムネイルが出るように、同じくトラックバック投稿者のサイトのサムネイルが出るようにしてみました。
参考
Simple API - ウェブサイト・サムネイル化ツール
stroll::blog | 指定したaタグorURLの画像を表示するスクリプトβでjugem用にタグが載っていたのでほとんどそのまま使わせていただきました。
seesaa用に書き換えたバージョン
１．のすぐ上に入れるスクリプトはそのまま流用しました。
２．画像を表示したい場所に入れるスクリプト
デザイン＞コンテンツ＞記事（コンテンツHTML編集）にて
コメント欄の場合
中ほどに「この記事へのコメント」と書いてある下
<div class="comments-body">と<div class="text">の間に
<script type="text/javascript">
<!--
// 指定したaタグorURLの画像を表示するスクリプト var.1.0
// by http://melrose.jugem.cc/
getUrlImageTag('<% Comment.homepage %>');
// -->
</script>
トラックバック欄の場合
<hr />
この記事へのトラックバック<br />
<% loop:list_individual_article_tb -%>
<hr />の下に
<script type="text/javascript">
<!--
// 指定したaタグorURLの画像を表示するスクリプト var.1.0
// by http://melrose.jugem.cc/
getUrlImageTag('<% tb.url %>');
// -->
</script>
と入れてみました。
サムネイルの大きさはheadに入れるスクリプトで調節します。
場所、位置はテンプレートのデザインに合せて調節すればいいと思います。
Simple API - ウェブサイト・サムネイル化ツールは以前から（MT時代から）投稿記事でサイトの紹介のときに使っていますが、サムネイルは一回作ると保存されるので次からはすぐに表示されるようです。今まで遅いと感じたことはまだありません。
結果
トラックバック欄は綺麗に表示されているので成功です。
コメント欄はurlが貼ってあるコメントが無いので（爆）自分で投稿してテストしてみたんですが「Now printing」から変わってくれません（泣）
seesaaまだよくわからないので、いい方法があったら教えてください。
MT（Movable Type ）で、サイドバーに過去記事で使った画像を並べていたんですが、それをseesaaでもやりたいなぁ・・・。誰か教えて欲しいなぁ。。
・・・勉強してみます。
seesaa カスタマイズ コメント サムネイル
| 2006年05月01日
カスタマイズ
ブログ？ カスタマイズ？ アフィリエイト？：コメントに絵文字を使う
の記事を参考にコメント欄に記事投稿欄と同じ絵文字が使えるようにしてみました。コピペだけで簡単にできて、助かりました。ありがとうございました。
ブログ？ カスタマイズ？ アフィリエイト？：ブログの記事から直接編集ページへ
の記事を参考に投稿した記事ページから直接記事の編集画面に飛べるように設定しました。私の場合、投稿してから修正することが多いのでとてもたすかりました。ありがとうございました。これもコピペだけでした。ブログ上に表示するリンクの文字は、画像にして別画面で開くようにtarget="_blank"を追加しました。
seesaa カスタマイズ 絵文字
2006年04月25日
カスタマイズメモ
seesaaに引っ越してきたので、ちょっとテンプレートをカスタマイズしてみました。やったことのメモです。
テンプレート：色合いが良かったので公式の３カラム「きのこ」を使いました。bannerの画像の高さを短めに自作しました。
コンテンツ：ブログ名とブログ説明は削除してブログロゴ画像のみにしました。
自由形式は背景が無いので、他のコンテンツに使われている画像を付け足しました。（div class の sidetitleとsideに画像が使われているので、自由形式に そのdiv classを付け足しました）
どうやってもカレンダーの枠の下の画像が出ないんですけど (汗)
設定はできてるはずなのに、サンプルでも出てないですね 謎
参考サイト：Style book
「記事の追記部分の折りたたみ」
タグのコピペだけなので簡単でした。続きをよむ 閉じるもボタン化できてメリハリができました。ありがとうございました。
「ナビゲーションバー公開」
便利なNavigation Makerというツールを用意してくださっているので、これも思ったより簡単にできました。どこに置くか迷ったんですが、ブログタイトルを画像にしているので、その上に置いてみました。Navigation Makerで作ったタグを divで囲って丸ごと位置指定しました。（右に寄せたかったから）
参考サイト:ブログカスタマイズ
「トピックパス追加」ブログロゴ画像の下に追加しました。
「すべての記事に日付を表示」まとめて投稿することがあるので追加しました。
「タイトルと日付を一列に表示」コンパクトになっていいです。
「トラックバックURLをtextフィールドで表示」枠で囲ってスッキリしました。
後は自分で適当に
posted by という記事のフッタ部分が間延びしていたので、div class postedの上下に線を引きました。
border-topに1px solid #77664D
border-bottomに1px solid #77664D
引用部分がただ段落が下がるだけだったので
div class blockquote のスタイルを追加しました。
line-height: 130%;
border-left: 10px solid #E4DEBD;
border-top: 1px solid #E4DEBD;
border-bottom: 1px solid #E4DEBD;
border-right: 1px solid #E4DEBD;
font-size: 12px;
background: #ffffff;
width: auto;
margin: 20px 20px 20px 20px;
padding: 10px;
カテゴリ名がposted by という記事のフッタ部分で、小さくわかりづらかったので、記事タイトルの下に大きめに表示しました。（タグをコピペしただけ）
とりあえずこんなとこでしょうか。やっぱ、ナビゲーションバーはHITです！
