カテゴリー: ネットショップ

ホームページにカートボタンを置こう!

WordPressで作成されたホームページであれば、「WooCommerce」や「Welcart」のプラグインを使うことでホームページ自体をショップ化することは比較的容易ですが、決済システムの導入やセキュリティ管理など考え始めるとなかなか難しい点もあります。

そこで、先の記事で書いたYahooショップを用意して、そのカートをホームページやブログに置いてショップ化することと頻繁に商品内容が変わらないのであれば、運用はYahooショップに絞れますので簡単になります。

ただ、これには欠点があり、複数種類の商品を1つのカートに入れるような購入方法が難しくなります。(できるのかもしれませんが、現時点(2020年2月)のYahooカートに「お買い物を続ける」ボタンがないので、購入元に戻れません。)

STORESのストアボタンだとこれができてしまいます。その代わりにカートに入れる前に熨斗の設定など購入オプションはつけられません。個数はカートページで、熨斗などオプションは備考で記載して頂く形になります。

STORESを始める

STORESから必要事項を登録していくことで簡単に作成することができます。

登録は簡単ですが、注意しないとあとで後悔することがあります。

特に独自ドメインを設定される方は、気をつけないといけません。

(なんで、こんな大事なこと、FAQを読まないと書いてないんだ!と思ってしまいましたが)

独自ドメインを設定してもカートのドメインは、元々の「https://?????.store.jp」となります。

そして、独自ドメインを申請後はこの「https://?????.store.jp」を変更することはできません。

なので、

独自ドメインを設定する場合でも「https://?????.store.jp」でお客さんが見てもおかしくない設定を事前にしておきましょう。

クレジット決済の審査は、指示される手順通りに進めてショップの基本設定が入力できた時点で審査が始まります。特に別途提出書類はありません。審査には通過したのがわかるのが2W程度、実際に使えるようになるのが1M程度となるようです。AmazonPayの申請は、3日程度で完了するようです。

ストアボタン機能を使い、カートボタンを貼り付ける

ショップがオープンできたら、いよいよストアボタンを作成設置します。

ストアボタンの作成は、STORESのストア設定(管理ページトップの右上のショップ名の所をクリックしたメニューにあります。)を開くと

「ストアボタンを設置」の設置をクリックすると、設定画面となります。

大きさ、デザインなど必要に応じて設定して、作成したい商品を選択して、ストアボタン(Javascript)を作成します。

作成できたストアボタンを設置したい場所に貼り付けて完了となります。

 

赤の元気 トマトケチャップ 180g赤の元気のケチャップの購入はこちら↓

 

こんな感じ….本当に購入できます。

このケチャップは、有名メーカ品に比べお高いですが、リピータも多く、たくさんの方に価値ある商品と認めて頂いています。

Yahooショップカートを外部に貼り付けてみました

ここから


食塩無添加 濃厚 トマトジュース 赤の元気 夏獲れ秋獲れ 180ml 各6本

3,720円

のし:

ここまで

ソースコードは、

