タグ別アーカイブ: CSS

wordpressでhighlight.jsを利用する方法

この記事は2014/9に掲載されたものです。
記事の内容が古くなっている為、現状と異なる可能性があります。

このサイトは技術系の記事を書くことが多いため、コードハイライトを行う必要があるなと思い、「highlight.js」を導入しました。

highlight.jsの導入はJavaScriptとCSSを読み込み、スクリプトの起動を行うだけでよしなにやってくれるのでお気に入りです。

続きを読む wordpressでhighlight.jsを利用する方法

WindowsのGoogle Chrome(Dev Channel)で一部フォント描画が崩れる件

この記事は2011/9に掲載されたものです。
記事の内容が古くなっている為、現状と異なる可能性があります。

自分が調べた限りではfont-familyにarialが指定されているサイトで発生しているように感じている。
arialという事はフォントリンクでMS Pゴシックあたり?を参照しているかと思われるので実験してみた。

MS UIゴシック

MS UIゴシックで表示した場合

MS 明朝

MS明朝で表示した場合

メイリオ

メイリオで表示した場合

MS~系フォントだと崩れる感じ。
とりあえず見れるようにするためにChrome Stylistで全サイトにユーザCSSを適応させてリセットすることによって対応できた。

* { font-family:sans-serif !important; }
pre,code,kbd,samp,tt { font-family:monospace !important; }

もちろん、ブラウザのフォント設定はMSゴシック系以外で。
これで暫定的にフォント描画崩れが無い状態で見ることができる。

Chromeがちゃんとしてくれれば一番良いんですけどね。

追記

Issueを確認しているとCJKフォントで発生しているようで、次回のDev channel更新では修正されているかもしれません。

Issue 98155 – chromium – Bad rendering of CJK characters

各リソースをgz圧縮して転送量を抑える

この記事は2011/2に掲載されたものです。
記事の内容が古くなっている為、現状と異なる可能性があります。

ライブラリに関してはCDNのキャッシュを使う事も出来ますが、自作のライブラリやCSS等のリソースはCDNには登録されていないので
ファイルの転送サイズが膨れがちです。

そこで対応ブラウザの場合はリソースファイルをgz圧縮して転送するように設定する方法を備考録として書いておきます。

参考サイト

前提

転送数を減らす為にCSSとかJavaScriptとかで1ファイルにまとめられるものはまとめておく。

それに加えて圧縮をかける事により転送するデータ量を減らします。

また、gz圧縮できるアーカイバが必要。

ファイルの圧縮

まずは対象のファイルをgz圧縮します。

gz圧縮は1ファイルしか圧縮できない形式なので、まず、CSSやJavaScriptファイルを1つにまとめておきます。

別にまとめなくともこの手法は有効ですが、転送数が多いままになってしまうことと、読み込み方法によってはシリアルで読み込んでしまうのでまとめておく方が早いです。

まとめたファイルをgz圧縮します。自分の場合、windowsではExplzh、mac/linuxの場合はgzip -c [ファイル名] > [ファイル名].gzを使用しています。

.htaccessの作成

gzファイルが存在する場合はgzファイルを読み込むように設定をします。

最近は使えるサーバが多くなっていますが、mod_rewriteがサーバに入っていないと使えません。

<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteCond %{HTTP:Accept-Encoding} gzip
    RewriteCond %{REQUEST_FILENAME} !.gz$
    RewriteCond %{REQUEST_FILENAME}.gz -s
    RewriteRule .+ %{REQUEST_URI}.gz

    <FilesMatch ".html.gz$">
        ForceType text/html
        AddEncoding x-gzip .gz
    </FilesMatch>

    <FilesMatch ".txt.gz$">
        ForceType text/plain
        AddEncoding x-gzip .gz
    </FilesMatch>

    <FilesMatch ".js.gz$">
        ForceType application/x-javascript
        AddEncoding x-gzip .gz
    </FilesMatch>

    <FilesMatch ".css.gz$">
        ForceType text/css
        AddEncoding x-gzip .gz
    </FilesMatch>
</IfModule>

まず、mod_rewriteでgzファイルが存在する場合にはアクセスされたファイル名.gzを読み込むように切り替えています。

そして、FileMatchでファイル毎にMIME-TYPEとgzエンコードを指定しています。

これによってgz圧縮ファイルに対応しているブラウザの場合はgzファイルを読み込めるようになります。

更に高速化

これだけでファイルのサイズが下がりますが、キャッシュで持たせるようにしておきます。

これも.htaccessに記述する事によって利用可能です。

ExpiresActive on
ExpiresDefault "access plus 1 month"
FileETag None

Safariでのcontentプロパティが文字化けするバグの対策

この記事は2007/5に掲載されたものです。
記事の内容が古くなっている為、現状と異なる可能性があります。

caramel*vanillaさんを見ていて気づいたのですが、Safariでcontentプロパティに日本語を使うと文字化けします。

そこでweb creatorsの6月号を確認してみると、文字列をエンコードして設定してあげると良いと判りました。

続きを読む Safariでのcontentプロパティが文字化けするバグの対策