DreamweaverでSassする時にzencodingを利用する方法

やはりCSSを書く場合はSassを利用するのが早くてカッコいいので、Dw狂の私としてはlinkerさんの記事を参考にDwでSassの開発環境を整えました。

が、SassでCSSを書く際には「scss」ファイルを編集することになるので、拡張子が違うからなのか編集ファイルがCSSモードでパースされずにzencodingがうまく動作してくれません
これでは効率が上がったのか下がったのか微妙なところなので、Dwのzencodingを少し修正して「scss」ファイルでもzencodingの恩恵を受けられるようにしてみました。

Sassもzencodingもコードヒントも使いたい!という欲張りな人にはお勧めです。

続きを読む DreamweaverでSassする時にzencodingを利用する方法

Gravatarを表示させる

GravatarとはWordPress.comを運営しているAUTOMATTIC社が運営しているアバターサービスです。

設定は簡単で、メールアドレスを登録し、アバターにしたい画像をアップロードしてメールアドレスに紐付けるだけ!!!!!!

こんな感じで画像リストからアバターにしたい画像を選択します。
(ちなみに設定されている画像はダークソウルの登場キャラです)

WordPressはGravatarに対応しているので、設定するだけで管理画面に表示されます。

登録しないでもいいですが、最近のデフォルトテーマはGravatarを表示するようになっています。ブログの賑やかしや誰が投稿・コメントをしたか判別しやすくなるので設定してみるのもいいんじゃないかなと思います。

SyntaxHighlighterの体裁をカスタマイズ

現在、スニペット集のサイトを作ろうと少しずつアイデアを形にしていっているのですが、その手のサイトに無くてはならないのがコードを見やすく色付けしてくれるシンタックスハイライター。
何か良いのが無いか少し探すのですが、結局いつもこのシンタックスハイライターに落ち着いてしまいます。

このシンタックスハイライターは3.0になってからシンプルになったんですけど、デフォルトテーマがなんかダサいと言うかシンプル過ぎてつまらなくなったな~と感じていました。最近新たにダウンロードした際に、テーマという項目を見つけて自分で体裁をカスタマイズできることを知りました!
早速、さっくりテーマを作ってみました。

結局以前のバージョンと同じような体裁になりました。今作っているサイトの現状の見た目に一番あっているということもありますが、これが一番安定感があるよな~と感じています。

数種類のテーマが用意されているのですが、コアファイルが「!important」を使いまくっているので、別CSSにて「!important」を使ってゴリゴリ上書きしている構成です。現状はそれに倣って作りましたが、配布を考えないのならコアを修正したほうが何かとecoだと思います。

あとは、タブの場合はタブ、スペースの場合はスペースで整形してくれるようにJSの修正をするだけです…………

【忘備録】Selectivizr.js IE6~8でCSS3セレクタを利用出来るライブラリー

IE6やIE7のシェア数が減少した事もありこれまで使えなかったCSSセレクタも使えるケースも増えてきました。

これはとても喜ばしい事です。

しかし
まだまだIE6やIE7に対応を希望するお客様は多いです。

そんな時に幾つか対応する方法があるのですが、最近試してみた方法をご紹介します。

続きを読む 【忘備録】Selectivizr.js IE6~8でCSS3セレクタを利用出来るライブラリー

疑似クラス

例えばリストの最初(最後)だけ罫線を消したい場合に使うのが:first-child(:last-child)

とても便利ですよね~最後だけクラスを指定しなくていいので項目が増えた場合でも更新が楽
これらがIEに対応してたらもっとえぇのに・・・と何度思ったことか・笑

その場合は

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script>
<![endif]-->

をヘッダに指定してIEでも使えるようにすればOK!
これで幸せなマークアップライフを過ごせますね

さて、CSS3では上記以外にも様々な擬似クラスが定義されています
結構使えるんですよね~

 

:nth-type(n)

これは、ある要素の隣接している子要素を最初から数えてn番目にあたる要素にスタイルを適用するもの
最後から数えたい場合は:nth-last-child(n)

nの値を変えることで様々な箇所に対応できます
奇数の場合はoddもしくは2n+1、偶数はevenもしくは2n
数字を直接指定するとその番目のみ・・・
というように

あぁ、素晴らしい

 

上記に似て非なるものが

:nth-of-type(n)

これはある要素の同じ子要素を最初から数えて、n番目に当たる要素にスタイルを適用
最後からの場合は:nth-last-of-type(n)

nの指定の仕方は前のと同じ

これらの違いは、子要素すべてか同じ子要素のみか

<p>~</p>
<p>~</p>
<h2>~</h2> ←p:nth-child(3)
<p>~</p> ←p:nth-of-child(3)
<p>~</p>
<p>~</p>

ということですな

 

ちなみに

<script type="text/javascript">
$('e:last-child').css('border', 'none');
</script>

とjQueryで指定したらIE関係なく疑似クラス使えたり。。。
もちろん:nth-child(n)や:nth-of-child(n)もありますよん

jQuery恐るべし

参考:CSS Happy Life ZERO