作家直販サイトの構築・顛末記(7)

作家直販サイトの構築・顛末記(7)

作家直販サイトの構築・顛末記(6)の続き。

有料Extensionの導入

販売作品(Sell Media)」は、基本、無料で使えるものだが、有料で機能を追加できる「有料Extension」がある。
どんな有料機能があるかは、開発元サイトを参照。

Sell Media Extension

この中で、私がぜったい必要と思ったのは、「Magnifier 」と「Watermark 」だった。
「Magnifier 」は拡大ツール、「Watermark 」は透かし(ウォーターマーク)。
特に、無断使用を抑止するためのウォーターマークは必須。

ウォーターマークを入れるプラグインはいろいろとあるのだが、画像に直接書き込んでしまうものが多い。それでは作品が売り物にならなくなってしまう。元画像を保持したまま、ウォーターマークを入れられるものはないのか?

結論として、既存のプラグインでは使えなかった。
つまり、有料版を買うしかなかったのだ。

Sell Mediaの有料版の課金方法は、期限付きライセンスで、年額の料金となっている。つまり、使い続けるためには、毎年期限が来たら利用料金を払う必要がある。
アプリケーションを制作し、バグフィックスやアップグレードをしていかなければならない開発元にしてみれば、1回こっきりの買い取り価格では割に合わないのだろう。それは、よくわかる。

ただ、躊躇したのが正直なところ。
それほど高い料金ではないが、固定費としてかかるので、そこまでやる必要があるのかどうか……。
まぁ、結局、購入したのだが。

有料Extensionの購入方法

有料Extensionを購入するためには、まず、開発元のGRAPH PAPER PRESSのサイトで、ユーザー登録する必要がある。ユーザー登録そのものは無料だ。

次に、Sell Media Extensionのページに行き、どれでもいいのだが、とりあえず「Watermark」の詳細ページを表示。
そこにある「See Pricing」をクリックすると、料金表が出てくる。

ライセンス料金表
ライセンス料金表

表示されている料金は、月額換算した料金なので、実際に支払うときは ×12 の年額になるので注意。
$399というのは、ライセンスを恒久的に買うときの料金。余裕がある人は、これでもいい。
通常は、Professionalの$12.42(年額$149)だろう。

「SIGN UP」をクリックして、支払いページに行き、必要な情報を入力し(もちろん英語で)、PayPalの決済へと進む。

支払いが完了すると、自分のアカウントのダッシュボードから、必要なものをダウンロードできるようになる。

ダッシュボードのページ
ダッシュボードのページ

Sell Media Extensionのインストール

インストールしたいExtensionをダウンロードして、自分のパソコン内に保存するときは、zipファイルのままにしておく。ブラウザによっては自動解凍してしまうが、解凍はしないこと。

  1. WordPress > プラグイン > 新規追加 から、
  2. プラグインのアップロード」をクリックして、
  3. ZIP 形式のプラグインファイルをお持ちの場合、こちらからアップロードしてインストールできます。」のところから、
  4. ダウンロードしたzipファイルをアップロードしてインストールする。

Sell Media Extensionの有効化

  1. 購入後、GRAPH PAPER PRESSにログインして、ダッシュボードの中の「Account」ページを開くと、そこにライセンスキーが記載されている。
  2. WordPress > 販売作品 > 設定 > ライセンス のタブを開く。
  3. ライセンスEメールアドレス」に、GRAPH PAPER PRESSに登録したメールアドレスを入力。
  4. ライセンスキー」に、前述のライセンスキーをコピペする。
  5. 設定を保存」をクリック。

これでライセンスは有効となる。

Sell Media Extensionの設定

WordPress > 販売作品 > 設定 > その他 を開く。
ここがExtensionの設定画面。

Extensionの設定
Extensionの設定

私は、「Expire Download 」「Magnifier 」「Watermark 」を入れているが、Magnifierには設定項目がない。

Watermarkの設定では……

  1. 表示させたい透かし画像のアップロード。
  2. ウォーターマークの不透明度の設定。
  3. ウォーターマークの位置の設定。
  4. ウォーターマークのマージンの設定。

……を行う。
すべてのウォーターマーク」のところは、作品画像だけでなく、記事投稿などでの画像にも透かしを入れるかどうかの選択。

