タグ: twentyeleven

行間、文字の大きさを調整

Twentyelevenのデフォルトフォントの文字の大きさや行間がどーも気になっていたので、若干ですが手を加えました。

フォント全体に影響するっぽい値

body, input, textarea {
	color: #0e0a0a;
	/*変更前 ベーステキストの大きさ
	font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	line-height: 1.625;
	変更前*/
	font: 12px '平成角ゴシック','HeiseiKakuGothic','メイリオ',Meiryo,'ＭＳ UIゴシック',sans-serif;
	font-weight: 300;
	line-height: 1.625;
}

Pタグの数値を変更

僕の場合、やたらと<p>タグを使うのですが、<p>タグが連続した時の行間の空きがどーも許せないので、狭めました。 /* Text elements */　※僕の場合は397行目 を検索。マージンボトムの数値を変更しました。

/* Text elements */
p {
	/*　変更前　pタグのベース
	margin-bottom: 1.625em;
	変更前　*/
	margin-bottom: .5em;
}

タグも連動して文字サイズが変化

恐らくですが、/* =Globalで編集した文字が基準値となり、h1、h2、H3の大きさが設定されているっぽいです。

ウィジェットいじり

サイドバーにあるウィジェットのタイトルやリンクテキストがイマイチだったので、手を加えてみました。

ウィジェットタイトルのカスタマイズ

編集したCSSファイルは/* =Widgets

.widget-title がタイトル周りのCSSです。

CSSコードは、こちらのサイトを参考にしました。

角アールで、しかもグラデーション。それをCSSで？っと腰が引けましたが、コードをコピペして、ちょっと手を加えたら、何とかできました。

/* =Widgets　サイドバーのタイトル部分だよん
----------------------------------------------- */
.widget-title {
	/*変更前
	color: #EA005A;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	text-transform: uppercase;
	変更前*/
    font-size: 12px;
    color: #3A443C;
	font-weight: bold;
	letter-spacing: 0.1em;
	line-height: 1.5em;
    border:solid 1px #DED7CF;
    padding: 5px;
    border-radius: 2px;
    background: #E5E5DE;
    /*変更前
    -moz-border-radius: 5px; /* FF */
background: -moz-linear-gradient(top,  #fff, #E5E5DE); /* FF */
    /*変更前-webkit-border-radius: 5px;/* Webkit */
    /*変更前background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));/* Webkit */
    /*変更前-pie-background:linear-gradient(top,  #fff,  #eee); /* ie */
    /*変更前behavior: url(images/PIE.htc);  /* ie */
    }

ウィジェットテキストの位置修正

タイトルをカスタマイズしても、リストのマークが飛び出して見た目が変。 なので、margin-leftを設定し、タイトルとリストマークが揃うように設定しました。

.widget ul ulをいじります。

.widget ul {
font-size: 15px;
margin: 0;
/*変更前
font-size: 10px;
margin-left: 1.5em;
変更前*/
}
.widget ul ul {
/*変更前
	margin-left: 1.5em;
変更前*/
	margin-left: 0;
}

ウィジェットテキストの変更

色と文字の大きさを変更しました。デフォルトは大きいので、全部見ようとするとスクロールが面倒。ので、文字サイズを小さくしました。

リスト周りの変更は.widget ul li

テキスト周りの変更は.widget a

.widget ul li {
	color: #777;
	font-size: 13px;
/*変更前
	color: #EA5C5C;
	font-size: 10px;
変更前*/

}
.widget a {
/*変更前
	font-weight: bold;
	text-decoration: none;
変更前*/
	font-weight: bold;
	color: #EA5C5C;
	text-decoration: none;

すっきりしたサイドバー

初期に比べ、かなりメリハリがついて良い感じになりました。

カスタマイズ、その前に・・・

カスタマイズする際に、変更前の数値をコメント化、／＊　変更前の数値　＊／しておくことをお勧めします。こうすることで、簡単に元に戻すことができますし、また自分が、何処を編集したかが後で見返した時に一目瞭然です。

記事タイトルのカスタマイズ

cssファイルの/* Singular content styles for Posts and Pages */　1215行あたり　※僕の場合を検索。で、下の方にいる

.singular .entry-titleを編集します。

.singular .entry-title {
/*変更前
	color: #38364f;
	font-size: 23px;
	font-weight: bold;
	line-height: 1.625;
変更前*/
	color: #E67168;
	font-size: 23px;
	font-weight: bold;
	line-height: 1.5em;
}

サマリーページの記事タイトルを変更

CSSファイルの/* =Content */　745行あたり　※僕の場合 を検索。で、.entry-titleを編集します。

/*ここからサマリーページのタイトルだよん*/
.entry-title,
.entry-header .entry-meta {
	padding-right: 76px;
}
.entry-title {
/*変更前
	clear: both;
	color: #E67168;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.5em;
	padding-bottom: .3em;
	padding-top: 15px;
変更前*/
	clear: both;
	color: #E67168;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.3em;
	padding-bottom: .3em;
	padding-top: 10px;
	width: 550px;
}

h1、h2、h3を変更

CSSファイルの/* =Content */　745行あたり　サマリーページの記事タイトルと一緒です。 その.entry-content h1/h2/h3を編集します。

h1表記の変更

h2表記の変更

/*ここから投稿記事内のhタグのCSSだよん*/
.entry-content h1,
.comment-content h1 {
/*変更前
font-size: 1em;
color: #474c99;
font-weight: bold;
margin: 0 0 .4em;
border-left: 5px solid #474c99;
padding-left: 1em;
line-height: 2.6em;
変更前*/
font-size: 1.2em;
color:#ED1C24;
font-weight: bold;
margin: 0 0 1em;
border-left: 3px solid #ED1C24;
border-bottom: 1px dotted #7A7B7D;
padding-left: 1em;
line-height: 2em;
}

.entry-content h2,
.comment-content h2 {
/*変更前
	color: #000;
	font-weight: bold;
	margin: 0 0 .8125em;
変更前*/
	font-size: 1em;
	color: #EA5C5C;
	font-weight: bold;
	margin: 0 0 .2em;
	line-height: 0.5em;

}

.entry-content h3,
.comment-content h3 {
/*変更前
	font-size: 10px;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	text-transform: uppercase;
変更前*/
	font-size: .8em;
	color: #7FBCAD;
	font-weight: bold;
	margin: 0em;
	line-height: 0.4em;
}

メニューを選択

カテゴリーが増えてくると、サイドナビのカテゴリー表示ではとっても見にくい。なので、twentyelevenに元々ついている機能で、グローバルナビを設定しました。

外観＞メニュー＞カテゴリーを選択/h2>

グローバルメニューに表示したいカテゴリーにチェックを入れます。

表示はこんな感じ

カテゴリーを階層化

表示された状態のままは子要素もグローバルメニュー上に表示されます。ので、カテゴリーの子要素化をします。

まとめ

正味5分位で設定可能です。ぜひお試し下さい。