カテゴ記事一覧(投稿順・アーティスト別ではありません)
■divのcss ■コメントトラックバック欄にサムネイル ■カスタマイズ ■カスタマイズメモ

2006年05月24日

divのcss


このトップページの上のINFOMATION部分にテーブルを使っていましたがFirefoxでうまく表現されていなかったのでdivに変えて、右下に紙が折れ曲がっている画像を使ってカスタマイズしてみました。
参考:Dynamic Drive CSS Library- Curly Corner Container
このサイトは様々なおしゃれなCSSのタグがあり、コピペだけでブログをカスタマイズできて助かります。(画像はアップロードします)
引用のCSSに使ってもいいと思います。


posted by rika at 18:01 | 東京 ☁ | Comment(0) | TrackBack(1) | Seesaa

2006年05月02日

コメントトラックバック欄にサムネイル


コメント投稿時にurlを入れてくれてたらそのサイトのサムネイルが出るように、同じくトラックバック投稿者のサイトのサムネイルが出るようにしてみました。
参考
Simple API - ウェブサイト・サムネイル化ツール

stroll::blog | 指定したaタグorURLの画像を表示するスクリプトβでjugem用にタグが載っていたのでほとんどそのまま使わせていただきました。

seesaa用に書き換えたバージョン
1.のすぐ上に入れるスクリプトはそのまま流用しました。
2.画像を表示したい場所に入れるスクリプト
デザイン>コンテンツ>記事(コンテンツ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でもやりたいなぁ・・・。誰か教えて欲しいなぁ。。
・・・勉強してみます。

テクノラティ
posted by rika at 17:43 | 東京 ☔ | Comment(0) | TrackBack(0) | Seesaa

2006年05月01日

カスタマイズ


ブログ? カスタマイズ? アフィリエイト?:コメントに絵文字を使う
の記事を参考にコメント欄に記事投稿欄と同じ絵文字が使えるようにしてみました。コピペだけで簡単にできて、助かりました。ありがとうございました。

ブログ? カスタマイズ? アフィリエイト?:ブログの記事から直接編集ページへ
の記事を参考に投稿した記事ページから直接記事の編集画面に飛べるように設定しました。私の場合、投稿してから修正することが多いのでとてもたすかりました。ありがとうございました。これもコピペだけでした。ブログ上に表示するリンクの文字は、画像にして別画面で開くようにtarget="_blank"を追加しました。

テクノラティ

posted by rika at 00:22 | 東京 ☁ | Comment(2) | TrackBack(0) | Seesaa

2006年04月25日

カスタマイズメモ


seesaaに引っ越してきたので、ちょっとテンプレートをカスタマイズしてみました。やったことのメモです。

テンプレート:色合いが良かったので公式の3カラム「きのこ」を使いました。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です!
posted by rika at 16:58 | 東京 ☁ | Comment(0) | TrackBack(0) | Seesaa

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は180日以上新しい記事の投稿がないブログに表示されております。