月: 2016年6月

今回はスマホ表示時にタップで電話番号をかけれるようにする方法についてです。

ユーザーがスマホでサイトを閲覧した時に
わざわざ電話番号を入力する手間をかけてまで電話をかけてくれるか？といえば
大概の場合「面倒くさいしまた今度電話しよう・・・」なんて思われ二度とかけてくれない、なんてなりかねません。
思い立った時にタップの１動作だけで電話がかけられる事がユーザーにストレスを与えない為にも必須です。

・設定の方法は実に簡単、

 <a href="tel:0123456789"></a>

aタグのhref内に「tel:」と入れ電話番号を設定するだけです。

ただ、この状態のままだとPC表示でも電話がかかってしまうので
jQueryを使って特定の端末時のみタップが効くように設定します。

var ua = navigator.userAgent.toLowerCase();
var isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua);

if (!isMobile) {
    $('a[href^="tel:"]').on('click', function(e) {
        e.preventDefault();
    });
}

これで完成です。
レスポンシブ表示等ででスマホ、ＰＣの両ユーザーにストレスを与えない為にも
こういった細かい部分に配慮をする事が大切です。

両方HTMLファイルにつく拡張子です。
別物のHTMLファイルとして扱えるメリットがあります。
サーバーにより、読み込み順が違うぐらいで、他細かい機能の違いはありません。
昔は、拡張子をアルファメット3文字でつけるという、文化があったため「.htm」があります。
他にも、「.mpg」、「.mpeg」や「.mid」、「.midi」や「.jpg」、「.jpeg」なども有名ですね。

■「.html」と「.htm」をwebサイトで混在させるのは辞めましょう。

HTMLファイルの拡張子を混ぜてしまうと、どちらをリンクさせているかが把握しにくくなるため、
最終的なサイトを作った時にリンク切れが起こりやすくなるので、辞めましょう。

★まとめ★

一度、テストなどでサーバーアップしたい場合には.htmを使い、うまく利用しましょう。
※ファイルを作成した後に拡張子を変える場合、不具合が起こる場合があるので注意も必要です。

Font Awesomeはweb fontsの機能を使う事によって
様々な形のアイコンを表示することができます。

・Font Awesomeの導入
下記サイトがFont Awesomeです。
http://fontawesome.io/

head内にコードを指定します。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

これで使う準備ができました。

・次にFont Awesomeの使い方

下記URLでアイコンの一覧が見れるので
まず、使いたいアイコンを探してみましょう。

http://fontawesome.io/icons/

トラックのアイコンが欲しいのでこちらを選んでみました。

http://fontawesome.io/icon/truck/

「fa-truck」という部分がこのアイコンを指定する名前となります。

表示したい箇所にコードをコピペすることで使うことができます。

<i class="fa fa-truck" aria-hidden="true"></i>

フォントなのでサイズや色の変更もすることができます。

.fa.fa-truck.fa-6 {
    color: #ff0202;
}

cssで色を赤に変えてみました。

この様にフォントだけでアイコンを表示する事ができるので
ちょっとだけナビゲーション等にアイコンが欲しいな、という時など活躍できそうです。

ラジオボタンで切り替えれるテンプレートを共有します。

こんな感じで表示されます。

。

■HPで音楽を奏でる方法

1.「head」の中に、下記scriptを記入します。

2.「body」の中に、コードを記入します。。

3.「firstBox」と「secondBox」の中にそれぞれ表示させたい文字を挿入します。

★完成★

お問合せフォーム等で分岐したい案件があった場合に活用しましょう！

細かい設定はできませんが、音楽を鳴らすだけならjsを使用しなくてもできます。

■HPで音楽を奏でる方法

1.設定したいHPを開きます。

2.下記コードをの中に忍ばせます。

★完成★

HPで音楽を鳴らす設定にしていると、急に大音量でなってしまったりとユーザビリティが悪くなる場合もあるので注意しましょう。

webサイトの画像速度が遅いと、離脱率が下がってしまいます。
簡単に改善できる方法として、画像を軽くする方法があげられます。
今回は画像の自動圧縮プラグインのご紹介です

■「EWWW Image Optimizer」プラグインの使い方

1.プラグインより「EWWW Image Optimizer」をインストールします。

2.設定より、「EWWW Image Optimizer」をクリックします。

3.「basic Settings」の中の画像の箇所のみチェックを入れて「Save」します。

