[作者サイトへ]

FC2共有テンプレート

【 d-01_gallery の解説 】



★利用にあたっては特に難しいこともないと思うんですが、文章下手で必要以上にややこしい説明になっちゃってる気がします。まずは色々投稿してみて、「ありゃ？」ってなった時に以下を参照してみる、って感じでよろしいかと。
　熟読する必要はありません、必要なところだけ拾い読みしてくださいませ。

★当テンプレートが気になった方には、webbingstudioさん作のgallery_001、gallery_002 もおすすめです。

■■　重要なお知らせ
 　個別表示時に画像の表示が狂う不具合がありました。修正版をアップしました（07/07/05）ので、ご入用の方はよろしくどうぞ。
（HTML中冒頭に「★★d-01_gallery（Ver1.29）★★」と入っているものが最新版です）


■■ 基本仕様/概要

■写真やイラストなどのギャラリーやカタログ、としての利用を想定したテンプレートです。 漫画展示などにも使えるかも。他の用途には使いにくいかもしれませんが、もちろんアイディア次第でご自由にどうぞ。

■「見せる（見せたいものを並べる）」ことよりも、「見てもらう（お客さんが見やすい/見たいように見てもらう）」ことを意識したテンプレートです（のつもり）。
　重い時間帯でもとりあえず表示してゆく（完全に表示されてなくてもクリックできる場所がある）ので、はじめて訪れたお客さんにも見てもらいやすい形になってる・・・かな？

■基本的に、毎エントリーの「本文」冒頭に画像を貼り付けてあることが前提のテンプレートです（※）。サムネイルを活用するとより軽量に表示されます。

■各画像にコメントしてもらいやすい構成…かも。

■「プロフィールの編集」で手軽に更新できる「info」ページを標準装備。

■「ユーザータグ」で関連画像を分類できる。→タグを辿って色々見てもらえる、かも。→画像検索システム的な使い方も。

■プラグインはカテゴリー3のみ対応、infoページに表示。

■サムネイル表示時は、サムネイルを幅110pixにリサイズして表示しています。

■個別表示時のページの幅は600pix。→アップロードする元画像の幅は600pix以下が吉。

■広告表示などにまぎれて見難いですが、ページ下部の文字列の中に管理ページへのリンクがあります。活用を。

■改造・転用・再登録諸々、ご自由にどうぞ。




■■ 投稿について/使い方

■画像について
　PNG、JPG を「サムネイルも作成する」でアップロードし、「記事を書く(サムネイルを使用) 」から記事を編集してください。

　サムネイルを使わず投稿すると、大きな画像を強制的に縮小して表示します（＝画像の重さは重いまま）。ので、表示が重くなります。
　既に元画像で投稿しちゃってる記事がいっぱいあるよーという場合でも、重いながらもとりあえず表示はされますが、新たに投稿するものはサムネイルで投稿することをお勧めします。（根性があれば過去の画像もサムネイルで投稿しなおせばモアベター）

※GIFでも投稿できますが、FC2ではGIFをアップロードしてもサムネイルは生成されません。よって、サムネイル表示ページにおいてGIF画像は元画像を強制的に縮小して表示します。ので、重いGIF画像で投稿するのはお勧めできません。

※GIF画像でサムネイルを利用するための改造はこちら
※サムネイルを自分で作成して利用する方法はこちら
※アップロードする画像のファイル名に関する注意はこちら


■「本文」について
　「記事を書く(サムネイルを使用) 」で「本文」部分にサムネイル表示のためのHTMLタグを挿入したら、続けてちょっとしたメモ（撮影データなど？）を記入してください。

　尚、サムネイル表示時（トップページ等）では、「本文」中にある画像のうち一番最初のものがサムネイルとして処理・表示されます。
　又、個別表示時には、その画像は元画像で表示されます。よって、（ブログの表示領域の幅が600ピクセルなので）元画像の幅は600ピクセル以内が望ましいです。

