iframeに異なるドメイン（クロスドメイン）のコンテンツを読み込んで高さを自動調節する方法 8月 23, 2016 趣旨 iframe（親）に異なるドメインのページ（子）を読み込んで、親フレームにスクロールが出ないよう、iframeの高さを子ページの高さに自動調節する 方法 普通にやると、 「Uncaught SecurityError: Blocked a frame with origin "http://hoge.com" from accessing a frame with origin "http://fuga.com". Protocols, domains, and ports must match. 」 などと怒られてしまいますのでこちらを参考に http://stackoverflow.com/questions/18456498/how-can-i-change-the-size-of-an-iframe-from-insidehttp://i556tips.tumblr.com/post/15710917018/%E3%82%AF%E3%83%AD%E3%82%B9%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%A7iframe%E3%81%AE%E9%AB%98%E3%81%95%E3%82%92%E8%87%AA%E5%8B%95%E8%AA%BF%E7%AF%80%E3%81%99%E3%82%8Bjavascriptコード hoge.com（親）<html> <head> <title>親</title> <script src="js/jquery.js"></script> <script> window.addEventListener('message', function(e) { var iframe = $("#fugapage"); var eventName = e.data[0]; var data = e.data[1]; switch(eventName) { case '… 続きを読む
スマホ時のみ、動的にURLにハッシュ追加し、ナビゲーション部を最上部に配置（長いヘッダー部をスキップしてナビ以下を表示）する方法 4月 19, 2015 趣旨 レスポンシブサイトで（PCサイトと構造を共通にする関係で）、ヘッダー部にロゴやらテキストやらバナーやらを配置する必要があり、スマホ時のファーストビューの大部分をヘッダー部が占拠してしまい、コンテンツまでが遠くなってしまうことは多々あります。 その場合、グローバルナビゲーション部分にアンカー（<div id="gnavi"等）を作っておいて、ページ遷移時にそのアンカーにリンク（<a href="/page/#gnavi"等）し、グローバルナビゲーションが画面の最上部に表示されるようにする（ヘッダー部分は上部にスクロールすれば見える）のもひとつの方法です。 しかしスマホサイトのみでの仕組みのため、ソースコードはいじりたくありません。 そんなときに、JavaScriptで画面の幅を判定し、スマホ時のみリンクアドレスに動的にアンカー名を追加してしまう方法を記載します。方法 方法は簡単で、以下のコードでOKなはずです。$(document).ready(function () { if ($(window).width() < 768) { $('a').click(function(e) { if ($(this).attr('href') && !$(this).hasClass("in-page-link")) { $(this).attr('href', $(this).attr('href') + "#gnavi"); } }); } }); 解説 特に難しいところはないと思いますが、注意点としては、上記を実装すると、ブラウザの幅が 768px未満のときは、全てのリンクにアンカー名（ハッシュ、#gnavi）が追加されてしまいますので、追加されたくないリンクはif文で除外するようにしています。（上記の例では.in-page-linkというクラスをもつ aタグは動作対象外としています。） 以上です。 続きを読む
CloudFlareでWordPressサイトの表示速度を高速化（SPDY化）！かつSSL（https）化！CloudFlareの導入方法! 3月 11, 2015 【趣旨】 既にWordPressで構築済みのWEBサイトに、CloudFlareを導入して高速化（ついでにSSL化）する方法を解説します。 【CloudFlareの高速化の仕組み】 ざっくりですが、以下の仕組みによりWEBサイトの表示が高速化します。 CloudFlare公式サイト：https://www.cloudflare.com/CloudFlareのCDN（高速に配信するために最適化されたネットワーク）に既存コンテンツをキャッシュさせる。当該ドメインのネームサーバー情報を変更し、上記CDNを参照させるようにする これにより、いままでhttp://aaa.com/などとブラウザのアドレスに入力されると、ブラウザはDNS（ドメインと実際のサーバーの場所をひもづける賢い仕組み）に問い合わせて、既存サーバーにデータを取りに行っていましたが、CloudFlare導入後は、CloudFlareの高速で最適化されたCDNを見に行くようになり、表示が高速化されます。 【今回の前提環境】 以下の環境にCloudFlareを導入するものとします。 ・サーバー：エックスサーバー（X10プラン） ・CMS:WordPressで構築済み ・CloudFlare Pro版を購入 【既存サイト導入に対する問題点】問題点１ 無料版の場合、SSL証明書発行にきっちり２４時間かかる。 =>Pro版を購入※すれば即時発行されます。今回は既にリリース済みサイトということもあり、Pro版を購入するものとします。 ※1サイト目は$20、2サイト目以降は、プラス$5問題点２ ネームサーバーの浸透時間（ユーザーそれぞれの環境により異なる） =>どう問題か。以下に記載します。 ・ドメインのネームサーバーをCloudFlareのものに書き換える必要があるため、各ユーザーの環境次第で浸透時間に差がでます。 ・浸透早いユーザー（以下、早ユーザー）：CloudFlareのCDNにキャッシュされたコンテンツを見に行きます。 ・浸透遅いユーザー（以下、遅ユーザー）：エックスサーバーのコンテンツを見に行きます。 ・WordPressの設定（<?php bloginfo('url'); ?>等の元になる変数）を、「http」のままか「https」に変更する必要がありますが、それぞ… 続きを読む
WordPressのカスタムフィールドの出力をCSSで素敵にデザイン（フィルターフック未使用版） 1月 22, 2015 【趣旨】 WordPress（に限ったことではありませんが）のカスタムフィールドなどの出力で な出力を、PHPの「preg_replace」を使用して という素敵な見た目に変更します。 （フィルターフックは使用しませんので、functions.phpは編集不要です。） 【コード的には】 Before<p>本日は晴天なりテキストテキストテキストテキストテキスト...</p> <p>二段落目テキストテキストテキストテキストテキストテキストテキスト...</p> After<p><span class='mydeco'>本</span>日は晴天なりテキストテキストテキストテキストテキスト...</p> <p>二段落目テキストテキストテキストテキストテキストテキストテキスト...</p>CSS.mydeco { color: #fff; background: #c6506d; margin: 6px 5px 0 0; padding: 17px 12px 12px; text-align: center; float: left; font-size: 44px; font-weight: 400; line-height: 30px; } （CSSはあらかじめ用意しておきます。） 【方法】 テンプレートの当該カスタムフィールドの出力が<?php the_field('cf_mytxt',$post->ID); ?> だとして、出力箇所を以下のように変更します。 （※プラグイン「Advanced Custom Fields」での出力方法です。 標準ではpost_custom('cf_mytxt')のように取得します。）<?php $string = get_field('cf_mytxt',$post->ID); //（１） $pattern = "/^<p>(.)(.+)$/mu"; //（２） $replacement = "<p><span class='mydeco'… 続きを読む