カテゴリー別アーカイブ: web基本知識

“トップへ戻る”ボタンを途中から表示させる方法

サイトを見ていると、下の方にスクロールした時に
トップへ戻れるボタンが現れることがありますよね!

それを実装するには以下のようにすれば大丈夫です!

まずは、ボタンを作ります。

<div id="page-top">
<a href="#header">トップへ戻る<span style="font-size: 14px;"></a></span>
</div>

そのあとcssでデザインを固定化します。

/*ボタンを固定する*/
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
}
/*ボタンをデザインする*/
#page-top a {
	background: #ccc;
	text-decoration: none;
	color: #fff;
	padding: 10px;
	text-align: center;
	display: block;
	border-radius: 5px;
}
#page-top a:hover {
	text-decoration: none;
	background: #aaa;
}

最後にheader内に下記コードを読み込ませる。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	var topBtn = $('#page-top');
	topBtn.hide();
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {
			topBtn.fadeIn();
		} else {
			topBtn.fadeOut();
		}
	});
	//スクロールしてトップ
    topBtn.click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, 500);
		return false;
    });
});
</script>

これでばっちりOKです!

ページを自動転送させるには

サイトの移行等で、

「このサイトは○○秒後に移動します」

といった文章がでて自動的に読み込むようになります。


<meta http-equiv="refresh" content="3;URL=http://□□□□.□□/">

このコードをheader部分に挿入したらokです。

content部分の数字は転送までの時間
URLは転送サイト

これでサイトの移転もばっちりですね!

ファビコンについて

よくwebサイトのタブの横にアイコンがついてませんか?
それとかiPhoneやiPadでホーム画面に追加を押すと
アプリっぽくなったり。

なんかオリジナルサイト感がでていいですよね♪

なのでやっちゃいましょう♪

まずはpng画像で114×114の画像を準備しましょう!
そのあとは、.iconファイルに変換します。

ソフトは無料であります → こちら

あとは、そのファイルをthemeフォルダの中にアップし
headerの中に以下のコードを~内に入力したらOK!

<link href="<?php bloginfo('template_directory'); ?>/favicon.ico" rel="shortcut icon" />

<link href="<?php bloginfo('template_directory'); ?>/favicon.ico" rel="apple-touch-icon-precomposed" />

こんな感じで簡単にできてしまいます♪

TrustFormで住所を自動入力できるようにする

お問い合わせフォームで郵便番号だけ入れたときに自動で住所反映してるとうれしいですよね!

そんなときはこいつが便利です!

ajaxzip3

じゃぁ設定手順です。

1.Formに郵便番号と住所のテキストボックスをつくる

郵便番号の項目のclassにzipを入力し、その下に住所の項目をつくる。

2. javascriptを読み込ませる

まずはheader内に以下のコードを入力する。

通常の場合

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>

sslをしようする場合

<script src="https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js" charset="UTF-8"></script>

どちらかを入力した後以下のコードもheader内に入力する。

<script type="text/javascript">
jQuery(document).ready(function($) {
 $(".zip").keyup(function(){
 var addrInput = $(this).parents('tr').next().children('td').children('div').children('input').attr('name');
 AjaxZip3.zip2addr(this, '', addrInput, addrInput);
 });
});
</script>

3.固定ページにTrustFormのショートコードを読み込ませる

最初に作成したフォームのショートコードを固定ページに読み込ませる。

4.共通スタイルシートを読みこませる

Trust Form を使う際には各フォームごとの CSS が生成されるのですが、それを消しちゃって共通のスタイルを読み込ませたい場合の対処方法です。trust-form.php の940行目あたりを下記のように変更します。


if ( file_exists( $this->plugin_dir . '/css/front_'.$atts['id'].'.css' ) ) {
 wp_enqueue_style('trust-form-front', $this->plugin_url . '/css/front_'.$atts['id'].'.css');
} else {
 wp_enqueue_style('trust-form-front', $this->plugin_url . '/css/front.css');
}
//wp_enqueue_style('trust-form-front', "/wp-content/plugins/trust-form/css/front_{$atts['id']}.css"); // 元の。使わないので消してもOK。

こうすることで特定の CSS があるものは読み込まれ、なければ front.css を読み込みます。

画像のマウスオーバーを簡単に行うCSS設定

画像のマウスオーバーっていろいろと方法がありますが、
結構めんどくさかったりしますよね。

そんな時はこいつをCSSにぶち込んでみましょう!

a:hover img{
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: “alpha( opacity=80 )”;
}

たったこれだけで画像にマウスオーバーと、
なんだかいい感じに仕上がります♪

ただ、マウスオーバーで色を変えたり、
(ex:カラ― → モノクロ)
画像自体を変えたりしたい場合は、
JsやJQueryなどなどを駆使したり、
そもそもhtmlの入力で

<img 
onmouseover="this.src='マウスオーバー画像URL'" 
onmouseout="this.src='元画像URL'" 
alt="" 
src="元画像URL" />

を使うとマウスオーバーできちゃったりします。

けど、タブレットやスマホでタッチすると
画像が消えっぱなしになったりと
なんかいまいちなので、JsやJQueryもしくは
今回の方法でやっちゃいましょう!

レンタルサーバーについて

WordPressのを始めるにあたって大事なのがレンタルサーバー選び。

これからホームページ運営を本格的にしていきたいとお考えの方に
お薦めなのが、こちら

heteml

WordPressの導入はもちろん、今話題のFaceBookでの企業ページも
このレンタルサーバーでお任せあれ!
また、独自SSLも安心のグローバルサイン社を少しお得に利用できます

hetemlに連動しているドメイン取得サービスはこちら

ムームードメイン

hetemlとむーむードメインは同じ会社が運営してくれているので
設定も楽々!お支払いも「おさいぽ」というシステムで一括管理ok!

管理人もこのセットを利用して運営しております。
少し機能が落ちてでもコストを抑えたい方におススメのサーバーが

ロリポップ!レンタルサーバー


簡単に言えばお手軽スタートのhetemlってところですね!
何にせよWordPressで簡単ホームページをスタートしたければ
サーバーとドメインが必要です。
まずはこの2つに契約をしましょう!

えっ?!
完全無料でできないか?
そんな方向けにこちのサイトで紹介されています。

Kachibito.net
完全無料でWordPressを使ったブログを始める7の方法

ただ、どうせホームページを作るなら独自ドメインがお勧めです!
年間かかるコストも最低3,000円くらいで大丈夫なので、
どうせなら独自独自ドメインでやっちゃいましょう♪