タグ別アーカイブ: IE

googleアナリティクスにIEブラウザの割合円グラフを追加しよう

googleアナリティクスではどのブラウザからの訪問が多いのか確認する事ができますが、バージョンまで確認する事はできません。

というわけで見れるようにしちゃいましょう。

左のメニューから、「マイレポート一覧>新しいマイレポート」を選択します。

空白のキャンパスで、適当な名前をつけて「マイレポートを作成」をクリックします。

自動でウィジェットの追加ウインドウが出てくるので、設定していきます。

標準         :円グラフ
次のエングラフの作成 :ユーザー数
グループ分け単位   :ブラウザのバージョン
データのフィルタ   :表示の絞り込み/ブラウザ/含む/Internet Explorer

あとは名前などを「IEバージョン別グラフ」とかにするといいかなと思います。

自分のブログではIE11の人が多いようで、一安心していますw

php – amazon_assie – アマゾンAPI利用アフェリエイトコード

コード

amazon_assieにアクセスキー、シークレットアクセスキー、アソシエイトID、検索キーワードを入れると正方形にして中心に向かってズームインした形の画像リンク配列を返す。

PHP:アマゾンAPI (AWS)で検索結果を表示 その3 – アダルトを除く | マイヤーの開発ブログさんのコードを拝借。ありがとうございます。

動作は艦これ画像まとめたった~のサイドバーを確認のこと。

//RFC3986形式でURLエンコードする関数
function urlencode_rfc3986($str) {
  return str_replace('%7E', '~', rawurlencode($str));
}

function amazon_assie($access, $secret, $Tag, $ama_keywords) {
  $access_key_id     = $access;
  $secret_access_key = $secret;
  $AssociateTag      = $Tag;
  for($i = 1; $i <= 3; $i++) { //2ページ取得、ItemSearchの最大値は10まで
    $baseurl                  = 'http://ecs.amazonaws.jp/onca/xml';
    $params                   = array();
    $params['Service']        = 'AWSECommerceService';
    $params['AWSAccessKeyId'] = $access_key_id;
    $params['Version']        = '2011-08-01';
    $params['Operation']      = 'ItemSearch'; //商品名や著者名でキーワード検索
    $params['SearchIndex']    = 'All';
    $params['Keywords']       = $ama_keywords; //検索ワードを指定
    $params['AssociateTag']   = $AssociateTag;
    $params['ResponseGroup']  = 'Medium';
    $params['Condition']      = 'All'; //中古品も含める
    $params['ItemPage']       = $i; //何ページ目か
    //Timestamp パラメータを追加します
    //-時間の表記は ISO8601 形式、タイムゾーンは UTC(GMT)
    $params['Timestamp'] = gmdate('Y-m-dTH:i:sZ');
    //パラメータの順序を昇順に並び替えます
    ksort($params);
    //canonical string を作成します
    $canonical_string = '';
    foreach($params as $k => $v) {
      $canonical_string .= '&' . urlencode_rfc3986($k) . '=' . urlencode_rfc3986($v);
    }
    $canonical_string = substr($canonical_string, 1);
    //署名を作成します
    //-規定の文字列フォーマットを作成
    //-HMAC-SHA256を計算
    //-BASE64エンコード
    $parsed_url     = parse_url($baseurl);
    $string_to_sign = "GETn{$parsed_url['host']}n{$parsed_url['path']}n{$canonical_string}";
    $signature      = base64_encode(hash_hmac('sha256', $string_to_sign, $secret_access_key, true));
    //URLを作成します
    //-リクエストの末尾に署名を追加
    $url        = $baseurl . '?' . $canonical_string . '&Signature=' . urlencode_rfc3986($signature);
    $amazon_xml = simplexml_load_string(@file_get_contents($url));
    //  print_r($amazon_xml);
    foreach((object)$amazon_xml->Items->Item as $item_a => $item) {
      //アダルト対策
      $adult_dvd = $item->ItemAttributes->Format; //「アダルト」の文字
      $adult_toy = $item->ItemAttributes->IsAdultProduct; //アダルトなら「1」
      if(strpos($adult_dvd, 'アダルト') !== false) {
        continue;
      } elseif(strpos($adult_toy, '1') !== false) {
        continue;
      } elseif($item->LargeImage->URL == "") {
        continue;
      } else {
        $detail  = $item->DetailPageURL; //商品のURL
        $image_w = $item->LargeImage->Width; //画像の幅
        $image_h = $item->LargeImage->Height; //画像の高さ
        if($image_h > 250) {
          $image_h_p = $image_w / $image_h;
          $image_h_e = floor((($image_h_p * $image_h) - 250) / 2);
        }
        $image       = str_replace(".jpg", "._SX260_CR5,{$image_h_e},250,250_.jpg", $item->LargeImage->URL); //画像のURL
        $aferi_box[] = '<div class="amazonbox"><a href="' . $detail . '" target="_blank"><img src="' . $image . '" align="left" /></a></div><br />';
      }
    }

    //  print_r($aferi_box);";
    return $aferi_box;
  }
}

