スキップしてメイン コンテンツに移動

投稿

2013の投稿を表示しています

WordPressのwp_get_archivesで月別リストを生成する際に<li>をカスタムする方法

【About】 WordPressの wp_get_archives('type=monthly') で月別のリスト<li>を生成する際に、特定の年月のアーカイブページを表示した際に<li>に特定のクラス(class="active"など)を設定する方法を記載します。 また、おまけとして、functions.phpによらず、テンプレートで<li>をカスタマイズする方法も記載します。 【通常の書き方】 <WordPress> ーテンプレート <p>月別アーカイブ</p> <ul>     <?php wp_get_archives('type=monthly')); ?> </ul> とすると <HTML> <p>月別アーカイブ</p> <ul>     <li><a href="http://hoge.com/2013/12/">2013年12月</a></li>     <li><a href="http://hoge.com/2013/11/">2013年11月</a></li> </ul> などと生成されます。 これを、ある月を表示しているときに、該当のリスト<li>に class="active" を追加したいとします。 【カスタマイズ方法】 <WordPress> ーテンプレート <p>月別アーカイブ</p> <ul>     <?php wp_get_archives('type=monthly')); ?> </ul> (変更なし) ーfunctions.php functions.phpに以下を追加 <?php ・・・ function my_archives_link($link_html){   $my_month = '/'

IE8でCSS3の「background-size: cover;」対策

【About】 CSS3で採用された「background-size」ですが、「cover」は画像の縦横比を維持したまま、背景領域を完全に覆うよう背景画像を配置(大概は縦か横が切り取られる)してくれるとても素晴らしいスタイルです。 ところが残念なことにIE8では対応していません。 しかしこんな便利なスタイルをたかがIE8のためにゆずるわけには行きません。 デキる子にはベストエフォートを、デキない子には苦労をしてがんばってもらう。(ポリフィルというやつ) その方法を以下に提案します。 【方針】 モダンブラウザでは当然CSS3の「ackground-size:cover;」を指定。 IE8では、JavaScriptで幅に応じたそれぞれの背景画像を動的に変更する。 (IE8用に複数の背景画像を用意する必要があります。) 【HTML】 <!--ヘッダーあたりで--> <script src="/path/to/jRespond.js"></script>・・・※ ・・・ <div id="myArea"></div>・・・ここに背景画像を表示 ・・・ ※ jRespond.js(IE8用に設置) ブレイクポイントを指定して、ブレイクポイント毎の動作を指定できるすぐれもの https://github.com/ten1seven/jRespond 【CSS】(モダンブラウザはこれで表示) #myArea {     background: url(/path/to/image/back.jpg) no-repeat center top;     background-size: cover;     ・・・ } ・・・ @media (min-width: 1200px) {   #myArea {       height:500px;   } } @media (min-width: 992px) and (max-width: 1199px) {   #myArea {       height:400px;   } } ・・・ 【JavaScript】(IE8

PhotoSwipeでテキストリンクから特定の画像のPhotoSwipeギャラリーを起動する方法

【PhotoSwipeとは】 スマホサイトで写真ギャラリーを設置したいときに使えるライブラリ スワイプで画像がめくれて便利! レスポンシブサイトの画像ギャラリーにオススメ。 (optionに、imageScaleMethod: "fitNoUpscale" とすれば画像が最大100%で表示されるのでPCサイトでも使えます。) https://github.com/codecomputerlove/PhotoSwipe 【実現したいこと】 通常は画像サムネイルのクリック(or タップ)でPhotoswipeギャラリーを起動します。 それとは別に、新着情報などのテキストリンクから特定の画像のPhotoSwipeギャラリーを起動したい。 【方針】 var instance = $("#Gallery a").photoSwipe(options); instance.show(0); で、最初のPhotoSwipeギャラリーを起動できることから、テキストリンクに任意の要素(data-swipeとする)と、クラス(.swipe-targetとする)を設置し、.swipe-targetの上から順番にdata-swipeに番号を振ってゆき、.swipe-targetがクリックされたら、data-swipeから番号xを取得し、instance.show(x)で目的のPhotoSwipeギャラリーを起動する。 【HTML】 ヘッダー(もしくはフッター)部分(jQueryバージョンを使用) <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/vendor/jquery-1.8.2.min.js"><\/script>')</script> <script src="/js/vendor/klass.min.js">

Movable Typeのpagenate(プラグインはPageBute)で分割されたページ数をmetaタグのtitleとdescriptionに設定する方法

【趣旨】 Movable Typeのpagenate(プラグインはPageBute)で分割されたページ数をmetaタグのtitleとdescriptionに設定する方法を以下に記載します。 Movable TypeのプラグインPageButeを利用すると、ブログ記事リストが http://hoge/ http://hoge/index_2.php http://hoge/index_3.php ... とページ分割されます。 SEOの観点から、metaタグのtitleやdescriptionは一意のものを使いたい場合、以下のように設定します。 <!DOCTYPE html> <html> <head> ... <mt:SetVarBlock name="mypage" strip_linefeeds="1" trim="1"><?php $data = $_SERVER["REQUEST_URI"]; list($domain,$blog,$page) = explode("/",$data); preg_match('/[0-9]+/', $page, $m); if ($m[0]) { echo $m[0]; } else { echo "1"; } ?></mt:SetVarBlock> <title>タイトルタイトル|<$mt:Var name="mypage"$>ページ目</title> <meta name="description" content="テキストテキストテキスト|<$mt:Var name="mypage"$>ページ目"> ... 以上

Bootstrap2.3とBootstrap3のグリッドシステム比較(一覧表)とBootstrap3のPSDテンプレート無料ダウンロード

Bootstrapのグリッドシステムで、カラムサイズがわかりづらいのでまとめてみました。 Bootstrap2.3 デバイス Phones Phones to Tablets Portrait Tablets Default Large Display ブレイクポイント 480px以下 767px以下 768px以上 980px以上 1200px以上 レイアウト幅 auto 見た目 724px 見た目 940px 見た目 1170px カラム数 N/A 12 1カラムの最大幅 auto(ブラウザ幅 - 20px - 20px) 42px 60px 70px カラムとカラムの隙間幅 N/A 20px(左にマージン) 30px(左にマージン) ネスト 可(再度rowかrow-fluidで囲う) オフセット (左空け) N/A 可 カラムオーダリング (右カラムと左カラムの入れ替え) N/A Bootstrap3 デバイス Extra Small Devices(Phones) Small Devices(Tablets) Medium Devices(Desktop) Large Devices(Desktop) クラスプレフィックス .col-xs- .col-sm- .col-md- .col-lg- ブレイクポイント 767px以下 768px以上 992px以上 1200px以上 レイアウト幅 auto(Max 767px) 750px(左右の15px×2含む) 970px(左右の15px×2含む) 1170px(左右の15px×2含む) 見た目 720px 見た目 940px 見た目 1140px カラム数 12 1カラムの最大幅 auto 60px(※1) 78px(※1) 95px(※1) 実際62px or 63px(※2) 実際80px or 81px(※2) 実際97px or 98px(※2) カラムとカラムの隙間幅 30px(左右に15pxずつパディング) ネスト (再度rowで囲う) 可 オフセット (左空け) N/A 可 カラムオーダリング (右カラムと左カラムの入れ

Sass(SCSS)のTIPS

本体サイト http://sass-lang.com/ CSSをSCSSにコンバート http://css2sass.heroku.com/ チートシート http://sass-cheatsheet.brunoscopelliti.com/ ごちゃごちゃしてきたSCSSをきれいにするコマンド [コンソールで] $ sass-convert --from scss --to scss --in-place path/to/file.scss 以前書いたまとめ http://tomoosuzuki.blogspot.jp/2013/06/sassscsscompass.html

ajaxを使用し1ページで完結するお問い合わせフォームのコンバージョンの取り方(案)

[何についてのお話?] ajaxを使用し、1ページで完結するお問い合わせフォームを設置している場合に、Google Analytics等のコンバージョンをどのように取得するようにするかというお話です。 ajaxで実装する場合、javascript(jQuery)はだいたい以下のようになるかと思います。 [フォーム送信ボタン押下時に動かすスクリプトの例] jQuery(document).ready(function ($) {     $('フォーム').submit(function () {         // 値のバリデート(省略)               if (バリデートNG) {             return false;         } else {             var str = $(this).serialize();                       $.ajax({                 type: "POST",                 url: "mailpost.php", // メールを送信するPHP                 data: str,                 success: function (msg) {                     ①                 },                 error: function(msg) {                 }             });                   }         return false;     }); }); Google Analyticsのページトラッキング程度であれば、ajaxのsuccess(①の部分)に _gaq.push(['_trackPageview','thanks.html']); を記述すれば済みますが(gaqの初期化はheadで実施済みとします。)、 ・Google AdWordsの検索やリマーケティング ・Yahoo!YD

BootstrapとGoogle Map Apiの干渉

【事象】 Bootstrap(v2.3)を使用したページに、jQuery gMap v3(http://www.smashinglabs.pl/gmap)を使用してGoogle Mapを表示したところ、コントロール画像が表示されない。 どうやら、imgタグに対するCSSがBootstrapとGoogle Mapで干渉している模様。 [BootstrapのCSS] img {     …     max-width: 100%;   <=これをコメントアウトすると表示されます。     … } 【対策】 Google Map用にCSSをオーバーライド #map .gm-style img {     max-width: inherit;  <=これを追加 } するとコントロール画像が表示されます。 【補足】 ちなみに、google map表示の設置方法 1.HTMLに空div用意 <div id="map"></div> 2.HTMLに必要なjsをロード <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="js/jquery.gmap.js"></script> (ソースは こちら ) 3.jsを記述 jQuery('#map').gMap({ address: '東京都◯◯◯□□□△△△', panControl: true, zoomControl: true, zoomControlOptions: {  style: google.maps.ZoomControlStyle.SMALL }, mapTypeControl: true, navigationControl: true, scaleContr

MovableTypeでクエリーからGET値をPHPで取得して、そのパラメータで記事を動的に出力する方法

【実現したいこと】 MovableTypeで、クエリー(http://◯◯◯.com/?aaa=bbbの?以下)からパラメータをPHPで取得して、MovableTypeの変数に引き渡して、取得したパラメータで特定カテゴリの記事を動的に出力する。 【呼び出し元】(ウェブページ、インデックステンプレートなどから) <a href="<$mt:BlogURL$>list/?category=hogehoge">カテゴリー「ほげほげ」の記事を動的に出力</a> ↓ 【呼び出し先】(インデックステンプレートなどで) <mt:Ignore><!--自分のカテゴリ(ディレクトリ名)取得--></mt:Ignore> <mt:SetVarBlock name="mycategory" strip_linefeeds="1" trim="1"><?php $mycategory = $_GET['category']; echo $mycategory; ?></mt:SetVarBlock> <mt:Ignore><!--自分のカテゴリー(ラベル名)取得--></mt:Ignore> <mt:SetVarBlock name="mycategorylabel" strip_linefeeds="1" trim="1"><?php if ($mycategory == "hogehoge") {     $my_category_label = "ほげほげ"; } else if ($mycategory == "fugafuga") {     $my_category_label = "ふがふが"; } else if () {     ... } echo $my_category_label; ?>&l

自分がiframe内のコンテンツか、単独ウィンドウのコンテンツか判定する方法

入力フォームを、PCのときはfancyboxで表示し、スマホのときは単独ウィンドウで表示する要件があり、完了画面の閉じるボタンの処理をそれぞれで変更したい場合の方法 (前者はfancyboxを閉じる、後者は単独ウィンドウを閉じる) $(document).ready(function () {   $('閉じるボタン').click(function(){         if(window != parent){             parent.jQuery.fancybox.close();  // fancyboxを閉じる         } else if (window == parent){   window.close();  // 単独ウィンドウを閉じる return false;   }   }); });

iframe読み込み時の一瞬のスクロールバーを消す方法

iframeで overflow:hidden とやっていても、IEなどでは一瞬スクロールバーが表示されてしまいます。 読み込み時もスクロールバーを消したい場合は、読み込まれるhtmlに<html style="overflow:hidden;">(インラインに記述ではなくてcssでもOKだと思います。)とすると読み込み中の一瞬のスクロールバーが表示されません。

CSSアーキテクチャー(考え方)

以下のスライドからの抜粋です。(感謝) http://www.slideshare.net/MayuKimura/css-25547100 OOCSSベース 原則1 構造と見た目の分離 1.1 レイアウトを定義するスタイル ポジション、サイズ等 1.2 見た目を定義するスタイル ボーダー、フォントカラー等 原則2 コンテナとコンテンツの分離 その他 ・IDセレクタの利用を避ける (再利用できないから。jsのとしてのみ使用。js-をつける) デメリット ・class属性値の数が多くなってしまう。 ・classがセマンティックじゃなくなってしまう。(CSSの保守、運用性を優先) 出展 http://www.slideshare.net/MayuKimura/css-25547100

<input type="file" ...> のvalueをクリアする方法

選び直す場合は再度「ファイルを選択」ボタン(IEの場合「参照」ボタン?)で選び直せばよいのですが、選択必須ではない任意選択項目の場合、一度選んでしまったファイルのvalueを解除する必要があります。 しかし input type="file"のvalueにはブラウザのセキュリティー上アクセスできないようなので (確かにスクリプトでvalueを変更できたら大変ですよね。) $('type="file"の要素').val(''); とか $('type="file"の要素').replaceWith('<input type="file" ...>'); とかやっても解除されません。。。orz なので、typeを"text"にして、textのvalueを変更することで元のtype="file"のvalueがリセットできました。 [sample code] $('type="file"の要素').attr("type","text"); $('type="file"の要素').val('dummy'); 無理やり〜(^^;

XSERVERにSSH接続してgitをインストールする方法

macでの操作を前提にしています。 SSHでxserverに接続して、xserverにgitをインストールします。 1.SSH接続編 1.1 xserverのsshの設定をonにする 参考 http://www.xserver.ne.jp/manual/man_server_ssh.php 1.2 公開鍵認証用鍵ペアの生成、公開鍵の登録 =>サーバー上で公開鍵認証用鍵ペアの生成を行う (パスフレーズ、メモしておく) 1.3 秘密鍵をダウンロードし、~/.ssh/に保存 (~/.ssh/hoge.key) 1.4 パーミッション設定 chmod 600 ~/.ssh/hoge.key 1.5 ssh接続用の設定ファイル作成 vi ~/.ssh/config ------ config の中身 Host hoge.xsrv.jp   HostName hoge.xsrv.jp   Port 12345(<=実際のポート番号入力)   User hoge   IdentityFile ~/.ssh/hoge.key Host samplehost2(<=他にもある場合)   HostName samplehost2.com   Port 12345   User username2   IdentityFile ~/.ssh/id_rsa2 ------ 6.ターミナルで接続 ssh hoge.xsrv.jp 7.表示されるダイアログにパスフレーズ入力 2.gitインストール編 ここに書いてあります。感謝。 http://3.1415.jp/ua7xskej 念のため以下にコピーさせていただきます。 ーーーーここからーーーーー まず、GNU gettextが必要なのでインストールする。場所はホームディレクトリの opt 以下ということにする。 [Xserverで作業] $ wget http://ftp.gnu.org/pub/gnu/gettext/gettext-0.18.2.tar.gz $ tar zxvf gettext-0.18.2.tar.gz $ cd gettext-0.18.2 $ ./configure --prefix

Dreamweaver CCでのZen Codingインストール

Dreamweaver CCにバージョンアップ後、いつものZen Codingをしようと、ctrl + , .... 反応しない。。。 CS6で入れた拡張機能は移行されなかった模様です。 しかも、公式DLサイト https://code.google.com/p/zen-coding/downloads/list では、CS6までしか対応していないZen Coding v.0.7.5.mxpまでしかダウンロードできない。。。 てことで Dreamweaver CCにZen Codingをインストールする方法 【方法1】 1.Extension Manager CCをインストール 2. https://meemblog.wordpress.com/2013/06/24/zen-coding-for-adobe-dreamweaver-cc/ から Zen Coding for Adobe Dreamweaver CC.zipをダウンロード 3.展開されるZen Coding.zxpをダブルクリック ( Extension Manager CCにより Dreamweaver CCにZen Codingがインストールされます。) 【方法2】 1. Extension Manager CS6でmxpをzxpにコンバート (ツール>MXP 拡張機能を ZXP に変換) 2. Extension Manager CCで上記zxpをインストール

WordPressでAdvanced Custom Fieldsの画像表示ボタンが効かないとき

WordPress のカスタムフィールドプラグイン 「 Advanced Custom Fields 」 をインストールして、投稿画面の画像表示ボタンが効かないときは以下をチェックしてみてください。 (1) .htaccess の設定 phpやjsのアクセス制限などしていないか確認 (2)ディレクトリの パーミッション 確認 インストール時に、/wp-content/に書き込みできるようにパーミッションを777にしますが、戻すのを忘れていないか。 以下フォルダを755などにして確認 /wp-content/plugins/advanced-custom-fields/js /wp-content/plugins/advanced-custom-fields/ /wp-content/plugins/ /wp-content/

スマホのときだけtelリンクを設置する方法

HTML <img src="tel.png" alt="0123-45-6789"  data-tel="0123-45-6789"/> (<span data-tel="0123-45-6789">0123-45-6789</span>とかでもOK) JavaScript $(document).ready(function () {     // 実際は初回とウィンドウリサイズ時に実行(※1)     if ($(window).width() <= 480) {         $("[data-tel]").each(function(){             if ($(this).parent().get(0).tagName.toLowerCase() != "a") {                 var tel = $(this).attr("data-tel");                 $(this).wrap("<a href=" + 'tel:' + tel + "></a>");             }         });     } else {         $("[data-tel]").each(function(){             if ($(this).parent().get(0).tagName.toLowerCase() == "a") {                 $(this).unwrap();             }         });     } }); とやると、幅480px以下のときは HTML <a href="tel:0123-45-6789"><img src="tel.png" alt="0123-45-6789"

Sass/SCSS/Compass

Sass/SCSS Sassって何? CSSのメタ言語 記法に従って記述し、コンパイルするとCSSファイルが生成される。 変数の使用や条件分岐、共通部分の部品化、共通部分の継承等が特徴。 公式サイト http://sass-lang.com/ ファイル インデントによる記法がSass 拡張子:.sass CSSベースの記法がSCSS(“Sassy CSS”)(こちらが主流) 拡張子:.scss インストール コンソールで $ ruby -v (ルビーがインストールされていることを確認) $ sudo gem update --system (gem(rubyのパッケージマネージャー)を最新版に更新) $ sudo gem install sass (sassのインストール) $ cd (index.htmlのフォルダ) 使用例 フォルダ構成 /index.html /css /scss main.scss $blue: #3bbfce; $margin: 16px; .content-navigation {     border-color: $blue;     color: darken($blue, 9%);     p {         font-size: 14px;     } } .border {     padding: $margin / 2;     margin: $margin / 2;     border-color: $blue; } $ sass scss/main.scss:css/main.css とやると main.css .content-navigation {     border-color: #3bbfce;     color: #2b9eab;  } .content-navigation p {     font-size: 14px;  } .border {     padding: 8px;     margin: 8px;     border-color: #3bbfce;  } が生成される。 実際は都度コマンド実行するのではなく、