FC2ブログ

    マッチプログラムを追加しました

    プレミアリーグの各クラブのマッチ・プログラム(バックナンバー)を追加しました。
    マッチプログラム

    商品画像にしたプログラムは、今はプレミアリーグにはいないバーミンガム・シティです。この「ヨーヨークラブ」がいつ戻ってくるか、楽しみです。

    EC-CUBEサーバー設定記 その5

    (8)画像の作成
    ・ロゴ作成

    ロゴの作成は、ホームページ・ビルダーで行いました。もちろん、gimpでやってもできます。でもホームページ・ビルダーを使った方が若干、簡単に出来たような気がします。

    ...が、いずれにせよ面倒でかなり手間がかかった作業でした。以下、手順です。
    ボタンが一つ一つ異なるため、例としてトップページにある「MYページ」を置き換えた作業を説明します。

    1. 元のボタンの大きさを調べて記録しておく
     →「MYページ」の場合は、121×32です。
     これの調べ方は、こんな感じで↓画像ファイルの上にマウス・カーソルを持ってくると表示されます。
     tool_tip.jpg


    2. 元のボタンの画像ファイル名とフォルダを探して記録しておく。
     →「MYページ」の場合は、ec-cube下の、/html/user_data/packages/default/img/commonにある
      btn_header_mypage.jpg というファイルです。
      これは、Explorerの「検索」メニューを使うなどして探します。

    3. 置き換えたいボタンを新しく作る。
     gimpの場合 ... 上で調べたサイズの画像を新規に作成し、レイヤーを重ねて色と、文字「MYページ」を書いて、ボタンを作成します。上で調べたファイル名で、どこかのフォルダに作成します。
     ホームページビルダーの場合 ... 「ロゴ」メニューから「MYページ」と書いて、ボタンの色を選びます。その後で、サイズを上で調べたサイズに合わせて再描画します。次に、「上書き保存」して、ロゴファイルの保存先とファイル名を上で調べた内容に変更します。
     ここで、デフォルトがgifで出来てしまうので、jpgに変更して保存するか、もしくはgifで作成しておいて、gimpで開いてjpgに「名前を変えて保存する」か、どちらかの方法でjpgに変換する必要があります。
     gifのままで行くとしたら、EC-Cubeのレイアウト設定画面から、そのボタンのファイル名を指定している記述を全て探してjpgをgifに変更する必要があります。

     →という、いずれの方法を採用しても非常に手間がかかる作業です。ボタンの色(デザイン)を変えたい場合は、覚悟が必要です。

    4. 上で作成した画像ファイルを、1.で調べたフォルダに上書きコピーします。


    ・画像作成

    撮った写真や作成した画像を、サイズを変える場合には、gimpでもできますが、私はフォトレタッチというソフトを使いました。その理由は、単に使い慣れているから、という理由です。やるとしたら、自分が使い慣れているソフトを使って行うのが最良です。なぜなら、サイズを変える作業というのも比較的頻繁に実施しなければならないからです。

    ちなみに、フォトレタッチでやった作業はこんな感じで出来ました。
    photo_le.jpg
    resize.jpg

    EC-CUBEサーバー設定記 その4

    (6)スタイルシート設定

    デフォルトのEC-Cubeの画面の色(緑とオレンジ)がイメージと異なるため、色系を変えるためにスタイルシートを編集しました。

    主として、手を加えたファイルは以下のファイルです。
    common.css
    popup.css
    contents.css
    bloc.css
    bloc_alpha.css

    変更を加えた個所は基本的に、色です。

    ここまでで、画面表示がまた変わりました。

    (7)ボタン、背景画像などを新たに作成し、デフォルトの画像と置き換える

    最後は、ボタンと「新着情報」などのタイトル(背景、画像とも)を変更する作業を行いました。これは各部品の画像ファイルを同じ名前で別に作成して、ファイルを置き換えました。つまり、ローカルで言えば、元々の画像ファイル(緑とかオレンジのボタンなどのファイル)を新しく作った画像ファイルに置き換えたわけです。

    これら画像ファイルの作成方法は、別項にてまとめて記載します。

    EC-CUBEサーバー設定記 その3

    次に、商品を20件程度登録しました。これは、画面表示の確認もかねて、商品が適当数あった方が画面表示の調整もしやすいと思ったためです。

    ちなみに、商品登録は、「商品管理」「商品登録」の画面から登録して行きます。商品画像もその画面で登録します。類似商品がある場合には、「商品マスター」の画面から、類似商品を選択し「複製」リンクから登録すると便利です。

    というところで、商品登録画面からの登録は、なかなか骨が折れるものです。商品の登録はもちろん非常に重要な仕事ですので、面倒とか言ってられないのは事実です。しかし、なるべく簡略化できることはした方が良いのも事実です。

    そのような次第で、私は最初の2点程度を「商品登録」画面から行った後で、登録済みの商品をCSVにダウンロードして、excelで商品情報を作成してCSV登録、その後で「商品マスター」の画面から画像を登録する、という方法で登録しました。

    商品のCSV登録については、別項にてまとめて記載します。

    (5)「デザイン管理」-「PC」から画面設定

    さて、カテゴリと商品がいくつか登録できた後で、次は画面の表示回りを調整する作業に取り掛かりました。

    ・ブロック追加
    プレミアリーグ ファン・グッズのショップの中で、トップページの左上の「リンク集」、右側の「観戦チケットについて」「送料について」の3つのブロックを新規に追加登録しました。

    「デザイン管理」-「PC」-「ブロック設定」から「ブロックを新規入力」ボタンを押すと、ブロック名、ファイル名、記述を入力する画面になります。
    ここで、htmlを自分で書いて記述を登録しました。

    同時に(というか、実際には先にやった方が良いのですが)、「リンク集」、「観戦チケットについて」「送料について」などのロゴを作成しました。

    ロゴの作成は、gimpなどの画像処理ソフトにて行います。画像ファイルの作成方法は、別項にてまとめて記載します。尚、商品画像などの画像は普通にデジカメで撮った写真を画像ソフトで加工したものです。

    ・レイアウト設定
    ブロックが出来たら、その追加したブロックを各ページに配置します。それは「デザイン管理」-「PC」-「レイアウト設定」から行います。

    尚、「観戦チケットについて」と「送料について」のページは、この画面の「ページを新規入力」から追加登録しました。

    ・ヘッダ、フッタ設定
    次に、ヘッダ、フッタの設定を行いました。それは「デザイン管理」-「PC」-「ヘッダー/フッター設定」から行います。これも、htmlを直接編集する方法で実行しなければなりません。

    さて、ここまで実行すると画面はかなり変わりました。

    EC-CUBEサーバー設定記 その2

    (1)EC-Cubeインストール

    Microsoft WebMatrixからEC-Cubeをインストールしました。
    これに関しては、特に追記事項はありません。
    特に問題なくローカルPCにEC-Cubeがインストールされました。
    管理画面から「site check」ボタンを押すと、デフォルトの画面が起動しました。
    トップページに大きなアイスクリームのバナーが載っている画面です。


    (2)「基本情報管理」からマスタ設定

    まずは、ショップマスタなどの基本マスタを設定しました。
    具体的には、「基本情報管理」メニューの
    ・郵便番号DB登録
    ・SHOPマスター
    ・特定商取引法
    ここまでのマスタを登録しました。
    「支払方法設定」「配送方法設定」も必要ですが、これはローカル環境ではあえて作成せず、サーバー側にショップを構築してから設定しました。


    (3)カテゴリ20件程度登録

    次に、「商品管理」で、商品を10-20件程度登録する作業にかかりました。商品登録の前にまずはカテゴリ登録が必要なので、下記の順番でマスタ設定を行いました。
    ・カテゴリー登録
    ・商品登録

    当ショップで取り扱う商品は、色・サイズなど一部該当しますが、「規格管理」はローカルでは行わず、サーバー側にショップを構築してから設定することにしました。

    また、「商品並び替え」も実際には必要な作業です。なぜなら、「商品登録」メニューから登録した商品は、更新日付の降順で表示されているように見えるため、本来並んでほしい順番を設定するには「商品並び替え」が必要です。ただし、これもローカルでは行わずサーバー側での作業として先送りしました。

    EC-CUBEサーバー設定記

    プレミアリーグ ファン・グッズのネットショップ開店までの一連の作業の記録です。

    1.ローカルでスケルトン作成

    まずは、ローカルPCにEC-Cube(バージョン2.11.4)をインストールし、ローカル環境にてショップを構築しました。この「構築」という意味は、商品を載せる棚を作った、というもので、表示の是非をチェックするためにも最小限の商品を棚に並べるまでで留まっています。そのような理由から「スケルトン作成」と表現しています。

    いずれにせよ、ローカルでの作業は下記のような内容でした。

    (1)EC-Cubeインストール
    (2)「基本情報管理」からマスタ設定
    (3)カテゴリ20件程度登録
    (4)商品20件程度登録
    (5)「デザイン管理」-「PC」から画面設定
    (6)スタイルシート設定
    (7)ボタン、背景画像などを新たに作成し、デフォルトの画像と置き換える

    項目別に言うとこんな感じです。
    次発言から、順番に各項目の中で行った作業をもう少し詳しく記載します(続く)

    はじめまして

    はじめまして。
    プレミアリーグのファンです。よろしくお願いします。
    プロフィール

    ピーエルエフジェイ

    Author:ピーエルエフジェイ
    平野圭子(ひらのけいこ)
    プレミアリーグ ファングッズ店長です。

    最新記事
    最新コメント
    リンク
    検索フォーム
    RSSリンクの表示
    QRコード
    QR