【無料】めちゃオモロくてためになる『ザ・ブロガー~ブログ収益化の教科書~』詳しくはこちらをクリック!

      2015/09/30

【STINGER5】記事の幅を自由に広げるカスタマイズ方法。超簡単3STEPでできます。

 
STINGER5記事の幅のカスタマイズ

この記事を書いている人 - WRITER -

色んな人にブログ運営の事を教えている。得意なのはブログ集客・SNS活用法・SEOライティング。
※このおっさんの取扱注意点:ブログと漫画を描くのが好きで、書けない日が続くとストレスで爆発する。 ⇒詳しいプロフィールはこちら 

JUNICHI

日本一有名なWordPressの無料テンプレート『STINGER5』のカスタマイズ方法を備忘録がてら残すコーナーです。

今回は、記事の幅の変更方法について解説します。

 

これは簡単です。

 

まずは、考えずにこれだけやればOK!手順を解説するよ

 

STEP1. style.css を編集

まずは、WordPressの管理画面の左の方の『外観』>『テーマの編集』の順にクリック ↓記事の幅を広げる

↓見えにくければ、こちらの画像を見てね。
記事の幅を広げる2

 

 

そうすると、style.cssというファイルの編集画面が開きます ↓スタイルシート

 

この画面が出てきたら、Windowsなら、キーボードの「Ctrlキー」を押しながら「F」を押して、画面内の文字列検索ができるようにします。
Macの方は、「Command」+「F」で同じように画面内の検索ができるようになります。

画面内検索

WindowならCtrl+F、MacならCommand+Fで開きます

この赤枠の検索部分に、「980」と入力してEnterを押します。

すると、この部分までジャンプすることができます。

ここの「max-width: 980px;」の980という数字を大きくしてあげれば、記事の幅は広くなります。

ちなみに、Stinger5-Cheetahでは、この幅を1100pxまで広げています。

 

980pxの数字を変更したら、「ファイルを更新」ボタンをクリックしてください。押さないと変更は反映されません。

 

 

STEP2. ヘッダー画像の大きさを合わせる

ただし、このままだとヘッダー画像の横幅が足りなくなります。

ヘッダーの余白が変

Style.cssのファイルを変更するだけでは、ヘッダーの右側に変なすき間が出来てしまいます。

そこで、次は、functions.phpというファイルをいじります。

 

  1. 『外観』>『テーマの編集』をクリックします。
  2. 次に、右側のテンプレートの中から『テーマのための関数(functons.php)』をクリック。

 

ここでも、先ほど同様WindowsならCtrl+F、MacならCommand+Fを押して、画面内の文字列検索ができるようにします。

そこで、また980と入力すれば、以下のようなコードの場所が見つかります。

ここで「’width’ => 980,」の980という数字を、先ほどstyle.cssで変更した数字に変更します。

たとえば、STEP1で980から1100に変更したのなら、ここでも1100に変更、という感じです。

 

STEP3. 新たにヘッダー画像を設置しなおす

あとは、ヘッダー画像を横幅を広いものに設置しなおすだけです。

WordPressのダッシュボードにて、

外観>ヘッダー

の順にクリック。

すると、以下のような画面が出てきます ↓ ヘッダーカスタマイズ2

左の赤枠で囲った部分で「新規画像を追加」をクリック。

ここで、自分のPCに入っている好きな画像など(ヘッダー画像として設置したいもの)をアップロードします。

とりあえず丁寧に解説しますね。

↓ 左上のタブを「ファイルをアップロード」に切り替え、真ん中の「ファイルを選択」ボタンをクリック
ヘッダーカスタマイズ3

 

↓ 自分のPCから好きな画像を選択
ヘッダーカスタマイズ4

おススメは横幅1100px以上の大きさ、高さは250pxです。(それ以上でも後から管理画面で切り抜けるので大丈夫です)

 

 

