WordPressのテーマで無料と言われれば【STINGER】をお勧めしていますが、『STINGERってデフォルトだとちょっと・・・』っていう方も意外と多いです。
言いたいことは少し分かります笑
しかし、第一印象を決めるヘッダー画像を横幅いっぱいにするだけでガラリと印象が変わり、有料テーマに引けを取らない出来栄えになります。
今日は、その方法を分かりやすくまとめまていきます(^^)☆
⇒WordPressブログのヘッダー画像の作り方！無料でオシャレに簡単に
⇒トレンドブログのテンプレート（テーマ）の選び方！有料無料より大切なことは？
STINGERをダウンロード
まず、STINGERをダウンロードして下さい。
私が使用したのは『STINGER PLUS2』なのですが、
STINGERは現在有料の物も出ており、非常にややこしいですね(T . T)
そこで、種類をまとめました⏬
◆STINGER8
カスタマイズの種類が非常に少なく、自身で一からカスタマイズしたい方に向いており、初心者向けではありません。
◆STINGER PLUS
初心者にも使いやすいようにカスタマイズ機能が多く搭載された『STINGER PLUS』でしたが、さらに進化して『AFFINGER 4』になり有料化されました。
という訳で、現在は存在しません。
◆STINGER PLUS 2
『STINGER PLUS』の後継であり、後に発売される『STINGER PRO』のお試し版という位置づけ登場しました。
今回解説しているものは、この『STINGER PLUS 2』です。
『STINGER PRO』まではいかないにしても、充分な機能が搭載されています。
◆STINGER PRO
有料だけあって、素晴らしい機能が沢山搭載されています。
デフォルト画像だとこんな感じ
STINGER PLUS2はデフォルトだとこんな感じです⏬
全体像がこちらになります⏬
これはこれで良いのですが、もう少し迫力があったほうが・・・と個人的には思います(^^)
そこで、画像を横幅いっぱいに広げることにしました⏬
全体で見ると分かりやすいですよ(^^)
こんな感じになります⏬
では早速、ヘッダー画像を横幅いっぱいに広げる方法をまとめます(^^)
ヘッダー画像を横幅いっぱいに広げる方法
まず、この作業に入る前に注意する点が一つあります。
既に色の設定をしていると、幅の変更が効かない事があるのでチェックして下さい⏬
WordPressの【カスタマイズ】⇒『基本エリア設定』。
色の設定が全てデフォルトになっているかの確認をして下さい。
では、作業に入りましょう(^^)☆
STINGER PLUS2をインストールした後、お好きなヘッダー画像をアップロードするところまで済ませて下さい。
ヘッダー画像のサイズの推奨は2200×500ピクセルです。
CSSの貼り付けは超簡単！
WordPressの【カスタマイズ】を開きます。
そして『追加CSS』をクリックすると、CSSを簡単に追加できる画面になります。
そこに、今から伝えるCSSコードをコピーして貼り付ける作業になります。
❶ まずはヘッダー画像の上の部分の横幅を広げる方法です。
下記のコードをコピーして『追加CSS』に貼り付けてください。
/*ヘッダー背景色を画面端までにする
——————————–*/
#headbox-bg{
background-color:#ddc299; /*背景色の変更はここで*/
}
/*ここまで*/
ピンクのライン部分が色の指定になるので、お好きな色番号を入力して下さいね。
仕上がりはこんな感じ(^^)⏬
分かりやすいように色をつけています(^^)
❷ 次にヘッダー画像を横幅いっぱいにする方法です。
『追加CSS』の先程貼り付けた下の行に次のコードをコピーして貼り付けて下さい。
/*ヘッダー画像を画面幅までにする
——————————–*/
#st-header {
max-width: none !important;
}
/*ここまで*/
ヘッダー画像が広がりましたね☆
❸ 最後にヘッダー画像の下、グローバルメニューの部分を広げます。
『追加CSS』の更に下に、下記のコードを貼り付けます。
ピンクのライン部分が色の指定なので、お好きな色に変更して下さい。
/*グローバルメニューの固定化・装飾
——————————–*/
#st-menubox {
background:#ddc299 ; /*メニューバーの色*/
width: 100%; /*メニューの幅を画面いっぱいに*/
z-index: 999;
}
header .smanone ul.menu li {
transition: 0.5s;
}
header .smanone ul.menu li a{
font-size: 13px !important; /*メニューのフォントサイズ*/
font-weight: bold; /*メニューのフォントを太字に*/
color: #FFF !important; /*メニューのフォント色*/
}
header .smanone ul.menu li li a{
background: rgba(51, 51, 51, 0.91) !important; /*サブメニューの背景 ※少し透過してます*/
border-top: none !important;
transition: 0.5s;
}
header .smanone ul.menu li li a:hover {
background: #1db2f5 !important; /*メニューバーマウスオーバー時の色*/
}
グローバルメニューも横幅いっぱいに広がりましたね(^^)！
以上となります(^^)☆
もし上手くいかない場合は、最初にお伝えした事になりますが、
『基本エリア設定』で色の設定を全てデフォルトにしているかの確認をしてみて下さいね。
分かりにくい箇所は【お問い合わせ】下さい(^^)
コメントを残す