「Tips」タグアーカイブ

WordPressで記事ごとにサムネイル表示するには

インデックスやカテゴリページの記事ごとにサムネイルを表示しようと思い、しばらくネットをさまよいましたが、初心者むけの情報がなかったのでまとめてみました。

WordPress で記事ごとにサムネイル表示するために、プラグインをローカル環境のWordPress にいくつかいれたのですが「Thumbnail for Excerpts」が一番しっくり来たのでこちらを紹介します。
(Thumbnail for Excerpts はプラグインの追加から検索するとすぐに出てきます。)
続きを読む WordPressで記事ごとにサムネイル表示するには

Fireworks CS4 アウトラインのきれいな出し方

Fireworks CS4Fireworks CS3 のストロークは、文字を縁取ることが簡単に出来て便利でした。
ところが、CS4 からアドビテキストエンジン(Adobe Text Engine)を使用するようになったためか、文字組の品質は上がりましたが、ストロークでの縁取りは品質が大きく落ちました。

そこで、PhotoShopライブエフェクトで回避します。

※PhotoShopライブエフェクトでのストロークに、塗りの種類がありますが、グラデーションもパターンも Fireworks CS4 では設定できません。

FireworksCS3FireworksCS4
1行目は元のテキスト、2行目はFireworksのストロークでの縁取り、3行目はPhotoShopライブエフェクトでの縁取りです。

CS4では他のAdobeのアプリケーションとの連携のため、テキストエンジンが変わってしまったので、CS3までとの挙動の違いに注意が必要です。(フォントをアウトラインに変換しても、同様にフォントが崩れてしまいます。)

Fireworks で書き出した PNG は重い

Fireworks CS3Fireworks で書き出したPNGは、圧縮アルゴリズムや圧縮率の違いか良く分かりませんが、同様のファイルを PhotoShop で書き出したPNGより重いです。

同ファイルを Fireworks、PhotoShop でそれぞれ書き出してみました。書き出しファイル形式はPNG-24です。

FireWorksCS3 PNG-24

FireWorksCS3:68,686bytes

PhotoShopCS3 PNG-24

PhotoShopCS3:65,027bytes

Fireworksの方が、約3,600bytesも重いです。
ブロードバンドが普及して久しいですが、同じような品質であれば軽い方がダウンロードも表示も速くなるので、重いよりは良いと思います。
ほかの問題点として、FireWorksは書き出し時に画像を劣化させてファイルサイズを小さくすることがあるので、GIFでもPNGでも書き出すときはPhotoShopを使った方が無難です。
続きを読む Fireworks で書き出した PNG は重い

Safariの開発メニュー「ネットワークタイムライン」

Safariの3.1バージョンから開発メニューが追加されています。

開発メニューから「ネットワークタイムラインを表示」させると、そのページの読み込み時間や、転送量が分かります。

ネットワークタイムラインを表示

トップページは、JavaScriptが半分近くを占めていることが分かります。

トランスファーサイズ

その他にも、ユーザーエージェントを切り替えたり、キャッシュを無効にしたりできます。

Dreamweaver CS3 タブを使わず、ウィンドウで開く

Dreamweaver CS3編集画面をタブを使わずに常時ウィンドウで開くには、環境設定から設定を変更する必要があります。
環境設定の、一般のドキュメントセッティングに、タブでドキュメントを開くのオプションを設定できるところがあるのでチェックを外します。

タブでドキュメントを開く

このチェックを外すことで、編集するドキュメントを常時ウィンドウで開くことができます。
タブで開いている場合でも、コンテキストメニューから「次のウィンドウに移動」を選択することで、別のウィンドウとして開くことができます。

次のウィンドウに移動

Dreamweaverでもプレビューを見ながら、CSSを編集することができるようになります。

編集画面分割

「左右に並べて表示」を選ぶと開いたタブを自動で左右に並べて表示することができます。
タブとして統合を選択すると、一つのウィンドウにまとめることができます。

タブとして統合