【ワードプレス】でCSSや画像で見出しに背景をつける方法をご紹介します。
WordPressの見出しに背景をつけるための流れは以下の3STEPですが、
ワードプレスの公式テーマで実装しようとしたら少々CSSの記述が異なって手間取ったのでまとめておきます。
大きく分けて画像を用意して背景としてつける方法とCSSで記入する方法があります。CSSで作成するのは初心者の方にはイメージが付きづらいかと思いますが、タイトルの周りを黄色で囲むなどの指定をスタイルシートに記入する方法で、テンプレートなども公開されています。
基本的にはどちらでも可能ですが、レスポンシブWebデザインなどでスマホ対応する場合などはCSSで記入して作ったほうがいいでしょう。
画像を用意して背景としてつける方法
背景画像を用意
見出しの背景に使用する画像について
フリー素材を配布しているサイトhttp://www.templateking.jp/などからダウンロードしましょう。
予算があれば「Lancers」「crowdworks」「coconala」などで外注すると
2万円で70提案ほどロゴを出してもらえることもあり、かなり便利になりました。
背景画像をアップロードする
サイトやブログで画像を使用するには、Wordpressがインストールされているサーバーにアップロードします。
WordPressの管理画面にログインして、「メディア」→「新規追加」と進みます。
アップロードしたファイルの場所は後で必要になるのでコピーしておきます。
CSSを編集する
見出しの編集をする
CSSの編集はWordpress管理画面の「外観」→「テーマ編集」から行います。
以下のようなCSSを「style.css」に記述してみましょう。
twenty thirteenでは少々CSSが異なるので以下のように記述しています。
[css]
/*投稿見出しの背景*/
.entry-title {
background: url("先ほどのアップロードしたファイルがあるURL");
background-repeat : no-repeat;
background-position: left center;
padding:20px 10px 20px 20px;
font-weight:bold;
font-family: ’メイリオ’,Meiryo;
}
[/css]
こちらはCSSの最後に貼り付けてもOKですし、「entry-title」で検索して置き換えてもOKです。
検索は「ctrl」+「f」でショートカットできます。
CSSで記入する方法
かっこいいタイトルのテンプレートCSSを公開してくださっているサイトもあるので、そのままコピーすれば使えます。
※参照元
かっこいいタイトルのテンプレートCSS
例えば、黄色いテープの背景のタイトルは以下のようなCSSを「style.css」に記述しています。
[css]
/* 02.テープ */
#head3{
position:relative;
margin:0 -1px;
font:bold 30px/1.6 Arial, Helvetica, sans-serif;
text-align:center;
color:#333;
background:#f0e800;
-webkit-transform: rotate(-3deg) skew(-3deg);
-moz-transform: rotate(-3deg) skew(-3deg);
-o-transform: rotate(-3deg) skew(-3deg);
-ms-transform: rotate(-3deg) skew(-3deg);
transform: rotate(-3deg) skew(-3deg);
text-shadow:1px 1px 0 rgba(255,255,255,1);
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2),
30px 0 0 0 #f0e800,
-30px 0 0 0 #f0e800;
}
[/css]
そして表示させたい記事には例えばh3のタグのタイトルならHTMLで書いている本文の中に以下のように記述します。
[html]
<h3 id="head3">サンプルタイトル</h3>
[/html]
【表示例】CSSとHTMLの記述が間違っていなければ、以下のように表示されます。
サンプルタイトル
もしうまく表示されない場合、
・キャッシュが残っている。→ctrl+F5でキャッシュクリアすると表示されます。
・CSSの#head3とHTMLのid=”head3″が一致していない。→コードを修正して保存→ctrl+F5でキャッシュクリアすると表示されます。
・CSSの別の場所に既にh3などに対して指定している。→「h3」などで検索して置き換えもしくはそれより下に記述すると上書きの効果があるので、下にコードを追加→ctrl+F5でキャッシュクリアすると表示されます。
・その他分からないことがあれば質問ください。
CSSでボタンをかっこよくする方法
ボタンの素材もたくさんネット上には上がっていますが、ボタンのタイトル文字の変更などがしやすいようにCSSでボタンを作成することをお勧めします。
方法は簡単！
以下のようにCSSに記載して
[css]
.btn-1 {
background: -moz-linear-gradient(top,#0099CC 0%,#006699);
background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699));
border: 2px solid #FFF;
color: #FFF;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
width: 100px;
padding: 10px 0;
}
[/css]
ボタン表示させたい部分には以下のようにHTMLに記載します。
[html]
<a class="btn-1"><font color="white">サンプル</font></a>
[/html]
そうすると以下のようなボタンが表示されます。
※参照元リンク
ボタンをかっこよくするCSS集