Home > WordPress > ワードプレス デザインで遊ぶ

<< | ワードプレス デザインで遊ぶ | >>

ワードプレス デザインで遊ぶ

2012.02.08 | Posted at 02:14 | Category: WordPress

本当にちょこっと。

font-family

なんとなく、わたしのブラウザでみる文字が読みにくい。
これは、わたしの環境の問題だから、小粋空間さんのテーマに問題があるということではない。

デフォルト font-family: Verdana, Arial, sans-serif;

変更後       font-family :’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’MS Pゴシック’,sans-serif;

くっきり、はっきりとした文字となり、読みやすくなった。

ヒントは、こちらでもらいました。
「webデザイナーのナナメガキ」さんの、
CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係

しかしここでも問題があって、まずSafari では ‘ヒラギノ角ゴ Pro W3′ などフォント名に日本語が含まれるものは無効になってしまう。なのでSafariでヒラギノ角ゴを指定したい場合は ‘Hiragino Kaku Gothic Pro’ と表記しなくてはならない。
またFirefoxでは ‘Hiragino Kaku Gothic Pro’ など日本語フォントのアルファベット表記は適用されないので、SafariとFirefox両方で問題なく表示するには『’ヒラギノ角ゴ Pro W3′ , ‘Hiragino Kaku Gothic Pro’』と両方表記しなくてはいけない。Vistaのメイリオに対応する場合も日本語で指定する必要がある。

など、なかなかためになる、面白い記事で、こういうサイト好きです。

post部の文字サイズ

齢のせいか、記事の部分だけは、文字が小さいと読むのが面倒になる。
で、少し大きくした。

.entry-body {font-size: 110%;}

個別記事の、ナビ部分

デフォルト « 我が家のわんこ | あけましておめでとうございます。 »

変更後   « 我が家のわんこ | Home | あけましておめでとうございます。»

と、Home(トップページ)へのリンクを入れた。
※この後、パンくずを修正してHomeリンクを入れたので、この部分も変えてある。

右サイドバーのパディング

左のサイドバーとの間隔がせまく、うるさく感ずるので、パディングで対処した。
もっとも、このやり方で良いのかどうかは、わからない。

デフォルト padding 15px 15px 0px 15px
変更後    padding 15px 10px 0px 20px

記事内のリンクだけ、アンダーラインを入れる

記事の中のリンクは、あまり青いと、かっこが悪い。
と言って、濃すぎると、地の記事と見分けがつかない。
それで、記事の中だけ、リンクにはアンダーラインをつけた。

.entry-body a{text-decoration: underline;}

小見出しにも、頭に色をつける

.entry h3{ border-left: 3px solid #aaaaaa;padding-left:15px;}

以上は、CSSだけでなく、テンプレートも書き換えたものがあるが、簡単だし、見やすくなったと思う。

Pocket

<< | | WordPress | | >>

Trackback URL

Trackbacks

Comments

comment