カテゴリー: コーディング

【一章 SEO対策における適切なタイトル設定】

ホームページのSEO対策を始めるにあたって、はじめに重要なことがあります。
タイトルです。検索時にも、まず一番初めに目が行く部分です。

クレアネットのサイトで言うとこの部分。

タイトルに重要なキーワードが入っていないと、SEOではほとんどヒットされません。
「タイトルにしっかりキーワードを入れているよ！」って人でも、そのキーワードははたして最高のパフォーマンスと言えるのでしょうか。

まずはタイトルタグの主な特徴とポイントを見ていきます。

●特徴
○検索エンジンが一番目に重視する要素。
○検索結果には、全角34文字前後が表示されて、他は消える。

●ポイント
○クリックしたいようなタイトルにする。
○タイトルタグをつけるのは、トップページだけでなく下層ページにもそれぞれつける。

以下、してはいけないペナルティを受ける可能性があること。
○タイトルに同じキーワードを複数入れない。
○タイトルを長くしすぎない。
○単語の羅列にする。

以上が、SEO対策でのタイトル設定時の注意点です。

次回、【二章 SEO対策におけるメタディスクリプションの内容】でお会いしましょう。

■序章 SEO対策とは■

ホームページは作るだけで終わりじゃありません。
ホームページはたくさんの人に見られて初めて意味があります。
そのホームページが検索エンジンでヒットされて、検索順位を上げることが目標となります。

そのとき良く聞くのがSEOと言う言葉です。

SEOとは、「Search Engine Optimization」の略です。
直訳で「検索エンジン最適化」と言う意味です。

そして、検索ユーザーに向けて最適化することをSEO対策と言います。
検索エンジンで上位にくるようにすると言うことですね。
序章を含め全六章まで、お届けさせていただきます。

次回、【一章 SEO対策における適切なタイトル設定】でお会いしましょう。

今回はwordpressでのコンタクトフォーム作成を可能にするプラグイン「Contact Form7」の使い方です。

プラグイン画面から「Contact Form7」で検索して
下記プラグインをインストールします。

プラグインを有効化すると
メニュー欄に「お問い合わせ」という欄が追加されます。

新規作成を選択

作成するとコードがショートコード吐き出されます。

ショートコードをwordpress内のページに貼り付けるだけで
フォームを作成することができます。

下記が実際のショートコードを貼りつけた状態です。

エラー: コンタクトフォームが見つかりません。

今回はページ内にTwitterのタイムラインを表示する仕方です。

まずTwitterのプロフィールの設定からウィジェットページを開き
新規作成からリストを選択します。

すると何種類かの表示形式を選べる画面が表示されます。

今回は下記のようなツィートの表示形式を選んでみました。

「Past a URL」の箇所にアカウントのページＵＲＬを入力します。

するとコードが吐き出されるので「copy code」の項目を選択するとクリップボードにコピーされます。
そのコードをページの表示したい箇所に貼りつけると完成です。

写真等の画像をさせる事ができる、
JQueryのfancyboxの使い方です。

下記サイトでファイルをダウンロードします。
http://fancybox.net/

ダウンロードして
解凍したフォルダ内の「fancybox」フォルダを読み込みたいサイトにコピーします。

今回は「common」の「js」フォルダに入れています。

ますヘッダー内に下記コードを記述してfancyboxを読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="common/js/fancybox/jquery.fancybox-1.3.4.css"/>
<script type="text/javascript" src="common/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

次にスクリプトタグも記述します。

<script type="text/javascript">
    $(document).ready(function() {
        $(".group").fancybox({
            cyclic: true
        });
    });
</script>

「.group」の箇所には任意のグループ名を付けてください。

「cyclic: true」の箇所はループ表示するかどうかを指定しています。
この場合はtrueなのでループ表示がONになっています。

そして下記のようにHTMLを組むとクリックすると拡大画像が表示されます。