<style type="text/css">
.item_pic {
width:70%;
max-width:300px;
}
.item_name {
font-size:large;
}
.item_price{
font-size:large;
}
.item_opt {
padding-bottom:5pt;
}
.opt_name {
white-space: nowrap;
}
</style>
</p>
<table class="cart" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="item_name">食塩無添加 濃厚 トマトジュース 赤の元気 夏獲れ秋獲れ 180ml 各6本</td>
</tr>
<tr>
<td>
<p><img class="item_pic" src="https://item-shopping.c.yimg.jp/i/l/hyakujyu_218253156-2" /></p>
<p class="item_price">3,720円</p>
</td>
</tr>
<tr>
<td>
<form accept-charset="EUC-JP" action="https://order.shopping.yahoo.co.jp/cgi-bin/cart-form" method="post" name="addCart"><span class="hidden"> <input name="vwcatalog" type="hidden" value="hyakujyu" /> <input name="vwitem" type="hidden" value="218253156-2" /> <input name="のし" type="hidden" value="なし" /> <input name="vwquantity" type="hidden" value="1" /> <input name=".autodone" type="hidden" value="https://www.himeport.co.jp" /> </span>
<div class="item_opt"><span class="opt_name">のし:<select name="のし" data-cart-option-select="">
<option selected="selected" value="なし" data-calcoptionprice-priceoption="0">なし</option>
<option value="内祝" data-calcoptionprice-priceoption="0">内祝</option>
<option value="御祝" data-calcoptionprice-priceoption="0">御祝</option>
<option value="お歳暮" data-calcoptionprice-priceoption="0">お歳暮</option>
<option value="寒中御見舞い" data-calcoptionprice-priceoption="0">寒中御見舞い</option>
<option value="御年賀" data-calcoptionprice-priceoption="0">御年賀</option>
<option value="お中元" data-calcoptionprice-priceoption="0">お中元</option>
<option value="暑中御見舞い" data-calcoptionprice-priceoption="0">暑中御見舞い</option>
<option value="残暑御見舞い" data-calcoptionprice-priceoption="0">残暑御見舞い</option>
<option value="御見舞" data-calcoptionprice-priceoption="0">御見舞</option>
<option value="(無地)" data-calcoptionprice-priceoption="0">(無地)</option>
</select></span></div>
<div class="pt1"><input alt="カートに入れる" src="/wp-content/uploads/2020/02/e_company_523.png" type="image" /></div>
</form>
</td>
</tr>
</tbody>
</table>

同じようなことを他のページでも紹介されているのですが、日本語オプションがあったりするとうまく動かなかったりします。

その原因は文字コード!!

カートを貼り付けるポイントだけ書くと

<form name="addCart" method="post" action="https://order.shopping.yahoo.co.jp/cgi-bin/cart-form" accept-charset="EUC-JP">
<input name="vwcatalog" type="hidden" value="サイト名(ショップurlの最後)">
<input name="vwitem" type="hidden" value="商品コード">
<input name="のし" type="hidden" value="なし" >
<input name="vwquantity" type="hidden" value="数量">
<input name=".autodone" type="hidden" value="戻り先URL">
<input type="image" src="カートボタン画像" alt="カートに入れる" border="0">
</form>

 

これを飾り付けしたり、数量やオプションを変更できるようにします。

多少の手間はかかりますが、yahooショップをお持ちであれば、ホームページに立派な無料カートが掲載できます。

 

※ 掲載時に「このカートはYahooショップカートを使用しています」とかの記載があったほうが良いかもしれません。

 

ホームページやネットショップに載せるバナーや商品画像を作成

バナーや商品画像を作成したり、修正する場合、外注に出すと最低限5,000円(+消費税)程度は、必要になってしまいます。

バナーや商品画像をアドビ イラストレーターなどで作成されていると、ほぼイラストレータでしか編集できないので、ソフトウェア自体の使用費が発生する上に操作も独特で、デザイナーなどには使いやすいと言われているようですが、私個人としては、ん〜難しい!直感的でない!結局テキスト読んで勉強しないと使えない.....その上、毎月費用が発生する。

以前にも紹介したが、漫画作成でプロも使っているCLIP STUDIO PAINT PRO が、操作が直感的でマニュアルはどうしても困った時に見る程度で、機能もイラストを扱う上では十分な機能がある上にProはなんと5,000円で購入できてしまいます。CLIP STUDIO PAINT EX だとアニメーションも作成できるので、動くPOPなどもできてしまいます。

CLIP STUDIO PAINTでバナー作成

バナーのサイズを決めておけば、その上に画像レイヤーやテキストレイヤーを重ねていく感じで、背景が透過の素材を集めておけば、レイヤーの順番を変えたり、表示/非表示を切り替えることで、一度作成したバナーがいろいろなバナーに簡単に変更できます。

商品画像などは、一律の形式で作るようにしていれば、上記と同様な手順で複数の商品画像を1個のCLIPファイルにまとめて管理できます。

と、大変便利に使っているのですが、パソコンのメイン環境がほぼ完全にLinux環境に以降してしまったので、今後のどうするかを検討していました。

CLIP STUDIO PAINTがLinux上で動作すれば良いのですが、残念ながら私のwine環境ではインストールの途中で失敗してしまいました。

