CSS カスタマイズ作業で使っているFirefox アドオン

ここでは、Firefox アドオンのうち、CSS カスタマイズ作業で使っているものについて覚え書きしたいと思います。

記事の編集画面等を装飾できる「Stylish」

例えば、こんな表示を

こんな風にする

のにアドオン「Stylish」を使って CSS を追加しています。なお、WordPress.com の新しい記事編集画面に対する CSS の追加は、2016-01-08現在、Chrome でも可能ですが、Safari ではできないとの認識です。

カスタマイズに関する細かいチェックができるらしい「Web Developer」

私自身はほとんど使いこなせていませんが、このアドオンを使うとカスタマイズに関するいろんなチェック作業ができそうな感じです。私がこのアドオンでやっていることといえば、自分で追加した CSS を抜いてみることくらいです。

他の Web ブラウザでの閲覧チェック

Chrome, Safari 等での閲覧確認をするのにこのアドオンを使っています。mac の PopClip でも同様のことができますが、なんとなく、これを使い続けています。

画面の寸法を測れる「Measureit」

こんな感じのものです。

---

なお、画面上の CSS のリアルタイムでの修正チェックは、Firefox 自身の機能を使っています。

関連情報・トピックのマップ

#firefox-%e3%82%a2%e3%83%89%e3%82%aa%e3%83%b3-%e3%81%be%e3%81%a8%e3%82%81

WordPress のビジュアルエディタを見たまま編集にする

最終更新日：2015-09-27

WordPress のビジュアルエディタを見たまま編集にする方法についての覚書です。

↓

【WordPress.com】ビジュアルエディタに「横ライン」ボタンが追加されている

最近、WordPress.com のビジュアルエディタに「横ライン」ボタンが追加されたようです。ただし、私の環境（mac の Firefox で WordPress.com の管理画面の言語設定「日本語」）だと、以下のように文字化けを起こしています。

そういうわけで、ここでは、この文字化けを直す方法についての覚書です。

【WordPress.com】ホットキー（ショートカットキー）で見出しを変更しているようす

• デザインの方はアドオン「Stylish」で変更しています。
• mac の場合、⌘ + 3, ⌘ + 4, ⌘ + 5, ⌘ + 6, ⌘ + 7 で、動画のように切り替わります。

【WordPress】記事編集画面のカテゴリーをすべて表示させる

投稿記事の管理画面で表示されるカテゴリーの表示範囲を拡大させて、すべてのカテゴリーを表示させる方法についての覚え書きです。カテゴリーが多くなってすべてのカテゴリーを俯瞰しづらくなった場合などに使えるのではないかと思います。

アドオン「Stylish」に追加した CSS

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("comemo508.wordpress.com") {
/* 記事編集画面のカテゴリーをすべて表示させる */
.wp-tab-panel, .categorydiv div.tabs-panel, .customlinkdiv div.tabs-panel, .posttypediv div.tabs-panel, .taxonomydiv div.tabs-panel {
    max-height: none !important;
}
}

• 「comemo508.wordpress.com」の部分を任意の URL と差し替えれば OK です。