PAGE TOP

少ないコードでページ内を自在にスクロールさせるjQuery

ページ内スクロールデモ・太陽系

最近主流になっている縦に長いサイトなどでは同一ページ内にリンクを貼ることも多いのですが、クリックした時に一瞬で遷移するのではなく、スムーズなスクロールによってわかりやすく移動をさせるのが当たり前になっていて、そのやり方も様々あるのですが、jQueryを使って上へも下へも「#」の付いた場所へスムーズにスクロールさせて、且つコードが繁雑にならないようなものをご紹介します。

 

Smooth Scroll Demo – Solar System

太陽系の大きさを体感できるページ内スクロールのデモを作りました。ささっと作りましたので大した機能を持たせてはいませんが、月の大きさ(直径3474km)を1pxとした場合に、太陽からの距離感を感じれるようなページになっています。

右側に固定した太陽系の各惑星の名前をクリックして、ページ内を自動スクロールさせます。
一応準惑星の冥王星さんも仲間に入れてあげました。宇宙のスカスカ具合を是非体感してみてください。
総高さ1,716,755pxのバカみたいに縦に長いページです。

実装方法

以下のコードをインラインで記述。

$(function(){
	$('a[href^=#]').click(function(){
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});

短くていいですね。移動する際のスクロール速度は、3行目で決定。
あとは、移動させたいポイントにラベルしておきます。

<a id="○○"></a> <!--任意のID名-->

※わざわざaタグで書かなくても、IDタグがあるところで指定できます。

 

リンクは下記のように書いてやればOK!

<a href="#○○">移動</a>

Retinaディスプレイで、1pxの線を引く方法

レティーナディスプレイ

言われるまで全く気づかなかったのですが、
スマートフォンサイトでiPhone4から採用されたRetinaディスプレイで、1pxの線を引きたい時、

border:1px solid #000

としても、1pxの線になっていないみたいなんです。

 

Pixel Device Ratioというデバイス・ピクセルとCSSピクセルの比率によって、iPhone4以降のRetinaディスプレイだと、1pxの線は2pxくらいの太さで見えてしまうようです。

 

ここを気にしている方はあまりいないのか、ググってもこれに言及している方が居ない・・・

 

 

そして試行錯誤の上実現できた荒業がこれです。

.border {
border-bottom:1px solid #000;
-webkit-transform: scaleY(0.5)
}

div入れ子にボーダーを指定、そしてそのdivをY方向に50%縮小。
これで、細くなります。

 

Retina Display Border Size

上から、
1pxで指定した実線
1pxで指定し、50%縮小した実線
同、点線、破線
(Retina原寸)

 

しかし、細い線のためにわざわざdivを一つ作らないといけないというのは、あまり美しくないな。
そのうち、webkit系ブラウザ仕様・解釈が変わるといいんですけど。

WordPressのソーシャルボタン設置プラグイン、WP Social Bookmarking Lightを好きな場所に表示

ソーシャルブックマークの活用
WP Social Bookmarking Light

 

ソーシャルボタンは、記事の拡散などで外部SEOの効果が高いことから積極的に設置しておきたいものですが、(自分が各ソーシャルのアカウントを保持していなくても)
WordPressでのソーシャルボタン設置プラグインで定番のWP Social Bookmarking Lightは、デフォルトで、記事の上か下か、両方か、いずれかに設置。という設定しか出来ず、しかもあまり意図したところに出てきてくれないのですが、このコードをfunctions.phpに記述することでショートコード化することで、好きな場所に設置することができます。

 

function wpSns() {
  if (function_exists("wp_social_bookmarking_light_output_e")) {
    wp_social_bookmarking_light_output_e();
  }
}
add_shortcode('socialBtns', 'wpSns');

 

あとは、ボタンを表示させたい場所に

 

[socialBtns]※カッコ[]は半角で

 

を書いてやればOK!

サイドバーなどにカスタムタクソノミーの記事一覧を表示させる

カスタムタクソノミーの一覧表示

最近はWordPressのカスタムポストタイプを使用するケースも多々ありますが、
通常の投稿と違い、カスタムポストの記事一覧やアーカイブ、カスタムタクソノミーなどを表示させるのは、ウィジェットやプラグインは使用できず、(用途によりそれらのプラグインは存在しますが)通常はそれぞれの取得のためのコード記述が必要になります。

 

今回は、「あるカスタム投稿タイプの、あるカスタムタクソノミーの、あるタームに属する記事を一覧で○件表示させる。」
というコードの書き方です。

 

やり方はfunctionsに書いてショートコードで呼び出したり、まずタクソノミーを取得してその中から条件分岐で取得したり、などいろんな方法があるのですが、シンプルに、わかりやすく、短く、を突き詰めると以下のコードになりました。

 

<?php $tax_posts = get_posts('post_type=foo&taxonomy=bar&term=hoge&posts_per_page=5'); if($tax_posts): ?>
	<ul>
		<?php foreach($tax_posts as $tax_post): ?>
		<li><a href="<?php echo get_permalink($tax_post->ID); ?>"><?php echo esc_html($tax_post->post_title); ?></a></li>
		<?php endforeach; ?>
	</ul>
<?php endif; ?>

 

これは、fooというカスタム投稿タイプの、barというカスタムタクソノミーの、hogeというタームがついた記事を5件リストで表示させる。というコードです。
1行目のget_postsで、一気に条件を書いています。

 

出力したい内容に合わせて引数名やget_postsの中身を書き換えれば良いだけなので、とても使い勝手の良い美しいコードですね。

スマートフォンサイト用フリックスライダーの決定版!Owl Carousel

← →マウスでグラブしてスライドできます。スマートフォンではフリックでスライドします。

スマートフォンでフリック可能なスライダーを実装するとなるとスライド部分の縦方向のフリックが効かなかったり、androidでバグがあったり、なかなかこれ!と思うものが無かったのですが、現在安定して使えているスライダーをご紹介します。

 

スタンダードな1枚もののスライドやLazy Loadなど様々なタイプのカルーセルを使い分けることができ、オートプレイやページネーション、ナビなど多数のオプションでお好みに設定できます。 レスポンシブウェブデザインにも対応しているので、様々な端末での表示にこれひとつで対応可能なところもポイントです。

 

しかも本体はわずか15KBと動作も軽快で、Androidでも問題なく動作しています。
それでは、実装方法です。
以下はこのページで表示させている1枚ものの画像をフリックスライドさせる場合の必須コードです。

 

ダウンロード

OWL Carousel │ http://www.owlgraphic.com/

上記よりダウンロードしたファイルの

<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
<link rel="stylesheet" type="text/css" href="css/owl.theme.css" />
<script src="js/owl.carousel.min.js"></script>

をヘッダに読み込み、スライダーを表示させたい場所に下記のマークアップ。

<div id="owl" class="owl-carousel">
  <div class="item"><img src="画像のURL" alt="" /></div>
  <div class="item"><img src="画像のURL" alt="" /></div>
  <div class="item"><img src="画像のURL" alt="" /></div>
  <div class="item"><img src="画像のURL" alt="" /></div>
</div>

CSSはこれだけ

#owl .item img {
display: block;
margin:0 auto;
}

そして、プラグインを呼び出し。(オプション指定済み)

$(function(){
$(document).ready(function() {
 $("#owl").owlCarousel({
	navigation : false,
	slideSpeed : 300,
	paginationSpeed : 400,
	pagenation:true,
	singleItem:true,
	autoPlay:true
 
      // "singleItem:true" is a shortcut for:
      // items : 1, 
      // itemsDesktop : false,
      // itemsDesktopSmall : false,
      // itemsTablet: false,
      // itemsMobile : false
  });
});

以上。簡単ですね。

 

オプション

あとは様々なオプションをプラグイン呼び出し項目に記述します。
たくさんありますが、よく使うものを。

 

pagenation : スライダー下部にセンタリングされた○のページネーション
autoplay : 自動でスライドします。
stopOnHover : PCでマウスを置いた時自動スライドがストップします。
slidespeed : フリックや自動でのスライド速度を決定 ミリセカンド
navigation : prev nextのボタンが現れます。
navigationText : 上記prev nextをの文字を変更できます。(HTML使用可)

 

その他詳しくはオフィシャルでもご確認ください。

OWL Carousel │ http://www.owlgraphic.com/
1 / 512345
  • カテゴリー

  • 最近の投稿

  •