kawama.jp

text-decorationを親要素と子要素両方に指定すると

カテゴリ: CSS — タグ: — 2013年6月25日 22:58 — Comments (0)hatebu count

親要素には効くけど、子要素には効きません。

↓こういうコードを書いたら

<span style="text-decoration:underline;">親要素のspan<span style="text-decoration:none;">子要素のspan</span>親要素のspan</span>

↓こうなって欲しいところですが、

親要素のspan子要素のspan親要素のspan

↓実際はこうなります。

親要素のspan子要素のspan親要素のspan

そういう仕様になってるとのことです。

参考ページ

http://www.mozilla.gr.jp/standards/webtips0002.html

Android4.0でブラウザのキャッシュを削除

カテゴリ: スマホ・android — タグ: — 2013年6月17日 11:39 — Comments (0)hatebu count

ブラウザ開く

 ↓

メニューボタンをタップ

 ↓

設定

 ↓

プライバシーとセキュリティ

 ↓

キャッシュを消去

mod_pagespeedをインストールしてみた

カテゴリ: Apache,サーバー — タグ: , — 2013年6月14日 09:58 — Comments (1)hatebu count

してみました。

Apacheのモジュールで、導入するとページの表示が劇的に早くなるということです。

インストールについてはこちらのページを参考にさせていただきました。

http://d.hatena.ne.jp/eco31/20101119/1290157894

$ sudo yum install at

$ wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_x86_64.rpm

$ sudo rpm -U mod-pagespeed-stable_current_x86_64.rpm

$ sudo /sbin/service httpd restart

3行目のところでwarningが出ましたが、インストール自体は問題ないようです。

warning: mod-pagespeed-stable_current_x86_64.rpm: Header V4 DSA signature: NOKEY, key ID .....

Apache再起動して確認したところ、なんとなくページの表示が早くなったような感じが。

とりあえずしばらく様子を見てみようと思います。

Youtube埋め込みプレーヤーでシークバーを表示する/隠す

カテゴリ: 技術関連 — タグ: — 2013年6月12日 21:23 — Comments (0)hatebu count

autohideのパラメーターを使います。

autohide=0:シークバー(とコントロールバー)が常時表示される(デフォルト)

autohide=1:マウスカーソルを乗せてるときだけシークバー(とコントロールバー)が表示される

autohide=0

<iframe width="400" height="225" src="http://www.youtube.com/embed/2Iiy_YfpVn0?autohide=0" frameborder="0" allowfullscreen></iframe>

autohide=1

<iframe width="400" height="225" src="http://www.youtube.com/embed/2Iiy_YfpVn0?autohide=1" frameborder="0" allowfullscreen></iframe>

ie8でyoutube埋め込みプレーヤーのバグ

カテゴリ: Ajax,JavaScript — 2013年5月28日 21:06 — Comments (1)hatebu count

youtube埋め込みプレーヤー(iframe)を操作するとie8のみ画面が真っ暗になる、という不具合に遭遇しました。

ie8のみのバグみたいです。

対処法はこちらのページを参考にさせてもらいました。

http://blog.romeolynx.com/article/52365723.html

サンプル作ってみました。

ie8で「消す」のボタンをクリックすると画面が真っ黒になります。

「消す2」のほうはバグ回避してるので普通に消えます。








<script>

function deleteIframe() { $('#youtube_wrapper div').replaceWith("<span>iframeを消した</span>"); }

function deleteIframe2() { $('#youtube_wrapper iframe').attr('src',''); $('#youtube_wrapper div').replaceWith("<span>iframeを消した2</span>"); }

</script>

<div id="youtube_wrapper" style="padding:20px;width:240px;height:180px;background-color:yellow;">

  <div>

    <iframe id="player" width="240" height="180" src="http://www.youtube.com/embed/2Iiy_YfpVn0?enablejsapi=1&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>

  </div>

</div>

<button type="button" onclick="deleteIframe();">消す</button>

<button type="button" onclick="deleteIframe2();">消す2</button>

phpでxmlの名前空間を取得する

カテゴリ: PHP — タグ: , , , , — 2013年5月20日 17:31 — Comments (0)hatebu count

まず最初に名前空間とは。

<item>

<title>タイトル</title>

