Lab

主にサカナクションの事を打ち込むブログ。好きな時に好きな様に好きな風に。

スポンサーサイト

一定期間更新がないため広告を表示しています

| - | | - | |

JUGEMのJavaScriptライブラリから、lightbox.js(画像拡大Ajax)を導入する

ググってもすぐには解決に至らなかったので、救済メモ。
音楽系のブログなのにごめんね。

JUGEMの自作テンプレートを配布 Show-U「テンプレートカスタマイズ JUGEMで追加されたjavascriptライブラリを使って「Lightbox2」を組み込む」

上記ページを参考にlightbox.jsを導入してみたのだけど、Internet Explorer 8(IE8)でだけ右カラムが抜け落ちて表示されるというバグが発生。さらにはJavaScriptエラーまで表示される。
(下記画像参照)

JugemのJavaScriptライブラリからlightboxを参照するとIE8でエラーが起きる

1つ1つjsを削除して何が引っかかっているのか調べてみると、どうやらlightbox.jsが問題。
js自体が悪いのかと思い、公式配布のlightbox.jsを別サーバに設置しリンクしてみるも結果は同じ。
ということはjs自体には問題ない。

テンプレの問題か?さっそくデフォルトのテンプレにjsリンクをコピペ。
・・・結果おんなじなんですが!
ということはテンプレ改変が問題ってわけでもない。

上記サイト様では問題なく動いてるっていうのに何故!!ということで上記サイト様のテンプレをDLして使用してみるもやっぱり右カラムだけが欠如して、JavaScriptエラーが表示される。

なぜー!!!なぜー!!?とうんうんググってたところ、
ユーザー助け合い掲示板のQ. LIGHTBOXについてから解決する事が出来た。

Q. LIGHTBOXについて [解決済み]

* 投稿者:ueue

2009年12月15日から広告の仕様変更があったみたいですが、
この日からLIGHTBOXが使用できなくなりました。
読み込み途中でエラーが出ます。
どなたか解決方法ご存知でしたら、お願いします

* * *

投稿者:- A. Re: LIGHTBOXについて

以下のように変更すれば動くと思いますが、
Jugemさんに対処してもらう方がよいと思います。サポートに問い合わせしてみてください。

== HTML ====
・・・

<script type="text/javascript" src="http://js.jugem.jp/prototype/1.6.0.3/prototype.js"></script>;
<!-- <script type="text/javascript" src="http://js.jugem.jp/script.aculo.us/1.8.2/scriptaculous.js?load=effects,builder"></script>; (変更) -->
<script type="text/javascript" src="http://js.jugem.jp/script.aculo.us/1.8.2/effects.js"></script>;
<script type="text/javascript" src="http://js.jugem.jp/script.aculo.us/1.8.2/builder.js"></script>;
<script type="text/javascript" src="http://js.jugem.jp/Lightbox/2.04/js/lightbox.js"></script>;
<link rel="stylesheet" href="http://js.jugem.jp/Lightbox/2.04/css/lightbox.css"; type="text/css" media="screen" />

</body>
</html>
========
※スクリプト、スタイルシートの記述をbodyの最後に移動し
”scriptaculous.js”を”effects.js”、”builder.js”に変更

https://secure.jugem.jp/support/bbs/alldis.php?id=495

要するにjsへのリンクをbodyの終了タグのすぐ上にすればいいとのこと。

しかし問題は、公式アナウンスの記述通りに書いているというのにエラーが出る点だ。
Jugemはこの問題を早急に解決すべきだと思う。

・・というか!
blockqueteのテキスト選択不可の動作チェックを行っていただけだというのに、どうしてこうなった!
| ブログカスタム | 18:16 | comments(5) | |

ブログデザイン変更記録

今年頭からずっとずっと暖めていた、
サカナクションをイメージしたブログデザインをついに実行してみました。

ヘッダーのイラストは1月には既に制作していたものです。
そこから自分の好きな要素を右カラムやフッターにも取り込んだりしていたのですが、
途中面倒くさくて放置してしまっていたので、そこだけ外してHTML化しました。

なので実際はもうちょっと凝ったデザインになるはずなのですが、
それはまた時間と気力がある時にちょっとずつ進めていきます。

一応こだわったつもりなので解説など。

■ヘッダー
サカナクションの全体イメージとして、ベースは「夜」と「水の中」。
さらにラッセンをオマージュして水面が見えるのに海面も見えるという構成に。

また、自分の好きな曲のイメージを盛り込みました。
「三日月サンセット」「フクロウ」「開花」「白波トップウォーター」
「Ame(A)」「雨は気まぐれ」「あめふら」などの雨の曲。

当時「シンシロ」発売前だったので、
「GO TO THE FUTURE」「Night Fishing」からのイメージが大きいですね。
一応「セントレイ」のイメージは白の直線で表しています。

初期段階から日付表記の文字間をワザとかなり詰めてデザインしてたんですが、
結果的に「アルクアラウンド」のイメージと重なることができたなーと勝手に満足してたりします。
つらつらとー♪

で、ついでなんで、
ずっとずっと読みづらいなーと思っていた部分とかを修正してユーザビリティ上げてみました。

・サイト名にロールオーバーアクション追加
・サイト説明文の太文字除去
・記事本文のフォント変更
・記事情報を右寄せに
・リンクロールオーバー時の文字色変更
・右カラム各タイトルの文字色変更
・カレンダーの土日文字色変更
・メイン部分の横幅を25px増
・全体的に左マージン25px増→より中央寄りにして読みやすく

以上。第1段階目のリニューアルとしては満足。久々にやると楽しかったー。
あとは右カラム、フッターの追加デザイン頑張らにゃー。

【追記】09/12/27
歌詞を引用したりするので、引用部分に使うblockquoteタグをコピー禁止(選択不可)にしてみた。
こんなんしようと思う人少ないのかすごい手間取ったわー。

getElementByIdと使い方おんなじかと思って、
getElementsByTagName();で単純に

document.getElementsByTagName("blockquote")="return false";

という感じにしてたんだけど、上手くいかなーい!!!!
Σて、良く調べたらgetElementsByTagNameて配列やん!てことで、
for文使って

function disableTxt(){

    var elements = document.getElementsByTagName("blockquote");

    for (i=0; i<elements.length; i++)
    {
        elements[i].onselectstart = function(){return false};
    }
}

と、こんな感じにしました。
あ、ちなみにこれはIEでの指定方法です。

FirefoxとSafariは便利なことにCSSで指定できるのです。
その指定方法が↓こちら。

blockquote {
-moz-user-select: none;
-khtml-user-select: none;
}

うまくいった!よかった!
| ブログカスタム | 05:56 | comments(0) | |
CALENDAR
S M T W T F S
 123456
78910111213
14151617181920
21222324252627
28293031   
<< May 2017 >>
SELECTED ENTRIES
RECENT COMMENT
PROFILE
RECOMMEND
セントレイ(初回限定盤)
セントレイ(初回限定盤) (JUGEMレビュー »)
サカナクション,山口一郎
RECOMMEND
地味なサイトデザイン更新情報
09/12/27 jugemのjsライブラリからlightbox導入
09/12/27 ブログデザイン大幅変更。イメージはもちろんサカナクション
09/01/21 背景黒に変更
09/01/07 スムーススクロール導入
LINKS
モバイル
qrcode
SPONSORED LINKS
; ; ; ;