<p><a class="group" rel="group1" href="img/pic01_l.jpg"><img src="img/pic01.jpg" alt=""></a></p>
<p><a class="group" rel="group1" href="img/pic02_l.jpg"><img src="img/pic02.jpg" alt=""></a></p>
<p><a class="group" rel="group1" href="img/pic03_l.jpg"><img src="img/pic03.jpg" alt=""></a></p>
<p><a class="group" rel="group1" href="img/pic04_l.jpg"><img src="img/pic04.jpg" alt=""></a></p> 

「rel」で任意の名前を付けた同一のグループ名を付ける事によって
拡大表示した時に同じグループ名内でループ表示されます。

ページにアクセス制限をかける場合.htacessでのbasic認証がありますが、
.htacessや.htpasswdファイルを用意したりと地味に設定が大変です。

wordpressの場合、プラグインを使うだけでbasic認証をかける事ができます。
設定の仕方は実に簡単

「WP BASIC Auth」で検索してインストール

あとはプラグインを有効にするだけです。

wordpressのログインIDとpassでbasic認証をかける事ができます。

メディアクエリの設定の仕方です。

スマホや等の表示域によってレイアウトが変わってしまう、または変えたい時に
ディスプレイサイズ毎にcssの指定を変える事ができます。

指定の仕方は下記です。

.test{
	width:100%;	
}
@media screen and (max-width: 768px){
	
	.test{
		width:50%;
	}
}

通常.testに対してwidth:100%に設定しているのに対し
@media screen and (max-width: 768px)と記述した括弧内に
ディスプレイのサイズが768px以下になった場合だけwidth:50%になります。

主に使用する設定として

・Max Width
ディスプレイの最大幅。
このサイズより小さい場合に適用されます。

・Min Width
ディスプレイの最小幅で指定します。
このサイズより大きい場合に適用されます。

よく使われる数値については
1024px、768px、480px、320px
があるようです。

本日は私が何回もやり方を調べてしまっているCSSをまとめて記載します。
基本的なCSSですが、コピペで対応できるように備忘録しておくことによって、コーディング速度の向上を図ります。

■hoverしたら透過してbackgroundを透過させる。

■float落ちを修正、必殺clearfix

■height指定の中で下に寄せるposition

■行間を開けるline-height

■リセットcss

Eric Mayer様考案CSS

CSS Tools: Reset CSS

★完成★

定期的に、すぐ使えるCSSまとめを上げていこうと思います。

こんな感じでメニューが出ます。(templeのデモです)

　　　　　　　　　　　　　　　　　　　↓

■「SlickNav」の使い方

1.インターネットより「SlickNav」をダウンロードします。

2.画像の二つを使用したいjsフォルダとcssフォルダにそれぞれ移動します。

3.表示させたいHTMLにスクリプトを読み込みます。

4.レスポンジブ化を行いたいソースのリストに「id=”menu”」を書きます。

5.CSSに下記を記載します。

★完成★

以上で簡単に、レスポンシブ時のメニュー表示ができるのでレスポンシブコーディングをする時は設定しましょう。

★参考サイト★

jQuery レスポンシブメニュープラグイン SlickNav の使い方

今回はbasic認証のかけ方です。

特定の誰かに見せたい場合や、
サイト作成中等の未完成のサイトを仮アップする場合等
誰でもアクセスできないように認証を設定します。

まず.htpasswdというファイルを作成し、
下記サイト等で.htpasswd用のパスワード設定コードを作成してください。
http://www.luft.co.jp/cgi/htpasswd.php
.htpasswdに貼り付けます。

そして.htaccess に下記を記述して.htpasswdと共にサーバーにアップします。

AuthUserfile /xxxx/.htpasswd
AuthGroupfile /dev/null
AuthName "Please enter your ID and password"
AuthType Basic
require valid-user

AuthUserfileには.passwdがあるパスを指定しています。

この状態でアクセスすると認証が必要な状態にする事ができます。