私の場合、写真の全体に「©YUTAKA ISAYAMA」の文字を複数入れている。この文字の画像は、1000×1000ピクセルで作って、その中で複数個並べてある。
画像のファイル形式は、透明部分を有効にするPNG形式にする。

画像の大きさは、作品ページ上でのサムネール画像の大きさを考慮したものにする。
重ねられる透かしの画像は、ほぼピクセル等倍(もしくはやや小さめ)で表示されるので、小さな画像だと小さく表示される。全体に表示させるには、サムネール画像と同じ大きさか、やや大きめの画像にしておく。

私のサイトで使っているテーマの「Bistro」は、2カラムの中の記事表示スペースに、その幅いっぱいに画像が表示される仕様になっている。その幅が、MAXでだいたい800ピクセルくらい。それに合わせて、透かし画像をやや大きめの1000ピクセルにしている。

半透明にしたいときは、透明度を設定。
私のように全体に入れるときは、位置はcenterに。単独の文字やロゴを、右端や左端、上や下に入れることも可能。

Download Expire」は、「Expire Download 」の設定。
このExtensionは、ダウンロードページの有効期限を設定するためのもの。

ウォーターマークを入れた例

ウォーターマークは、サムネール画像に書き込むのではなく、JAVAスクリプトでレイヤーとして重なっている。もちろん、オリジナル画像には影響しない。後述するルーペで見ると、ウォーターマークがある部分でも、ルーペ内にはないことを確認できる。

ウォーターマークを入れた例
ウォーターマークを入れた例

「Magnifier 」について

「Magnifier」には、特に設定項目はなく、インストールすれば有効になる。
ただし、現状では動作条件に制限があるようだ。

作品のルートの階層としては、「コレクション」>「キーワード」と、キーワードが下位になっている。
「コレクション」のルートから個別作品を表示させたときは、ルーペは働く。しかし、「キーワード」検索から個別作品を表示させたときには、ルーペが働かない。これは仕様なのか、バグなのか、判然としない。いちおう、開発元には指摘しているのだが、今後改善されるかどうかはわからない。

さて、拡大される仕組みなのだが……

ルーペ部分の拡大は、表示されているサムネール画像を拡大しているのではなく、メディア設定で設定している「大サイズ」画像を参照している。

……ということに気がついた。最初はわからなかった。
つまり、「大サイズ」の設定を大きくすれば、拡大率が大きくなるということだ。

▼メディア設定

メディア設定
メディア設定

私のサイトの場合、個別ページでのサムネール画像の横幅がMAX 800ピクセル程度なので、その約2倍ということで、大サイズを1500ピクセルにした。拡大率が、約2倍(横位置の場合)ということになる。

最初からこの設定にしていれば、大サイズは1500ピクセルで生成されるが、途中から変更すると、すでにアップロードしている画像のサムネール画像の変更はされない。
この変更は、「Regenerate Thumbnails」というプラグインを使い、サムネール画像を生成し直すことで解決する。

▼ルーペで拡大した例

ルーペで部分拡大
ルーペで部分拡大

表示するサムネール画像の大きさを制限する

前述したように、私が使っているテーマでは、画像の大きさ指定がない場合、記事スペースの幅いっぱいに画像が表示される。
横位置写真の場合は、それでもいいのだが、縦位置写真のときは大きくなりすぎてしまう。縦位置写真を表示する大きさは制限しないといけない。

この制限には、以下のCSSを使う。

▼画像のサイズを横位置・縦位置で調整する

.sell_media_image {
display: table-cell;
width: 100%;
height: 900px;
text-align: center;
vertical-align: middle;
}
img.sell_media_image{
width:auto;
height:auto;
max-width:100%;
max-height:900px;
vertical-align: middle;
}

高さをMAX 900ピクセルにしている。
大きさを制限することで、ルーペの拡大機能も効果的になる。縦位置写真のルーペの拡大率は、約1.7倍となる。

縦位置写真の大きさを制限した例

前述の大きさ制限をしないと、縦位置写真の場合、記事スペースの幅いっぱいに広がってしまう。
高さを基準に制限しているので、左右に余白ができる。

縦位置写真の場合
縦位置写真の場合

以上が、有料Extensionの導入方法。
次回は、私が遭遇したトラブルシューティングについて。

作家直販サイトの構築・顛末記(8)につづく)


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です