田村カツオ田村カツオ

こんにちわ。田村カツオです。

今回は賢威7のサイドバーの見出しをカスタマイズして画像を背景に入れていく方法について説明します。サイドバーの見出しに画像をエッセンスとして使っていく事で、あなたのブログがよりキャッチーになること間違い無し!

華やかなブログは見ていてそれだけで楽しいですから是非やってみて下さいね(^_-)

田村カツオのメルマガ登録ボタン

メルマガ(無料)をやっています。興味のある方はどうぞ!(^^;)

賢威7でサイドバーの見出しを画像にカスタマイズする方法

動画で解説

田村カツオYouTube公式チャンネルではサイドバーの見出しの背景を画像にカスタマイズする方法を動画で解説しています。文章での説明だといまいち良くわからないという方はぜひ見てみて下さいね(^_-)

チャンネル登録はこちらから!

YouTubeチャンネル登録ボタン

サイドバーの見出しに使う画像を作る。

まずは使用する画像を作りましょう。画像の大きさは好みや設定しているサイドバーの幅に合わせて決めると良いと思います。

目安としては横が320px前後、縦が50px前後の画像が一般的には使いやすいのではないでしょうか?この辺りはご自身のブログのカスタマイズ状況に併せてすり合わせしてみて下さい。

今回は例として下のような画像を作ってみました。大きさは320px、50pxです。

サイドバーの見出しの背景に使う画像

テーマの編集をカスタマイズする。

該当箇所を見つける。

次にいよいよ鬼門とも言える部分に入っていきます。そうです。恐怖の「テーマの編集」です(笑)

ダッシュボード画面左側の「外観」→「テーマの編集」と進み「base.css」を開きます。そして次のような記述を探します。(賢威7と言っても色々あるので、ビューティー版なのか、クール版なのか、何版なのかで多少は違いがあると思います。)

.sub-conts .section-wrap .section-in .section-title,
.sub-conts .section-wrap .article-header .section-title{
	margin: 0 0 20px;
	padding: 12px 0;
	font-weight: normal;
	font-size: 1em;
	border:none;
	color:#444;
	border-bottom: 3px solid #444;
}

※ショートカットキーF3を使用したりするなどして探してみて下さい。目安としては

/*——————————————————–
見出し
——————————————————–*/

の1番下の方にあるはずです。

コードをコピペする。

で、今見つけていただいたこの記述の中に下記の記述をコピペして下さい。

background: url(使いたい画像のURL) top left no-repeat #fff;

※no-repeatを削除すると、画像の横幅が足りなかった時に画像がくり返されて隣に出てきます。お好みに合わせて削除するなり、消したりして下さい。)

言うまでもなく、「使いたい画像URL」には、事前に作っておいたサイドバーの見出しに使う用の画像をワードプレスに入れておいて、そのURLを貼ってくださいね。

画像のURLはこちら

 

サイドバーの見出しの背景が画像になりました!(↓)

サイドバーの見出しの背景が画像に。

 

ちょっと文字が右に寄りすぎている感じがしますね。

この様な場合は上記コードの内、marginとpaddingの部分を調整すると文字の位置が変わってきます。ただし、その方法で合わせてもスマホ表示の際はまた崩れている、というエンドレスに陥ります(涙)

phpの記述をカスタマイズして、というのも一つの手なのでしょうが僕は「外観」→「ウィジェット」でサイドバーを設定する際に「文頭に1文字スペースを入れる」ようにして対応したりしています。

1文字スペースを入れる。

単純というか原始的(?)な方法ですが、下手にphpをいじって変なところでデザインが崩れるよりもこちらの方がリスクが少ないと思います。

もちろん、phpをカスタマイズしたい方はそうして頂いて結構ですし。何が正しいかってのは人によりますね(^^;)

表示されない場合。

ちゃんと設定したのに画像の見出しが表示されない場合はブラウザのキャッシュが悪さをしている可能性が高いと思いますので、ブラウザの設定でキャッシュを削除しておきましょう。

Chromeの場合は「その他ツール」→「閲覧履歴を消去」からキャッシュを削除します。

キャッシュを削除しよう。

あとがき

如何でしたでしょうか?

サイドバーの見出しが華やかになると、ブログ全体の雰囲気が全然違ってくると思います。あまり難しいものではありませんので、是非チャレンジしてみましょう!

======================

現在、メルマガ登録者限定で初心者がブログアフィリエイトで月収10万円以上稼ぎ、インターネット上に資産を築く為のオリジナルテキストをプレゼント中です!

自分の部屋でPC1台で楽しく稼いでみたいという人は是非ご覧になってみて下さいね(^_-)

※僕のメルマガは無料で読んで頂く事が出来ますし、必要ないと感じたらいつでもボタン1つで解除が出来ます。