やむなく、Oracle Virtual BoxにWindows10をインストールして使用しています。

が、

Linuxのネイティブアプリでは、代替えできるほど使いやすいプログラムは見つけられていませんが、Linuxにインストールできてほぼ実用の範囲で使いやすいプログラムを見つけてしまいました。

Windows10でもCLIP STUDIO PAINTのライバル的扱いとなっている無料で利用できるソフトウェアです。

LinuxにインストールしたMediBang Paint Pro

ジャンプPAINTで最近注目されているようですが、MediBang Paint Pro

は、CLIP STUDIO PAINTと(ブラシの種類など機能不足もあるらしいですが、私の用途では問題ない)同様にプロの使用にも耐えうる高機能で、操作性も直感的で使いやすいです。

なにより、wineで問題なく動作しています。但し、マルチディスプレイ環境だとコマンドウインドウが別画面に表示されることもありますが、許容範囲かと思います。

そうそう、これ無料なんですよね。

無料で使ってもらって素晴らしいイラストや漫画を投稿して下さいというコンセプト

ん、漫画もかけるようになりたいので、暇を作って、投稿できるようになれればなぁ.

..と少々中二病的な爺でした。

 

ぜひ、バナー作りや商品画像作りに挑戦してみて下さい。

もちろん、弊社に作成依頼していただいても、喜んで対応させて頂きます。

お気軽にご依頼ください。

ご要望によっては勉強会的なものも対応させて頂きます。

(試し体験しながら、体で覚え頭で覚えない、頭で考える人なので、講師と一緒に実際に触って頂きながらいろいろなこと体験学習し、困ったときの解決の糸口の見つけ方を学んで、一人で試しながら使えるようになることが目標となります。時間はかかるかもしれませんが、講師の知らないことも自分の必要性に応じて自力で学べるようになって頂ければと思います。….ん〜、さらに仕事が減っちゃう_(汗))

Windows10で使うなら、これ1択

Googleが提供している「reCAPTCHA」がV3に

botをガードしてくれるありがたいサービスですが、最近V3にUpgrade

ユーザーはreCAPTCHAを意識しないで使えるようになりましたが、Web運用者は注意が必要になるようです。

使用の関連アプリ/プラグインもV3に対応するとreCAPTCHA v2のままだと、お問合せなどがすべてスパム判定される可能性があります。

実は恥ずかしながら、お客様から問い合わせが届かないとのご連絡を頂き、判明しました。

WordoressだとContact7をほぼ確実というくらい使用されていると思いますが、まさにこの状況が発生します。

まぁ、Contact7のバージョンアップ後、reCAPTCHAが無効になり再設定が必要になりますが、この時に必ずv3のキーにしないといけません。

 

メールを登録すると、レジストリURLを配信するようなサイトをいくつか確認してみましたが、メールが届かない(もちろんspamになっていないのは確認)ところがありました。似たような問題が発生しているのかもしれません。

あなたのホームページは大丈夫ですか?

ホームページやネットショップで期間限定キャンペーンを表示したい

表示させること自体は、通常のバナー表示と変わりませんので簡単ですが、そこは期間限定バナー

期間を設定して表示したいと思います。

サンプルソースはたくさん転がっていて、楽天市場向けなどは多く公開されています。

WordPressのページで期間限定ナバーを表示

別に楽天市場やYahooショップでの方法と変わりありませんが、制約が少ない分より簡単に表示できます。

ここでは、ウィジェットに簡単コピペできるように、JavaScriptもStyleもhtmlも一緒にしちゃっています。

<script type=”text/javascript”><!–
// イベントの開始、終了設定
var startday = new Date(‘2018/08/10 13:39:00’);
var endday = new Date(‘2018/08/10 13:40:00’);

window.onload = function(){
var today = new Date();
if ( startday < today && today < endday ){
document.getElementById(“pic”).style.display=”block”;
}else{
document.getElementById(“pic”).style.display=”none”;
}
};
// –></script>
<!– ======期間限定キャンペーンバナー======= –>
<style type=”text/css”>
div.limitedBanner{
display:none;
text-align: center;
max-width: 616px;
width: 95%;
padding-bottom:10px;
}
</style>
<div class=”limitedBanner” id=”pic” >
<a href=”クリックしたときのとび先URL” target=”_blank”><img alt=”期間限定キャンペーンバナー” src=”バナー画像のURL” ></a>
</div>

