2016年4月5日火曜日
カスタマイズ簡単なシンプル構造のタブメニューを見つけた！
オーダーフォーム改造のためのタブメニューをあれこれ模索中ですが
どれも一長一短。
CSSでガチガチにデザインしてあるものは、HTMLの構造に無理があったり。
jQueryを使ったものでも、項目を増やすことが難しかったり・・・
前回のポストの時点でベストかなぁと思ってたタブメニューですが、ようやくシンプルなものが見つかりました。
CSSでのカスタマイズも簡単。
おまけに項目を増やすのもクラス名を追加するだけでできちゃうなかなかのすぐれもの。
今回見つけたのはこちらのエントリー。
いや、マジ感謝っす。
どれも一長一短。
CSSでガチガチにデザインしてあるものは、HTMLの構造に無理があったり。
jQueryを使ったものでも、項目を増やすことが難しかったり・・・
前回のポストの時点でベストかなぁと思ってたタブメニューですが、ようやくシンプルなものが見つかりました。
CSSでのカスタマイズも簡単。
おまけに項目を増やすのもクラス名を追加するだけでできちゃうなかなかのすぐれもの。
今回見つけたのはこちらのエントリー。
いや、マジ感謝っす。
デモはこちら[jQuery] ものすごくシンプルなタブメニュー
タブメニューを実現する方法は検索すればいろいろ出てきますが、これが一番シンプルなんじゃないかなーと思います。 Result jQuery [code language="js"] $(function() { $(".tab li").click(function()...
This is the content of TAB 1.
This is the content of TAB 2.
This is the content of TAB 3.
サンプルコードは下のような感じ
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<style type="text/css">
* {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.tab_menu_box {
text-align: center;
}
ul.tab_menu {
list-style: none;
margin-left: auto;
margin-right: auto;
}
ul.tab_menu li {
background-color: #f2f2f2;
color: #666;
cursor: pointer;
display: inline-block;
width: 100px;
}
ul.tab_menu li:hover {
color: #FF0000;
}
ul.tab_menu li.active {
background-color: #999;
color: #fff;
}
div.tabContent {
width: 300px;
display: none;
margin-left: auto;
margin-right: auto;
border: thin solid rgba(201,201,201,1.00);
}
div.active {
display: block;
-webkit-animation: fadein 1s linear 0s 1;
}
label {
width: 100%;
display: inline-block;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
@-webkit-keyframes fadein {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
</style>
</head>
<body>
<script type="text/javascript">$(function() {
$(".tab_menu li").click(function() {
var num = $(".tab_menu li").index(this);
$(".tabContent").removeClass('active');
$(".tabContent").eq(num).addClass('active');
$(".tab_menu li").removeClass('active');
$(this).addClass('active')
});
});</script>
<div class="tab_menu_box">
<ul class="tab_menu">
<li class="active">
<label >
<input type="radio" name="use" checked />
NO1</label>
</li>
<li>
<label >
<input type="radio" name="use" />
NO2</label>
</li>
<li>
<label >
<input type="radio" name="use" />
NO3</label>
</li>
</ul>
</div>
<div class="tabContent active">This is the content of TAB 1.</div>
<div class="tabContent">This is the content of TAB 2.</div>
<div class="tabContent">This is the content of TAB 3.</div>
</body>
</html>
2016年4月4日月曜日
jQueryを使ったラジオボタンでタブ切り替え
ネットショップのオーダーフォームをリニューアルしようと思い、ラジオボタンを使ったタブメニューの切り替えをいろいろ模索してたところようやく簡単シンプルなものが見つかったのでメモ。
参考にしたのは下のリンク先の情報
あと項目が３つだけだったので１０個増やして全部で１３個のメニューから呼び出せるようにしました。
CSS周りは全然いじっていませんけど、デフォルトではクラス名「.invisible」が必須でほかは自由にデザインできるので適当に変更しちゃってください。
とりあえず全体のソース。
あ、jQueryはバージョン1.xじゃないと動きませんのでそのへんは注意してくださいね。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQueryを使ったラジオボタンでタブメニュー切り替え</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('input[type=radio]').change(function() {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').removeClass('invisible');
if ($("input:radio[name='tabmenu1']:checked").val() == "1") {
$('#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "2") {
$('#tr1,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "3") {
$('#tr1,#tr2,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "4") {
$('#tr1,#tr2,#tr3,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "5") {
$('#tr1,#tr2,#tr3,#tr4,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "6") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "7") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "8") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "9") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "10") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "11") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "12") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "13") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12').addClass('invisible');
}
}).trigger('change'); //←(1)
});
</script>
<style>
.invisible {
display: none;
}
</style>
</head>
<body>
<div>
<label >
<input type="radio" name="tabmenu1" value="1" id="radio1" checked />
NO1</label>
</div>
<div>
<label for="radio2">
<input type="radio" name="tabmenu1" value="2" id="radio2"/>
NO2</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="3" id="radio3" />
NO3</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="4" id="radio4" />
NO4</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="5" id="radio5" />
NO5</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="6" id="radio6" />
NO6</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="7" id="radio7" />
NO7</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="8" id="radio8" />
NO8</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="9" id="radio9" />
NO9</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="10" id="radio10" />
NO10</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="11" id="radio11" />
NO11</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="12" id="radio12" />
NO12</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="13" id="radio13" />
NO13</label>
</div>
<div id="tr1">
<h5>機能</h5>
<p>1</p>
</div>
<div>
<div id="tr2">
<h5>機能</h5>
<p>2</p>
</div>
<div id="tr3">
<h5>機能</h5>
<p>3</p>
</div>
<div id="tr4">
<h5>機能</h5>
<p>4</p>
</div>
<div id="tr5">
<h5>機能</h5>
<p>5</p>
</div>
<div id="tr6">
<h5>機能</h5>
<p>6</p>
</div>
<div id="tr7">
<h5>機能</h5>
<p>7</p>
</div>
<div id="tr8">
<h5>機能</h5>
<p>8</p>
</div>
<div id="tr9">
<h5>機能</h5>
<p>9</p>
</div>
<div id="tr10">
<h5>機能</h5>
<p>10</p>
</div>
<div id="tr11">
<h5>機能</h5>
<p>11</p>
</div>
<div id="tr12">
<h5>機能</h5>
<p>12</p>
</div>
<div id="tr13">
<h5>機能</h5>
<p>13</p>
</div>
</div>
</body>
</html>
参考にしたのは下のリンク先の情報
上記のサイトではtableタグを使っていたので、それをDIVタグに変更。ラジオボタンの選択値によってテーブルの内容を変更するスクリプトをjQueryで組んでみた
トップページ > WEB製作 > ラジオボタンの選択値によってテーブルの内容を変更するスクリプトをjQueryで組んでみた 久々にjQueryネタでも。 本当にちょっとしたものなのですが、意外と使えそうなのでポストしてみます。 概要はタイトルにもある通り、ラジオボタンの選択値によって、指定したテーブルのTRタグ（無論DIVでも）の表示・非表示を変更し、内容を操作するというものです。 ラジオボタンの checked はスクリプトの仕様上、必須です。 では、切り替えるスクリプト。 まず最初に removeClassで表示させます。ラジオボタンに checked がない場合は、TRが3つ、普通に表示されてしまうので注意。 で、次にラジオボタンの値によりしかるべし TR に invisible クラスを与えるだけです。 テーブルでなく、DIV タグにしたい場合は、テーブルタグではなく div で書き、セレクタを tr の内容ではなく、div にしてしまえば、ほぼそのまま流用可能。 (1)の trigger は、画面の初期表示時にイベントを自動実行させるためのものです。 この場合は、チェーンメソッドにして、change 自身を実行させています。便利。
あと項目が３つだけだったので１０個増やして全部で１３個のメニューから呼び出せるようにしました。
CSS周りは全然いじっていませんけど、デフォルトではクラス名「.invisible」が必須でほかは自由にデザインできるので適当に変更しちゃってください。
とりあえず全体のソース。
あ、jQueryはバージョン1.xじゃないと動きませんのでそのへんは注意してくださいね。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQueryを使ったラジオボタンでタブメニュー切り替え</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('input[type=radio]').change(function() {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').removeClass('invisible');
if ($("input:radio[name='tabmenu1']:checked").val() == "1") {
$('#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "2") {
$('#tr1,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "3") {
$('#tr1,#tr2,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "4") {
$('#tr1,#tr2,#tr3,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "5") {
$('#tr1,#tr2,#tr3,#tr4,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "6") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "7") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "8") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "9") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "10") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr11,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "11") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr12,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "12") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr13').addClass('invisible');
} else if($("input:radio[name='tabmenu1']:checked").val() == "13") {
$('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12').addClass('invisible');
}
}).trigger('change'); //←(1)
});
</script>
<style>
.invisible {
display: none;
}
</style>
</head>
<body>
<div>
<label >
<input type="radio" name="tabmenu1" value="1" id="radio1" checked />
NO1</label>
</div>
<div>
<label for="radio2">
<input type="radio" name="tabmenu1" value="2" id="radio2"/>
NO2</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="3" id="radio3" />
NO3</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="4" id="radio4" />
NO4</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="5" id="radio5" />
NO5</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="6" id="radio6" />
NO6</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="7" id="radio7" />
NO7</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="8" id="radio8" />
NO8</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="9" id="radio9" />
NO9</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="10" id="radio10" />
NO10</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="11" id="radio11" />
NO11</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="12" id="radio12" />
NO12</label>
</div>
<div>
<label>
<input type="radio" name="tabmenu1" value="13" id="radio13" />
NO13</label>
</div>
<div id="tr1">
<h5>機能</h5>
<p>1</p>
</div>
<div>
<div id="tr2">
<h5>機能</h5>
<p>2</p>
</div>
<div id="tr3">
<h5>機能</h5>
<p>3</p>
</div>
<div id="tr4">
<h5>機能</h5>
<p>4</p>
</div>
<div id="tr5">
<h5>機能</h5>
<p>5</p>
</div>
<div id="tr6">
<h5>機能</h5>
<p>6</p>
</div>
<div id="tr7">
<h5>機能</h5>
<p>7</p>
</div>
<div id="tr8">
<h5>機能</h5>
<p>8</p>
</div>
<div id="tr9">
<h5>機能</h5>
<p>9</p>
</div>
<div id="tr10">
<h5>機能</h5>
<p>10</p>
</div>
<div id="tr11">
<h5>機能</h5>
<p>11</p>
</div>
<div id="tr12">
<h5>機能</h5>
<p>12</p>
</div>
<div id="tr13">
<h5>機能</h5>
<p>13</p>
</div>
</div>
</body>
</html>
2016年3月22日火曜日
MacBook Pro に激安互換ACアダプターを使ってみた
MacBook Pro付属の純正電源アダプター「一万円って・・・・」高過ぎるだろ
MacBook Protを購入する前から「予備の電源アダプタほしいなぁ」ッて思ってたんですけど、Appleのサイトで探してみたらお値段「一万円」です。Apple 60W MagSafe 2電源アダプタ（13インチMacBook Pro Retinaディスプレイモデル用）
Apple 60W MagSafe 2電源アダプタを使えば、13インチMacBook Proに接続して充電できます。
さすがにこれは高すぎでしょ。
Lenovoのアダプタなんて純正でも￥５０００程度でっせ。
っていうかね、電源アダプタまでこだわって作るのはいいと思うよ。
でもね、電源アダプタって消耗品チックなところあるじゃないですか。
下着みたいなもんじゃないですか！
必須だけど一生モンってわけじゃない、みたいな。
そんな下着が一万円。ダメです。ゼーったいダメ
こんな値段じゃ予備なんてお気軽に買えねーじゃん！
Amazon様。互換アダプタの出番です。
と、いうわけで互換アダプタの出番です。electown Apple アップル magsafe2 60W 電源アダプタA1465/A1425ACアダプタ MacBook Pro Retinaディスプレイモデル13インチ対応 Ｔ字高品質 バルク品【１年保証】
●超小型・軽量タイプのアップル用ACアダプタ。 ●ケーブルをスッキリまとめることができできます。かなり便利だ。 ご使用中のノートPCに対応したACアダプタをもう1個用意することで、ACアダプタ の持ち運びを不要にする。 例えば自宅に純正のACアダプタを 置いておき、会社や学校などの出先に本製品を置いておけば、移動中にACアダプタを持ち運ぶ必 ...
Amazonで「MAGSAFE ６０w」で探すと幾つか候補が上がってきて、その中でも一番安かったのがこれ。
お値段￥２０００。純正の五分の一で手元にお届け。翌日お届け。朝頼めばその日のうちにお届け。
もうAppleなんて知らんもんねーって勢いで買っちゃいました。
ただし、この手の互換アダプタってネットで調べてもいい話が出てきません。
Amazonの他の商品についてるレビューを見ても微妙に不具合多めな感じのことが書いてあったりして、一瞬「え、MacBook壊れちゃうの？や、や、やっぱじゅんせい？」みたいな気分になりがちです。
しかーも、今回紹介した互換アダプタ、商品レビューが全くありませんでした（今は３件のレビューが付いてます。あ、一件は私のレビューです）。ただでさえ不安が募る互換アダプタを更に更に不安にさせるAmazonカスタマーレビュー無し。
正直言うとめっちゃ不安だったんですよ。
ホントに。
結論「Macの互換アダプターは使える」
ま、とりあえず買っちゃえ！お値段五分の一だし！っていう自分の声に押されてAmazonでポチ。
その１ヶ月後、更に追加でポチ。
んで現在に至る・・・
いや、もうね、普通に使えてますよ。これ。
一個は持ち歩き用としてかばんの中に待機。
もう一個は自宅で常駐用として。
どちらも普通にな～んにも問題なく使用中です。
Apple絡みの商品に対するカスタマーレビューが低評価になっちゃう理由
Amazonのカスタマーレビューがあれほど低いのが嘘みたいですが、ほんとに何も問題なく使えてます。
んじゃなぜあそこまでカスタマーレビューの評価が低いのか？
そもそも、レビューを書く動機って、すんごくいい思いをしたか、ちょっとでも不満なところがあった場合だと思うんですよ。
んで、この場合のお客様心理って、どうしても純正レベルの性能とか造作を求めてると思うんですよね。特にApple製品って細かいところまでよくデザインされてるじゃないですか。なので、互換アダプタにもそれを求めちゃってるから「ただ単に充電できるだけじゃダメ！美しくて機能的に！」みたいな期待をしちゃってて、少しでもその理想から離れると「あー！もうなにこれ！コードがちょっと固いジャーン！」ってことになっちゃって「こんなのAppleじゃなーい！あーもーイライラする。こんなのおしゃれなMacBook Proには使えない。使えないもの売りつけて腹が立つー」ってな具合でカスタマーレビューにその腹たちっぷりをぶつけてしまう・・・と。
でもね（いやいや互換だって・・・お値段五分の一の互換だって・・・）って思っちゃうんですよね〜
ワタクシはそこまで期待してなくて、普通に充電できればそれでOKなので、むしろ形までクリソツに作っちゃう業者さんの努力に頭がさがる思いすらいだいちゃうわけでして。
だってね、形なんかもう少し作りやすい形があると思うし、色も白じゃなくていいと思うし、コードを巻き付けるギミックなんていらないと思うし！
ってことで、ワタクシの評価はもちろん五つ星。この値段で充電できる。ってだけで満足ですし、おまけに純正とほぼおなじサイズの同じ形。これはもう大満足でしょ。
そりゃね、ちょこっとコードの色が違ったり、プラグのところのズレとかはありますよ。
でもそんなの気にしない。
ネットショップのお客様は「ちょっと期待しちゃうものを購入する」
自分でも商売やってますが、今回のことで教訓を得ました。
それは「お客様の持っている期待を少しでも上回れば良い評価を得られる」ってこと。
大事なのはお客様の持っている期待がどれほどのものなのかってのをよく考えなくちゃいけないな〜ってことです。
商品に対する期待もそうですし、梱包や対応、アフターサービスも含めて、ちょこっと期待値を上回れば、結構な確率で満足してくれるって思うんですよ。
なので最初からおもいっきり期待させちゃうような売り方はしないで、あんまり期待しないでね〜くらいの感じで購入していただけるように、いろんなバランス取んなくちゃダメなんだよね〜と今更ながらに肝に銘じておく次第でありますよ。
ごまかすことなく、誇張することなく、なるべくあるがままを伝えられるようなお店作りをこれからも心がけていこうと強く感じた互換アダプタでした。
2016年3月20日日曜日
ソーシャルボタンをオリジナル画像で設置してみる
FacebookやらTwitterへの投稿を簡単にするソーシャルボタンを設置してみる
FacebookやらTwitterやらGoogle+などのソーシャルメディアへの投稿を簡単にするボタン。 詳しいことはこちらのリンクを参考にしていただくとして・・・
SNS色々ありすぎ！各ソーシャルボタンの特徴を簡潔にまとめてみた | 株式会社LIG
お疲れ様です。ディレクターの鮫島です。 今年もあと2ヵ月で終わりですね。来月になれば後1ヵ月。1年経てばやはり後2ヵ月です。 そうして人は歳をとり、一生を終えていくのですね。人は死んだら一体どうなるのでしょうか... さて、今回はサイト内に設置されるFacebookいいね等のソーシャルボタンをまとめてみました
よくありますよね。BLOGの投稿の下に並んでるボタン。 これらを自分のサイトにも実装してみました（今までしてなかったんかーい！というツッコミはなしにしてください）。
実はもう少し簡単に設置できるかと思っていましたが、ボタンデザインをオリジナルにしたい場合、思いのほか手間取ってしまったので、前半はデザイン無視の簡単設置の方法、後半でオリジナルボタンイメージでの設置方法を説明してあります。
とりあえずソーシャルボタン設置方法のまとめのまとめ
ソーシャルボタンの設置方法にもいろいろあるらしく、検索して幾つかの方法をざざっと頭に入れておくと後々楽になるかもしれません。 といっても基本的にはボタンに対応するタグを入れていくだけなんですけどね。 なので、今回ソーシャルボタンの設置に関して参考にさせていただいたサイトのリンクです。ここに紹介した以外にもいろいろ見つかりましたが、情報が古くてあまり役に立たない感じでしたので割愛しました。
SNSのシェアボタンの設置方法まとめ (サンプルコード付き)
ソーシャルシェアボタンの設置方法とカスタマイズ方法を初心者向けに説明。コピペで使えるサンプルコードなど。
SNSボタンの設置とカスタマイズ方法 | murashun.jp
SNS ボタン(または、ソーシャルボタン)とは、ブログやニュースサイトに設置されているボタン型のインターフェースです。ユーザが SNS ボタンをクリックすると、記事をシェアしたり、ブックマークすることができます。代表的な SNS ボタンとしては、Twitter や Facebook の SNS ボタンがあります。
ソーシャルボタン設置方法その1
ソーシャルボタンジェネレータを使う方法
簡単なのは一括でボタンの設定までやってくれるサービスを利用すること。 HTMLとかエンコードとかよくわからんから、とにかくボタンだけ作りたい！ってことならこれらのサービスを利用するのが手っ取り早いです。
いいねボタン ツイートボタン ソーシャルボタン まとめて設置
ソーシャルボタン設置を一括まとめてできるツールです。facebook や ツイッター の いいねボタン をホームページ設置してみませんか？その他SNSにも対応可能ですのでご意見宜しくお願いします。
ソーシャルボタン設置方法その2
オリジナルデザインのボタンを使って設置する方法
オリジナルデザインのボタンを使ってソーシャルボタンを設置するには一手間掛ける必要があります。
といってもそれほど難しくはなく、単にリンクコードを設置していけばいいだけなのですが、<a>タグのリンク先に自分のURLを仕込む必要があります。
今回設置した「Facebook」「Twitter」「Google+」「はてなブックマーク」「Pocket」のタグサンプルと今回作成したボタンデータを紹介しておきます。
まずは下準備 自分のWEBサイトURLをボタン用にエンコードしておく
「エンコードってなんじゃい？」って感じですけど、詳しいことは知る必要ないので、URLを<a>タグ内部に書き込むために必要な作業だと思ってください。
URLのエンコードは下記のサイトのジェネレータを利用させて頂きました。
エンコードする場合の文字コードは「UTF-8」を選択してください。
Web便利ツール/URLエンコード・デコードフォーム - TAG index Webサイト
URLエンコードとデコードを行えるフォームです。変換したい文字列を入力し、変換ボタンをクリックするだけ。
ソーシャルボタンに使用するボタンイメージ
今回は拡大してもシャギーにならない「SVG」形式のイメージを作成しました。
んで、ここでもそれを表示させようと思ったんですけど、BloggerってSVGファイルのアップロードができないんですね・・・
なので、ソーシャルボタンを配布しているサイト紹介しているサイトを紹介しておきます・・・（申し訳ないっす）
facebook,twitter,はてブなどのSNSアイコンがセットになった素材まとめ | NESTonline Blog
皆さんこんにちは、ライターのakirayです。 今回は、SNSアイコンがセットになった素材を紹介致します。 今や印刷物でもwebでもSNSのアイコンが無い制作物を探す方が難しいほど、いたるところでSNSアイコンをみかけます。 いつでも使うものだからこそ、ほんの少しこだわることでセンスよく見せれるようになります。
「Facebook」「Twitter」「Google+」「はてなブックマーク」「Pocket」のタグサンプル
それぞれの<a>タグ内部にある「★★エンコード済みURL★★」の部分を設置したいサイトのURLに置き換えて、テキスト部分を置き換える、またはボタン画像のソースを指定すればOKです。
設置に関してはボタンを<ul>タグでリスト化して<div>タグでボックスを作っておくとCSSでいじる際に便利だと思います。
<a>タグのターゲットはdefaultになってますんで、そちらも「_blank」にするなりなんなりしてください。
<!-- Twitter ボタンをオリジナルのデザインにカスタマイズする -->
<a href="https://twitter.com/share?url=★★エンコード済みURL★★">
<!-- ここに任意のテキストや画像を配置する -->Twitterでシェアする
<img src="イメージソース" alt="" width="60"/>
</a>
<!-- Facebook ボタンをオリジナルのデザインにカスタマイズする -->
<a href="http://www.facebook.com/sharer.php?u=★★エンコード済みURL★★">
<!-- ここに任意のテキストや画像を配置する -->Facebookでシェアする
<img src="イメージソース" alt="" width="60"/>
</a>
Google+
<!-- Google+ ボタンをオリジナルのデザインにカスタマイズする --
<a href="https://plus.google.com/share?url=★★エンコード済みURL★★f">
<!-- ここに任意のテキストや画像を配置する -->Google+でシェアする
<img src="イメージソース" alt="" width="60"/>
</a>
はてなブックマーク
<!-- はてなブックマークボタンをオリジナルのデザインにカスタマイズする --
<a href="http://b.hatena.ne.jp/add?url=★★エンコード済みURL★★">
<!-- ここに任意のテキストや画像を配置する -->はてなブックマークにブックマークする
<img src="イメージソース" alt="" width="60"/>
</a>
pocketブックマーク
<!-- pocket ボタンをオリジナルのデザインにカスタマイズする -->
<a href="http://getpocket.com/edit?url=★★エンコード済みURL★★">
<!-- ここに任意のテキストや画像を配置する -->pocket にブックマークする
<img src="イメージソース" alt="" width="60"/>
</a>
ソーシャルボタン設置方法は他にもいろいろあるみたい・・・
ソーシャルボタンの設置には今回紹介したHTML埋込み型の他にもJavaScriptを使用したもの（URLの取得が簡単だったりする）とかPHPを使ったものやらいろいろあるみたいです。
残念ながらワタクシは簡単なスクリプトすら理解できていないので今回のようなHTML埋込み型を使うしかないわけですが、もしちょこっとしたスクリプト組めるよ！って人なら、そっちを使ったほうが便利かもしれませんね。
ま、どうやって設置するかより、設置したボタンを使いたくなるようなコンテンツをコツコツ積み上げることが大事なんですけど、こういうちまちました作業が意外と楽しかったりするネットショップ運営なのでした。
2016年2月18日木曜日
Macのファイル整理が超絶やりにくい・・・
表題の件そのまんまです。
ノートPCをMacBook Proに乗り換えてはや一ヶ月。
操作にもなれて、「Windowsノートじゃこうはいかんだろ」ってな便利な部分も感じつつ。（ハード面っていうかい筐体としての操作性は抜群です）
便利な面が多いってのはわかるんですけど、どーしても慣れないのが「Finder」を使ったファイル操作。
こればっかりはWindowsエクスプローラーのほうが完全に上。
もうね、MacのFinderってアホ。
例えば写真の整理するとして・・・
ノートPCをMacBook Proに乗り換えてはや一ヶ月。
操作にもなれて、「Windowsノートじゃこうはいかんだろ」ってな便利な部分も感じつつ。（ハード面っていうかい筐体としての操作性は抜群です）
便利な面が多いってのはわかるんですけど、どーしても慣れないのが「Finder」を使ったファイル操作。
こればっかりはWindowsエクスプローラーのほうが完全に上。
もうね、MacのFinderってアホ。
例えば写真の整理するとして・・・
Windowsエクスプローラーの場合フォルダにめがけてそのままドラッグ・アンド・ドロップ
Windowsの場合、エクスプローラーでフォルダの中身を表示させたら
写真なりファイルを選択してそのまま整理したいフォルダにドラッグ・アンド・ドロップ。
ファイルのサムネイルを見るのも簡単だし、表示サイズも自由に選べるし。
選んですぐポンポンほうりこんで行けばOK。
Windowsユーザーなら当たり前って感じなんですけど・・・
Macじゃこうはイカンのです。
Finderでのファイル整理。サムネイルのサイズすらサクッと変えられない・・・
Macでのファイル操作は「Finder」を使って行うわけですが、このFinderが親切なのかなんだかわかんないくらいめんどくさい。
まずファイルのサムネイルの大きさを変えるのが面倒。
いちいちメニューを開いて調節しなきゃいけないわけで、「あ、もうちょっと大きい方が見やすいな」って時にメニューを開かなきゃいけないってのはかなりめんどくさい。
これがWindowsだと、Ctrlキーを押しながらマウスホイールをコリコリやればいいわけですよ。
んで、いざファイルを選んでフォルダに移動するのも、サイドにフォルダの一覧が出ないのでドラッグしたまま移動先のフォルダを探してやらないといけないわけで…
macユーザーってのはこういうとこの不満がないんだろうかと。
結論。ファイルの整理はWindowsの方がはるかにわかりやすい！
ってなわけで、写真も含めてファイルの整理はWindowsエクスプローラの使い勝手にはかないません。macのfinderではストレス溜まりまくりなので、paralleldesktopを起動してWindows上でごにゃごにゃすることにしました
2016年1月30日土曜日
Macで大きすぎる写真をiPadに送ったら全然見れなくなっちゃった・・・
いつものようにMacBook Proちゃんで作業をしていたんですよ。
んで、新しく製作中のウェブサイトをMacでスクリーンショット撮って、MacからiPadに送って電車の中でチェックしようと思いまして。
Macでブラウザのフルスクリーンショット（っていうのか？）を撮るのは専用のアプリを使えば簡単に撮れちゃいます。
撮ったスクリーンショットは上から下までの長〜い画像。
それをAirDropを使ってiPadに送信。
いざiPadでスクリーンショットを開こうとしたら、なぜか写真アプリがダウン・・・
アプリ自体も開けない状態に・・・
Macから送られてきたスクリーンショットを削除しようにも、アプリが開けないので削除しようもなく、途方に暮れていろいろググってみた結果
なるほどMac標準のイメージキャプチャってのを使うわけですね。
んで、試したところ、すんなり削除完了！
しかし、Macってのは標準アプリでいろいろできちゃうもんですね・・・
ん？もしかしたらWindowsでも同じようなことできるのか？
ま、いいやｗ
んで、新しく製作中のウェブサイトをMacでスクリーンショット撮って、MacからiPadに送って電車の中でチェックしようと思いまして。
Macでブラウザのフルスクリーンショット（っていうのか？）を撮るのは専用のアプリを使えば簡単に撮れちゃいます。
撮ったスクリーンショットは上から下までの長〜い画像。
それをAirDropを使ってiPadに送信。
いざiPadでスクリーンショットを開こうとしたら、なぜか写真アプリがダウン・・・
アプリ自体も開けない状態に・・・
Macから送られてきたスクリーンショットを削除しようにも、アプリが開けないので削除しようもなく、途方に暮れていろいろググってみた結果
こちらの情報が見つかりました。iPhoneのカメラロール写真をMacを使ってパッと削除する方法
こんばんは。ちょっと前までiPhoneカメラロールに写真が3,000枚ほど溜まっていた@knk_nです。 2900枚... RT @ akio0911: 皆さん、カメラロールに写真は何枚入ってますか？ - けんけん◎Kensuke Nさん (@knk_n) 3月 19, 2012 今回はiPhoneのカメラロール内の写真をパッと削除する方法をご紹介します。 ...
なるほどMac標準のイメージキャプチャってのを使うわけですね。
んで、試したところ、すんなり削除完了！
しかし、Macってのは標準アプリでいろいろできちゃうもんですね・・・
ん？もしかしたらWindowsでも同じようなことできるのか？
ま、いいやｗ
登録:
投稿 (Atom)