WP タイトルバーや文字をCSSを使って変更 TwentyEleven


ワードプレス初心者のカスタマイズ 作業21

wordpress

WordPressのテーマを直接変更

タイトルなどのバー表示や文字の変更

タイトルなどのバー表示や文字の変更します。

スタイルシート(style.css)の編集

管理画面『外観』>>『テーマ編集』からスタイルシート(style.css)を開いて下さい。
※スタイルシート(style.css)を変更する前に必ずバックアップしてください。
※小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい
テーマを更新(アップデート)した場合は、テーマに加えたカスタマイズがすべて失われます。テーマを修正する場合、子テーマの利用を検討してください。子テーマを使用すればテーマの変更は確実に保持されます。

文章を追加

※スタイルシート (style.css)の変更前にバックアップしてください
以下の文章を追加します

sample0

p.sample0 {
	line-height: 27px; /* 高さ */
	padding: 5px 7px; /*上下 左右の余白*/
	border-left: solid 6px #ff6600; /*左線*/
	font-size: 22px; /* 文字の大きさ */
	border-bottom: solid  3px #555; /* 下ボーダーの太さと色 */
}

sample1

p.sample1{
	line-height: 26px; /* 高さ */
	font-size: 20px; /* 文字の大きさ */
	padding: 3px 8px; /*上下 左右の余白*/
	border-left: solid 5px #ff6600; /*左線*/
	background-color:#ffefd5
}

sample2

p.sample2{
	margin : 30px 0px 10px 0px;
	line-height: 23px; /* 高さ */
	padding: 3px 1px 2px 0px; /*上下 左右の余白*/
	font-size: 20px; /* 文字の大きさ */
	border-bottom:dotted 5px #555; /* 下ボーダーの太さと色 */
}

sample3

p.sample3{
	margin : 30px 25px 10px 25px;
	line-height: 22px; /* 高さ */
	padding: 3px 1px 2px 0px; /*上下 左右の余白*/
	font-size: 19px; /* 文字の大きさ */
	border-bottom:dotted 7px #555; /* 下ボーダーの太さと色 */
}

sample4

p.sample4{
	font-size: 18px; /* 文字の大きさ */
	margin : 30px 15px 0px 25px;
}

sample5

p.sample5{
	font-size: 18px; /* 文字の大きさ */
	margin : 30px 15px 0px 25px;
}

sample6

p.sample6{
	font-size: 18px; /* 文字の大きさ */
	margin : 30px 15px 0px 25px;
}

sample9

p.sample9{
	padding: 0px 25px 0px 25px;
}

HTMLコードの記入 投稿や固定ページの編集

投稿や固定ページにHTMLコードの記入をします。
「sample0」の場合は、

〈p class="sample0"〉sample0は、このように表示されます〈/P〉

と記入しますと、下のように表示されます。
※記号の 【〈 】と【 〉】は、変換させないように大文字を使用しておりますが、実際には小文字で記入してください。

sample0は、このように表示されます

テーマ更新

新しいバージョンに「テーマを更新」した場合は、テーマに加えたカスタマイズがすべて失われます。
テーマを修正する場合、子テーマの利用をした方がよさそうですが、勉強中なので子テーマのやり方がわかりません。
他のサイトで調べてください。

WordPress 作業カテゴリ

1.ヘッダータイトルの余白調整2.検索ボックスの位置変更3.『Proudly powered by WordPress』をCopyright ©に変更
4.固定ページのタイトルを非表示に変更5.メインサイドバーを変更6.メインサイドバーの調整
7.投稿(BLOG)タイトルの変更8.タグに枠をつける9.投稿にサイドバーを表示(プラグイン)
10.サイト全体の横幅サイズを1000pxから1400pxに変更11.サイトの余白をなくして横幅最大に変更12.サイトの上部余白を削除
13.ヘッダー画像のサイズ変更14.上部のグレーの線を削除15.マウスオーバーで画像半透明に変更
16.フッターエリアの色変更17.投稿ページにサイドバーを表示18.サイドバーの幅を変更
19.画像の枠線を消去20.表の上下の罫線を消去21.タイトルバーや文字の変更