ずぼログ設置手順

大まかには

zipファイルのダウンロードと解凍
解凍したフォルダのアップロード
ずぼログを使いたいページの編集
（fuwaimgを利用する場合で、まだfuwaimgを設置していない場合は）fuwaimgの設置

の３ステップです。

zipファイルのダウンロード

配布ページからzipファイルをダウンロードします。ファイルの内容は以下の通りです。

zubolog
├_config.php
├_core.php
├index.html
├zubolog.css
├ライセンス表記.txt
└templates（フォルダ）
…├comic.php
…├default.php
…├fancybox.php
…└lightbox.php

zubologフォルダを、フォルダごとサーバーの任意の場所にアップロードします。

ずぼログを使用するページの用意

最初に、ずぼログを使用するページの拡張子が.htmlの場合は、必ず.phpに変更してください。

拡張子が.htmlのままでは、PHPプログラムを使用できないためです。.phpファイル中ではPHPはもちろんHTMLも記述できるため、.htmlファイルをそのまま.phpに変更しても、.htmlファイルのときとほぼ同じように動作させることができます。ただし、.phpファイルはローカル環境での動作確認ができない点にご注意ください。.phpファイルの動作確認はサーバーにアップロードして行ってください。

CSSおよびPHPコアファイルの読み込み

ずぼログを使用したいページの<head>～</head>の任意の場所に、以下の記述を追加します。できるだけ</head>閉じタグの直前にコピペしてください。

<link rel="stylesheet" href="zubolog/zubolog.css">
<?php
//  include：ずぼログ本体を読み込む関数です。
//  現在ファイルからの相対パスを記述してください。
include('zubolog/_core.php');
$zubologApp = new zubolog();
?>

このコードで、ずぼログ用のCSSおよびコアファイルを読み込みます。<link rel...>およびinclude...の行に書かれているファイルのパスは、zubologフォルダのアップロード場所に合わせて、適宜変更してください。

画像一覧を表示したいところにPHPの記述を追加

画像一覧を表示したい（ずぼログを出力したい）ところに、以下のコードをコピー＆ペーストします。

<!-- ずぼログ　一覧出力　ここから -->
<ul class="zubolog zubolog_2 zubolog_md-3">
<?php

// 初期設定はじめ※※-----------------------------------------------

// 一覧表示したい画像が入っているフォルダの、現在ファイルからの相対パスを指定してください
// スラッシュなどの抜けにご注意ください
// 例　$zubolog_dir = ['images/logs/'];
// 例　$zubolog_dir = ['../images/logs/'];　←一つ階層が下にあるフォルダの場合
// 例　$zubolog_dir = ['logs/', 'old_logs/'];　←複数フォルダの画像を拾いたい場合は、半角コンマで区切ります
$zubolog_dir = ['logs/'];

// １ページあたりに表示したいログ数を半角英数字で指定して下さい
// １ページ10件表示の場合は'10'、全件表示は'-1'です
$zubolog_perpage = '6';

// デフォルト（true）ではファイル名の降順（9→0、Z→A）でログが出力されます。
// 昇順（0→9、A→Z）でログを出力したい場合は$zubolog_sortの値をfalseに書き換えてください。
// マンガなど、ページを連番でファイル名につけている場合で、連番の通りに表示したい場合は「false」を指定します。
$zubolog_sort = true;

// 使用テンプレートファイルを変更する場合は、ファイル名を指定してください
$zubolog_temp = 'default.php';

// テンプレートで変数を利用する場合は設定してください。
// fuwaimgの展示グループ分けなどに利用できます
$zubolog_var = 'logs1';

// 初期設定おわり---------------------------------------------------

// ログを出力する関数です。
echo $zubologApp->createZubolog($zubolog_dir, $zubolog_perpage, $zubolog_sort, dirname(__FILE__), $zubolog_temp, $zubolog_var);

?>

</ul>

<!-- ずぼログ　一覧出力　ここまで -->

