Diverのカスタマイズでサイトの横幅(サイズ)を変更する方法

ひなまるです。

 

WordPressテーマ「Diver」のカスタマイズを使った、

サイトの横幅(サイトサイズ)の設定方法について解説します。

 

はじめに言っておきますと、

Diverでの設定はPC表示のみの変更で、

スマートフォン表示は変えることができません。

 

なので、この記事では

Diverを使ったPC表示の変更方法について紹介していきます。

 

ひなまる

Diverではやり方さえ分かってしまえば、

誰でも簡単に変更することができますよ。

また、Diverを使っていない人でも、

この記事から初心者でも優しく使えるDiverの機能の良さが分かると思います。

ぜひ参考にしてみてくださいね。

 

初心者が使っても優しいWordPressテーマ「Diver」

こちらの記事で詳しく紹介しています。

当サイトで購入された方だけに特典付きでご案内しています。
※Diverならこんな動くマーカーも簡単に設定できてしまうのです!

 

それではよろしくお願いします。

スポンサーリンク

Diverのサイトサイズ設定について

まずはじめにDiverのサイトサイズ設定の考え方について解説します。

 

Diverで行うサイズ設定をする箇所は、

メインコンテンツサイドバーを合わせたサイト全体のサイズ」

または「個別ページメインカラム」横幅のサイズを変更することができます。

 

 

このサイト全体のサイズ、個別ページメインカラムの横幅の広さを変えることで、

画面いっぱいに表示させたり、左右の余白を開けたりすることができます。

「サイト全体のサイズ」と「個別ページメインカラム」の違い

ちなみにサイト全体のサイズと個別ページメインカラムの違いは、

 

・サイト全体のサイズ
 主にトップページで表示される横幅を変更できる

・個別ページメインカラム

 固定ページや投稿ページの横幅を変更できる

 

となり、設定方法は同じだけど、

表示されるページによってサイトの横幅を変えることができます。

メインコンテンツは変更できない

またDiverでは、

メインコンテンツ内のサイズを変更することができません。

 

あらかじめ設定した、

「サイト全体のサイズ」または「個別ページメインカラム」内の

サイドバーの横幅を変更することでメインコンテンツの横幅は自動で決まります。

 

なので、

メインコンテンツの横幅を変更したければ、

サイドバーの横幅を設定する必要があります。

サイトの横幅(サイズ)の変更方法

それでは、

サイトサイズの設定方法について解説していきましょう。

 

まずはWordPressのメニューから、

①「外観」②「カスタマイズ」をクリックします。

 

 

カスタマイズのメニューが開くので「サイト設定」をクリックします。

 

※サイト設定の数値はデフォルトの状態です

 

サイト設定内に先ほど触れた設定項目があるのが分かります。

この中に数値を入れて設定を行っていきましょう。

サイト全体のサイズ

サイト全体のサイズでは以下のように設定できます。

 

 

これは私たちのサイトでの設定表示ですが、

少し大きめに表示できる1250pxの表示を選んでいます。

 

Diverでは「〜%」「〜px」で入力することができますが、

1201px以上の大きな画面に設定できる「大[1201px~]の横幅」の入力枠と、

769〜1200pxまでの画面に設定できる中[769px~1200px]の横幅」の入力枠があります。

 

サイト全体のサイズを変えるには、

この入力枠に「〜%」または「〜px」の数値を入れ変更していきましょう。

個別ページメインカラム

設定方法については、

サイト全体のサイズの方法と同じで数値の入れ方も一緒です。

 

ちなみに私たちのサイトでは、

サイト全体のサイズ同様に同じ横幅に設定をしています。

サイドバー

サイドバーの横幅は、

「〜px」を使うことができず「〜%」で設定をします。

 

 

デフォルトの状態では310%となっていますが、

特にこの数値は触ることなくこのままで良いかと思います。

 

なぜなら、

他のブログや大手サイトでも300%以上の横幅が多く、

サイドバーに使うサイズとしては最適な数値であると言われてるからです。

 

また、サイドバーに設置する広告バナーは同サイズに近く、

表示をするにあたっても使いやすいサイズと言えます。

 

設定が済んだら忘れずに、

「公開」をクリックして設定は終わりです。

 

 

最後に変更通り設定されているかサイトを表示して確認してみてください。

まとめ

以上がDiverのサイトの横幅(サイズ)の変更方法となります。

 

最後にまとめると、

サイト全体や個別ページメインカラムのサイズを決める

サイドバーのサイズを決める

メインコンテンツの横幅が自動で決まる

と言う流れになります。

 

後はあなたにあったサイトサイズに設定するだけです。

設定は簡単なのでぜひ試して見て下さい。

 

今回はここまでなります。

この記事があなたのお役に立てれば幸いです。

 

他のDiverの関連記事はこちら

スポンサーリンク
初心者にも優しい高品質高機能なWordPressテーマ「Diver 」

Diverは簡単に使うことができる高品質高機能なハイスペックなWordPressテーマです。さらに、その使いやすさから初心者にも優しく実績に基づき作られた内部構造や無駄の無い美しいデザインは誰にでも手にすることができます。また「常にバージョンアップが行われ完璧なSEO対策」「直接メールサポートが無期限・無制限で利用可能」「豊富な入力補助機能を使ってのデザインは無限大」「複数ブログでの利用制限なし」などなど特徴を上げれば切りがありません。Diverだからこそ詰め込むことができたワンランク上のWordPressテーマを実感してみて下さい。(画像の出典元:Diver)

Twitterでフォローしよう

おすすめの記事