貼り付けたい場所にウィジェットがある場合は、「カスタムHTML」に上記を記述すればOK

但し、SiteGuardのプラグインを有効としている場合、保存に失敗するかもしれません。

その場合は、WordPressのカスタムHTMLやカスタムCSSが保存できない場合の対処

を参考に対処しましょう。

弊社が良く利用する写真・イラストの掲載サイトをご紹介

弊社が良く利用する写真・イラストの掲載サイトをご紹介します。
一部使えない用途などもありますので、各サイトの利用規約を確認してご利用ください。

誤って使用することは少ないとは思いますが、いずれのサイトもスポンサー画像・広告を含む場合がありますので、注意しましょう。

※ このページのリンク先は保護されていないページも含まれます。

写真・素材 類

写真素材 足成
http://www.ashinari.com/

様々なジャンルの写真が探しやすいように分類されて掲載されています。


ぱくたそ
https://www.pakutaso.com/

足成と同様に様々なジャンルの写真が探しやすいように分類されて掲載されています。

BEIZ Graphics
https://www.beiz.jp/

掲載ジャンルは少ないですが、背景に使用しやすい様なベタな素材が多くあります。


Natural Material
https://natural-material.com/

そのまま使える写真もありますが、加工素材として利用するのに適した写真が多くあります。


.foto project ※利用規約に注意が必要
https://free.foto.ne.jp/

使用条件に注意が必要ですが、様々な写真があります。

Pixabay
https://pixabay.com/

世界中の様々な写真、イラストがあります。
Wordpressで利用する場合は、プラグインを使用することで簡単に記事に差し込めます。

イラスト・素材 類

いらすとや
http://www.irasutoya.com/

可愛いイラストが沢山あります。


無料素材倶楽部
http://sozai.7gates.net/

主にアイコンなどの素材となりますが、イラストもあります。

音楽・BGM など

こちらは画像ではなく音楽ですが
Music-Note
http://www.music-note.jp/

BGMやアクションの擬音に使えそうなものとか多数の音楽が掲載されています。使用時に引用元の記載が必要となります。

ボタン・イベント などショップ素材

E.Commerce予備校
http://ec-yobiko.com/

EC design(デザイン)
http://design-ec.com/

無料素材倶楽部
http://sozai.7gates.net/

構造化データ > hentry(マークアップ: microformats.org)対応について

WordPressで構造化データに対応していない、もしくは対応が不十分なテーマだと、Google Search Consoleで構造化データのエラーが多発する場合があります。

author がありません
entry-title がありません
updated がありません

構造化データのエラーが発生しても直接はSEOに影響するわけではありませんが、検索結果の表示に影響しますので、不適切な構造化データだと、クリック率に影響して、長期的・間接的にSEOへ影響します。Wordpressはデフォルトで<article>に[class=”hentry”]付加してくれますので、折角なので対応します。

対応は、適切な箇所にclass=author/entry-title/updatedを追加するだけ

通常、投稿記事には「author」と「entory-date」は、大概のテーマではあるはずなので、そこのclassにauthorとupdatedを追記すればOKなのですが、この時2つのポイントに注意が必要です。

hentryで囲まれた中であること(通常はこの条件は満たすが、自作テーマやメインコンテンツの外枠に表示するような特殊な構造だと注意が必要)

entory-date/updatedには、形式のルールがあり、これに則している必要があります。

 $time_string = '掲載日: <time class="entry-date published updated" datetime="%1$s">%2$s</time>';
 if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
 $time_string = '掲載日: <time class="entry-date published" datetime="%1$s">%2$s</time> / 更新日: <time class="updated" datetime="%3$s">%4$s</time>';
 }
 $time_string = sprintf( $time_string,
 esc_attr( get_the_date( 'c' ) ),
 esc_html( get_the_date() ),
 esc_attr( get_the_modified_date( 'c' ) ),
 esc_html( get_the_modified_date() )
 );
 $posted_on = sprintf(
 esc_html( '%s', 'post date' ),
 '<a href="' . esc_url( get_permalink() ) . '" rel="bookmark">' . $time_string . '</a>'
 );