※「本文」中に画像が無い場合や、その画像の前に絵文字を使っている場合などは、ちょっと問題発生する場合があります。くわしくはこちら
※サムネイル表示時や個別表示時でどういう処理を行っているか、についてはこちら


■「追記」について
　追記は、特別な処理などは行っていません。個別表示時に（「本文」に続けて）普通に表示されます。


■ユーザータグについて
　記事投稿の際、「※詳細な設定/追記を設定する」の中にある「ユーザータグの設定」という項目で、記事毎に「ユーザータグ」を設定することが出来ます。
　ここで、画像に関連する言葉（タグ）を設定しておくと、個別表示ページにおいて「関連タグ」というのが表示され、同じタグを設定してある画像を探すことができるようになります。例えば、海を写した写真を投稿する場合は「海」「風景」といった単語を設定しておくと良いでしょう。
　適切にタグを設定しておくと画像が大量になってきた時に威力を発揮します。記事のカテゴリー分けや、前述した「本文」、タイトルなどと合わせて、画像分類に活用してみてください。タイトルや追記も自サイト内検索の対象になりますよ、参考までに。

　とはいえ、（自分もそうだったんですが）この手の分類云々って、自分なりのやりかたが固まるまで（そしてそれが自分の中に浸透するまで）上手い分類法ってなかなかつかめないと思うんです。特に、タグ付けはなかなか難しい。
　ので、最初のうちはとりあえずで少なめにタグを付けておいて、慣れるまでは後から適宜タグの追加・削除を行うつもりで、という方向が良いかと思います。明確な方向性が決まってるのでない限り、最初からガチガチにタグ付けしちゃうと あとから分類が破綻しちゃう、気がします。
　あんまりデタラメでも有益なタグになりませんが、最初は深く考えずにどんどん投稿しちゃいましょ。作品が増えてくれば、全体の中でその画像につけるべきタグは？ってのが見えてくると思いますですよ。

　自分の作品集と考えて、その目次を作る・あるいは付箋を貼るつもりで分類していくと良いかもしれませんね。

　尚、当テンプレートの見栄え上、カテゴリーはあまり増やさない方がかっちょいい、かも。特にギャラリーとして使う場合は、細かすぎるカテゴリー分けは閲覧者観点からもよろしくないように思います。


■infoページについて
　infoページは、管理画面の「プロフィールの編集」で設定した「プロフィール画像」と「プロフィール説明」が反映されます。
　もちろんプロフィールを書いておくのも良いですが、管理画面から手軽に書き換えれるので、お知らせページやプチ日記などのようにして使っても楽しいかもしれません。
　又、「プロフィール説明」ではHTMLも使えるので、各種ブログパーツ（掲示板など？）を設置してみるのも面白いと思います。アイディア次第でご自由に。

■プラグインについて
　「プラグインを有効にする」に設定してあると、infoページにプラグインカテゴリー３のみが表示されます。プラグインカテゴリー１・２は非表示なので、必要に応じて管理画面の「プラグインの設定」から編集してご利用ください。


■■ 画像投稿のコツとプチ改造

　当ブログでは、サムネイルを表示する際、都合上サムネイルの画像幅を強制的に110pxにリサイズして並べています。ので、管理画面＞環境設定の変更＞ブログの設定＞サムネイル設定(デフォルト値)の設定もそれに合わせるとより良いかもしれません。（幅を110に、高さはちょっと余裕を持たせて200ぐらいにでもしておけばいいかな）。
　よくわかんないや、その辺の設定とかいじれないや、という人はそのままでもオッケーかな。