4.「Adcanced Settings」の中の画像の「disable pngout」箇所のみチェックを入れて、「Save」します。

5.「Conversion Settings」の中の画像の箇所のみチェックを入れて、「Save」します。

★完成★

上記の場所チェック項目を押させておけば、自動的に画像が圧縮されます。

通常webサイトでフォントを指定しても
ユーザーのＰＣ内にあるフォントしか再現されないので
使いたいフォントがあると画像で対処したりするのですが

webフォントを使うとフォントデータがweb上に存在するので
ユーザーの環境によって表示が左右される事はありません。

その中で今回はGoogleが提供しているGoogle web fontsを使いたいと思います。

まず導入
Google web fontsにアクセスします。
https://www.google.com/fonts

使いたいフォントを見つけたらQuick-useを選択します。

「3. Add this code to your website」standardタブ内にあるコードをhead内にコピーします。

次に「4. Integrate the fonts into your CSS:」内のコードを適応したい任意のcssにコピーすると表示されるようになります。

下記がフォントを適応した場合です。

markup

これで完成です。

Google web fontsは2016年6月現在779種類公開されているので
webサイトを作る毎に変えていっても早々困る事はないでしょう。

今回はcss3のtext-shadowを使った文字の縁取りについてです。

デザインした文字なんて画像を表示していけば良いなんて考えてしまうんですが、
画像を多用すると結果、HTML的にスカスカなサイトができてしまいます。
検索対策的にも文字の情報で構成した方が好ましい。

なので、多少の装飾であればcssで再現してしまおう
という時に活躍するのがこの縁取り表現。

text-shadowの構成するパラメータはこちら

text-shadow: 1px/*　横方向　*/ 3px/*　下方向　*/ 5px/*　ぼかし　*/ #000/*　影の色　*/; 

左から横方向のズレ、下方向のズレ、ぼかし具合、影の色味を設定できます。

なので、上記のcssをかけるとこの様になります。

この影の表現を4方向に指定する事で疑似的に縁取りに見せることができます。

text-shadow: -1px -1px 0 #f00,
              1px -1px　0 #f00,
             -1px 1px 0 #f00,
              1px 1px 0 #f00;

左右上下それぞれにぼかし無しの線を表示して文字を囲っています。

このCSSをかけると

このように縁取りを付ける事ができました。

デザインを再現する上で画像で処理すれば簡単なのですが、
後々に文言が変わる等して修正する場合、
また１から画像を作成しなくてはなりません。

そういった場合でも今回の表現を使うとHTMLを修正するだけで変える事ができるので
ちょっとした縁取りの場合、このような表現を導入すると良いです。

今回はJQueryでスムーズスクロールする表現についてです。

通常、ページ内リンクをする場合

 <div id="link"></div>

というIDに

<a href="#link"></a>

というリンクを指定してページ内の移動を指定するのですが。

この状態のままだとクリックした時の動きが急なので見づらく、ページを見ている側に対して優しくありません。
それに対してjQueryを使うことによって下に流れるようなスムーズなスクロール表現ができます。

まずhead内にJQueryを読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

その直下にスクリプトを書きます。

<script>
//スムーズスクロール
jQuery(function(){
   // #で始まるアンカーをクリックした場合に処理
   jQuery('a[href^=#]').click(function() {
	  // スクロールの速度
	  var speed = 500; // ミリ秒
	  // アンカーの値取得
	  var href= jQuery(this).attr("href");
	  // 移動先を取得
	  var target = jQuery(href == "#" || href == "" ? 'html' : href);
	  // 移動先を数値で取得
	  var position = target.offset().top;
	  // スムーススクロール
	  jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
	  return false;
   });
});
</script>

これで完成です。

設定としては下記の箇所

// スクロールの速度
	  var speed = 500; // ミリ秒

関数「speed」内の数字を変えることによってスクロール速度を変える事ができます。

一つのサイトにアクセスが集中してしまうと、サイトが重たくなってしまうので同一ページを５つアップロードして分散したい。
しかし、webで同一ページをアップロードすると、クローラーに引っかかりペナルティを受けてしまいます。

そんな時はnoindexタグを使って、ミラーサイトをindexしないようにしましょう。

noindexでミラーページの作成

1.ミラーサイトのmeta部分に下記を挿入する。

★完成★

noindexを理解して、うまく活用しましょう。