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

投稿

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 = '/' . get_query_var('year') . &#…

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はこれで対応)$(document).ready(funct…

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"></script> <scri…

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
デバイス PhonesPhones to TabletsPortrait TabletsDefaultLarge Displayブレイクポイント 480px以下767px以下768px以上980px以上1200px以上レイアウト幅 auto見た目 724px見た目 940px見た目 1170pxカラム数 N/A121カラムの最大幅 auto(ブラウザ幅 - 20px - 20px)42px60px70pxカラムとカラムの隙間幅 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!YDNの検索やリターゲティング
・Facebookの広告


等のコンバージョンを取得したい場合は、素直にthanks.htmlに遷移した方がシンプ…

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, scaleControl: true, streetViewControl: false, overviewMapControl: true, scrollwheel: true, …

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; ?></mt:SetVarBlock>
<mt:Ignore>…

自分が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=/home/[ユーザ名]/opt
$ make install

インストールした gettext のコマンドラ…

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"  data-tel="0123-45-6789&qu…

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;  }
が生成される。
実際は都度コマンド実行するのではなく、

$sass --watch scss:css
でフォルダ監視し、scssフォルダ内の.scssファイルが更新されたら自動でcssフォルダにファイルを生成(上書き)する。

SCSSの記法
入れ子構造#main {
    width: 90…