　又、当ブログの表示領域幅は600ピクセルなので、元画像の幅も600ピクセル以下にすると吉。（元画像がそれより大きいと、個別表示時に画像がはみ出てしまいます）
　既に600ピクセル以上で投稿している画像が大量で変更なんてしてられない！という場合は、元画像の幅に合わせてテンプレートの幅も広げてあげると良いかもしれません。あるいは、個別表示時の画像の幅を強制的にリサイズしてみるのも場合によっては（苦肉の暫定策としては）アリかも。（→参考）
　暫定ではなく、どうしても巨大画像を見てもらいたいんだ！という場合は「追記」にサムネイルで投稿する（クリックで拡大）、としておくのが良いかもしれませんね。

　ちなみに、デフォルトでサムネイルは横に５枚ずつ並びますから、同じくブログの設定で「１ページに表示する記事の数」を５の倍数にしておくと良いでしょう。（あまり多くすると見てもらえないページになってしまうので注意）

　で、ギャラリーとしての綺麗さを求めるのであれば、元画像は常に同じ縦横比に成形しておくと、サムネイルが綺麗に並んでくれて素敵な感じです。例えば、常に横撮りした写真を使用する、といった用法にぴったり。

　…でも、投稿したい画像がいつも定型とは限りませんよね。サムネイルを綺麗に並べることを重視するなら常に定型に整形して投稿するのが賢明ですが、縦撮り・横撮りは自由に決めたいし、イラストなら自由な縦横比で作成したいもの。
　そんな場合、サムネイルの並び的に見栄えが気に食わないかもしれません。その場合はお手数ですがテンプレートを改造しちゃってください。

　改造ポイントは以下の通り。都合に合わせて色々試してみてください。又、テンプレートは改造せずにサムネイルを別途用意する方法、も後述しますので、参考までに。

■サムネイルのリサイズ
CSS内の、/*■■ サムネイル表示（個別ページ以外）■■*/以下の .thumb_all img に 
     width:110px;/*←サムネイルのサイズ指定。
  　               　都合に合わせて変更・削除のこと*/
という部分があります。縦横比とか並び方とか気にしないや、という場合はいっそ削除してしまう（→サムネイルがそのまま表示される→サムネイル設定でサイズ調整？）ってのも手ですね。
　又、「サムネイルなんて縦横比が多少崩れても雰囲気だけ伝われば十分だ、それより美しく並んでいて欲しい」という場合は、横幅110px、と共に高さも指定しておくのが良いでしょう。

■サムネイルの枠線
　イラストなどの場合、枠線が無い方が見栄えるかもしれません。サムネイルのリサイズと同様に、CSS内の .thumb_all img にある 
     border:1px solid #999999;/*←サムネイルの枠線*/
って部分と、.thumb_all img:hover にある 
     border:1px solid #000000;/*←マウスオン時の枠*/
と、枠線を指定してるので、この枠線の色を #FFFFFF （背景色と同じにする）にしてみると良いでしょう。

■サムネイルの表示位置
　同じく/*■■ サムネイル表示（個別ページ以外）■■*/以下の.thumb_all で 
     text-align:center;
として中央寄せにしてます。場合によってはcenterをleftなどとした方が見栄えるかもしれません。

■そのほか
　同様に、/*■■ サムネイル表示（個別ページ以外）■■*/近辺でサムネイル表示の各種設定を行っています。サムネイルのmarginやpaddingを調整したり、サムネイルの背景にお好みの画像を置いてみたりしてお楽しみください。

★ちなみに・・・
　当テンプレートでは、サムネイルと元画像をJavaScriptで書き分けてます。具体的には、

・サムネイル表示時：「本文」を検索し、最初に現れる 「<img」〜「>」を抜き出して、それをそのままサムネイルとして書き出す。

・個別表示時（元画像の表示）：同様に抜き出したimgタグを、更に「[元画像のファイル名]s.jpg（.png）」（＝元画像アップロード時に自動生成されるサムネイル画像のファイル名） から 「[元画像のファイル名].jpg（.png）」（＝s を取り除くことで元画像のファイル名になる） に置き換えて、書き出す。

