web

CotEditorで.htmlファイル中に書いたCSSのコメントにもカラーリングを適用させる

coteditor

ちょっとしたhtmlを書いたり、修正したりする際(たまに)CotEditorを使ったりしてます
やっぱり立ち上がりが早いっていいです。

ただ、html中に書いたcssのコメントがコメント扱いされず見づれーなぁと思う時さあっで
cssのコメント/* cssコメント */もコメント扱いさせられねぇべかと
環境設定を弄っていたらcssのコメントもコメント扱い出来たから方法をシェアするど\( ‘jjj’ )/

通常のhtmlカラーリング

続きを読む

tableに指定したpaddingが効かない原因はborder-collapse: collapse;

tableに指定した背景を少し広げようと思って
paddingを指定したけどうんともすんとも言わない

firebugで確認してもpaddingは指定されてるわ、でも実際には反映されてないわってのが確認できた
最小のソースで試してみたらそっちはちゃんとpadding効いた

さっぱり意味がわからず時間も無かったから
その時は背景色と同じ色のborderで誤魔化した(邪道)けど
落ち着いてよく考えてみたら
問題の起きてるファイルに読み込まれてて
最小の記述に読み込まれてないreset.css内の内容がほぼ犯人としか思えない

そこでtable周りのreset指定を見なおして、とてつもなく怪しい奴がいました

って事で次のように書き換えてみると

tableに指定したpaddingが反映されました

[image]tableにmargin

[WordPressプラグイン]urlからwebサイトのサムネイルを作成するプラグイン

WordPressの投稿にwebサイトのサムネイルを簡単に貼り付ける方法のメモです

[image]Browser Shots

WordPressの管理画面からインストールできました

プラグインを有効化したら
投稿に次の記述でサムネイルを挿入可
[text]
[browser-shot url="サムネイルにしたサイトのURL" width="任意の横幅"]
[/text]

うちはFirefoxのMake Link
こんな感じの設定を追加して右クリックからソースを生成できるようにした
[text]
[browser-shot url="%url%" title="%text%" width="205"]
[/text]

[image]makelink設定

[coda2] emmetのexpand abbreviationをtabキーで実行する

[追記あり / 2013-04-12 16:58]
プラグイン>Emmet>Preferences…から変更できるようになってますね!
[image]emmet設定

これどのバージョンから設定できてたんだろう、全然気づかなかった。

html:4tとかhtml:xtとかをexpand abbreviationしたらbodyタグの無いコードが生成されて、おかしいなぁと設定を見てみたら発見したというわけ
そして肝心のbodyタグがなくなる現象の原因は未だ発見できず。
こうゆうのことわざでなんていうんでしょう。

TEA for Codaもインストールしてるから駄目なのかな?

追記

喜び勇んで投稿しちゃったけど、coda2自前のクリップ挿入機能(tabトリガー?)が効かなくなってしまった。
それはそれで困るので以前の状態へ戻す事にしました(´・ω・)

_(アンダーバー)は、host名に使えない文字

[image]mac用host設定アプリ

Macで超簡単にローカルホストを追加・設定する方法として
RedWinder::MacApp::Hosterを使っていましたが
このhosterてば(うちの環境だけなのかよくわからないけど)ディスクのアクセス権を修復する度に起動しなくなってしまうので、なんとかならないかなぁと思っていると
(壊れるといっても設定は消えていないから再インストールするだけで復帰は出来る)

Hostsという無料のアプリがありました
これはhosterと違って使う時に起動させなくても大丈夫
インストールしたらシステム環境設定からホストを追加します
(launchpadに出てこないから上手くインストール出来ないなーと少し焦った

でもって、いままでバーチャルホストの名前を
_example.localhostみたいに
アンダーバー + サイト名.localhost にしていたんだけど
Hostsだとこれが登録できない。

おかしいなぁと調べてみると、元々アンダーバーはホスト名に使用する事が許されていない文字だったそうです。

ホスト名 – Wikipedia

ドメイン名と違い、ホスト名のラベルはASCII文字の’a’から’z’まで(大文字小文字は無視される)と、’0’から’9’の数字そしてハイフンだけを使うことが出来る。
ラベルの最初と最後の文字にハイフンを使うことは出来ない。
ハイフン(そしてラベルの間に打つドット)以外の特殊文字は時に誤って使われるが許容されない。
また、アンダースコアはWindowsで構築されたシステムで一般に使われるが、RFC 952によれば許容されない。

とりあえず全部修正した

Coda2のコードヒントをカスタマイズしてみる

Coda2

例えばcssのborderをショートハンドで書く時
うちは[太さ、種類、色]の順番で記述してます
例えばこんな感じ

でもってcoda2でborderを記述しようとすると
過剰なコードヒントのせいで、solidの前にsilverが来てしまい非常にウザいです。

[image]使わないよ

Dreamweaverの「widthを入力したいのにwidowsが上に来てしまう」あれと一緒。

DreamweaverはCodeHints.xmlを編集すればどうにかなったけど

Coda2はどこをいじるのだろう?と探して見つけたのが
[text]/Applications/Coda2.app/Contents/Resourcesの中のCSS.mode[/text]

これを
[text]~/Library/Application Support/Coda 2/Modes/[/text]の中に複製して
CSS.modeを右クリック>パッケージの内容を表示の先にある
CodaCompletion.plistを編集
[text]~/Library/Application Support/Coda 2/Modes/CSS.mode/Contents/Resources/CodaCompletion.plist[/text]

手元のファイルだと13248行目から13251行目のsliverの記述をコメントアウトして保存、coda2を再起動
そうするとborderのコードヒントからはsilverが消える。

[image]消えた

並び順をコントロールしたいけど出来ない…

.modeファイルの中の登場順で表示されるわけではないようなので
コードヒントの順番を任意で入れ替える事が出来ない。

例えばpositionって入力したくてすると
poまで書くと
pointer-eventsが先に来るんだけど
CSS.modeのpointer-eventsとpositionを入れ替えても
pointer-eventsの方が上にきちゃう。
残念。

というわけで順番までコントロールする方法を知ってる人は教えてくださいな

クイックルック(QuickLook)で画像サイズを確認出来るようにする

クイックルックてば機能拡張できるんですって!知らんかった。
[追記 / 2016-02-16]
El Capitanな今はこっちを使っちょります。
qlImageSize.pkg
Nyx0uf/qlImageSize: QuickLook plugin to display the dimensions and size of an image in the title bar instead of the filename. Also preview some unsupported formats like WebP.

ダウンロードした.pkgをダブルクリックしてインストールするだけ。
[追記ここまで]

[image]クイックルックに画像サイズ表示

早速、画像サイズを表示させるやつとzipの内容を表示させるヤツをいれてみました。
これ、Coda2にいつの間にか実装されてて便利だなーと思ってた機能だ。

画像のサイズを表示させる拡張 qlImageSize.qlgenerator

Images dimensions in QuickLook • Cocoa in the ShellからダウンロードできるqlImageSize.qlgenerator
libraryの中のQuickLookフォルダにぶち込んでfinderを再度開くと有効になりました

うちはMacintosh HD直下のライブラリの中のQuicklookフォルダに入れました(そこしか見つからなかった)。

zipの中身を表示させるやつ

ZIP: BetterZIP
mountain lionだけど、クイックルックフォルダに入れようとしたらエラー表示された
でも使えてる。

ここにたくさんある

QuickLook Plugins List

うちは使ってないけどcsvを表で表示したり、photoshopのブラシを見れたり、もするようになるみたい。