ご冗談でしょう、チャッキーさん

チャッキーさんの旅と読書とWordPress学び備忘録

リファインSNOW2でサイトの横幅変えたらイメージ激変◎(サイドメニュー幅も変更可)

約 6 分

リファインSNOWって「LUREA3M」を買った人に付属してるから・・・結構な数のサイトを目にしませんか?しかもほとんどカスタマイズしてないないのでカブった感が強いですよね。

でも、諦めないでください。たったの4ステップの作業で、イメージが良い感じに変わりました。今回は、そのやり方を紹介します。

たったの4ステップ!リファインSNOW2の横幅を変えよう!

サイト幅変更って専門的な知識がないとなかなか出来ないって思ってたら、わずか4つの手順で変更できました。すごい簡単です。

WordPressのダッシュボードメニューから「外観」⇒「テーマ編集」を選択。
リファインSNOW2カスタム

ページが切り替わったら右端にあるCustom.phpを選択。

リファインSNOW2カスタム2

Custom.phpのページが開いたら、そこの一番下にこのコードを貼り付けて下さい。

このような状態になったと思います。↓ ↓ ↓
リファインSNOW2カスタム

この状態では、まだ変化はありません。

ページの幅は上記の「width: 1000px; /* サイト全体の幅 */」この「1000」という数字を大きくすれば広がり、小さくすると狭くなります。

どのくらいの幅が最適なのか?最初はわからないかもしれないですが、初期設定は、ご覧の通り「1000」に設定されています。僕は少し広めが好きなので「1200」に変更しました。

リファインSNOW2カスタム

つまり、このサイトの横幅が「1200」になります。「これだと広すぎるなぁ」って方は「1100」ぐらいで一度試して下さい。


チャッキー
すみませんテンプレートをSimplicity2に変更したので見た目だけでは分からないかもしれません。

最後に「ファイルを更新」すれば完了です。

思ったより簡単じゃなかったですか?自分の納得するまでサイト幅を入力して最高のサイト幅を見つけて下さい。

もしも、初期設定に戻したくなった場合は、載したコードを全て消してファイルを更新してください。そうすれば元に戻せます。

サイドメニューの幅も変えたい!

サイトの幅を変えたら、今度は「サイドメニューの幅が少し狭いOR広い」と思った方もいるのではないでしょうか。一応、サイドメニュー幅の変更の方法も記載しておきます。

2カラム右サイドバーの場合

WordPressのダッシュボードメニューから「外観」⇒「テーマ編集」を選択。

ページが切り替わったら右端にある「Custom.php」を選択。

「Custom.php」が開いたら、そこの一番下にこのコードを貼り付けて下さい。

貼り付けると、このような状態になったと思います。↓ ↓ ↓

リファインSNOW2カスタム

続いてメニュー幅を変更していきます。変更は全部で4ヶ所、マージン(余白設定)が2ヶ所、サイドバーの幅が2ヶ所です。

まず下の2ヶ所、黄緑色で囲われた数字を変更します。初期設定では「width: 30%;」となっていますが、この「30」という数字を大きくするとメニュー幅が広がります。

チャッキー
僕は、メニュー幅を「33%」にしました。

続いて上の赤く囲われたマージンの設定をします。

この時、気を付けてもらいたいことがあります。

メニュー幅で設定した数字、僕であれば「33」ですが、その数字より大きな数字をマージンには設定してください。僕の設定はメニュー幅を「33」にしたのでマージンは「34」です。こんな感じ↓↓↓

 

一応、これで、サイト幅の変更は完了です。ですが・・・

「なんでサイト幅とマージンの関係を絶対守らないといけないのか?」と、疑問に思われた方もいるかもしれません。なので、サイト幅が「33」の時、マージンも「33」にしたらどうなるのか?試しにやってみました。

サイト幅33マージンを34にした時(現在のサイト状態)
リファインSNOW2カスタムサイト幅33マージンを33にした時
リファインSNOW2カスタム

どこがちがうのか?写真単体でクリックしてみてもらえればよくわかると思います。サイドバーとメインの記事との間が隙間なくくっついっています。

続いてマージンを「32」に変更してみました。

レイアウトがブッ壊れました。サイドバーが遥か下の方に移動しています。このような状態にるので、マージンはメニュー幅で指定したものよりも大きくして下さい。

2カラム左サイドバーの場合

2カラム左サイドバーの方はコチラを貼り付けて下さい。

2カラム左も考え方は上記の右カラムと同じなので納得いく幅をさがしてください。上に書いてあるのはデフォルトなので変更したい場合は数字を打ち変えて下さい。

3カラムの場合

どうやら、3カラムの場合は少し考え方が違うみたいです。
一応、3カラムの基本は↓↓になります。

もしも、失敗した場合や初期設定に戻したくなった時は、記載したコードを全て消してファイルを更新してください。

まとめ

お疲れ様でした。意外とカンタンじゃなかったですか?

僕らのような素人でも、このぐらいカスタムは出来るというのが分かれば、これから先も色々な事にチャレンジしていけると思います。

是非がんばってアフィリエイトで稼いで下さい!

チャッキー
本日も最後までお付き合い頂きましてありがとうございました

ブログランキングに参加してます。

にほんブログ村 ブログブログへ

クリックすると現在の順位が表示されます。

About The Author

チャッキーさん
ご訪問ありがとうございます。管理人のチャッキーと申します。
日本語を学ぶ為にブログを始めました。内容は主に旅と読書とWordPressという全く自分の知らない世界についてです。現在、南米をぷらぷら散歩中。時々、出稼ぎのため広島県にいます。

Leave A Reply

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

オススメ記事