【PayPalで楽アフィリエイト】のアフィリエイター用の画面だけですが、レスポンシブ化（モバイル対応）しました。

【PayPalで楽アフィリエイト】 アフィリエイター用 中見版からご確認いただけます。
デザインの一部はcssから変更できますので、ご自分のイメージに合ったデザインにしていただけます。


各要素の色の変更や背景画像の設定もcssファイルから行うことができます。


cssの記述は基本モバイルファーストになっています。
ブレイクポイントは768pxに設定しています。
ブラウザサイズが768px以上の場合は、PCやタブレットと判断して左メニューを表示します。
767px以下の場合はスマートフォンと判断して左メニューは【メニュー】クリックでモーダル表示されるようになっています。リリースは【メニュー】という文字を表示してクリックするようにしていますが、ハンバーガーメニューなどに変更できます。もちろん色、枠も変更可能です。

ただし、tableタグはブレイクポイントは600px、PCファーストで書いています。
600px以上の場合は通常の表を表示します。
599px以下の場合は1カラム化しています。

ブレイクポイントもご自身が操作しやすいと思われるポイントに変更できます。


アフィリエイターが入力するテキストボックスやテキストエリアの大きさもcssファイルで変更可能です。
より便利だと思われる大きさに変更できます。


【PayPalで楽アフィリエイト】 アフィリエイター用 中見版はあくまでも叩き台です。デザインはご自由にどうぞ。

htmlやcssはサポート対象外です。
どうしてもサポートがご入用な場合は、有料での対応なら可能かもしれません。
ご希望の方は【ネットビジネス便利ツール】のお問い合わせからご連絡ください。

【ネットビジネス便利ツール】のモバイル対応、どのようにすれば良いか一番わからなかったテーブルについてです。

各ツールのマニュアルなどで所々テーブルを書いています。
スマートフォンでどのように表示すればわかりやすいかよくわからなかったので、色々表示させてみることにしました。

【ネットビジネス便利ツール】で使っているテーブルは2パターンあります。
項目などの一覧を表示しているテーブルと項目の名前とその説明のテーブルです。
さてどういう方法がいいのでしょう。

まず試したのが幅が狭い画面では表を展開！ stacktable.jsの使い方です。わかりやすそうだと思ったのですが、実際に表示させてみると、【ネットビジネス便利ツール】のテーブルではわかりやすくはなりませんでした。
【ネットビジネス便利ツール】のテーブル殆どが2列のデータです。stacktable.jsはもっとデータ数の多いテーブルに良さそうです。

次に試したのがスマホでtableタグを見やすくするCSSのように1列に表示する方法です。
仕組みはtableレイアウトをCSSだけでレスポンシブ化する方法がわかりやすいかもしれません。


文字数が少なく、余裕がある場合はスマートフォンでも通常の表を表示します。
PC・タブレット時。


スマートフォン時。



文字が折り返されて読みにくくなる場合は1カラム化します。
PC・タブレット時は通常の表を表示します。


スマートフォン時は1カラムで縦に表示します。


cssは基本的にはモバイルファーストで書いていますが、テーブルはPCを元にして1カラム化しているのでPCファーストで書いています。

html -------------------------------------------------

<table id="table1" class="responsive">

	<thead>

		<tr>

			<th class="koumoku">項目名</th>

			<th>説明</th>

		</tr>

	</thead>

  

	<tbody>

		<tr>

			<td class="background">項目1</td>

			<td>項目1の説明</td>

		</tr>

  

		<tr>

			<td class="background">項目2</td>

			<td>項目2の説明</td>

		</tr>

	</tbody>

</table>

------------------------------------------------------

css ---------------------------------------------------

#table1 .koumoku {

	width: 150px;

}



@media (max-width: 599px) {

	#table1 .koumoku {

		width: auto;

	}



	.responsive {

		border-collapse: separate;

		border-spacing: 0  20px;

	}

	

	.responsive thead {

		display: none;

	}

	

	.responsive td {

		border: none;

		display: block;

		width: 100%;

		box-sizing: border-box;

		border-bottom: 1px solid #dddddd;

	}

	

	.responsive td.background {

		background-color: #d9d9d9;

	}



	.responsive td:before {

		content: attr(data-title) " ";

	}

}

------------------------------------------------------

【ネットビジネス便利ツール】のテーブルは何とかなりました。販売しているツールの管理画面ではテーブルを多用しているし、複雑です。どうしたら読みやすいかな。少しずつでも改善していこう。

