第二章では「meta description」（メタディスクリプション）をご説明します。
ページの概要のことを、ディスクリプションといいます。
ディスクリプションはこんな感じで表示されます。
インターネット検索時に、タイトルの下に表示される部分ですね。
ディスクリプションには、ページ内の重症なキーワードをしっかり含めて、ユーザーの興味を引く文章書くことを心がけます。
表示される文字数は120文字前後ですが、最初の方の40文字ぐらいにしっかり必要なキーワードを記載しましょう。
さらに、検索されたキーワード部分が含まれる場合、太文字で表示されるため、クリック率に影響を与えるとされています。
次回、【第三章 SEO対策でのキーワード選択の重要性】でお会いしましょう。
Facebookのページ内への埋め込み方についてです。
下記ページ「ページプラグイン」にアクセス
https://developers.facebook.com/docs/plugins/page-plugin
FacebookページのURLに表示したいアカウントのURLを入力します。
その他カスタマイズしたい点を入力してコードを取得を選択
iframeを選択してコードに貼り付けて完成です。
というわけで下記にクレアネットのFacebookページを表示してみました。
特に設定に拘らなければアカウントのURLを入力するだけなのでとても簡単です。
通常の埋め込みでは、レスポンシブ化したときにgooglemapが見えません。
今回はgooglemapの埋め込みをスマホでも見えるようにする方法を見ていきます。
| <div class="ggmap">iframeのgooglemapコード</div> |
| .ggmap { | |
| position: relative; | |
| padding-bottom: 56.25%; | |
| padding-top: 30px; | |
| height: 0; | |
| overflow: hidden; | |
| } | |
| .ggmap iframe, | |
| .ggmap object, | |
| .ggmap embed { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } |
以上でスマホページで見ても、googlemapが反映されます。
jQueryのプラグイン「bxslider」を使えば簡単にスライダーを導入する事ができます。
まず下記からダウンロード
http://bxslider.com/
ダウンロードしたファイルで下記の必要なファイルをディレクトリに移します。
・imagesフォルダ
・pluginsフォルダ
・jquery.bxslider.css
・jquery.bxslider.min.js
ヘッダー内に下記コードを読み込みます。
<!-- jQuery library (served from Google) --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- bxSlider Javascript file --> <script src="/js/jquery.bxslider.min.js"></script> <!-- bxSlider CSS file --> <link href="/lib/jquery.bxslider.css" rel="stylesheet" />
次にHTMLの表記、例えば4枚のスライダーを表示したい場合
下記のようにリストにclass=”bxslider”を記述
<ul class="bxslider"> <li><img src="/images/pic1.jpg" /></li> <li><img src="/images/pic2.jpg" /></li> <li><img src="/images/pic3.jpg" /></li> <li><img src="/images/pic4.jpg" /></li> </ul>
最初にbxsliderを読み込んだ後にの下記のコードを記述すればbxsliderが動きます。
by <script>
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
こんな感じのボタンです
| <p id="page-top"><a href="#wrap">PAGE TOP</a></p> |
| #page-top { | |
| position: fixed; | |
| right: 20px; | |
| font-size: 77%; | |
| } | |
| #page-top a { | |
| background: #000; | |
| text-decoration: none; | |
| color: #fff; | |
| width: 100px; | |
| padding: 10px 0; | |
| text-align: center; | |
| display: block; | |
| border-radius: 6px; | |
| border:#FFF solid 1px; | |
| } | |
| #page-top a:hover { | |
| text-decoration: none; | |
| background: #999; | |
| } |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> | |
| <script> | |
| $(function() { | |
| var topBtn = $('#page-top'); | |
| topBtn.hide(); | |
| $(window).scroll(function () { | |
| if ($(this).scrollTop() > 500) { | |
| topBtn.fadeIn(); | |
| } else { | |
| topBtn.fadeOut(); | |
| } | |
| }); | |
| topBtn.click(function () { | |
| $('body,html').animate({ | |
| scrollTop: 0 | |
| }, 700); | |
| return false; | |
| }); | |
| }); | |
| </script> |
CSSの記述を変えれば、好みの色や形に変更できます。
トップページへ戻るボタンが少ないホームページには採用してあげてもいいですね。
通常tableを組んでborderをかける場合
下記のようなCSSの指定をする場合が多いと思いますが
table {border-collapse:collapse;}
td, th {border:1px solid #000000;}
FireFox等の一部のブラウザで表示すると
線が消えたりしてレイアウトが崩れてしまいます。
その場合、下記のような
borderのtableで上と左の線、th,tdで右と下の線を指定する書き方で解消することができます。
table {
border-collapse: separate;
border-spacing:0;
empty-cells:show;
border-top:1px solid #000000;
border-right:none;
border-bottom:none;
border-left:1px solid #000000;
}
th, td {
border-top:none;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-left:none;
}
本日も私が何回もやり方を調べてしまっているCSSをまとめて記載します。
基本的なCSSですが、コピペで対応できるように備忘録しておくことによって、コーディング速度の向上を図ります。
| body { | |
| background: url(bg.jpg) center center / cover no-repeat fixed; | |
| } |
| a{ | |
| border-radius: 5px; | |
| } |
| span{ | |
| text-decoration: underline; | |
| } |
| span{ | |
| text-shadow: | |
| 0 2px 0 #F00, | |
| 2px 0 0 #F00, | |
| 0 -1px 0 #F00, | |
| -1px 0 0 #F00, | |
| -1px -1px 0 #F00, | |
| 2px -1px 0 #F00, | |
| -1px 2px 0 #F00, | |
| 2px 2px 0 #F00; | |
| } |
| span{ | |
| display:none; | |
| } |
レスポンシブデザイン時に「display:none;」を使う場面もおおくありますが、コーディング技術向上の為、極力使わないようにしましょう。
ホームページのSEO対策を始めるにあたって、はじめに重要なことがあります。
タイトルです。検索時にも、まず一番初めに目が行く部分です。
クレアネットのサイトで言うとこの部分。
タイトルに重要なキーワードが入っていないと、SEOではほとんどヒットされません。
「タイトルにしっかりキーワードを入れているよ！」って人でも、そのキーワードははたして最高のパフォーマンスと言えるのでしょうか。
まずはタイトルタグの主な特徴とポイントを見ていきます。
●特徴
○検索エンジンが一番目に重視する要素。
○検索結果には、全角34文字前後が表示されて、他は消える。
●ポイント
○クリックしたいようなタイトルにする。
○タイトルタグをつけるのは、トップページだけでなく下層ページにもそれぞれつける。
以下、してはいけないペナルティを受ける可能性があること。
○タイトルに同じキーワードを複数入れない。
○タイトルを長くしすぎない。
○単語の羅列にする。
以上が、SEO対策でのタイトル設定時の注意点です。
次回、【二章 SEO対策におけるメタディスクリプションの内容】でお会いしましょう。
ホームページは作るだけで終わりじゃありません。
ホームページはたくさんの人に見られて初めて意味があります。
そのホームページが検索エンジンでヒットされて、検索順位を上げることが目標となります。
そのとき良く聞くのがSEOと言う言葉です。
SEOとは、「Search Engine Optimization」の略です。
直訳で「検索エンジン最適化」と言う意味です。
そして、検索ユーザーに向けて最適化することをSEO対策と言います。
検索エンジンで上位にくるようにすると言うことですね。
序章を含め全六章まで、お届けさせていただきます。
次回、【一章 SEO対策における適切なタイトル設定】でお会いしましょう。
今回はwordpressでのコンタクトフォーム作成を可能にするプラグイン「Contact Form7」の使い方です。
プラグイン画面から「Contact Form7」で検索して
下記プラグインをインストールします。
プラグインを有効化すると
メニュー欄に「お問い合わせ」という欄が追加されます。
新規作成を選択
作成するとコードがショートコード吐き出されます。
ショートコードをwordpress内のページに貼り付けるだけで
フォームを作成することができます。
下記が実際のショートコードを貼りつけた状態です。
エラー: コンタクトフォームが見つかりません。