即日上位表示サービスです
3日以内にトップ・ページに上がってこなければ全額返金致します。 ワードプレスのカスタマイズの 20万円相当のホームページを 全て差し上げます。 ドメイン無料 サーバー代無料 あり得ないサービス

SEO内的対策完璧・賢威6.1でh2見出しを画像に変更

                                        ご訪問有難うございます。

Sabine Mondestin

SEO内的対策万全の賢威のh2見出しを画像に変更する方法

①まず画像を用意します。

大きさは自分のサイトの横幅に合わせて調節して下さい。私の場合は1200x150で作成してあります。

SEO内的対策万全の賢威のh2見橋画像

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

私は、バナープラスでバナーを作成して、GIMPでドロップシャドー(影)をつけてあります。

画像の作成方法は今度の機会にでも説明いたすつもりです。バナープラスは超初心者でもボタンやバナーなどの作成が直感的にできてオススメです。

②SEO内的対策完璧の賢威6.1のh2を変更する前の画像です。

h2変更前の画像

デフォルトのh2見出しの画像は上図の状態ですがこれを変更すると以下の画像になります。

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

③SEO内的対策完璧の賢威6.1のh2見出しを画像にしました

SEO内的対策万全の賢威6.1のh2見出しを画像に変えた

=====

④SEO内的対策完璧の賢威6.1のh2見出しを画像に変更するにはdesign.cssを編集します。

管理画面(ダッシュボード)>>外観>>テーマ編集>>design.cssに進みます。以下の記述を探します。

/*●H2タグ*/
#main-contents h2{
margin: 0 0 1.5em;
padding: 0.9em;
border-top: 3px solid #000;
background: url(./images/title/bg-conts-h2.gif) left top repeat-x #eaeaea;
font-size: 1.286em;
font-weight: bold;
}
ココの下に追記いたします。
/*●H2タグ*/
#main-contents h2{
margin: 0 0 1.5em;
padding: 0.9em;
border-top: 3px solid #000;
background: url(./images/title/bg-conts-h2.gif) left top repeat-x #eaeaea;
font-size: 1.286em;
font-weight: bold;
}

#main-contents h2.style02{
padding: 1.9em 0.2em 0.5em 1.5em;
background: url(先ほどの画像のURL) left top no-repeat #fff;
color:#fff;
font-size: 2.5em;
border-top:none;
font-weight: bold;
height:80px;
}

 
 
 

パディングは調節して下さい。

⑤トップ・ページと投稿ページと固定ページに画像が挿入されるように各phpを編集します

(一)トップ・ページの変更は=>管理画面(ダッシュボード)>>外観>>テーマ編集>>index.phpと進みます。

(二)投稿ページの変更は==>管理画面(ダッシュボード)>>外観>>テーマ編集>>single.phpと進みます。

(三)固定ページの変更は==>管理画面(ダッシュボード)>>外観>>テーマ編集>>page.phpと進みます。

(四)最新情報のh2の変更は=>管理画面(ダッシュボード)>>外観>>テーマ編集>>index.phpと進みます。


(一)index.phpで以下の部分を探して

変更前

SEO内的対策済みテンプレートのindex.phpのソースコードの画像です。 

変更後

SEO内的対策済みテンプレートのindex.phpのソースコードの編集後の画像です。

 post-title-------->style02 に変えるだけです。


(二)single.phpで以下の部分を探して 


変更前

SEO内的対策のテンプレートのsingle.phpの変更前の画像です。
 
変更後
 
 post-title-------->style02に変えるだけです。

(三)以下のソースコードを探します。

 変更前
 
 固定ページのh2見出しタグのCSSが書いてある画像です。
変更後

 < >の中を h2=====h2 class="style02" に変更
 

(四)以下のソースコードを探します。 

変更前

SEO内的対策済みテンプレートの最新情報の編集前の画像です
 
変更後
 < >の中を h2=====h2 class="style02" に変更

以上でした。

以下は私自身が編集した部分です。判る方は参考にして下さい。

design.css

SEO対策完璧のテンプレートのh2を画像にしてパディングを編集した前と後の画像

 
» «

コメントを残す

サブコンテンツ

飯沼祐志

 

 

  飯沼祐志: 株式会社マルク代表

 

あなたの疑問に即時対応致します。

チャットで問い合わせ

お気軽にどうぞ。

 

自己紹介はコチラ

全記事一覧

Twitter でフォロー

変更後

このページの先頭へ