…ということをしてます。更に、個別表示時では、「本文」全体を検索し、最初に現れるimgタグを取り除いて、残り全部をを本文として表示する、ということをしています。

　つまり、本文の中で最初に置いた画像については、

・「[元画像のファイル名].jpg（.png）」に対して、「[元画像のファイル名]s.jpg（.png）」（＝アップロードの際に自動生成されるサムネイル画像。拡張子の前にsが付けられる）が存在しており、「本文」の冒頭に そのサムネイル画像が貼られている

…のが前提となっています。

　上記諸々を逆に利用すると、自分で別途作成したサムネイル画像を「[元画像のファイル名]s.jpg（.png）」としてアップロードすることで、自分で用意したサムネイルを表示させることができます。ひと手間かかってしまいますが、サムネイルに凝りたい人は活用してみてください。
　コマ漫画などを掲載していきたい場合などは、タイトルとコマの一部を配置したサムネイルを別途作成すればよりキャッチーな装丁になるかと思いますよ。（GIF画像でそれをやるための改造方法は後述）

　ちなみに、「本文」に元画像を使っても（元画像ファイル名に末尾が s でなければ）フツーにサムネイル表示してるように見える仕様、になってます。
　ただ、前述の通り元画像をリサイズして表示するだけなので、ページ容量としては元画像を並べてるのと同じになります（＝見た目の割に激重なページになりかねない）。

　逆に、元画像がそれほど重くない場合は、サムネイルを作らずに元画像で投稿するのもアリかと思います。元画像を軽量に仕上げるコツを心得てる人はお試しあれ。（ファイル容量も節約できるしね？）

★注意！
　上記のような処理をしているので、
・サムネイル画像が用意されておらず（＝「[元画像のファイル名]s.jpg（.png）」が存在していない）
・かつ、[元画像のファイル名]の末尾が s である
という場合、個別表示時に画像が表示されない ので注意してください。

　とは言っても、「サムネイルも作成する」で画像をアップロードし「本文」でそのサムネイル画像を使用する限りは、ファイル名の末尾が s でも問題なく表示されます。
　つまり、普通に jpg や png でサムネイルを利用してる分には気にしなくていいはずです。（○○s.jpg、という元画像に対して ○○ss.jpg、というサムネイル画像が自動生成されるからね。）
　・・・「あれ、表示されないぞ？」という場合の参考までに。

　何言ってんのか よくわかんねーよ！という場合は、とりあえず、本文に画像を貼り付ける際は「記事を書く(サムネイルを使用) 」で！と覚えておくとよろしいかと思います。

　当テンプレートは、なるべくルーズに使えるものを、という方向で設計してるので上記のような仕様にしましたが、ある程度HTMLを理解していれば、自分仕様に美しくサムネイルを並べるための改造も（その辺のHTMLはシンプルにしたつもりなので）難しくないと思います。（縦横比を指定したボックスでくくっちゃう、とかね）。


■参考 　ちなみに、デフォルトでは

・ブログ全体の表示幅は620px
　そこから左右それぞれ10pxのpaddingをとっているので表示エリアの内寸幅は600px。
・サムネイル画像自体は幅110px。
　＋margin:2px、padding：2px、border:1px、でサムネイル幅計120px。
　×5＝600、でちょうど横一列が５枚。
・サムネイルの縦サイズは指定せず。
・imgにalignなどは指定せず、単純に画像を表示していくことで並べている。

と、スタイルシートで設定しています。

　又、個別表示時の元画像については、「entryimg」というクラス名をあてています（デフォルトのスタイルシート中では未記入＝未指定）。元画像表示を装飾したい場合は、「entryimg」でスタイル指定してみてください。
　又、既に幅600px以上の画像を多数投稿していてアップロードとかしなおすの面倒！といった場合などは、画像の幅を都合に合わせて指定するのも（とりあえずのはみ出回避策として）アリかもしれません。（が、画像の重さ自体はかわらないので注意。見てもらうための展示であれば、やはり巨大画像は避けて吉。巨大で重いサムネイルもまた然り。（自分が見れればそれでいいという場合はこの限りではないけども））

