urinain.com » ネットショップを作ってみる http://urinain.com おやじによる おやじの為のプチITと、沖縄あれこれ Sat, 06 Jun 2015 23:20:07 +0000 ja hourly 1 https://wordpress.org/?v=4.2.38 テーマPaypal Vermilionをいじくる(2) http://urinain.com/2015/05/post-142/ http://urinain.com/2015/05/post-142/#comments Sun, 24 May 2015 19:23:10 +0000 http://urinain.com/?p=142 商品ページの商品詳細（説明文）の文字が小さい

Welcartで商品を登録し、商品ページを確認してみる。

商品名表示位置や、商品名の文字の大きさ、カートボタンの位置は私好みでOK！

商品説明文（商品詳細）は、なんか外国のカタログっぽくて良い。

が、文字が小さいなぁぁ。

この世に生を受けて、まもなく半世紀の私には、ちと辛い大きさです。

調べてみると11pxのよう。

 

う～ん、ここは高齢者の為にも文字サイズを大きくしてみよう。

 

テーマオプションには変更メニューは無いので、ここはCSSをいじくります。

 

※cssファイル、phpファイルを変更する場合は必ずバックアップをとって下さい。

FTPソフトで接続した自分のPCにフォルダ毎落とせばよいです。

今回はWPインストールフォルダ内の/wp-content/themes/にあるpaypal_vermikionフォルダを丸ごとPCにダウンロードします。

 

さて以下から変更方法です。

usces_cart.cssを変更します

「メニュー」→「外観」→「テーマの編集」を開きます。

画面右上の「編集するテーマを選択」で「peypal vermilion」をプルダウンから選んで「選択」

 

次に、テンプレート一覧のずーと下にあるスタイルシート一覧の中のusces_cart.cssをクリック。

299行～309行あたりにある

.entry_block .item_page_title {
font-size: 12px;
line-height: 1.2;
font-weight: bold;
color: #7f2903;
padding-bottom: 10px;
}

.entry_content {
width: 100%;
font-size: 11px;
}

を変更します。

.entry_block .item_page_titleは商品ページのタイトル部分

（オリジナル）

.entry_block .item_page_title {
font-size: 12px;
line-height: 1.2;
font-weight: bold;
color: #7f2903;
padding-bottom: 10px;
}


（変更）

.entry_block .item_page_title {
font-size: 17px;
line-height: 1.2;
font-weight: bold;
color: #7f2903;
padding-bottom: 10px;
}

フォントサイズを12pxから17pxに変更しました。

残りはそのままです。

.entry_contentは商品ページの商品詳細部分

（オリジナル）

.entry_content {
width: 100%;
font-size: 11px;
}

（変更）

.entry_content {
width: 100%;
font-size: 15px;
line-height: 1.8;
}

フォントサイズを11pxから15pxに変更しました。

そして行間の設定line-height: 1.8;を一行追加しました。

追加する場合、最後の } が無くなっていないか注意しましょう。

 

変更をしたら最後に「ファイルを更新」ボタンを押して、ページを確認です。

 

↓↓↓タイトル文（ブラウンの文字）が大きくなりました。

 

↓↓↓商品詳細の本文の文字が大きくなり、さらに行間を広げて見やすくなりました。

 

これで高齢者にも見やすい商品ページになった。かな？

 

]]> http://urinain.com/2015/05/post-142/feed/ 0 テーマPaypal Vermilionをいじくる http://urinain.com/2015/05/post-93/ http://urinain.com/2015/05/post-93/#comments Sat, 23 May 2015 02:11:07 +0000 http://urinain.com/?p=93 WP Welcart専用テーマPaypal Vermilionをプチカスタマイズ

paypal利用を前提としたテーマ「Paypal Vermilion」を使う事に決めました。

paypalの設定は終わったので、テーマが反映されているか確認をすると。ＯＫ！

なのだが、

やっぱデモページとは違うなぁぁ。

 

で、テーマ「Vermilion」をいじっちゃいましょう！

 

まずは画像系から

下記の①と②から変更したいとおもいます。

両方ともCSSファイルなどは触らず、サーバー内の画像ファイルを入れ替える（上書きする）方法をとりました。
※そのほうが手っ取り早いので！

① logomark.gifというファイル名の画像

Vermilion＝＝＝＝＝＝＞みやもと商店

サイズは64px × 64px です。
※あらかじめ作っておきましょう。元がgif画像なのでgifで作ってね。（jpg、jpeg、pngで作るとcss内の記述を変更する必要があります。）

WPがインストールされているフォルダ内の
/wp-content/themes/paypal_vermilion/images/にあるlogomark.gifを入れ替えます。

FTPソフトで接続して入れ替えて下さい。

 

② header_image01.gifというファイル名の画像

＝＞

サイズはデモサイトと同じ980px × 280px が良いです。

こちらもgif画像なので、gifで作ってください。

同じくWPがインストールされているフォルダ内の
/wp-content/themes/paypal_vermilion/images/にあるheader_image01.gifを入れ替えます。

 

するとこうなります。

img_555fe1480eb4f

 

両方ともテーマオプションメニューから変更できれば良いに・・・。

 

ヘッダー下のバナー設置

ここもテーマオプションメニューから簡単に出来れば良いのに・・と思う！

でも、以外と簡単です。

ウィジェットを使いましょう！

Widget Area for Home Middleにテキスト枠を追加

テキストをクリック→Widget Area for Home Middleにチェックを入れて「ウィジェットを追加」ボタンをクリック。

これを必要な枠の数だけ行います。

 

 

 

 

 

挿入したテキストエリアにタグを図の様に記述

画像は予めメディアに登録しておいて画像URLを入れ込みましょう。

バナーサイズは460px（横）× 150pxくらい。
デモサイトは縦が80pxです。

