ターゲットブランクとは、aタグあでリンクをする際に自分のサイトを残すか否かの設定ができます。
aタグに「target=”_blank”」を記載するとその設定ができます。
自分のサイトを残しつつリンク先が見れます。
記載したコードです。
通常のリンクです。リンク先へ飛びます。
別ページにとんでしまうので、ブラウザの戻るボタンを押して戻ってきてください。
記載したコードです。
一つ戻るリンクとは逆に、ターゲットブランクは外部サイトへリンクする際には記述して、ホームページ閲覧者が自分のサイトを見失わないように必ず設定しましょう。
ブラウザでよく使う機能の一つ戻るボタンですが、ホームページにも簡単な記述をするだけで、一つ戻るボタンの設置が出来ます。
予備知識と致しまして、二つ前のページへ戻る場合はこんな記載です。
最近使われている場面は少なくなっている気がしますが、スムーズな戻るボタンの設置が出来ていればホームページ巡回率が上がるので、見る側に立ったホームページ作成を心がけて行きましょう。
以下の記述を指定したい画像に対して記載します。
左の赤い画像が「.radius img」、右が「.radius_taiou img」を反映させた画像です。
古いブラウザに対応させたい場合は「.radius_taiou img」のファイアーフォックス対応とIE対応の記載をしましょう。
第二章では「meta description」（メタディスクリプション）をご説明します。
ページの概要のことを、ディスクリプションといいます。
ディスクリプションはこんな感じで表示されます。
インターネット検索時に、タイトルの下に表示される部分ですね。
ディスクリプションには、ページ内の重症なキーワードをしっかり含めて、ユーザーの興味を引く文章書くことを心がけます。
表示される文字数は120文字前後ですが、最初の方の40文字ぐらいにしっかり必要なキーワードを記載しましょう。
さらに、検索されたキーワード部分が含まれる場合、太文字で表示されるため、クリック率に影響を与えるとされています。
次回、【第三章 SEO対策でのキーワード選択の重要性】でお会いしましょう。
Facebookのページ内への埋め込み方についてです。
下記ページ「ページプラグイン」にアクセス
https://developers.facebook.com/docs/plugins/page-plugin
FacebookページのURLに表示したいアカウントのURLを入力します。
その他カスタマイズしたい点を入力してコードを取得を選択
iframeを選択してコードに貼り付けて完成です。
というわけで下記にクレアネットのFacebookページを表示してみました。
特に設定に拘らなければアカウントのURLを入力するだけなのでとても簡単です。
通常の埋め込みでは、レスポンシブ化したときにgooglemapが見えません。
今回はgooglemapの埋め込みをスマホでも見えるようにする方法を見ていきます。
以上でスマホページで見ても、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が動きます。
<script>
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</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ですが、コピペで対応できるように備忘録しておくことによって、コーディング速度の向上を図ります。
レスポンシブデザイン時に「display:none;」を使う場面もおおくありますが、コーディング技術向上の為、極力使わないようにしましょう。