　以上、改造の参考までに。


■■ GIFでサムネイルを利用するための改造

　特にイラストや漫画の場合、GIFの方が綺麗・又は軽量、な画像にすることができる場合もあるので、GIF画像を主に使用したいという人もいるでしょう。

　ですが、前述の通りGIFは普通にアップロードしただけではサムネイルは生成されず、それを「本文」に貼り付けて投稿すると、その画像をそのまま縮小してサムネイルとして表示してしまいます。
　それだと、例えばGIFでコマ漫画などを載せたい場合は不都合かもしれません。

　そこで、まず以下の改造を施します。（改造と言っても1行追加するだけです）
HTML中の <!--■■■■■　記事表示（個別表示）　■■■■■--> 以下にあるJavaScript部分に、以下の記述があります。 
entryimg = entryimg.replace('s.png','.png');
entryimg = entryimg.replace('s.jpg','.jpg');
これは、「本文」中に「〜s.png」があれば「〜.png」に、「〜s.jpg」があれば「〜.jpg」に置き換える（つまり、「本文」で使われてるサムネイル画像を、個別表示モードでは元画像に書き換える）、ということをしているわけですが、ここに１行加えて、 
entryimg = entryimg.replace('s.png','.png');
entryimg = entryimg.replace('s.jpg','.jpg');
entryimg = entryimg.replace('s.gif','.gif');
とします（太字部分を追加）。

これで、GIF画像もJPG/PNG画像と同様の処理をするようになります。

　上記の改造を施した上で、

１、元画像（○○.gif）をアップロードする。
２、元画像とは別に、サムネイル画像を自分で作って、「○○s.gif」という名前でアップロードする。
　これで、あとはそのサムネイル画像を使って「本文」を書けばオッケーです。

　ちょっと手間ですが、お試しあれ。

■ウラ話

　上記の改造、１行追加するだけなんだから元から追加しておくか、とも思って悩んだんですが、ファイル名の末尾に s、ってのは割とありがちなんじゃないかと思いまして、リスク軽減のためにこういう仕様にしてみました。

　その１行を追加することで、よくわかんないよ！という人が深く考えずに使う場合のリスクがちょい高まってしまうのでそれを避けつつ、その一方で、ちょっと凝ったことをしようという発想がある人なら拡張子云々のことはわかってるだろうし、そういう人（≒ここまで読み進めるような人？）ならこのぐらいの改造は難しくないだろう・・・という。

　その考えが的を射てるかどうかは微妙なところだし、的を射てたとしても説明が下手でわかり難いかもですが…いかがなもんでしょね。


■おまけ１・月毎表示
　当テンプレートは、個々独立した画像を閲覧者の直感的な興味に沿って好きな順番で見てもらおう、という方向で構成しており、その構成上（サムネイル一覧でどんどんさかのぼっていける）、月毎表示モードは不要と考えました。
　が、用途によっては月毎にさかのぼって見せたい場合もあるでしょうか。必要であれば、HTML中に 
<!--■月別表示へのリンク（必要なら開放のこと）
<nobr><a href="<%url<blog-date-<%now_year<<%now_month<.html" title="info" alt="info">月別</a></nobr>
-->
という部分がありますから、末尾の 
-->
を移動して、 
<!--■月別表示へのリンク（必要なら開放のこと）-->
<nobr><a href="<%url<blog-date-<%now_year<<%now_month<.html" title="info" alt="info">月別</a></nobr>
としてください。するとカテゴリーに並んで「月別」というリンクが現れますから、そこから月毎表示モードに行けるようになります。

　尚、いわゆる月別アーカイブ（記事のある月へのリンク、の一覧）はサポートしてません。（もし必要になるとしたら月別アーカイブの方かな、という気もしましたが…infoページをうまく活用してみてください。）