css – Text-Shadowによる文字デザインのカスタマイズ記事まとめ part1

CSSカスタマイズによる文字装飾の記事は各所で上がりますが、後々探すのが大変なので自分のためにもよく使わせて貰う記事をまとめます。


Using CSS Text-Shadow to Create Cool Text Effects

Using CSS Text-Shadow to Create Cool Text Effects
he CSS3 text-shadow property has been around for some time now and is commonly used to recreate Phot …


css3のtext-shadowによるテキスト装飾のサンプル集 – かちびと.net

css3のtext-shadowによるテキスト装飾のサンプル集 – かちびと.net
たまに使うので自分用にメモします。 css3のtext-shadow等を使用した テキスト装飾のサンプルコードの 備忘録です。工夫すればいろいろ と作れるんでしょうけど、とりあえず よく使うものをピッ …


自由自在!CSS3のtext-shadowを使ってをロゴ作ってみる|Webpark

自由自在!CSS3のtext-shadowを使ってをロゴ作ってみる|Webpark
CSS3のtext-shadowが面白そうなので個人的に色々ロゴを作ってみました。想像力が膨らみますね。 text-shadowの基本的な使い方はこのようになります。 …


text-shadowサンプル – unpco

[CSS3]text-shadowサンプル – unpco
今回はよく使うCSS3のtext-shadowの小技を紹介しますよ。 気に入ったのをコピペで使ってください。 IEは適応外なので、この内容は他のブラウザで見てください。IE10は採用されるらしいです …


コピペでOK、text-shadowを使ってテキストにさまざまなスタイルを与える全23種類のスタイルシートのまとめ | コリス

[CSS]コピペでOK、text-shadowを使ってテキストにさまざまなスタイルを与える全23種類のスタイルシートのまとめ | コリス
画像は無し、数行のスタイルシートを加えるだけでテキストにさまざまなスタイルを与えるデモを紹介します。 …


エレガントからレトロまで、text-shadowを使った美しいエフェクト集 | コリス

[CSS]エレガントからレトロまで、text-shadowを使った美しいエフェクト集 | コリス
text-shadowを使った美しい4種類のエフェクトを紹介します。 エフェクトはCSSのみで、もちろん画像は使っていません。 …

IEの対応なんてハナっからする気なし!「ie-owakon」で楽々と他ブラウザへ誘導

コードをコピペするだけでIE8以下で閲覧したときに警告を表示する『ie-owakon』を作りました | SANOGRAPHIX

IE向けにページを組むのは結構大変です! IE7までCSSがまともに使えない上に未だにIE6がうようよいやがるぜ!!!

とまあ、今ではtwitterですらちょっと前のIEで閲覧すると表示が崩れます。そろそろIEから乗り換えちゃいなよべいべー!! という感じで、IEの対応を最初からする気がないページを私もいくつか作ってきました。

さすがにこのブログではやっておりませんが、aoringo toolsで取り扱っているwebツールではIE8以下で閲覧すると警告が出たりします。

その警告の元が上記サイト様。オワコンちゃんかわいい!! イラストをそのまま載せるのはなんとなくはばかられたので置いてませんが、かわいいんだよね、オワコンちゃん。

デモページは↓

IEはオワコン!

IE以外のブラウザで見るとただの文字列ですが、IEで見ると、

オワコンちゃんが出てきます! かわいい!

