アットスタイルのWebmasterがHTML・CSS・アクセシビリティ・Movable Type 等、気になる事について色々と・・・
簡単にシンタックスハイライトが導入できるgoogle-code-prettifyを使ってみた。
ダウンロードはGoogleからでもよいが、以下のページの解説がわかりやすいかもしれない。
Quick Tip: How to Add Syntax Highlighting to Any Project
ダウンロードしたファイルの中からprettify.cssとprettify.jsだけを使う。
prettify.jsをサーバーへアップロード、prettify.cssは内容を既存のCSSに追加した。
HTMLファイルに以下を記述する
<script src="/js/prettify.js"></script>
<script>prettyPrint();</script>preでマークアップ
<pre class="prettyprint"><code>ここにコードを記述する</code></pre>12月22日、個人向け無償版のzenbackからzenback BIZにアップグレードいたしました。
zenback BIZでは「関連リンク」やクラシファイドも非表示に出来るため他サイトへの流出を心配しなくてよくなります。またGoogle アナリティクスも設定可能ですので企業・法人でのご利用におすすめです。
＊個人向け無償版のzenbackからzenback BIZへのアップグレードの際には、必ず個人向け無償版で利用した以外のメールアドレスを用意して新たにアカウントを作成する必要があります。ヘルプをよく読んで設定してください。（間違えて無料アカウントにライセンスコードを設定してしまいましたとさ...）
東北地方太平洋沖地震の被害に遭われた方におかれましては、心よりお見舞い申し上げると共に、一日も早い復興をお祈り申し上げます。
今年もアットスタイルをどうぞご利用下さいますようお願い申し上げます。
平成二十四年元旦
アットスタイル 柳 泰久
先日「当ウェブサイトでのInternet Explorer 6 対応終了」をご案内した後にInternet Explorer 6からのアップデートを促すようie6alert-jsを組み込みましたが、IE6で閲覧した場合にはグローバルナビゲーションにアラートが重なり使いにくくなっておりました。
現状CSSにはIE6とIE7用のclearfixも記述しておりますが、対応しない方向なのでIE7にもアラートを表示させるようにいたしました。
スクリプトは少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックスの中の「9. IE6以下ユーザーにメッセージを表示」を使用させて頂きました。
<script>
$(function () {
if ( $.browser.msie && $.browser.version <= 7 ) {
$('body').prepend('<div class="error">このウェブサイトは<span>Internet Explorer 6<\/span>や<span>Internet Explorer 7<\/span>では<span>正常に表示されない<\/span>可能性があります。ご了承ください。<\/div>');
}
});
</script>.error {
background:#84b8c7;
text-align:center;
font-size: 87.5%;
color: #fff;
padding: 8px 10px;
}
.error span {
font-weight: bold;
}
なお、販売および配布のテーマ（テンプレート）につきましては、引き続きInternet Explorer 6及び7で大幅にレイアウトが崩れていないことを確認後に公開いたします。
先日の「CSS Nite redux, Vol.5 powered by デジタルハリウッド福岡校」で鷹野さんに教えていただいたAdobe Fireworks CSS3 Mobile Packを使ってみた。
fireworks_css3mobile_p1_100311.zxpをクリックしてExtension Managerにインストールする。
Fireworksで簡単なボタンを作ってみる
こんな感じ。とりあえず角丸とグラデーション
プロパティ
ウィンドウ>エクステンション>CSS propertiesを選択してCSS propertiesパネルを表示する。
ボタンを選択した状態で更新ボタンをクリック。
出力されたコード。
background-color:#3ab7f5;
/* Firefox v3.6+ */
background-image:
-moz-linear-gradient(20% 0% -90deg,
rgb(58,183,245) 0%,
rgb(51,153,204) 100%);
/* safari v4.0+ and by Chrome v3.0+ */
background-image:
-webkit-gradient(linear,
20% 0%,
20% 75%,
color-stop(0, rgb(58,183,245)),
color-stop(1, rgb(51,153,204)));
/* Chrome v10.0+ and by safari nightly build*/
background-image:
-webkit-linear-gradient(-90deg,
rgb(58,183,245) 0%,
rgb(51,153,204) 100%);
/* Opera v11.10+ */
background-image:
-o-linear-gradient(-90deg,
rgb(58,183,245) 0%,
rgb(51,153,204) 100%);
background-image:
linear-gradient(-90deg,
rgb(58,183,245) 0%,
rgb(51,153,204) 100%);
width:120px;
height:60px;
/* Firefox v1.0+ */
-moz-border-radius:5px;
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-border-radius:5px;
/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+ and by IE v9.0+ */
border-radius:5px;
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr = #ff3ab7f5,endColorstr = #ff3399cc,GradientType = 0);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr = #ff3ab7f5,endColorstr = #ff3399cc,GradientType = 0)";あとはクラスなんかを付けてブラウザで確認。CSS3のボタンが出来上がり！
参考にした記事：Fireworks CSS3 Mobile Packを使ってみよう