ドメイン更新の方法

営業事務から更新確認表と工程表を受け取ったら作業開始。 ①https://www.onamae.comにアクセスし、「お名前.com Naviログイン」をクリック。



②IDとパスワードを入力し、ログイン
※IDとパスワードはBACKUP_2/Domain/お名前com.でドメイン更新.rtfを参照。

③ドメインを更新する会社をチェックして「1年」を選ぶ(会社が複数ある場合は全部にチェックしてから次へ進む)。

④「その他の支払い方法」の「銀行振込」をチェック。



⑤確認画面に進んで、申し込むボタンを押し、完了画面をPDFで保存する。
※BACKUP_2/Domain/の該当する年のフォルダに保存したPDFを入れる。



↓PDF保存する画面(完了画面)


⑥工程表のドメインの横に更新した日付と時間、金額(税前、税後)を書く。
『申込日』の欄にも更新した日付を書いてハンコを押す。

⑦更新確認表の作業した内容の右にハンコを押す

⑧営業事務に工程表を渡す

タッチデバイスでもhover効果をつける方法

○CSSの:hoverがスマホで効かない

hoverで何か効果をつける時に:hoverを使うと思いますが、タッチデバイスで:hoverをつけた要素を触っても反応しなかったり、アンカータグの場合は一度タップした時に:hover効果が出て、もう一度タップするとリンク先に飛ぶというように意図した結果にならないことが多いです。

例えば、下のサンプルはPCでは問題ないですが、スマホだと反応しないものが多いはずです。

http://dev.acc-test.net/members/yasuhara/hover/

そこで、、、

Javascriptでhover効果をつけることで、解決します。

手順①

hover効果をつけたい要素のcssに.hoverをつけます

○CSS