こんな感じ

authorは通常この後に表示される(?)ので、その部分にclass:authorを追記、表示がなければ以下のような感じで、上記の記述に続けて追加します。

 $byline = sprintf(
 esc_html( 'by %s', 'post author' ),
 '<span class="author vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '">' . esc_html( get_the_author() ) . '</a></span>'
 );
 echo '<span class="posted-on">' . $posted_on . '</span><span class="byline"> ' . $byline . '</span>'; 

最後にentory-titleの対応方法には2つのパターンがあります。

hentryで囲まれた中にTitle表示はある場合は、そのtitleのclassにentory-titleを追加するだけですが、本ページで使用しているテーマのようにhentryのarticleの外にtitle表示はある場合は、別途にhentryに囲まれた中にtitle表示を追加する必要があります。

本ページのテーマの場合は、以下のようにしています。

上記2つの記述に加えて、以下を記述

 <div class="entry-title-style">
 <?php if( is_home() || is_front_page() ) { ?>
 <span class="entry-title"><a href="<?php esc_url( get_permalink() ) ?>" rel="bookmark">home</a></span>
 <?php } elseif ( is_single() ) {
 the_title( '<span class="entry-title">', '</span>' );
 } elseif ( is_archive() ) {
 the_archive_title( '<span class="entry-title">', '</span>' );
 } elseif ( is_search() ) {
 ?><span class="entry-title"><?php the_search_query();?> で検索した結果</span><?php
 } else {
 the_title( '<span class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></span>' );
 }
 ?>
 </div>

これまでのまとめて、functions.phpで関数定義して、適当な場所に差し込みます。

/* 構造化データ post-date/time , author. and title */
function pureframe_posted_on() {
/* 上記3つの記述をここに */
 <?php 
}

で適当な場所に

pureframe_posted_on();

固定ページへの対応方法

投稿ページには、投稿日や執筆者名が通常あるので、上記の方法で通常対応できると思いますが、固定ページの場合は、これらの記載はない場合が多いのではないかと思います。固定ページでは”hentry”をとってしまうのもありなのかもしれませんが、上記の3つの記述は固定ページにも一応対応していますので、「pureframe_posted_on();」を適当な場所に挿入します。

固定ページのarticleを閉じる直前など記事の邪魔が少ない(デザインへの影響が少ない)場所に挿入します。

最後に