【ネットビジネス便利ツール】のモバイル対応、フォームでよく使う機能です。

ボタンクリックでメッセージを表示、キャンセル時は元の画面に戻り、OK時はサブミットする
ボタンクリックで前の画面に戻る、
動きをするJavaScriptについてです。

2つとも今までは、htmlにJavaScriptを書いていました。

ボタンクリックでメッセージを表示、キャンセル時は元の画面に戻り、OK時はサブミットします。
html -------------------------------------------------

<form action="xxxxx" method="post" target="_top">

 <input type="button" value="表示文字" onclick="return kakunin('表示メッセージ。改行は\n')" >

 </form>

------------------------------------------------------

JavaScript --------------------------------------------

function kakunin(msg){

	var result = false;

	result = window.confirm(msg);

	if(result == true){

		return true;

	}

	else{

		return false;

	}

}

------------------------------------------------------

これをjQueryを使ったソースに書き換えました。

html -------------------------------------------------

<form action="xxxxx" method="post" id="frmID">

 <input type="button" value="クリック" id="buttonID">

</form>

------------------------------------------------------

JavaScript --------------------------------------------

$(function(){

	$('#buttonID').click(function(){

	    if(!confirm('表示メッセージ。改行は\n')){

	        /* キャンセルの時は元の画面に戻る */

	        return false;

	    }else{

	        /* OKの時はサブミット */

	        $('#frmID').submit();

	    }

	});

});

------------------------------------------------------

htmlとソースを分けるという点ではスッキリしますが、どこに何を仕込んだかわからなくなりそうです。一括検索もできないし、呼び出し側でメッセージだけ変更するのもややこしいし、元に戻した方が便利かな・・・



ボタンクリックで前の画面に戻ります。

html -------------------------------------------------

<form method="post" action="" id="frmSet" name="frmSet">

	<input type="button" id="back" value="修正">

	<input type="hidden" id="mode" name="mode" value="send">

</form>

------------------------------------------------------

JavaScript --------------------------------------------

$(function(){

	$('#back').on('click', function() {

		$('#mode').val('syuusei');

		$('#frmSet').submit();

	});

});

------------------------------------------------------

ブラウザの戻るボタンと同じ動き【history.back()】ではなく、PHPで処理をするためmodeをsyuuseiに設定してサブミットしています。

【ネットビジネス便利ツール】のモバイル対応の続きです。

フォームの入力であるテキストなどに、今までは大きさや長さをhtmlで設定していました。cssで設定する事が推奨だったのですが、面倒なのでついhtmlから設定していました。
レスポンシブWebデザインにするため、cssから設定するように変更しました。

html -------------------------------------------------

<input type="text" id="mail"  name="mail" value="" required placeholder="メールアドレスを入力">

<textarea id="naiyo" name="naiyo" cols="30" rows="15" wrap="off" required ></textarea>

------------------------------------------------------

css -------------------------------------------------

#mail{

	width: 250px;

	height: 20px;

}



#naiyo{

	width: 300px;

	height: 200px;

}



@media (min-width: 768px) {

	#mail{

		width: 350px;

		height: 20px;

	}

	

	#naiyo{

		width: 450px;

		height: 200px;

	}

}

------------------------------------------------------

placeholderに設定した文字列がテキストに表示されます。入力すると消えます。
placeholderあり

placeholderなし


requiredを設定すると必入力になります。入力せずサブミットしようとするとメッセージが表示されます。

type="text"ではなく、type="email"やtype="url"などにして、入力チェックも行うことができます。html5から多くのタイプが追加されました。
<input>－HTML5タグリファレンスがわかりやすいです。

便利・・のような気がするのですが、あくまでもブラウザでの入力チェックだけなので、私はほとんど利用していません。

と言うのも、まあ当たり前ですが、ブラウザを介さない入力をチェックできません。直接投げられたデーターは確認できないのです。そして直接投げられたデータほど危険なのです。
特にデータベースに登録するデータは登録前にきちんと確認しなければいけません。このチェックはデータベースに登録するスクリプトでしかチェックできません。

あまりブラウザでのチェックをきちんと書いても、どうせスクリプトでもチェックしなければいけないので二重チェックになって手間ばかりかかります。

誤解なさらないで欲しいのですが、無駄な機能だと言っているのではありません。htmlでの機能に頼り過ぎては危険、というだけす。

