タイトルの文字を見やすく読みやすモノにしたい!!チョッと装飾をして見栄えを良くしたい!!そんな風に考えている方はたくさんいらっしゃると思います。私もそのうちの一人でした。

【サンプル】

ヘッダータイトルの装飾 ～サンプル～

今では、このくらいの編集及び装飾は出来る様になりました。基本を抑えれば、初心者でも簡単に出来る様になります。

ポイントは、編集する場所(いじる箇所)と、何を記述するか(CSSの基本)が分かってくればOKです。このサンプルの記述方法は、記事最後に書き残してありますのでよろしければお付き合い下さい。

ヘッダーの編集及び装飾はココを変更する

スタイルシート(style.css)内の次の箇所を見つけて下さい。

/* =Header
----------------------------------------------- */

#branding {
	border-top: 2px solid #bbb;
	padding-bottom: 10px;
	position: relative;
	z-index: 9999;
}
#site-title {
	margin-right: 270px;
	padding: 3.65625em 0 0;
}
#site-title a {
	color: #111;　文字の色
	font-size: 30px;　文字の大きさ
	font-weight: bold;　文字の線の太さ
	line-height: 36px;　行間
	text-decoration: none;　デコレーション
}
#site-title a:hover,　
#site-title a:focus,
#site-title a:active {
	color: #1982d1;　タイトル文字(リンク)をクリックした時の文字色
}

それでは、ワードプレスのヘッダーのタイトル文字の編集や装飾について触れていきたいと思います。初心者の方には、少し頭が痛くなる様な文字列が出てくると思います。しかし、ココを通らなければカスタマイズは出来ません!!

何度も繰り返し見ていくうちに、誰でも出来る様になると思いますので、何回でもトライしてみて下さい。大丈夫ですから。

それでは、ワードプレスの管理画面から「外観」⇒「テーマ編集」を選択して下さい。よく分からない文字列がたくさん並んでいる事でしょう。

今回使うのは、「スタイルシート(style.css)」ファイルです。(右側にテンプレートファイルがズラ～っと並んでいると思います。)

テーマにより多少は異なる部分がありますので予めご了承下さい。Twentyシリーズのテーマをお使いの方は、ほぼ同じだと思って下さい。今回は、TwentyElevenを使ってお伝えしています。

上記の部分に自分が編集したい内容を記述していきます。文字色、大きさ、フォント、背景色など様々なデザインが可能です。

このサイトでは、ヘッダータイトル文字を非表示にしています。ヘッダー画像のみですよね。そこに画像としてヘッダータイトルを表示させているのです。

ヘッダー画像を作成したい方はコチラをご覧下さい。
⇒初めてのヘッダー画像作成

文字の装飾やcssについてはコチラのページが便利です!!
⇒見出しメーカー

一気に変えようとせず、少しずつ変化させていけばダンダンと理解が深まるハズです。あせらず一つづつ変えていきましょう。

【サンプル】

ヘッダータイトルの装飾 ～サンプル～

【CSSの記述】

#site-title a {
margin: 0 0 10px 0; 
padding: 2px 8px; 
border-width: 0 0 5px 0; 
border-color: #8d6d6d; 
border-style: solid; 
background: #5c3739; 
color: #d6c7c7; lineheight: 140%; 
font-family: ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; 
font-size: 20px; 
font-weight: normal;
}

これで、見栄えの良い素敵なヘッダータイトルになったハズです。他にも色々な装飾が出来ると思いますので、トライしてみて下さいね☆