• 虹色ミツバチ
  • freoカスタマイズメモ、テンプレート・プラグイン配布/officeTIPS
検索プラグイン
虹色ミツバチ

> Entry >freo>freo講座>初心者の為のfreoサイト運営講座> 【イラスト編(01)】freoでイラストを展示してみる。

【freo】【freo講座】【初心者の為のfreoサイト運営講座】【イラスト編(01)】freoでイラストを展示してみる。

freoを使ってイラストや漫画を展示してみます。

freoでイラストや漫画を展示する方法は色々あります。
それぞれ私見を交えて紹介していきますので、好きな方法・やりやすい方法などを探してみてください。

freoでイラストや漫画を展示する時には、主に下記の4つの機能を使うとよいでしょう。

  • エントリー機能
  • ページ機能
  • メディア機能
  • プラグインの利用

それぞれの特色を理解して、やりやすい方法・見せやすい方法を選択する手助けになれればと思います。

まずは、エントリーで画像を表示するときの解説です。

エントリーについて

エントリーはfreoで使える日記機能です。
エントリーには、ファイルイメージの2種類のファイルを登録することができます。
オプション(ファイルアップロード)を使うと、上記2種以外にもファイルを添付することができます。
本文の中でメディアに登録した画像や他の場所にアップロードしてある画像をIMGタグを使って表示させることも出来ます。

また、エントリーはカテゴリーわけができます。
このように、1件のエントリー上で画像を表示する方法は色々あります。

エントリーで利用できる画像について

エントリーで利用できる画像は、エントリーファイル(及び自動作成されたサムネイル)・エントリーイメージ・本文内に挿入されたメディア・オプションのファイルアップロードでアップロードした画像の4種類です。

[管理画面]→[設定管理]→[エントリーの設定]で、エントリーの[添付ファイル]を利用するか、利用する場合の詳細を設定できます。
[添付ファイル][利用する]に設定すると、[エントリーファイル][エントリーイメージ]を登録できるようになります。
また、[自動でサムネイルを作成する]に設定すると、[エントリーファイル]を登録した際、[サムネイル]を自動作成してくれるようになります。

エントリーファイルについて

エントリーファイルは、エントリーに関連付けて登録したいオリジナルサイズのファイルです。
画像、ZIP、PDFなどいろいろな種類のファイルを登録できます。
エントリーファイルが画像であり、設定管理で[自動でサムネイルを作成する]を設定していた場合は、サムネイルを自動で作成してくれます。

エントリーファイルを登録すれば、登録したエントリー上にファイルを表示してくれますが、ファイルのサイズが大きい場合、そのまま表示するには問題があるように思います。
そういう時、[エントリーイメージ]を登録したり、[自動でサムネイルを作成する]設定にしておけば便利です。

エントリーイメージについて

エントリーファイル及びエントリーイメージが登録されていると、画面上にはエントリーイメージが表示され、ファイルへのリンクが貼られます。
任意の画像を表示しておいて、ファイルへのリンクを貼りたい場合はエントリーイメージを登録するといいでしょう。
たとえば、エントリーファイルのある一部分だけをサムネイルとして表示させたい場合などは、自分でサムネイル用のエントリーイメージ画像を用意しておいて、エントリーファイルと一緒にエントリーイメージとして登録しておけばOKです。

エントリーファイルのサムネイルについて

いちいち自分でエントリーイメージを作成・登録するのが面倒な場合、また、エントリーファイルが大きいので小さく縮小したい場合などは、[自動でサムネイルを作成する]機能を頼ればいいと思います。
管理画面→設定管理→エントリーの設定で[自動でサムネイルを作成する]を設定しておくと、エントリーファイルを登録した時に自動でサムネイルを作成してくれます。

ただし、ここで作成してくれるサムネイルは、エントリーファイルの全体が設定した横幅または縦幅に縮小されて表示されてしまいます。
つまり、自分がサムネイルとして表示させたい部分だけを切り取ったサムネイルを作成してくれるわけではないということです。

エントリーファイル(及び自動作成されたサムネイル)・エントリーイメージの表示ルールについて

