wordpress-site-title

このブログはwordpressのデフォルトテーマ、Twenty elevenをカスタマイズして使っています。

トップページの記事タイトルが、なんだかパっとしなかったので、カスタマイズしてみました。
意味もなく「王冠」の画像を使ってみます。

WordPress Twenty elevenのentry-titleのカスタマイズ

1.使用する画像をwordpressのメディアにアップロードする
2.外観→テーマの編集→Style.Cssの該当箇所、【entry-title】を修正する

1.使用する画像をwordpressのメディアにアップロードする

メディアの追加で王冠の画像をwordpressにアップロードし、この王冠の画像の住所(URL)は、http://another-field.com/wp-content/uploads/2013/05/oukan.png
となりました。

2.外観→テーマの編集→Style.Cssの該当箇所、【entry-title】を修正する

アップロードした画像のURLを、下記の様に指定します。

background-image:url(http://another-field.com/wp-content/uploads/2013/05/oukan.png);
background-repeat:no-repeat;
background-position:5px 23px;

・・・entry-titleのバックグラウンドイメージに、リピートなしで、左から5px、上から23pxのポジションに、
   http://another-field.com/wp-content/uploads/2013/05/oukan.png を表示する ・・・

という意味です。

このブログのCSSソースはコチラ。

.entry-title,
.entry-header .entry-meta {
	padding-right: 0px;
}
.entry-title {
	clear: both;
	color: #333;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.5em;
	padding-left:1.2em;
          padding-bottom: .3em;
	padding-top: 15px;
         background-image:url(http://another-field.com/wp-content/uploads/2013/05/oukan.png);
          background-repeat:no-repeat;
          background-position:5px 23px;
}
.entry-title,
.entry-title a {
	color: #555555;
	text-decoration: none;
}
.entry-title a:hover,
.entry-title a:focus,
.entry-title a:active {
	color: #1982d1;
}

変更前、変更後

こうなりましたです。
title-oukan

画像にタイトルバーを使ったり、いろいろイメージチェンジに使えそうです。


関連記事

●このブログの運営者


Willkinokoです。大阪在住の会社役員。バツ1、子持ちのアラフォーです。趣味はブログの運営と体を動かすこと。日々、自分の生活に目を向け、感じたことをブログに綴っていきたいと思っています。 詳しく見る

Twitter

●ブログ検索

ページ上部へ戻る