FC2ブログ

スポンサーサイト

Posted by Masashi Ximoto on --.-- スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSS

Posted by Masashi Ximoto on 13.2008 PC関連事とか 0 comments 0 trackback
私が利用しているfc2ブログではCSSをカスタマイズ可能なのでスタイルシートをあれこれいじっています。。。

面白いんだけど、中々上手く思い通りにはいきませんね(;><)

最近流行?のlightbox2.xを導入しようとしたんですが、どうもプラグインと干渉してしまって、上手く動作しませんでした。。。(涙

ここ、fc2ブログではテンプレートとの相性もあるようです。

通常では上記lightboxサイトからダウンロードしたファイルのうち
cssのフォルダのなかにあるlightbox.cssの

#prevLink:hover, #prevLink:visited:hover { background: url(http://~upしたファイルのアドレス/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://~upしたファイルのアドレス/images/nextlabel.gif) right 15% no-repeat; }

部分を編集。

次にjsのフォルダのなかにあるlightbox.jsをの

var fileLoadingImage = "http://~upしたファイルのアドレス/loading.gif";
var fileBottomNavCloseImage = "http://~upしたファイルのアドレス/closelabel.gif";

部分を編集。

全てのファイル(サンプルファイルはお好みで)UPしたら
テンプレートの編集画面で<HEAD>~</HEAD>の間に

<script type="text/javascript" src="http://~upしたファイルのアドレス/prototype.js"></script>
<script type="text/javascript" src="http://~upしたファイルのアドレス/scriptaculous.js?
load=effects"></script>
<script type="text/javascript" src="http://~upしたファイルのアドレス/lightbox.js"></script>
<link rel="stylesheet" href="http://~upしたファイルのアドレス/lightbox.css" type="text/css" media="screen" />

を記述。

と、拍子抜けするほど導入は簡単です(ちゃんと動けばね)。。。

最後に記事を書いて画像を挿入する際に

<a href="http://~upした画像ファイルのアドレス" target="_blank"><img src="http://~upした画像ファイルのアドレス" alt=".jpg" border="0"></a>

の、target="_blankrel="lightbox" title="何か好きな文字"に置き換えるだけです。「何か好きな文字」のところに文字を入れると画像の下に表示されます。

こんな感じ↓

といってもここでは上手くいかなかったので。。。テストページを作ったので、そちらへのリンクを張っておきますSpirits In Mμsicaテストページ
関連記事

▶ Comment

▶ Post comment


  • 管理者にだけ表示を許可する

▶ Trackback

trackbackURL:http://soundz.blog35.fc2.com/tb.php/36-9dbd16c0
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。