<!-- ずぼログ　ページネーション　ここから -->

<?php

// ずぼログ　ページネーションを出力する関数です。
// ページネーションが不要の場合は削除してください。
echo $zubologApp->createZubologPagenation($zubolog_dir, $zubolog_perpage, $zubolog_sort, dirname(__FILE__));

?>

<!-- ずぼログ　ページネーション　ここまで -->

ずぼログ出力コードの編集箇所

ずぼログの初期設定（変更必須）

初期設定はじめ※※と書かれたところから、初期設定おわりと書かれたところまでに、４つの設定箇所があるので、必ず変更してください。

一覧にしたい画像が入っているフォルダ
$zubolog_dir = ['logs/'];　を変更します。編集しているファイルの入っている階層から、相対パスで記述します。複数のディレクトリを指定する場合は、['logs/', 'logs-2'];のように半角カンマで区切ります。

１ページあたりの表示画像枚数
$zubolog_perpage = '6';　を変更します。フォルダ中の画像が指定した数字よりも多い場合は、2ページ目以降にページ分けされます。すべての画像を表示したい場合は$zubolog_perpage = '-1';とします。

画像の並び順
$zubolog_sort = true;　を変更します。trueではファイル名降順（9→0、Z→A）、falseではファイル名昇順（0→9、A→Z）になります。

出力するHTMLのテンプレート指定
$zubolog_temp = 'default.php';　を変更します。

default.php：fuwaimgを利用した展示テンプレート
lightbox.php：Lightboxを利用した展示テンプレート（動作確認はLightbox2系で行っています）
fancybox.php：fancyboxを利用した展示テンプレート（動作確認はfancybox4系で行っています）
comic.php：マンガの展示を想定したテンプレート

同梱されたPHPファイルを参考にテンプレートを編集・自作してもＯＫです。自作したテンプレートは必ずPHP形式にしてtemplatesフォルダに入れてください。

変数の指定
$zubolog_var = 'logs1';　を変更します。fuwaimgやLightbox、Fancyboxの展示のグループ分けに利用されます。よく分からなければ変更しないで構いません。

出力したログを囲むタグの編集（任意）

　の直後および　の直前に、<ul class="zubolog zubolog_2 zubolog_md-3">　および対応する閉じタグ　</ul>が記述されています。こちらのタグは、利用するテンプレートのHTML記述内容に合わせて削除したり、編集して構いません。

また、テンプレート「default.php」を利用する場合、<ul class="zubolog zubolog_2 zubolog_md-3">のclassを編集することで、サムネイルの大きさを変更することができます。

zubologクラス	必須クラスのため削除しないでください。
zubolog_Xクラス	Xの部分に1～20までの半角数字を記述します。スマホなど、小さな端末で閲覧したときの 1行あたりのサムネイルの数を指定します。（画面横幅～600px）
zubolog_md-Xクラス	Xの部分に1～20までの半角数字を記述します。タブレットなど、中サイズの端末以上で閲覧したときの 1行あたりのサムネイルの数を指定します。（画面横幅601px～）
zubolog_lg-Xクラス	Xの部分に1～20までの半角数字を記述します。標準的な大きさのPC以上で閲覧したときの 1行あたりのサムネイルの数を指定します。（画面横幅1026px～）
zubolog_xl-Xクラス	Xの部分に1～20までの半角数字を記述します。大きめのPCで閲覧したときの 1行あたりのサムネイルの数を指定します。（画面横幅1241px～）

例えば、<ul class="zubolog zubolog_2 zubolog_md-3 zubolog_xl-5">という記述では、スマホではサムネイルが1行あたり２つ、タブレットおよび標準的な大きさのPCでは1行あたり３つ、大きめのPCでは１行あたり５つになります。

<ul class="zubolog zubolog_5">ではどの端末から見ても１行あたりのサムネイル枚数が５つになります。

ずぼログ出力HTMLの編集