↓ すると、サーバーの中に画像がアップロードできます。 アップロードをした画像を選んで、右下の「選択して切り抜く」をクリック。
ヘッダーカスタマイズ5

 

 

↓ 次の画面で
ヘッダーカスタマイズ6

横幅は固定ですが、縦幅は自由に設定できます。
好きなように範囲を指定したら、「画像切り抜き」をクリック。

 

 

↓ すると、カスタマイズ画面の右側にも変更したヘッダー画像が表示されました。 最後に左上の「保存して公開」をクリック!
ヘッダーカスタマイズ7

 

 

↓ これでちゃんとヘッダー画像も横幅が伸びました。
ヘッダーカスタマイズ8

 

簡単にSTINGER5の構造の話

構造

STINGER5では、

  • 横幅全体の幅を「#wrapper」という部分で指定。
  • サイドバーの横幅を「aside」で指定。
  • 記事の部分の幅を「main」で指定されています。

サイドバーの「aside」の部分は横幅300pxで固定されているので、#wrapperの幅(全体の幅)を広くしてあげれば、自然とmain (記事部分の幅)が広がるっていう仕組みです。

元々は

  • #wrapper ⇒ 980px
  • aside ⇒ 300px
  • main ⇒ 980px - 300px -80px(余白) =600px

っていう感じの幅になっています。

なので、#wrapperを例えば1100にすると、以下のようになります。

  • #wrapper ⇒ 1100px
  • aside ⇒ 300px
  • main ⇒ 1100px - 300px -80px(余白) =720px

になります。

 

 

まとめ

STINGER5の記事の横幅を広げる方法は、

  • STEP1. style.css で #wrapperの横幅の数字を980pxより広い幅にする。
  • STEP2. functions.php(テーマのための関数) で//カスタムヘッダーの部分の数字を980pxから、STEP1で広げた数字に合わせる。
  • STEP3. ヘッダー画像を設置しなおす。
※ functions.phpの扱いには気を付けてください。記述を間違うと、一気にサイトが表示されなくなります。

⇒STINGER5のカスタマイズ方法一覧へ

参考サイト:http://korehalog.info/stinger5-width/

今までの僕のブログ集客のノウハウを全部つぎ込んで
しかも無料で配布することにしました。

総ページ100ページ以上の
大ボリュームE-bookです。

是非あなたのブログのお役立てください。

今のうちにゲットしてください。

何やらここでは言えない
『超豪華特典』が付いています。

詳しくはE-bookの最後で。

e-book

運営者JUNICHIについて

プロフィール

株式会社ファンファーレ
代表取締役 松原 潤一

ブログマーケッターのJUNICHIです。
ブログを書いて、人に喜んでもらいながら集客までできてしまう「ブログマーケティング」を専門に扱う会社『株式会社ファンファーレ』の人です。

ほんまはふざけるのが大好き。社長になってもおもろいおっさん目指して頑張ります。

漫画を描くのも大好物。一度きりの人生、自分の「夢」を大切にしたいと思います。

⇒詳しいプロフィールはこちら

ブログ集客と収益化がオンラインで学べる!!
ブログマーケティングスクール

『集客』さえできれば、ほぼどんなビジネスも成功させることができます。

そしてブログは、現在のWEBメディアの中でも、最も強力な『集客メディア』として位置づけられています。

ブログマーケティングスクールでは、コンテンツマーケティング・SEOを意識したWEBマーケティングがオンラインで学べるスクールです。

BMSバナー

ブログマーケッターJUNICHI
×
OPEN CAGEコラボWordPressテーマ

STORK

あなたは今自分のサイトがスマートフォンからどれだけの人が見ているか知っていますか?

実は、2016年6月現在、6割~8割の人がスマホからブログを読んでいます。

なので、スマホから見た時に「分かりやすい」「使いやすい」「便利」というWordPressテーマが必要です。

『新しいスマホビュー時代を作ろう!』

がコンセプトの『STORK(ストーク)』を是非お試しください。