<link>http://www.example.com/</link>

<description>説明</description>

<pubDate>yyyy/mm/dd</pubDate>

<media:content url="http://www.example.com/path/to/jpg/hoge.jpg" type="image/jpeg" height="743" width="1024"/>

</item>

太字の部分が名前空間。htmlで言うとタグの属性に似てます。

phpのsimplexml_load_file関数はとても便利で、

$xml = "http://www.example.com/path/to/rss/hoge.rss";

$data = simplexml_load_file($xml);

こんな風にするだけで簡単にxmlを解析してphpオブジェクトに変換してくれます。

ただこれだけだと名前空間部分はスルーされてしまいます。

名前空間に欲しい情報がある場合、例えばこの例では

$data->children("media", true)->content->attributes()->url;

という感じでようやく取得できます。

非常に面倒ですが、とりあえずこのやり方で取得できます。

参考ページ

http://blog.mach3.jp/2010/12/various-xml-on-php.html

テーマのテスト表示ができるプラグイン「Theme Test Drive」

カテゴリ: 技術関連 — タグ: — 12:14 — Comments (0)hatebu count

Wordpressでテーマを編集する場合、ローカルに同じ環境を作ったりしてやってたんですが、「Theme Test Drive」というプラグインがあるのを知ってさっそく試してみました。

Theme Test Drive:http://wordpress.org/extend/plugins/theme-test-drive/

Test Drive用のテーマを1つ割り当てることができ、管理者ログインしてるとそのテーマで表示、一般ユーザーにはデフォルトのテーマが適用される、というものです。便利です。

使い方はこのあたりのページを参考にさせてもらいました。

http://lifehacking.jp/2012/07/wp-theme-test-drive/

http://kinomemo.info/create/1025/

phpで送信するメールが勝手に1000バイト目あたりで改行される

カテゴリ: PHP — タグ: , — 2013年5月17日 21:53 — Comments (0)hatebu count

ということがあって、そのせいで文字化けしたり、レイアウトが崩れたりということがありました。

調べてみたところphp側の問題ではなく、MTAで勝手に改行を入れている様子。

http://alley.way-nifty.com/han/2005/09/outlook_express_cda5.html

http://www.geek.sc/archives/743

そもそもメールというものは適宜改行を入れて書くものであって、1行に1000バイト以上書いてはいけない、という決まりになってるそうです。まだメモリが高価で容量が少なかった時の名残だそうです。

面倒ですけど1000バイトの手間で改行を入れてやるしかなさそうです。

cssの:before、:afterがけっこう便利

カテゴリ: Ajax,JavaScript,CSS — タグ: , , — 2013年5月15日 22:26 — Comments (0)hatebu count

今更ながらその便利さに気が付きました。

<style type="text/css">

.before_after_test1:before { content: "("; }

.before_after_test1:after { content: ")"; }

.before_after_test2:before { content: "[ "; }

.before_after_test2:after { content: " ]"; }

</style>

<div class="before_after_test1">カッコ1</div>

<div class="before_after_test2">カッコ2</div>

↑こうすると

↓こうなります

カッコ1
カッコ2


・ ・ ・

こんなことも

<style type="text/css">

.before_after_on:before { content: "スイッチオン:"; }

.before_after_off:before { content: "スイッチオフ:"; }

</style>

<div class="before_after_test3 before_after_off" style="text-decoration:underline;color:blue;cursor:pointer;">ここをクリック</div>

<script type="text/javascript">

$(function(){

$('.before_after_test3').click(function(){ $(this).toggleClass('before_after_on').toggleClass('before_after_off'); });

});

</script>

ここをクリック





うまく使えばきれいなコードが書けると思います。

Youtube埋め込みプレーヤーで関連動画を表示しない

カテゴリ: 雑記帖 — タグ: — 2013年5月9日 12:52 — Comments (0)hatebu count

iframeで参照するURLに「?rel=0」をつけるだけです。

<iframe width="400" height="225" src="http://www.youtube.com/embed/2Iiy_YfpVn0?rel=0" frameborder="0" allowfullscreen></iframe>

関連動画有り

関連動画無し


Copyright (C) 2002 - 2017 kawama All Rights Reserved. — Powered by WordPress

css.php