ずぼログで出力されるHTML記述を編集したい場合は、zubolog＞templatesフォルダの中に自作のテンプレートを作成するか、既存のテンプレートを編集します。

テンプレートdefault.phpの中身は以下の通りです。

<?php
// 画像１枚ごとに、ここに記述したHTMLに沿って出力されます。
// $filepass　は展示したい画像ファイルの相対パスです。
// $thumnailpass　はサムネイルとして見せる画像ファイルの相対パスです。
// $zubolog_var　は初期設定で入力した変数です
// $caption、$caption2　は別途CSVファイルでキャプションを設定した場合に出力されるキャプションです
// 出力したいログ展示HTMLに併せてカスタマイズしてOKです。
?>

<li>
<a href="<?php echo $filepass; ?>" data-fimg="<?php echo $zubolog_var; ?>" data-fcaption="<?php echo $caption; ?>" class="fuwaimg">
<img src="<?php echo $thumnailpass; ?>">
</a>

<!-- 2つ目のキャプションを利用する場合　始まり -->
<?php if($caption2 !== '') : ?>
<div class="popup">
<p>
<?php echo $caption2; ?>
</p>
</div>
<?php endif; ?>
<!-- 2つ目のキャプションを利用する場合　終わり -->

</li>

default.phpではfuwaimgに合わせた出力HTMLになっていますが、fuwaimgを利用していない場合は適宜書き換えてください。

fuwaimgを利用したい（ずぼログデモのように、画像をふわっと表示させたい）場合は、fuwaimgをダウンロードし、設置してください。

サムネイル画像を用意する

ずぼログでは、展示画像のサムネイルを別途指定することができます。ネタバレやセンシティブなどワンクッション置きたい展示物に利用したり、イラストや写真の特に見せたい部分を切り抜いてサムネイルにしたい場合にご活用ください。

例えば、sample.jpgという画像ファイルのサムネイルには、sample_th.jpgという名前の画像が適用されます。sample_th.jpgという名前の画像ファイルがない場合には、sample.jpgがそのままサムネイルになります。展示する画像のファイルと、サムネイルとなる画像ファイルとでは、拡張子が異なってもかまいません。

サムネイルの命名ルールを好みに変更したい場合は、zubologフォルダの中の_config.phpを編集してください。サムネイルの名前のどこかに必ず対応する画像ファイルのファイル名が含まれるようにしてください。

// サムネイル設定 ------
// サムネイルとして利用するファイルの名前の設定
// 例えば、image.jpg　のサムネイルを image_th.jpg にしたい場合は filename_th
// image.jpg　のサムネイルを th_image.jpg　にしたい場合は　th_filenameにしてください。
// 対応するファイル名を「filename」に置き換えます。
$thumbnail_name = 'filename_th';

キャプションを利用する

画像を拾う指定をしたディレクトリの中に「caption.csv」という名前のテキストファイルを作り、その中に1行ごとに下記のようにキャプションを記述すると、ログ出力時に反映されます。

sample_01.jpg,"ここにsample_01のキャプション"
sample_02.jpg,"ここにsample_02のキャプション","ここにsample_02のキャプションその２"

1行ごとに、キャプションをつけたい画像のファイル名（拡張子まで）と、つけたいキャプションの内容を半角コンマで区切って記述します。記述の順番はバラバラでも構いません。

キャプションは、半角コンマ,で区切ることで１つの展示につき２つまで設定することができます。デフォルトのテンプレートでは、２つめのキャプションはサムネイルをホバーしたときに表示されます。ホバーキャプションが不要な場合は、使用しなくても問題ありません。

caption.csvは、同じディレクトリに入っている画像につけるキャプションしか指定できないのでご注意ください。logs01ディレクトリ内の画像につけるキャプションはlogs01/caption.csvに、logs02ディレクトリ内の画像につけるキャプションはlogs02/caption.csvに記述する必要があります。

カスタマイズについて

カスタマイズについてのよくある質問には、Q&Aにて回答しています。

ずぼログ 設置手順