.aaa.hover { background:#000; }
すでに:hoverをつけている場合は:hoverを.hoverに変えれば良いです。

手順②

hover効果をつけたい要素の上にマウスのポインターを載せたり、タッチデバイスで要素の上に指を載せたりした時に、hover効果をつけたい要素に.hoverをつけ、離した時に.hoverをとるコードを書きます。

○Javascript

 $('.aaa').on('touchstart mouseenter', function(){
    $(this).addClass( 'hover' );
 }).on('touchend mouseleave', function(){
    $(this).removeClass( 'hover' );
 });
以上でスマホでもPCと変わらず意図したhover効果をつけることができます。

サンプル
http://dev.acc-test.net/members/yasuhara/hover/index-js.html

フォームタグのselectの文字色を選択前と選択後で変える方法

フォームタグのselectの文字色を選択前と選択後で変える方法をお伝えします。 色を変えることで、閲覧者にとってわかりやすいフォームになるかと思います。

○HTML

<select name="お問い合せ項目(必須)">
 <option value="" disabled="disabled" selected class="contact_not_selected">お問い合せ項目を選択してください。</option>
 <option value="お買い上げの商品について">お買い上げの商品について</option>
 <option value="お探しの商品について">お探しの商品について</option>
 <option value="その他">その他</option>
</select>
① 選択前のoptionに任意のクラス名(ここではcontact_not_selected)をつけます。

○JQuery

$(function(){
	function selectColor() {
  // 現在選択されてる項目によって色設定
	  if($('select').find('option:selected').hasClass('contact_not_selected')) {
	    $('select').css({'color': '#e6e6e6'});
	  }
	 
	  // 項目が変更された時、条件によって色変更
	  $('select').on('change', function(){
	    if($(this).find('option:selected').hasClass('contact_not_selected')) {
	      $(this).css({'color': '#e6e6e6'});
	    } else {
	      $(this).css({'color': '#000'});
	    }
	  });
	}
	selectColor();
});

② このように書くことで、①でつけたクラスがついているoptionを選んだ時は#e6e6e6が文字色になり、他のものを選んだ時は#000が文字色になります。

Google Map Javascript Apiのカスタマイズ方法

Google Mapをカスタマイズしてページに埋め込む方法を紹介します。

http://www.lusic.co.jp/company/

上のページにカスタマイズ後のGoogle Mapがあります。
今回はこのページを例にしてカスタマイズ方法を紹介します。  

①Apiキーを取得する

Google jsのAPIキー発行する方法

取得方法は上のリンク先のページに書いてあります。  

②Apiキーをヘッダーに入れる

<script src="https://maps.googleapis.com/maps/api/js?key=◯◯◯"></script>
①で取得したApiキーを◯◯◯の部分に入れます。  

③HTML

<div id="map-canvas"></div>
マップを表示したい箇所に入れます。idの名前は任意のもので問題ありませんが、この後紹介するJavascriptのコードのなかでmap-canvasと書かれている箇所も変更してください。  

④CSS

#map-canvas { width:400px; height:400px; }
③でいれたdivにスタイルをつけます。 上の例だと400×400pxのdivの中にGoogle Mapが表示されます。

⑤Google MapをカスタマイズするJavascript

<script> 
var map; 
var osaka = new google.maps.LatLng(34.689472, 135.499019);
var MY_MAPTYPE_ID = 'Pandy_style';  

function initialize() {  
  var featureOpts = [
    {
      "stylers":[
         { "hue": "#1c95ff" }, 
         { "saturation": -80 }
      ], 
      "elementType": "all", "featureType": "all"
    }
  ]  
  var mapOptions = { 
    zoom: 17,
    center: osaka,
    mapTypeControlOptions: {
      mapTypeIds: [
      google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
    },
    mapTypeId: MY_MAPTYPE_ID
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var image = '../images/pin.png';
  var marker = new google.maps.Marker({
    position: osaka,
    map: map,
    icon:image,
    title: 'LUSIC株式会社 (ルーシック)'
  });
  var styledMapOptions = {
    name: 'LUSIC株式会社 (ルーシック)'
  };
  var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions
  );
  map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
}  
</script>

google.maps.event.addDomListener(window, 'load', initialize);
上のJavascriptのコードはLUSICさんのものをコピペしたものです。実際に使用する際は過去のサイトのものをコピペして作業をすると楽です。head内に書いてもいいですし、外部ファイルに書いてhead内で読み込んでも動きます。上から順にカスタマイズする場所を説明します。

【地図の座標】

var osaka = new google.maps.LatLng(34.689472, 135.499019);
new google.maps.LatLngのカッコの中に表示させたい地点の座標をいれます。osakaは他の名前でも問題ありませんが、コードのなかでosakaと書かれている場所の名前も変更してください。

◆座標の調べ方

①Google Map(https://www.google.co.jp/maps)で住所を入れます。

②目的の場所で右クリックし、「この場所について」を左クリックします。



③下に座標が現れます

【地図全体の色合い】

"hue": "#1c95ff"
“#1c95ff”にサイトの雰囲気に合った色を入れて下さい。

【彩度】

 "saturation": -80
「-80」が入っている箇所の数値が高いほど鮮やかに、数値が低いほどくすんだ色になります。

【地図の縮尺】

zoom: 17
「17」が入っている箇所を変更することで表示する地図の縮尺を変更することができます。1〜21まで設定でき、数値が大きいほど拡大されて表示されます。

【ピンの画像】

var image = '../images/pin.png';
 icon:image,
‘../images/pin.png’を変更すると、目的の場所を示すピンを作成した画像などに変更することができます。デフォルトでいい場合は2つとも削除してください。  

【titleとname】

title: 'LUSIC株式会社 (ルーシック)'
name: 'LUSIC株式会社 (ルーシック)'
こちらは使用する会社の名前などに変更してください。 設定は以上になります。


アコーダーで作成したGoogle Map Javascript Apiを活用したサイトを紹介します。

◯株式会社スリーエス
http://www.sss-plastic.co.jp/company.html

◯永大産業株式会社
http://www.eidai.com/showroom/umeda.html
スマホのサイズでロードすると縮尺が変わるプログラムを書きました。

wow.jsとanimate.cssでスクロールアニメーション

スクロールをして要素に達したらアニメーションさせる方法

これまでプラグイン使わずに下記のように書いてスクロールアニメーションを実現していましたが、プラグインでもできるようなので紹介します。

$(function(){
     $(window).on('scroll',function(){ 
          var scrollPosition = $('.aaa').offset().top - $(window).height(); 
          if($(window).scrollTop() > scrollPosition + 300){
              $('.aaa').stop().fadeIn(700);
          }
     });
});

①wow.jsとanimate.cssをダウンロード

◯wow.js

http://mynameismatthieu.com/WOW/

◯animate.css

https://daneden.github.io/animate.css/

②head内に記述し、読み込み

<link rel="stylesheet" href="css/animate/animate.css">
<script src="js/wow/wow.js"></script>
<script>
    new WOW().init();
</script>
animate.cssはそのままでいいのですが、wow.jsは上記のように記述する必要があります。

※WOWを小文字にすると動かなかったので、大文字で書きます。

③使い方

<div class="aaa wow fadeIn"></div>
アニメーションさせたい要素のCLASS名に「wow」と「(アニメーション名)」を追加します。
アニメーションはanimate.cssの公式サイトから選ぶことができます。
上記のように書くと下にスクロールして要素が見えた瞬間にフェードインアニメーションがスタートするようになります。   細かく設定したい場合は、wow.jsのオプションを活用しましょう。
<オプション>
data-wow-duration:アニメーションの時間
data-wow-delay:スクロールが要素に達してからアニメーションがスタートする時間
data-wow-offset:スクロールが要素に達してからアニメーションがスタートする距離
data-wow-iteration:アニメーションの繰り返し回数  

<例>株式会社乾様サイト http://www.inig.co.jp/

<p class="anime_img_1 wow fadeInUp" data-wow-duration="2s" data-wow-offset="200"><img src="images/1.jpg" ></p>
このように書くと、要素に達してからさらに200pxスクロールした時に、下から浮かび上がるように要素が2秒かけて出てきます。

簡単にスクロールアニメーションが実現できました。ぜひ使ってみてください。