横幅は460px以上にすると右サイドがはみ出てバランスが崩れる様です。

※htmlの記載はネットに情報が満載なので調べてね。
というか、WP触れる人は有る程度知っていると思いますので端折ります。

タイトルは入れても入れなくても良いです。

入れるとバナーの上に表示されます。

これを2つ設定すると横並びのバナーが配置されます。

記述がおわったら「保存」ボタンを押してください。

 

これでトップページ画像配置完成。(^^)

 

ヘッダー画像もバナー画像も見栄えはセンスの問題ですので、皆さんの類まれなセンスで作成してくださいませませ。

 

]]> http://urinain.com/2015/05/post-93/feed/ 0 Welcartのテーマを変えたい http://urinain.com/2015/05/post-66/ http://urinain.com/2015/05/post-66/#comments Sun, 17 May 2015 19:41:08 +0000 http://urinain.com/?p=66 Welcartのデフォルトテーマは・・・

Welcartのプラグインを入れてみて即座に感じた事。

「ダ・サ・イ」

Welcartデフォルトテーマでも、形は整っているので画像をどうにかすればおシャレではないにしろどうにかなるのでは？
と思って必要事項を記載し商品を登録するも、画像入れ替える勇気がでずWelcart対応のテーマを探すと言う超手抜きな行動に出る事に！

そこで検索して出会ったのが「Welcartテーマ・テンプレート（無料・有料）まとめ」というページ。

Paypal Vermillionテーマその中の掲載者さんが作った「Blanc」にも魅かれたのですが、紹介されていたpaypal導入で使える「Paypal Vermillion」というテーマに目が行き（paypalを活用していたもので・・・）、そのサイトからテーマをダウンロード。
※Blancは私の取っては魅力的でテーマリストには入れてあります。(自分のスキルが向上するのを待って、使おうかな～、と。）

 

で、早速テーマを適用、と思ったら、、

決済方法でpaypalのAPIやらなんやらちゃんと設定しないと使えないようになっていました。

で、元々EC-CUBEで使っていた設定を記入しテーマを反映！

paypal_api

出来た！

動作テストもOK！

 

でも、デモ画面となんか違うな～。

やっぱ、そうだよね～。

 

で、結局いろいろ手を加えてみる事にしました。（素人ですが・・・）

 

現在出来上がっているショップサイトがこれ！

Welcartのデフォルトテーマを「ダサイ」と言いながら、私もダサイなぁぁ。。^^;

 

次回、ネット上では探しずらからった変更方法をご紹介です。

 

]]> http://urinain.com/2015/05/post-66/feed/ 0 WordPress＋Welcartの組み合わせ http://urinain.com/2015/05/post-25/ http://urinain.com/2015/05/post-25/#comments Thu, 14 May 2015 02:02:19 +0000 http://urinain.com/wp/?p=25 EC-CUBEからの乗り換え

ネットショップを自分でつくる場合の選択肢として、CMSならEC-CUBEを選ぶ方も多いと思います。

私もその一人でした。（無料だし）

運営していくと、EC-CUBEは便利で機能も充実しているのですが、本来の店舗運営を行っていると結構面倒くさい事も多いですね。

私の場合、特にバナー画像の入替えに手間がかかるのに苦慮していました。
FTPソフトとの併用が必要になってくるのと、配置するブロックの設計などなど。

それとSEO的にいかがなものかと？

そこで、ブログツールであるWordPressでECサイトの構築が出来ないものかと！
と言っても、そもそもWordPressそのものに対して素人(-“-)

まずはWordPressを調べECサイト構築が可能か？

ありました、ありました。ネットって便利です。検索窓に「WordPress EC」「WordPress ネットショップ」「WordPress ショップ構築」など入れて検索するだけで、たーくさん見つかりました。(^^)

で、調べてみた結果「大丈夫だ」「私レベルでもいける」「しかもSEOにも優位だ」と判断し、WordPressでECサイトを構築する事を決意したのでした。

WordPress＋Welcartの組み合わせ

welcart

WordPressはおなじみブログソフト。そのSEOにおける優位性はネットでいろいろ書かれていますので皆様ご存知かと。

この優位性を活かしてECサイトを作れば、キーワードの組み込みも楽になり、検索サイトの上位表示も可能ではないか？と安易に考えていたのですが、さて

  1. カート機能を組み込めるのか？
  2. どんな決済機能が使えるのか？
  3. 在庫管理が出来るのか？
  4. 見栄えは良いのか？
  5. 会員機能は使えるのか？
  6. 運営が楽なのか？

などなどその他細かい事が頭に浮かび不安がたくさん。。。

 

しかーし、色々調べていると「WP-OliveCart」と「Welcart」、「EC-CUBEプラグイン」などを見つけた！

http://techacademy.jp/magazine/3008を参照

 

EC-CUBEはもう使わないと決めたので、3番目の「WordPress連携プラグイン」は却下。

WP-OliveCartにするか、Welcartにするか。

すごくすごく悩んだ結果

「なるべくタダが良いなぁぁ^^;」

と言う事で、私の使いたい機能がオプションなしにほぼ使えるWelcartに決定！！

理由は）

  • Paypalが使える（EC-CUBEで使っていたのでそのままAPIが利用出来る）
  • 会員機能がある
  • 商品点数無制限
  • 1商品に対して画像登録無制限
  • 送料設定の柔軟性
  • 複数決済方法の利用が可能
  • マニュアルが存在する（WEBマニュアル）
  • ブログと共存が出来る（※条件付き）

などが大きな理由。（しかもタダ。。。^^;）

ま、拡張機能は有料ですが、それは作りながら考える事としました。

welcart

続きは次回です。

  

]]> http://urinain.com/2015/05/post-25/feed/ 0