通常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を理解して、うまく活用しましょう。

DWのテンプレートを作ってしまえば、一括でwebサイトのテンプレート部分を書き換えれますが、紐づけが外れてしまう場合があります。
今回はテンプレートの紐づけが外れた場合の対処法をご紹介します。

■DWのテンプレート紐づけを元に戻す方法。

1.DWの「サイト」→「新規サイト」を押します。

2.「サイトの管理」を行います。

3.紐づけを繋ぎ直したいHTMLファイルを開きます。

4.「修正」→「テンプレート」→「テンプレートをページに適用」をクリックします。

5.紐づけを戻したいdtwファイル（今回はindex.dwt）を適用します。

★完成★

index.dwtに戻り、テンプレードを適用して、紐づけが戻れば完了です。

今回は大量のファイルを一括リネームできるソフトをご紹介します。

■フリーソフト「Namery」の使い方

1.「Namery」をインターネットよりダウンロードしてきます。
左がダウンロードしたファイル。右が解凍後ファイル。

2.「Namery.exe」で起動させます。

3.変更したいフォルダをフルパスに指定します。

4.リネーム設定に任意の名前を挿入します。

5.変更対象にしたいファイルを選択します。

6.実行します。

7.名前が変更されます。

★完成★

フォルダを一括して整頓したい場合は、Nameryを使用しましょう。

WordPressで投稿したページのコメント欄をソースを書き換えて非表示にする方法を以前紹介しました。

第五回「WordPressのコメントフォームを非表示にする方法」

今回はさらに簡単に、WordPressプラグインを使って、非表示してみたいと思います。

「One Click Close Comments」の設定方法。

1.「One Click Close Comments」プラグインをダウンロードします。

2.

現状の投稿ページ内はこんな感じで表示されています。

3.プラグインを有効化すると、コメントの横に緑色の点が出ています。

4.緑色の点をクリックして、赤色に変更すると固定ページがなくなります。

★完成★

投稿ページや固定ページで使用したい場合や、プラグインで簡単に調整したい場合には「One Click Close Comments」プラグインを使いましょう。

＜参考サイト＞

コメント欄を非表示にするプラグイン、「One Click Close Comments」

「Public Post Preview」の設定方法。

1.「Public Post Preview」をプラグインからダウンロードします。

2.投稿ページより、「Enable public preview」のアイコンが新たに作成されているので、チェックを押します。

3.すぐ下に、URLが吐き出されるので共有して終わりです。

★完成★

作成中の非公開ページを共有したいときに使いましょう！

＜参考サイト＞

Public Post Preview – 公開前の記事を他者に見せることができるWordPressプラグイン

Crazy Boneとは、WordPressサイトにログインした場合の履歴を管理できるプラグインです。
導入するだけで作動してくれるプラグインとなりますので、ぜひ導入しましょう。

「Crazy Bone」の設定方法。

1.「Crazy Bone」をプラグインからダウンロードします。

2.ユーザーの中の「ログイン履歴」から詳細が確認できます。

★完成★

ログイン履歴を管理して、不正アクセスや乗っ取りを行っている人がいないかしっかり履歴をとりましょう。

PCサイトしか対応していないサイトをスマートフォンで見たとき
縦で見た時と横にした時で文字のサイズが変わってしまう場合があります。
これはスマートフォンの機能で縦方向と横方向のサイズを自動調整してしまう事によって起きるのですが、
それをcss上で設定を切ることができます。
-webkit-text-size-adjust: 100%;
この一文を入れるだけで勝手にiphoneなどのスマートフォンで予期しない文字サイズになる事はなくなると思います。

最近はスマートフォン対応サイトが当たり前となってきましたが
まだまだ対応が追い付いていないサイトも多い現状です、
ユーザー目線に立って最低限こういった配慮をすることが大切だと思います。