ソースはリンク先で配布されていますが、IE10では「 <!–[if IE]>」が仕様変更でただのコメントとして扱われるようになりまともに動作しません。

なのでメタタグに

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

を追加する事によってIE9のシミュレーションをして表示させることができます。

IE10はCSSとかもある程度できるのでIE10までオワコンする必要はないと思うのですけれど、皿まで憎い人はやっぱりいるわけですよね!!

ちなみに私は特に気にせず実装しちゃう畑なんでわりとどうでもいいです!

html – testhtml – demo用などの単発htmlファイルテンプレート

スニペット

<!DOCTYPE html>
<html>
 <head>
 <title>test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta name="viewport" content="width=620px" />
 <style type="text/css">
 <!--
 #wrap{
 background-color: gray;
 -->
 </style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript">
 /* jQuery v1.3.2が読み込まれているか確認 */
 $(function(){
 /* 例1 */
 if(jQuery){
 $("#res1").html("<p>jQueryは読込まれています。"+jQuery+"</p>");
 }

/* 例2 */
 if (typeof jQuery!="undefined"){
 $("#res2").html("<p>jQueryは読込まれています。typeof jQuery="+typeof jQuery+"</p>");
 }
 });
 </script>
 </head>
 <body>
 <div id="wrap">
 <div id="res1"></div>
 <div id="res2"></div>
 </div>
 </body>
 </html>

jqueryが動作してるかのチェックも同時に行う。cssもheadに直接ぶちこむ。

wordpress – query posts – orderby – 記事の検索条件

テンプレートタグ/query posts – WordPress Codex 日本語版

スニペット

'none' - 順番指定なし(バージョン 2.8 以降のみ)
'ID' - ポストID
'author' - 投稿者名
'title' - 記事タイトル
'date' - 投稿日時
'modified' - 記事の更新日付
'parent' - 親順に並べる。記事、ページに親関係が設定されていた場合、その親IDが基準となる。
'rand' - ランダム
'comment_count' - コメント数で並べ替え
'menu_order' - おそらく固定ページ作成の時に利用する「順列」を基準にするのだと思われる。

//↓利用する場合はカスタムフィールドによる検索条件を事前に組む必要がある↓
'meta_value' - カスタムフィールド内の値
'meta_value_num' - カスタムフィールド内の値を数字として認識

頻繁に使う割りに毎回調べている気がするのでまとめる。
「none」の利用方法がよくわからないが、mysqlに入っているものを順番に抜き出す、という意味なのだろうか。

驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その9 – 即席ウィジェットを作る

一連の記事→wordpressテーマをカスタマイズしよう Archives – aoringo works

プロデューサー! ウィジェットですよウィジェット!! のヮの

ウィジェットはとても大事です。サイドバーを彩ります。しかし自分で作るには少しハードルが高い。テヘペロ。

いちいちオプションとかくっつけたりして、なんか意味不明なコードが沢山あって。いやん、ばかん。

だからテンプレートとして簡単な即席ウィジェットを一つ持っておくと便利ですよ。

続きを読む 驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その9 – 即席ウィジェットを作る

驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その8 – キャッシュをクリアする

一連の記事→wordpressテーマをカスタマイズしよう Archives – aoringo works

前回でキャッシュを利用する仕組みに変更しました。一ヶ月間そのキャッシュを使い回します。

問題もあります。このままでは記事を投稿しても一ヶ月ページが変わらないんです。アッチョンブリケ

続きを読む 驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その8 – キャッシュをクリアする

どどんとふのログを形成するプラグイン「aoringo dodontof logmaker」を作りました。


どどんとふ、便利ですよね。ログもhtml形式で出してくれますし・・・・。

名前は太字だし、文字も大きめだし、とても見やすいと思います。

けれどもまあ、折角どどんとふは画像をサポートしてるし、白熱したログはもっとこう、視覚に訴えるような、こう、なんか、アレな感じで・・・・という欲求をお持ちの方は少なからず居ると思います。というわけで作りました。

どどんとふのログを形成するwordpress用プラグイン、「あおりんご どどんとふ ログメーカー」です。

続きを読む どどんとふのログを形成するプラグイン「aoringo dodontof logmaker」を作りました。