効果的に使うと、とても便利な機能です。
これからレスポンシブWebデザインを適用予定の販売ツールでは、もっと使う予定です。
日付（data）や時刻（time）は魅力的です。

【ネットビジネス便利ツール】のモバイル対応の続きです。

今まではポップアップ画面を使っていました。サイズの小さいブラウザを新しく立ち上げて、リンク先のページを表示していました。
スマートフォンでやってみたら新しいタグが開きそこにリンク先のページが表示されるのでそれでも駄目なことはないのですが、ついでにColorboxを使ってモーダルウィンドウに表示することにしました。

Colorboxのインストールの仕方や使い方についてはColorboxの使い方：jQueryで簡単モーダルウインドウを参考にしました。少しファイル構成が変わっているようですが見ればわかります。

jQueryとColorboxはCDNサーバから読み込むこともできるそうですが、知らない間にバージョンアップしていて、ある日突然使えなくなったら焦るので、自分の使っているレンタルサーバーにファイルを置くことにしました。

Colorboxはデザインが5つあるので、サンプルはないものかと探してみたのですが見つかりませんでした。探しそこねているのだと思います。同じく探しきれておられない方のために、自分のサイトで表示して確認したときのキャプチャです。example1・・・example5と順番に並んでいます。クリックで拡大表示されます。
　　

　

別ページ（xxxxx.php）を表示したいので、htmlにはこう書きます。
html -------------------------------------------------

<a href="xxxxx.php" class="cblink">表示テキスト</a>

------------------------------------------------------

JavaScriptです。jQueryを使っているので先にjQuery読み込んで、その後で次のソースを読み込みます。
JavaScript --------------------------------------------

$(function(){

	$(".cblink").colorbox({iframe:true, width:"80%", height:"80%"});

});

------------------------------------------------------
JavaScriptが無効な環境ではxxxxx.phpに遷移します。

【ネットビジネス便利ツール】のモバイル対応の続きです。

本文中の見出し部分にも横に細長い画像を背景に使っていました。スマートフォンの横幅より長い画像なので、スマホでは横幅がはみ出してしまいます。
画像の上に文字を載せているし、文字は小さくすると読めなくなるので、背景画像をブラウザ幅に合わせて縮小表示するのでは駄目でした。
短くした画像を用意してもいいのですが、それはやめて背景色で対応しました。

html -------------------------------------------------

<h2>見出し<h2>

------------------------------------------------------

css -------------------------------------------------

h2 {

	background-color: #8C1016;

}



@media (min-width: 600px) {

	h2 {

		background: url(横長画像へのパス) no-repeat;

	}

}

------------------------------------------------------

ブラウザの横幅が599px以下なら画像を使わず背景色を変え、600px以上なら背景に画像を使います。


同じく背景画像を設定していますが、
【ビジネス羅針盤 ステップメール】
と
【PayPalで楽アフィリエイト】
のヘッダの背景画像は、ブラウザの表示幅に合わせて縮小表示しています。

css -------------------------------------------------

#header{

	width: 100%;

	height: 200px;

	margin: 0 auto;

	background: #FFFFFF url(header.jpg) no-repeat center top;

	background-size: 100%;

}



@media (min-width: 756px) {

	#header{

		width: 754px;

		height: 364px;

		margin: 0 auto;

		background: #FFFFFF url(header.jpg) no-repeat left top;

	}

}

------------------------------------------------------

755px以下ならブラウザ幅全体にheader.jpgを表示、756px以上なら幅754pxに固定してheader.jpgを表示しています。

【ネットビジネス便利ツール】のモバイル対応です。

ここからは色々なページで共通して修正した項目についてまとめてみます。

今まではPC用にサイトを作っていたので、画像もPCに合わせた大きさになっています。これから作る画像もPCに合わせた大きさにします。
スマートフォンでは大きな画像を縮小表示することで対応します。

画像を自動リサイズする際に拡大縮小しすぎを防ぐCSSの1. 画像をウインドウ幅に合わせて表示したいが、本来の大きさより拡大はしたくない場合を設定しました。

css ---------------------------------------------------

img {

	max-width: 95%;

	height: auto;

}

------------------------------------------------------

画面いっぱいより少し小さくしたいので、95％を指定しました。
元々PC用に作ったページでは、画像の本来の大きさで表示しているからでしょう、これだけできちんと表示されました。