文字の均等割り付けをするjQueryプラグイン jQuery.justify.js

$(document).ready(function(){
    $('.justify-table th').justify();
});

かなり前からあるプラグインですが、実際に使ってみると便利&文字が揃って気持ちがいい。
通常均等割付はスペースかCSSのletter-spacingで手動で調整ですので、手間が掛かるし環境によってキレイに揃わない・・・
jQueryで簡単に対応できるなら今後使っていこう。

jQueryプラグイン jQuery.justify.js

CSS3 「box-sizing」を使う

widthとheightの値にpaddingとborderの幅を含むようにしてくれるCSSプロパティ。
これまでと考え方が異なるので、1サイト内でデフォルトとbox-sizingの両方を使っていくと混乱しそう。

IE8以下も動かないので、当面スマホサイトで使用していこうかと。

リキッド内での%指定要素に枠線つけるの簡単になったなー
便利!

デモはこちら

CSS

.tab { width:100%; margin:0 0 20px 0; padding:0;}
.tab li { display:inline; list-style-type:none;}
.tab li a { width:20%; margin:0; float:left; text-align:center; display:block; margin:0; padding:15px 0px 13px; background:#DDD; border-left:1px solid #EEE; border-right:1px solid #AAA; border-top:1px solid #EEE; border-bottom:1px solid #AAA; text-decoration:none; -webkit-box-sizing: border-box; box-sizing: border-box;	}
.tab li a:hover { background:#FFF;}
.tab li.here a { border-top:1px solid #6BCF29; border-left:1px solid #6BCF29; border-right:1px solid #529E1F; border-bottom:1px solid #529E1F; background-color: #5EB323; color:#FFF;}

HTML

<ul class="tab">
<li class="here"><a href="">ボタン1</a></li>
<li><a href="">ボタン2</a></li>
<li><a href="">ボタン3</a></li>
<li><a href="">ボタン4</a></li>
<li><a href="">ボタン5</a></li>
</ul>

 

Twitter公式ウィジェットのカスタマイズ

Twitter API v1が11日に提供が終了したので、各所でTwitterウィジェットの書き換えを行いました。
…が、新しいTwitter公式ウィジェットのカスタマイズが上手くいかないので色々調べたのでメモ。

デフォルトのTwitterウィジェット
20130614182300

<a class="twitter-timeline" href="https://twitter.com/haikararou" data-widget-id="341809033461788672">@haikararou からのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

 

幅や高さを指定する場合は aタグに直書きで指定する(幅300px、高さ300px)
20130614182625

<a width="300" height="300" class="twitter-timeline" href="https://twitter.com/haikararou" data-widget-id="341809033461788672">@haikararou からのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

 

その他コード側で指定できるオプション(ヘッダー・フッターを消す)
data-chrome属性を使ってレイアウト等を変更可能。
参考:埋め込みタイムライン | Twitter Developers
その他のオプションで、ツイート数の固定・ボーダー(境界線)の色なども指定可能。
20130614184242

<a data-chrome="noheader nofooter" width="300" height="300" class="twitter-timeline" href="https://twitter.com/haikararou" data-widget-id="341809033461788672">@haikararou からのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

 

上記以上のカスタマイズはCSSで行うが、新しいウィジェットはjavascriptコードの埋め込みで、iframeでタイムラインが表示されているため直接CSSで指定しても効果が無い。
そのためjQueryを使って
・iframeを参照
・iframe内の要素を指定
・スタイルの適用
となる

実際にCSSで指定
・ヘッダーの背景色を緑に変更
・ヘッダー内h1の文字色を白に変更
・ヘッダー内のボタンのボーダーを削除
・ウィジェットの角丸も無効化
・ウィジェットのボーダーを緑に変更



$(window).load(function(){
$('iframe').contents().find('.timeline-header').css('background-color', '#005700');
$('iframe').contents().find('.twitter-follow-button').css('border', 'none');
$('iframe').contents().find('.timeline-header h1 a').css('color', '#FFFFFF');
$('iframe').contents().find('.timeline').css('border-radius', '0'); 
$('iframe').contents().find('.customisable-border').css('border-color', '#005700');
});
<a data-chrome="nofooter" width="300" height="300" class="twitter-timeline" href="https://twitter.com/haikararou" data-widget-id="341809033461788672">@haikararou からのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

 

要素にアクセスさえできればCSSでかなり自由にカスタマイズは可能だな

letter-spacingを使う

これまでCSSプロパティ「letter-spacing」は使ってこなかったが、WEBフォントの調整で使ってみたので、適用数値の比較メモ

letter-spacing:-0.2em
おはようございます。こんにちは。さようなら

letter-spacing:-0.5em
おはようございます。こんにちは。さようなら

letter-spacing:0em
おはようございます。こんにちは。さようなら

letter-spacing:0.5em
おはようございます。こんにちは。さようなら

letter-spacing:1em
おはようございます。こんにちは。さようなら

letter-spacing:1.5em
おはようございます。こんにちは。さようなら

文字間を詰める値(マイナス値)の効きが顕著な印象。
状況に応じて小数点第一〜二位で調整したほうが良さそう

メモ:PHPでスマートフォン用インクルードファイルを読み替える

AMANOさんに指摘を受けて修正しました。
ありがとうございましたー。

<?php
$agent = $_SERVER[‘HTTP_USER_AGENT’];
if (preg_match(‘/i(Phone|Pod)|Android.*Mobile/’, $agent)) {
include “XXX.php”;
}else{
include “YYY.php”;
}
?>

↓旧記述
ereg は PHP6 では使えなくなるようです
<?php
$agent = $_SERVER[‘HTTP_USER_AGENT’];
if(ereg(“iPhone”, $agent) || ereg(“iPod”, $agent) || ereg(“Android.*Mobile”, $agent)){
include “xxx.php”;
}else{
include “YYY.php”;
}
?>

CSS3 背景画像とグラデーションを同時に指定する

背景画像とグラデーションを同時に使用したのですがうまくいかない・・・
調べたところ「CSSで背景画像とグラデーションを同時に使う場合、画像の値を先に書かないと反映されない」ってことでした。
つまり↓の様に記述すれば良い。
CSS3の場合はプロパティの値に順番に注意が必要ですね。

CSS

.grad01{
	width:300px;
	height:72px;
	background:url(l.png) no-repeat 10% 50%, -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #CCCCCC), color-stop(0.00, #ffffff));
    background:url(l.png) no-repeat 10% 50%, -webkit-linear-gradient(top, #ffffff 0%, #CCCCCC 100%);
    background:url(l.png) no-repeat 10% 50%, linear-gradient(top, #ffffff 0%, #CCCCCC 100%);
	border:1px solid #CCCCCC;
	margin-bottom:30px;
}

できた!

ちなみにスマホ表示用にbackground-sizeを使って画像サイズを半分にしようとしたらグラデーションまで半分になってしまった・・・
CSS

.grad02{
	width:300px;
	height:72px;
	background:url(l.png) no-repeat 10% 50%, -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #CCCCCC), color-stop(0.00, #ffffff));
    background:url(l.png) no-repeat 10% 50%, -webkit-linear-gradient(top, #ffffff 0%, #CCCCCC 100%);
    background:url(l.png) no-repeat 10% 50%, linear-gradient(top, #ffffff 0%, #CCCCCC 100%);
	-webkit-background-size:19px 24px;
	-webkit-background-composite:
	border:1px solid #CCCCCC;
}

あらら

高解像度対応には向かないな・・・

Media Queries(メディア クエリ):メモ

/* ウインドウの幅が480px以上の時 */
@media screen and (max-width:480px){
  xxxxxx
}
/* ウインドウの幅が800px以上の時 */
@media screen and (min-width:800px){
  xxxxxx
}

———————————–

/* ウインドウの幅が320px以上かつ高さが640px以上の時*/
@media screen and (min-width: 320px) and (min-height: 640px){
  xxxxxx
}