PAGE TOP

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

 

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

 

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

 

<?php $tax_posts = get_posts('post_type=foo&taxonomy=bar&terms=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/

サイドバーをある範囲内で固定してスクロールに追尾させるjQuery

サイドバーを追尾させる

レイアウトの基本として、2カラムなどでメインのコンテンツとサイドバーにその他のページへのリンクなどを配置することは多々有ります。

 

コンテンツが長くなった場合、サイドバーはスクロールで隠れてしまい、ページ遷移におけるユーザビリティの低下が起こります。

 

これをコンテンツの縦幅に合わせてスクロールに追尾するスクリプトはいかがでしょうか?
どんなにコンテンツが長くなってもサイドバーは固定で表示されており、いつでも違うページヘの遷移が可能になります。

 

デモページ │ SMILEWORKS(当サイト)

実装

HTMLファイルには、サイドバーの固定したい要素を用意
この例では、サイドバーのクラス「fixedmenu」を固定表示にします。

 

<div id="main">

<div id="content">
コンテンツ部分
</div><!--end content-->

<div id="side">
<div class="fixedmenu">
固定して表示したいもの
</div><!--end fixedmenu-->
</div><!--end side-->

</div><!--end main-->

 

次に、すでにjquery本体は読み込んであるものとして、
<head>内に以下のコードを外部ファイル化またはインラインで読み込みます。

 

(function(){
 $(function(){
 var fix = $('.fixedmenu'), //固定したいコンテンツ
 side = $('#side'), //サイドバーのID
 main = $('#main'), //固定する要素を収める範囲
 sideTop = side.offset().top;
 fixTop = fix.offset().top,
 mainTop = main.offset().top,
 w = $(window);
 
 var adjust = function(){
 fixTop = fix.css('position') === 'static' ? sideTop + fix.position().top : fixTop;
 var fixHeight = fix.outerHeight(true),
 mainHeight = main.outerHeight(),
 winTop = w.scrollTop();
 if(winTop + fixHeight > mainTop + mainHeight){
 fix.css({
 position: 'absolute',
 top: mainHeight - fixHeight
 });
 }else if(winTop >= fixTop){
 fix.css({
 position: 'fixed',
 top: 10
 });
 }else{
 fix.css('position', 'static');
 }
 }
 w.on('scroll', adjust);
 });
})(jQuery);

 

これで、親要素「#main」の範囲内で、固定要素「.fixedmenu」は常に固定して表示されます。
24行目に、上から何ピクセルの場所で固定という設定ができます。

 

ひとつご注意は、サイドバーの要素よりもコンテンツが短い場合、要素が上にはみ出てしまうというバグ(というか自然な現象)があります。
コンテンツの量はかならずサイドバーの固定要素より多くしてください。

 

簡単ながら実用性の高いレイアウトのテクニックだと思います。

送信確認・完了画面を出せる問い合わせフォームプラグイン MW WP Form

MW WP FORM

お問い合わせフォームに送信確認画面、完了画面を出したいという要望は結構あると思います。
WordPressの定番お問い合わせフォームといえばContactForm7がありますが、送信ボタンを押した際に、グリーンの枠で「あなたのメッセージは送信されました。」という味気ない文言が出るだけ、というのはなんとなく淋しい。。。

 

しかし、送信確認画面や完了画面を出すフォームというのは日本独自の文化らしいことも何処かに書いてありました。

 

とは言えここは日本、文化に倣いましょうという事で、
確認画面を表示できるお問い合わせフォームを実装するにあたり、よっぽど高性能な機能が必要でない限りは和製の「MW WP Form」というプラグインがオススメです。

MW WP Form │ モンキーレンチ

WPの管理画面、プラグインの新規追加・検索から「MW WP Form」と検索し、インストール・有効化でサイドメニューにMW WP Formが現れます。

 

設定方法・使い方

ずらっとならんだ各フィールドのボタンをクリックするとショートコードが本文に挿入されます。
例えばテキストフィールドボタンを押すと、1行のテキスト入力フィールドを表示するショートコードが挿入されます。

 

[mwform_text name=””]

 

このname=”○○”欄にフィールドの名前を任意で付けます。
例えば、名前を入力してほしいフィールドだったとすると、「名前」とでもしておきましょう。
※フィールド名は日本語で大丈夫です。

 

そして、これにバリデーションルールを持たせたい場合は、下方にあるバリデーションルールの設定で、バリデーションルールを追加→適用する項目に「名前」と入力し、必須であったり、その他そのフィールドに適用したいルールにチェックを付けます。
※特にルールを適用する必要がない項目に関してはショートコードのname=””に任意文字列の入力だけで大丈夫です。

 

あとは自動返信メールや管理者宛メールの内容を決定し、最後にこのフォームを使用したい固定ページにフォーム識別子を貼り付けて完了。

 

送信確認画面・完了画面などの設定

設定画面にURL設定という項目があります。
各画面を表示させたい場合、固定ページをその分作ってここにURLを入力しておきます。
各URLに直接アクセスしても、順番通り進まないと最初の入力画面にリダイレクトされるように設定されています。
各画面を設定した場合、ボタンは下記のように記述する必要があります。

 

<ul>
<li>[mwform_backButton]</li>
<li>[mwform_submitButton]</li>
</ul>

 

確認画面へ進むボタン、戻るボタン、送信するボタンを画像に変えたい

MW WP Formで生成されたフォームは入力、確認、完了画面がそれぞれ「mw_wp_form_input」「mw_wp_form_confirm」「mw_wp_form_complete」というクラスで囲まれるようですので、各ボタンの画像を用意して、

 

/*確認画面へ進むボタン用*/
.mw_wp_form_input .btn input{
background:url(img/input_btn.png) no-repeat;
width:150px;
height:30px;
text-indent:-9999px;
overflow:hidden;
border:none;
cursor:pointer;
}

.mw_wp_form_confirm .btn input{
/*送信ボタン用*/
background:url(img/confirm_btn.png) no-repeat;
width:150px;
height:30px;
text-indent:-9999px;
overflow:hidden;
border:none;
cursor:pointer;
}

#submitback input{
/*戻るボタン用*/
background:url(img/form_back_btn.png) no-repeat;
width:80px;
height:30px;
text-indent:-9999px;
overflow:hidden;
border:none;
cursor:pointer;
}

 

とCSSで装飾し、
ボタンの記述を

 

<ul>
<li><span id="submitback">[mwform_backButton]</span></li>
<li class="btn">[mwform_submitButton]</li>
</ul>

 

としてやると実現できました。
※ボタンサイズやliタグの並びなどは環境に合わせて書き換えてください。

 

まとめ

現在もプラグイン開発者によるアップデートが繰り返されており、より良い物に進化し続けている模様。
送信される内容により細かいルールを適用させたり、確認画面や送信完了画面を出したりしたい場合はMW WP FORMで決まりです。
今後ContactForm7に変わってWORDPRESSのお問い合わせフォームの定番プラグインになるのではないでしょうか。

〒162-0061 東京都新宿区市谷柳町37-505

03-6380-0880平日9:00~18:00

info@smileworks.biz

copyright © 2012 smileworks,inc all rights reserved.