デフォルト(テンプレートになにも編集を加えていない状態)の場合、エントリーイメージが登録されておらず、サムネイルが作成されていた場合(エントリーファイルが登録されていて、かつエントリー設定で自動的にサムネイルを作成するを選択していた場合)、自動作成されたサムネイルが表示され、エントリーファイルへのリンクが貼られます。

エントリーイメージも自動作成されたサムネイルもなく、エントリーファイルが画像だった場合(エントリーファイルに縦幅と横幅があった場合)は、エントリーファイルがそのままエントリー上に表示されます。
最後に、エントリーイメージが登録されておらず、登録されているエントリーファイルが画像でなかった場合は、エントリーファイルへのテキストリンクが表示されます。

このように、エントリーではファイル・イメージ・サムネイルを利用することができますが、これらはテンプレート上にあらかじめ指定した場所にしか表示することができません
つまり、本文の中の任意の場所に表示させることができないのです。

エントリーファイル・イメージの利用例

最近では、ブログ記事にアイキャッチ画像を利用しているブログが増えてきましたね。
ブログを利用しているまとめサイトなんかがそれです。
たとえばこんな感じのデザインですね↓

【エントリー一覧表示時】
entry_image_file.jpg

【エントリー記事表示時】
entry_view_image_file.jpg

こういう風に、
エントリー一覧表示時にアイキャッチ画像を表示する…エントリーイメージを利用する
エントリー個別表示時にエントリー本文の上部にタイトル画像を表示する…エントリーファイルを利用する
エントリーイメージが登録されていない時はアイキャッチにエントリーファイルのサムネイル(自動作成)を利用する…エントリーファイルのサムネイルを自動作成
などのように編集しても面白いかもしれません。

このように、エントリーのファイルやイメージは、エントリーのアイキャッチ画像やタイトル画像、イメージ画像として利用できますが、ブログ本文に挿入する画像としては利用できません。

本文の中で画像を利用したい場合や、複数の画像を1件のエントリーに表示させたい場合は、メディア機能や、オプションのファイルアップロード機能を利用するといいでしょう。

エントリーで利用するメディアについて

1件のエントリー上に複数の画像を表示させたい場合は、メディア機能を利用するといいでしょう。
メディア機能とは、freoに関係するファイルをアップロードしたり編集したり出来る機能です。

エントリー本文上部に、メディアを登録したり管理したりするためのクイックリンクが表示されています。
medialink.jpg
この部分です。
ここでメディアを登録したり、本文中に挿入することができるようになります。

本文内にメディアを挿入すると、メディアについてのキャプション(説明)を書いたり、複数のメディアを並べたりすることができます。
↓たとえばこんな風に↓
sample01.jpg sample02.jpg
↑メディアを利用して表示しています↑

エントリーファイルやエントリーイメージと違い、メディアだと、テンプレートで指定された場所ではなく、エントリー本文内に挿入するかたちで画像を表示させることになりますので、比較的自由に画像を表示させることができます。

ただし、エントリーに登録されている画像を一覧表示してギャラリーを自動で作成するのには適していません。
エントリーに登録しているメディアを一覧表示するためには、メディア用の一覧表示プラグインが別途配布されているので、これを利用します。
また、メディアを登録する際に、ディレクトリをわかりやすくわけておくと便利かもしれません。
詳細はこれからご説明したいと思います。

ファイルアップロードオプションを利用する

エントリーでは、オプション機能を利用できます。
オプション機能とは、エントリーに関連する項目を増やすことのできる機能です。
オプションには様々な種類があり、ファイルアップロードもそのひとつです。
ファイルアップロードのオプションを利用して、画像を登録することもできます。

オプションに登録した情報は、テンプレートに記載して任意の場所に表示させたり、エントリーの本文に挿入することができるので、エントリーに利用するオプションとして、ファイルアップロード形式のオプションを登録しておいて、これを利用してもいいと思います。
また、オプションは複数のエントリーで利用できるので、複数のエントリーに登録しているあるオプション(たとえばオプションID「illust」に登録されているファイル)を一覧表示させる、ということもできます。
これでギャラリーを作成してもいいかもしれません。
ただし、テンプレートを編集したり、本文中に挿入するためには、freo独自の知識が必要だったりするので、初心者の方にはあまりおすすめできないかもしれません。

ページ移動

関連記事

ユーティリティ

Twitter

ページ上部へ