1. TOP
  2. Web

最近ちょっといい感じのHTMLテンプレ

カテゴリ:
HTML / CSS
SEO
Web
| トラックバック(0)
投稿者:yo yo

個人的にいい感じのコードテンプレ


<!DOCTYPE html>
<!--[if lt IE 8 ]> <html class="ie"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="ltr" lang="ja" prefix="og: http://ogp.me/ns#"><!--<![endif]--> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="INDEX, FOLLOW">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイトルは大文字30文字前後までの自然な文章</title>
<meta name="description" content="ディスクリプションは70文字~120文字の日本語として自然な文章になるよう簡潔に書く。!マークなどの装飾文字を安易に入れない。">
<meta name="keywords" content="1ワード,2ワード,3ワード,4ワード,5ワード,6ワード(SEOに関係ない。とりあえず6ワードぐらいまで。)">

<meta property="og:title" content="タイトルとあわせる" />
<meta property="og:type" content="site or blog or article" />
<meta property="og:url" content="このページのURL" />
<meta property="og:image" content="サムネイル画像のURI" />
<meta property="og:site_name" content="サイト名を書く" />
<meta property="og:description" content="ディスクリプションとあわせる" />

<link rel="stylesheet" type="text/css" media="all" href="./style.css" />
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
<script type="text/javascript">
/* アナリティクスコード */
</script>
</head>

<body>

  <header>
    <h1>サイトタイトル</h1>
    <p>サイトの簡単な説明。ディスクリプションとは違う文章を入れている。</p>
  </header>
	<nav>
  	<ul>
    	<li><a>グローバルナビゲーション</a></li>
    </ul>
  </nav>
  <aside>
  	ソーシャルブックマーク
  </aside>
  <h2>見出し</h2>
  内容
  <section>
  	<h3>中見出し</h3>
    内容
    <section>
    	<h4>小見出し</h4>
      内容
    </section>
  </section>
  <div>広告</div>
  <section>
  	<h3>中見出し</h3>
    内容
    <section>
    	<h4>小見出し</h4>
      内容
    </section>
  </section>
  <footer>
  	フッター
  </footer>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
/* javascriptはソース下部にまとめる */
</script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

</body>
</html>

ミラーレス一眼レフカメラ Canon EOS M の撮って出し

カテゴリ:
Web
その他
| トラックバック(0)
投稿者:yo yo

年始に29,800円(税別)で買ったミラーレス一眼レフカメラで試し撮りしてみました。EOS Mでjpg Mサイズ撮影した写真を横幅614pxに縮小してあります。ウェブサイトでの利用ならこのクオリティで十分なのではないかなと思います。

椿写真 EOS M撮影その01

EOS-M + EF-M22mm F2 STM

椿写真 EOS M撮影その02

EOS-M + EF-M22mm F2 STM

ミラーレス一眼レフカメラ Canon EOS Mを買ったので自慢したい

カテゴリ:
Web
その他
| トラックバック(0)
投稿者:yo yo

キヤノン ミラーレス一眼レフカメラ EOS M
Screen shot : キヤノン:一眼レフカメラ/ミラーレスカメラ EOS M

spacewalkerさんのEOS M紹介記事を見てかなり気になって居た所に、年始の初売りで29,800円だったのでキヤノンのミラーレス一眼レフカメラ EOS M ダブルレンズキットを購入。

試し撮りしてみましたが想像以上に綺麗に撮影できます。ウェブサイトでの利用なら十分でしょう。

ウィンドウ下部に固定、スクロールでニョキっと出す方法 殴り書きその1

カテゴリ:
HTML / CSS
Web
javascript
| トラックバック(0)
投稿者:yo yo

IE6には対応していない。position:fixed;が効かないため。

このコードでは動かないけどだいたいこんな感じのイメージです。jQueryをきちんと読み込んでください。

css

#footer {
    position: fixed;
    display:none;
    bottom: -380px;
    width:100%;
    height:400px;
}

javascript

// jQueryが必要です。
(function(){
	var intervalValue = 300;
	var pageTopID = '#footer';
	 
	$(window).scroll(function () {
		var distanceTop = $(document).scrollTop();
        // この辺を改造する
		var winTop = $(window).height();
		var conTop = $("#container").height();

        // 画面がどれだけスクロールされたか判定する
		if (distanceTop > intervalValue) {
        	// にょきっとだす
			$(pageTopID).slideDown();
			if(distanceTop > (conTop - winTop)){
            	// 画面最下部までいったとき処理
			}
			if(distanceTop < (conTop - winTop)){
            	// 最下部からスクロールを戻したときの処理
			}
		}
		if (distanceTop < intervalValue) {
        	// にょきっとしまう
			$(pageTopID).slideUp();
		}
	});
})();

これ、positionがfixedで、height:400px;、bottom:-380px;指定なのでfooterの上から20px分が、300pxスクロールしたらニョキっとでてくる感じになります。 で、最下部までいったら#footer自体がスクロールとともに現れるように画面最下部までいったとき処理を書いてください。

offset()でやるとposition:fixed; bottom:0;が解除されてしまう様なので、別の書き方をしなければなりません。とりあえずのなぐりがき。

Wordpressにページネーションを追加するメモ

カテゴリ:
Web
Wordpress
| トラックバック(0)
投稿者:yo yo

ワードプレス 記事一覧内に、プラグインを使わず、自由にカスタマイズ可能なページネーション(ページ送り・ページング)を追加する。

ページの先頭に戻る