このBlogは、BnSのことを書くつもりで、門派創設と同時に始めたが、
意外なほどに、最近のWebテクノロジーの学習にも役立っている。
CSSをカスタマイズしたり、jQuery導入について調べてきたからだ。
jQueryは、動きのあるWebページを書くためのJavaScriptライブラリ。
jQueryをベースに、数多くのスクリプトが公開されている。
このBlogでは、画像処理にColorbox、fancyBox、Galleriaの3つを導入した。
このページで分かるように、複数のスクリプトは共存させることができる。
他に、コード装飾のSyntaxHighlighterと、表計算のHandsontableを導入した。
備忘メモを兼ねて、各スクリプトの導入方法、調整方法について書く。
■jQuery
まず、jQuery本体を読み込む必要がある。
ここでは、jQueryのCDNから読み込む形にしている。
liverdoorの場合、デザイン設定(PC)のカスタムJSのhead内に記載する。
■Colorbox
Colorboxは、サムネイルをクリックすると、ポップアップ表示するスクリプトの一つ。
モーダルウィンドウ系とか、Lightbox系スクリプトと呼ばれている。
ポップアップ枠に収まるよう、自動的に最適なサイズに縮小表示される。
Colorbox Sample Gallery
headタグ内に、cssファイルとjavaスクリプトを読み込む。
colorboxには、5種類のcssがあるので、demoを見て好みの表示を選ぶ。
一般的に、cssファイルはjavaスクリプトより先に読み込ませるべきとされている。
class名はcolorboxとし、サイズとアニメーションスピードを調整している。
rel=グループ名 を指定することで、前後に移動可能なギャラリーとして表示される。
ここでは分かりやすいように、小さい画像とHDサイズの画像の2つをグループ化した。
■fancyBox
fancyBoxも、サムネイルをポップアップ表示するスクリプトの一つ。
マルチデバイスに対応した、いわゆるレスポンシブなスクリプト。
ブラウザのサイズに合わせて、自動で最適なWeb描画をする機能を持っている。
と言っても、livedoor Blogのスマートフォン用スキンはスクリプトをロードしないので、
敢えてスマートフォンで表示する場合は、PC用ページを表示する必要があるが。
ともかく、スマートデバイスの普及を受けて、レスポンシブがトレンドのようだ。
PCでのブラウズでも、fancyBoxのポップアップはウィンドウサイズが変更された場合、
自動で再描画して追従するのが分かる。
fancyBox Sample Gallery
fancyBoxも、headタグ内に、cssファイルとjavaスクリプトを読み込む。
class名はfancyboxとし、前後のアニメーション効果を無効にしている。
どちらを適用するかは、表示枠などのスタイルの好みやレスポンシブの要否次第。
■Galleria
Galleriaも、イメージギャラリー用のスクリプト。
Galleriaも、レスポンシブデザインに対応している。
ColorboxやfancyBoxは、サムネイルを記事に配置する使い方に適しているが、
Galleriaは、サムネイルをナビゲーションに含めたギャラリーを作ることができる。
フルスクリーン拡大やスライドショーの作成にも適している。(有償機能を含む)
数10枚の画像をBlogに載せるなら、Galleriaの方が見やすいのではないかと思う。
Galleria Sample Gallery
headタグ内でスクリプトとcssを読み込む。
記事側では、
リンク画像・サムネイル画像を、divクラス内に配置し、
ギャラリー作成のスクリプトも記事内に配置する形だ。
■SyntaxHighlighter
SyntaxHighlighterは、ソースコードを装飾表示するスクリプト。
このBlogでは、HTMLとJavaを、装飾表示する形で導入している。
エスケープとは、「<」は「<」、「>」は「>」と書き換えることを意味する。
読み易さのため、コード内のリンクを無効にするなどの調整をしている。
■Handsontable
Handsontableは、 こちらのように、表計算を描画するスクリプトだ。
表の形式で数字を書いたのとは違い、表計算そのものを書いている。
Handsontableの実装は単純ではないので、この記事では割愛する。
B&Sブログランキング参戦中!
クリックしてやってください!
意外なほどに、最近のWebテクノロジーの学習にも役立っている。
CSSをカスタマイズしたり、jQuery導入について調べてきたからだ。
jQueryは、動きのあるWebページを書くためのJavaScriptライブラリ。
jQueryをベースに、数多くのスクリプトが公開されている。
このBlogでは、画像処理にColorbox、fancyBox、Galleriaの3つを導入した。
このページで分かるように、複数のスクリプトは共存させることができる。
他に、コード装飾のSyntaxHighlighterと、表計算のHandsontableを導入した。
備忘メモを兼ねて、各スクリプトの導入方法、調整方法について書く。
■jQuery
まず、jQuery本体を読み込む必要がある。
ここでは、jQueryのCDNから読み込む形にしている。
liverdoorの場合、デザイン設定(PC)のカスタムJSのhead内に記載する。
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
■Colorbox
Colorboxは、サムネイルをクリックすると、ポップアップ表示するスクリプトの一つ。
モーダルウィンドウ系とか、Lightbox系スクリプトと呼ばれている。
ポップアップ枠に収まるよう、自動的に最適なサイズに縮小表示される。
Colorbox Sample Gallery
headタグ内に、cssファイルとjavaスクリプトを読み込む。
colorboxには、5種類のcssがあるので、demoを見て好みの表示を選ぶ。
一般的に、cssファイルはjavaスクリプトより先に読み込ませるべきとされている。
class名はcolorboxとし、サイズとアニメーションスピードを調整している。
記事のリンク画像に class=colorbox を指定することで、ポップアップにColorboxが適用される。
<link type="text/css" rel="stylesheet" href="/colorbox/colorbox.css">
<script type="text/javascript" src="/colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function() {
$(".colorbox").colorbox({ maxWidth:'90%', maxHeight:'90%', speed:'100' });
});
</script>
rel=グループ名 を指定することで、前後に移動可能なギャラリーとして表示される。
ここでは分かりやすいように、小さい画像とHDサイズの画像の2つをグループ化した。
<a class=colorbox title=jin href="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/8/f829f0da.jpg" target=_blank rel=colorbox_sample>
<img class=pict alt=jin src="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/8/f829f0da-s.jpg" border=0 hspace=5></a>
<a class=colorbox title=jin(HD) href="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/4/f4178725.jpg" target=_blank rel=colorbox_sample>
<img class=pict alt=jin(HD) src="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/4/f4178725-s.jpg" border=0 hspace=5></a>
■fancyBox
fancyBoxも、サムネイルをポップアップ表示するスクリプトの一つ。
マルチデバイスに対応した、いわゆるレスポンシブなスクリプト。
ブラウザのサイズに合わせて、自動で最適なWeb描画をする機能を持っている。
と言っても、livedoor Blogのスマートフォン用スキンはスクリプトをロードしないので、
敢えてスマートフォンで表示する場合は、PC用ページを表示する必要があるが。
ともかく、スマートデバイスの普及を受けて、レスポンシブがトレンドのようだ。
PCでのブラウズでも、fancyBoxのポップアップはウィンドウサイズが変更された場合、
自動で再描画して追従するのが分かる。
fancyBox Sample Gallery
fancyBoxも、headタグ内に、cssファイルとjavaスクリプトを読み込む。
class名はfancyboxとし、前後のアニメーション効果を無効にしている。
記事のリンク画像にclass=fancybox を指定することで適用される。rel=グループ名 も同様。
<link type="text/css" rel="stylesheet" href="/fancybox/jquery.fancybox.css?v=2.1.5">
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>
<script>
$(document).ready(function() {
$(".fancybox").fancybox({ prevEffect:'none', nextEffect:'none' });
});
</script>
どちらを適用するかは、表示枠などのスタイルの好みやレスポンシブの要否次第。
<a class=fancybox title=jin href="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/8/f829f0da.jpg" target=_blank rel=fancybox_sample>
<img class=pict alt=jin src="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/8/f829f0da-s.jpg" border=0 hspace=5></a>
<a class=fancybox title=jin(HD) href="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/4/f4178725.jpg" target=_blank rel=fancybox_sample>
<img class=pict alt=jin(HD) src="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/4/f4178725-s.jpg" border=0 hspace=5></a>
■Galleria
Galleriaも、イメージギャラリー用のスクリプト。
Galleriaも、レスポンシブデザインに対応している。
ColorboxやfancyBoxは、サムネイルを記事に配置する使い方に適しているが、
Galleriaは、サムネイルをナビゲーションに含めたギャラリーを作ることができる。
フルスクリーン拡大やスライドショーの作成にも適している。(有償機能を含む)
数10枚の画像をBlogに載せるなら、Galleriaの方が見やすいのではないかと思う。
Galleria Sample Gallery
headタグ内でスクリプトとcssを読み込む。
<!-- Galleria -->
<link type="text/css" rel="stylesheet" href="/galleria/themes/azur/galleria.azur.css"> <script type="text/javascript" src="/galleria/galleria-1.4.2.js"></script> <script type="text/javascript" src="/galleria/themes/azur/galleria.azur.min.js "></script>
記事側では、
リンク画像・サムネイル画像を、divクラス内に配置し、
ギャラリー作成のスクリプトも記事内に配置する形だ。
<div class=galleria>
<a title=jin href="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/8/f829f0da.jpg">
<img class=pict alt=jin src="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/8/f829f0da-s.jpg"></a>
<a title=jin(HD) href="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/4/f4178725.jpg">
<img class=pict alt=jin(HD) src="https://livedoor.blogimg.jp/silversoul_iikuma/imgs/f/4/f4178725-s.jpg""></a>
</div>
<script type="text/javascript"> Galleria.loadTheme('/galleria/themes/azur/galleria.azur.js'); option = {width: 640, height: 400, autoplay: 3000,} Galleria.run('.galleria', option); </script>
■SyntaxHighlighter
SyntaxHighlighterは、ソースコードを装飾表示するスクリプト。
このBlogでは、HTMLとJavaを、装飾表示する形で導入している。
記事内では、preタグ内にソースコードをエスケープ処理してペーストする。
<link rel="stylesheet" href="/syntax/styles/shCoreDefault.css">
<script src="/syntax/scripts/shCore.js"></script>
<script src="/syntax/scripts/shBrushXml.js"></script>
<script src="/syntax/scripts/shBrushJScript.js"></script>
<script>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
エスケープとは、「<」は「<」、「>」は「>」と書き換えることを意味する。
読み易さのため、コード内のリンクを無効にするなどの調整をしている。
<pre class="brush: js; html-script: true; toolbar: false; auto-links: false">
エスケープ処理したソースコード
</pre>
■Handsontable
Handsontableは、 こちらのように、表計算を描画するスクリプトだ。
表の形式で数字を書いたのとは違い、表計算そのものを書いている。
Handsontableの実装は単純ではないので、この記事では割愛する。
B&Sブログランキング参戦中!
クリックしてやってください!
コメント