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

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

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

「販売作品(Sell Media)」をカスタマイズする(その1)

サイトの見栄えや見やすさは重要なので、それなりにカスタマイズする必要がある。
開発元のデモサイトを見てもらえれば、デフォルトがどういう感じなのかがわかる。

Sell Mediaのデモサイト

デモサイトは、有料版のExtensionも含まれているので、無料版のみの場合とは異なる。

デザインはシンプルで見やすくはあるのだが、総じて文字のサイズが小さめ。これは最近のトレンドでもあるのだが、英文ならまだしも漢字の混じる日本語では、小さな文字は読みにくくなってしまう。

文字のサイズや装飾は、追加CSSで指定していく。

WordPressの「テーマ」を選ぶ

WordPressには、デザインのベースとなる「テーマ(Theme)」がある。
Wordpressをインストールすると、デフォルトとなる標準テーマが入っている。それを使うのもいいが、もっと違ったものにもしたくなる。

ただし、ここで留意することがある。

開発元に問い合わせたところ、Wordpressの標準テーマでは動作に問題はないが、サードパーティのテーマの中には正常に動作しないものもあるという。
標準のテーマとは……

  • Twenty Fourteen
  • Twenty Fifteen
  • Twenty Sixteen
  • Twenty Seventeen

この4つ。
テーマによって動作しないことがあるのは、当サイトで使っているフォーラム・プラグインの「bbpress」と同様だ。どれが使えて、どれが使えないのかは、開発元も明らかにしていないので、試しに使ってみるしかない。なにしろ、テーマの数はかなりあるので、すべての動作確認をするのは大変な手間になってしまう。

私は、「Bistro」を使っているが、これは「Sydney」をベースとした子テーマとなっている。とりあえず使えているのだが、完璧にマッチングしているかというと、そうともいえない部分がある。まぁ、さほど大きな障害にはなっていないので妥協の範囲ではある。

動的でレスポンシブな見せ方が好みなので、トップページにスライドショーがあるこのテーマを選んだ。

ベースのデザインは「Bistro」なのだが、各所の文字の大きさや装飾、各要素間の間隔、行間、リスト表示のときの表示のさせ方、見出しのh1〜h6の表示の仕方……等々、細かくCSSのスタイルシートで調整している。

たいていのテーマに、外観>カスタマイズ>追加CSS というカスタマイズ項目がある。ここにCSSを書き加えることで、デザインを調整できる。CSSは最後に読み込まれたものが優先されるのだが、追加CSSは最後に読み込まれる位置に記述される。

トップページの例

私のサイトは、トップページにスライドショーと「ランダムピックアップ」として、アップロードされている作品の中から6点をランダムに表示するようにしている。

これは本来サイドエリアに埋め込むウィジェットの「販売作品: Featured Products」を、「Page Builder by SiteOrigin」のプラグインで固定ページに埋め込んだもの。

「作品検索/一覧」ページの例

デモページではトップページとなっているのが、私のサイトでの「作品検索/一覧」のページ。
このページには、作品の検索窓と、「最新順」「人気順」「コレクション」「キーワード」の4つのメニュー表示がある。

最新順」では、アップロードの日付が新しい順に、作品のタイトルとサムネールが並ぶ。
人気順」は、アクセス数が多い作品順。
コレクション」は、コレクション名の一覧。
キーワード」は、キーワードのテキストリンクのみが、ズラズラと出てくる。

このページの全体像は以下のようになっている。

作品検索/一覧ページ
作品検索/一覧ページ

画像の中の番号を付けた部分の説明。

最上部にお知らせの一文を入れている。これは「WPFront Notification Bar」というプラグインを使用。テスト中は「テストモードです」と表示していた。

現在地を示す「パンくず」は、プラグインの「Breadcrumb NavXT」を使用。

ソーシャルメディアへのアイコンは、プラグインの「WP Social Bookmarking Light」を使用。「LINE」や「はてなブックマーク」があるのは、たしかこのプラグインだけ。

サムネールは20個表示しているが、この数はWordpressの 「設定」>「表示設定」>「1ページに表示する最大投稿数」 の設定と連動している。この設定は、検索結果で表示するサムネール数にも連動する。

フッターは3カラムで、「外観」>「ウィジェット」 から、テーマに備わっているフッター項目に要素を入れている。ここにある「サイト内記事検索」は、作品検索とは関係ない、記事ページについての検索。今後、記事も書いていく予定にしているため。

「個別作品ページ」の例

個別の作品ページを開くと、以下のようになっている。

「個別作品ページ」の例
「個別作品ページ」の例

個別作品ページでは、大きめのサムネール画像が表示される。この大きさは、テーマの仕様およびサムネール画像の大きさ設定によって左右される。表示させる大きさを、CSSでコントロールすることもできる。

また、「©YUTAKA ISAYAMA」という透かしを入れてあるが、これは有料Extensionによるもの。画像に直接書き込んでいるわけではなく、JAVAスクリプトでレイヤー上に重なっている。これについては、のちの回で後述する。

作品サムネールの上にある「パンくず」は、ページのルートではなく、作品のルートを示す階層になっている。

以下、番号を付けた部分の説明。

File Upload  〉編集  〉メディアを編集」で入力した「キャプション」が、ここに表示される。

「新しく追加する」〉説明 で入力した「説明」が、ここに表示される。

Exif情報」の表示は、プラグインの「Exifography」を使用。
販売作品 Exif」というSell Media付属のウィジェットがあるのだが、これはSell Mediaの表示領域を2カラムにして、そのサイドエリアに入れる必要がある。
私の場合、テーマの設定として2カラムにして、サイドエリアには別の要素を入れているため、付属のウィジェットが使えない(ようだ)。
Exifはなくてもいいようなものではあるが、私としては入れておきたい。

「新しく追加する」〉価格 で設定した価格表が、ここのプルダウンメニューに表示される。
デフォルトでは、やたらと文字が小さく、見えにくかったので、追加CSSで文字サイズを大きくした。

「ライセンス(用途)」の設定 で設定した項目が、ここのプルダウンメニューに表示される。
ここも価格と同様に文字が小さかったので、追加CSSで大きくした。

「サイズ」と「ライセンス」をそれぞれ選択すると、金額が表示される。ここは重要なので、CSSで数字を大きくボールドにし、赤文字にした。

ファイル情報の表示。デフォルトは項目名の後ろが不揃いなので、表組のようになるCSSを追加した。
なお、デモサイトでは「コレクション」と「キーワード」の両方が表示されるようになっているのだが、ここではなぜか表示されない。テーマとの兼ね合いかもしれないが未確認。

注目の作品」は、Sell Media付属のウィジェットエリアの設定。「外観」>「ウィジェット」から設定するが、デフォルトで入っている。表示順はランダムだが、アクセス数や表示される頻度の多いものになっているようだ。

最近の作品」は、「注目の作品」と同様に、Sell Media付属のウィジェットエリアの設定。表示順は、アップロード日付が新しいもの順。

テーマのサイドエリア」は、使用しているテーマの「Bistro」に備わっているウィジェットを入れるスペース。常に表示しておきたい要素を入れてある。


とりあえず、今回はここまで。
続きは次回に。

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


コメントを残す

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