この対応は、本テーマでの現時点(2017.10.1)での対応で不十分な部分も多々あると思いますので、流用される場合は自己責任で(^-^;

pure.cssでレスポンシブ対応するなら、flexを使いましょう。

pure.cssで素直にレスポンシブ対応Gridだけで構築すると

 

A B C

 

A
B
C

こんな感じにHTMLに記述された順番にしか並びません。

例えば、BCAの順番に縦に並ぶようにしたい場合、どうしたらよいでしょうか?

pure.cssでpure-gで括るとbox/flexbox/flexの定義がされているので簡単!

以下のような感じで、それぞれのボックスにオーダー番号を付けてあげるだけで、簡単に並び替えが出来ちゃいます。

-webkit-box-ordinal-group:2;
-ms-flex-order:2; 
-webkit-order:2; 
order:2;

で、これを画面サイズごとにCSSに定義していくと画面サイズごとに違った順番で表示の変更も可能となります。

A B C

A:1、B:2、C:3

B C
A

A:3、B:1、C:2

B
A
C

A:2、B:1、C:3

こんな感じにも簡単にできます。

弊社作成中のテーマ「pureframe」では、以下のように使っています。分かってしまえば、簡単ですね。

@media screenでの定義順番は注意が必要で、CSSの基本ルールで最後の定義が有効になりますので適用範囲の「デフォルト、広いー>狭い」とします。

/*レスポンシブデザイン 表示順番 */
.container-inner > .main-left ,
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
.container-inner > .side-lr ,
.container-inner > .side-l ,
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
@media screen and (min-width: 35.5em) {
.container-inner > .main-left {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
.container-inner > .side-l {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
.container-inner > .side-lr ,
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
}
@media screen and (min-width: 48em) {
.container-inner > .main-left {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .side-l {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
.container-inner > .side-lr ,
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
}
@media screen and (min-width: 64em) {
.container-inner > .main-left {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .side-lr ,
.container-inner > .side-l {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
}

CSSフレームワークpureの概要

CSSフレームワークといえば、Bootstrapがまず思い浮かびますが、ご存知の通り他にも沢山の種類が存在します。その中でもpureはかなりサイズが小さく、その割に必要なフレームワークはしっかり押さえていて、使いやすいフレームワークになっています。

 

PUREの機能概要

BASE

Normalize.cssがベースになっていますので、別にリセットの用意は必要なくブラウザの違いによる表示の差分も最小限になるようにできています。

Hiding Elements

class=”hidden”; /* display: none !important;  */

 

Responsive Images

class=”pure-img”;/* responsive imge */

example:

<img src="/wp-content/uploads/2017/09/a0001_000375_m.jpg" alt="クリスマスの並木道" class="pure-img" />

 

クリスマスの並木道

FORMS

各種タイプのFormが予め設定されていて、「class=”pure-form”」と指定するだけでformが使用できます。細かいデザイン設定する場合は、デザイン設定用のclassを合わせて予め設定して、そちらでアレンジするだけです。

.pure-form input[type=”text”],
.pure-form input[type=”password”],
.pure-form input[type=”email”],
.pure-form input[type=”url”],
.pure-form input[type=”date”],
.pure-form input[type=”month”],
.pure-form input[type=”time”],
.pure-form input[type=”datetime”],
.pure-form input[type=”datetime-local”],
.pure-form input[type=”week”],
.pure-form input[type=”number”],
.pure-form input[type=”search”],
.pure-form input[type=”tel”],
.pure-form input[type=”color”],
.pure-form select,
.pure-form textarea 

コンパクトな 1 lineの入力フォームならこんな感じで簡単に記述できます。(「pure-button*」は後程記述する)

<form class="pure-form">
<fieldset>
<legend>A compact inline form/ログインフォーム</legend>

<input type="email" placeholder="Email">
<input type="password" placeholder="Password">

<label for="remember">
<input id="remember" type="checkbox"> 記憶する
</label>

<button type="submit" class="pure-button pure-button-primary">サインイン</button>
</fieldset>
</form>

 

 

A compact inline form/ログインフォーム

ラベル付き入力BOXを表示するようなFormの場合、calssに’pure-form-stacked’を追加します。

.pure-form selectがdefaultで、2.25emに設定されていますが、高さが足りないようなので、調整が必要かもしれません。ここでは、2.7emとしています。

こんな具合に

<style type="text/css"><!--
.pure-form select {height:2.7em;}
--></style>

<form class="pure-form pure-form-stacked">
<fieldset>
<legend>A Stacked Form/ラベル付きアカウント入力フォーム</legend>

<label for="email">Email</label>
<input id="email" type="email" placeholder="Email">
<span class="pure-form-message"> 必須  </span>

<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">

<label for="state">都道府県</label>
<select id="state">
<option>愛媛県</option>
<option>高知県</option>
<option>香川県</option>
<option>徳島県</option> 
</select>

<label for="remember" class="pure-checkbox">
<input id="remember" type="checkbox"> 記憶する</label>

<button type="submit" class="pure-button pure-button-primary">ログイン</button>
</fieldset>
</form>

 

A Stacked Form/ラベル付きアカウント入力フォーム 必須

入力BOX表示位置を揃えたい場合は、calssに’pure-form-aligned’を追加します。そして、ラベルと入力フォームを’ class=”pure-control-group” ‘で括ります。

こんな具合に

<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Username</label>
<input id="name" type="text" placeholder="Username">
<span class="pure-form-message-inline">必須項目</span>
</div>

<div class="pure-control-group">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
</div>

<div class="pure-control-group">
<label for="email">Email Address</label>
<input id="email" type="email" placeholder="Email Address">
</div>

<div class="pure-control-group">
<label for="foo">任意のラベル</label>
<input id="foo" type="text" placeholder="Enter something here...">
</div>

<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox">利用規約を確認しました
</label>

<button type="submit" class="pure-button pure-button-primary">送信</button>
</div>
</fieldset>
</form>

 

必須項目

‘Pure Responsive Grid’を併用することで、レスポンシブデザインに対応した入力フォームとなります。

このような具合に

<form class="pure-form pure-form-stacked">
<fieldset>
<legend>レシポンシブ 入力フォーム 用例</legend>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3"><label for="last-name">苗字</label> <input id="last-name" class="pure-u-23-24" type="text" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="first-name">名前</label> <input id="first-name" class="pure-u-23-24" type="text" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="email">E-Mail</label> <input id="email" class="pure-u-23-24" required="" type="email" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="city">市町村</label> <input id="city" class="pure-u-23-24" type="text" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="state">都道府県</label><select id="state" class="pure-input-1-2">
<option>愛媛県</option>
<option>高知県</option>
<option>香川県</option>
<option>徳島県</option> 
</select></div>
</div>
<label class="pure-checkbox" for="terms"> <input id="terms" type="checkbox" /> 利用規約を読みました </label> <button class="pure-button pure-button-primary" type="submit">送信</button></fieldset>
</form>

 

レシポンシブ 入力フォーム 用例

テキストベースの入力フォームのセットを’ class=”pure-group”‘で括ることで、サインアップフォームやモバイルデバイスに適した入力フォームとなります。

このような具合に

<form class="pure-form">
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Username">
<input type="text" class="pure-input-1-2" placeholder="Password">
<input type="email" class="pure-input-1-2" placeholder="Email">
</fieldset>

<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="A title">
<textarea class="pure-input-1-2" placeholder="Textareas work too"></textarea>
</fieldset>

<button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Sign in</button>
</form>

 

To be continue  

ホームページの管理会社変更について

ホームページやネットショップの運用管理を外部の会社に委託されている場合に、何らかの理由で、委託先を変更したいとき…..

  1. 契約書を確認しましょう。(重要

注意したいのは、解約条件と著作権です。万が一、作成物(ホームページ・ショップ)の著作権が制作会社(管理会社)にある場合は、現状のデータの利用は出来ないので新規に作成するか、著作権を持つ会社から譲渡(購入?)が必要になります。譲渡の場合は、もめない為に念書を交わすのが良いでしょう。あと、解約後のデータ、アカウントなどを破棄する念書も交わすと安心でしょう。

  1. ドメインの所有者を確認しましょう。(重要

もし所有者が制作会社(管理会社)である場合は、譲渡してもらうか、ドメインだけ管理してもらうことになります。基本的には、譲渡で、ドメイン管理会社(お名前ドットコムやムームードメイン)のアカウントと支払いは自身で行うか、新しい管理会社に委託するのが良いでしょう。

  1. ホームページのあるサーバーの所在・権利者を確認しましょう。(著作権がある場合)

制作会社(管理会社)の共有サーバー上にある場合は、新しいサーバーへのデータ移管が必要となりますので、現状のデータを入手しましょう。具体的に何が必要かは、新しい管理会社に事前に相談するのが良いでしょう。

単独レンタルサーバーの場合は、「契約サービスの譲渡」を行うことで、新規にサーバーを構築しないで、現状のままで管理会社だけを変更できる場合があります。新しい管理会社に事前に相談したうえで現状の管理会社に譲渡・移管を交渉するのが良いでしょう。

具体的な解約、管理会社の変更を現行の管理会社に伝えるのは、事前に変更先の管理会社と相談の上で伝えるようにしましょう。ドメイン・データともに新規に作成する場合はこの限りではありませんが、ある程度、認知度があるドメインであれば、極力ドメインは変えない(スラッグも極力合わせる)ようにするのが良いでしょう。

更新が遅いなどの理由で管理会社を変更される場合で、現行ページがHTMLでダイレクトに記述されているのであれば、変更の機に現状の資源を有効活用しつつ更新がやりやすいCMS(content management system)を導入することも検討されると良いでしょう。