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

ターゲットブランクとは、aタグあでリンクをする際に自分のサイトを残すか否かの設定ができます。
aタグに「target=”_blank”」を記載するとその設定ができます。

■ターゲットブランクの設定をしている記載

自分のサイトを残しつつリンク先が見れます。

株式会社クレアネット

記載したコードです。

<p><a href="http://www.clarenet.co.jp/" target="_blank">株式会社クレアネット</a></p>

view raw gistfile1.txt hosted with by GitHub

■ターゲットブランクの設定をしていない記載

通常のリンクです。リンク先へ飛びます。
別ページにとんでしまうので、ブラウザの戻るボタンを押して戻ってきてください。

株式会社クレアネット

記載したコードです。

<p><a href="http://www.clarenet.co.jp/" >株式会社クレアネット</a></p>

view raw gistfile1.txt hosted with by GitHub

★完成★

一つ戻るリンクとは逆に、ターゲットブランクは外部サイトへリンクする際には記述して、ホームページ閲覧者が自分のサイトを見失わないように必ず設定しましょう。

ブラウザでよく使う機能の一つ戻るボタンですが、ホームページにも簡単な記述をするだけで、一つ戻るボタンの設置が出来ます。

■HTMLに記載

<p><a href="#" onclick="history.back(); return false;">一つ前のページへ戻るボタン</a></p>

view raw gistfile1.txt hosted with by GitHub

予備知識と致しまして、二つ前のページへ戻る場合はこんな記載です。

■HTMLに記載

<p><a href="#" onclick="history.back(-1); return false;">二つ前のページに戻る</a></p>

view raw gistfile1.txt hosted with by GitHub

★完成★

最近使われている場面は少なくなっている気がしますが、スムーズな戻るボタンの設置が出来ていればホームページ巡回率が上がるので、見る側に立ったホームページ作成を心がけて行きましょう。

＜参照サイト＞

【ホームページ】ひとつ前に戻るリンクを設置！

以下の記述を指定したい画像に対して記載します。

■CSSに記載

	.radius img{
	border-top-left-radius: 10px;/*左上の角*/
	border-top-right-radius: 30px;/*右上の角*/
	border-bottom-left-radius: 50px;/*左下の角*/
	border-bottom-right-radius: 70px;/*右下の角*/
	}
	.radius_taiou img{
	border-radius: 20px;/*全ての角*/
	-moz-border-radius: 20px;/*火狐対応*/
	-webkit-border-radius: 20px;/*IE対応*/
	}

view raw gistfile1.txt hosted with by GitHub

★完成★

左の赤い画像が「.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の埋め込みをスマホでも見えるようにする方法を見ていきます。

■HTMLに記載

<div class="ggmap">iframeのgooglemapコード</div>

view raw gistfile1.txt hosted with by GitHub

■CSSに記載

	.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%;
	}

view raw gistfile1.txt hosted with by GitHub

★完成★

以上でスマホページで見ても、googlemapが反映されます。

＜参照サイト＞

【コピペOK】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>

こんな感じのボタンです

■HTMLに記載

<p id="page-top"><a href="#wrap">PAGE TOP</a></p>

view raw gistfile1.txt hosted with by GitHub

■CSSに記載

	#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;
	}

view raw gistfile1.txt hosted with by GitHub

■javascriptに記載

	<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>

view raw gistfile1.txt hosted with by GitHub

★完成★

CSSの記述を変えれば、好みの色や形に変更できます。
トップページへ戻るボタンが少ないホームページには採用してあげてもいいですね。

＜参照サイト＞

jQueryでスクロールすると表示する系いろいろ

通常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;
	}

view raw gistfile1.txt hosted with by GitHub

■使用する画像の角に丸みをつける。

	a{
	border-radius: 5px;
	}

view raw gistfile1.txt hosted with by GitHub

■テキスト部分に下線を付ける。

	span{
	text-decoration: underline;
	}

view raw gistfile1.txt hosted with by GitHub

■テキストの背面にシャドウを付ける。（今回水色）

	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;
	}

view raw gistfile1.txt hosted with by GitHub

■非表示にする。

	span{
	display:none;
	}

view raw gistfile1.txt hosted with by GitHub

★完成★

レスポンシブデザイン時に「display:none;」を使う場面もおおくありますが、コーディング技術向上の為、極力使わないようにしましょう。