■注意：「本文」に画像が張られてない場合・画像の前に絵文字を使用している場合

　「拍手」や「ブックマークする」のボタンを表示する設定にしており、かつ「本文」に画像を含めず、かつ追記なしで投稿した場合、「拍手」もしくは「ブックマークする」のボタンがサムネイルとして表示されてしまう場合があります。
　これは、サムネイルを前述したような方法で表示しているため、本文にサムネイル表示すべき画像がが含まれていないと、そのほかの画像を元に処理を行ってしまうためです。
　又、本文に表示したい画像を貼っていても、それより前に絵文字などを置いた場合も同様です（絵文字がサムネイルとして表示されてしまう）。

　問題が無いわけではではないのは承知ですが、当テンプレートの趣旨に沿って利用する上では不都合は少ないだろうということで、当面はこのままの仕様とします。


　当テンプレートの仕組みを理解した方であればトリッキーな使い方も可能かとは思いますが、よくわかんないよ〜という方は、とりあえず 「本文」はまず冒頭に画像を貼り、文章を入れる場合は画像の後に、としておけば間違いないはずです。
　逆に、なんか表示が変なんですけどーという場合はその辺をチェックしてみてください。



★★ ver1.2〜の変更点

　以前のバージョンでは、個別表示時に「本文」に記入した文章が表示されない仕様でしたが、ver1.2以降 では本文の文章も表示するようになりました。それにより多少利便性・投稿文章の自由度が上がっている、かもしれません。（他テンプレートから移行する際の親和性もアップした、かも。）

　具体的には、HTML中の 「■■■■■■記事表示（個別表示）■■■■■■」 以下にある 「★★ Ver1.2追加部分★★」 という部分を追加しました。

　この変更により、「本文」には画像＋ひとことコメント（撮影データやキャプション等？）、「追記」はそのほか文章・補足説明など、という使い方を想定した仕様になりました。
　また、それにより、追記やユーザータグの設定が必要なければいちいち「※詳細な設定/追記を設定する」を開かなくてよくなりました（本文だけで投稿が完結する仕様）。
　ただし、あまり長文向きではないという点はかわりません。…もちろん、それは当方の意図として、というだけなので、もし不都合を感じなければ「本文」「追記」共に長文記入可能ではあります。

　あと、「本文（.entry_body）」と「追記（.entry_more）」それぞれに別スタイルを指定できるようになっています。スタイルシートを読める人は、都合に合わせて改造してご利用ください。
　例えば、「本文」に撮影データのみ、そのほかコメントは「追記」に、という使い方をする場合、本文の文字を斜体にするなどすると、写真ギャラリーの装丁としてちょっとそれっぽくなるかもしれません。

　ほかにも、いくつかの改良・不都合修正などを加えています。よろしければ最新版（ver.1.29）をダウンロードしてお試しください。
　尚、07年7月現在、FC2の仕様上、旧テンプレートを削除してからでないと同名のテンプレートはダウンロードできません。旧テンプレートを削除してから新たにダウンロードの事。

　尚、一時、致命的欠陥を持ったもの（個別表示時の表示が致命的に変、という症状）を公開しておりました。それをダウンロードしてしまった人、ごめんなさい。


■謝辞
　私自身、HTMLとかよくわかってない部分があります。注釈を入れたりして極力わかりやすく？改造しやすく？構成したつもりではありますが、ちょっと見難いことになってるやも。
　JavaScriptとかも使ってますが、非効率なこととかしてるかも。おかしなことしてるかも。我ながらなんか無理矢理っていうか力技？な感じがしてます。できることなら熟知している人に整理とシェイプアップを願いしたいです。

　と、そんな感じで趣味で作った無責任なテンプレートなので、著作権とか主張しません。改造や改造後の再登録など、諸々ご自由に。好きに楽しんでもらえたなら幸いです。
[作者サイトへ]