WordPressの記事幅を広げる方法｜画像が小さい時の横幅変更手順（TwentySeventeen対応）

WordPressでブログを書いていると、「画像を貼ったら小さく表示される」「記事部分の横幅が狭い」と感じることがあります。
これはWordPressテーマの初期設定で、記事エリアの最大幅が制限されていることが原因です。

この記事では、WordPressの記事横幅を広げる方法を紹介します。
TwentySeventeenテーマを例に、CSSを追加して画像や文章の表示幅を広げる手順を初心者向けに解説します。

横幅を広げる方法を3行で書くと？
自分が使っているWordpressのテーマを調べる
「Simple Custom CSS and JS」プラグインをインストール
横幅を広げるカスタムコードを追加
参考URL

横幅を広げる方法を3行で書くと？

１．自分が使っているWordpressのテーマを調べる

２．「Simple Custom CSS and JS」プラグインをインストールする

３．横幅を広げるカスタムコードを追加

終わり！閉廷！…以上！皆解散！

自分が使っているWordpressのテーマを調べる

「テーマ」って何？

ブログのレイアウトのテンプレート(型)みたいなもの。

この時点でカタカナ用語だらけで分かりにくい…

「テーマ」を開く

WordPressの管理画面(ダッシュボード)から、
外観→テーマ
を選択

「有効」になっている「テーマ」の名前を確認

現在、自分が使っている「テーマ」がどれなのかは、こ↑こ↓で判断できる

ワイの場合「TwentySeventeen」という名前のテーマを使っている模様
(WordPressのデフォルトだと思う)

ちなみに「TwentySeventeen」は西暦2017年の意味らしい

ちなみに、別のテーマ(例：Twenty Fifteen)を有効にすると
ブログのレイアウトがガラーっと変わるから注意ゾ～

本記事では「TwentySeventeen」で説明する

テーマが「TwentySeventeen」でない兄貴は

「WordPress ***　幅を広げる方法」
のキーワードでｇｇって、どうぞ。

※***には、自分が使っているテーマ名を入れる
(例：Twenty Fifteen)

「Simple Custom CSS and JS」プラグインをインストール

「プラグイン」って何？

スマホのアプリみたいなモノ

「プラグインを追加」を開く

~~プラグイン！ロックマンEXE！~~

WordPressの管理画面(ダッシュボード)から、
プラグイン→プラグインを追加
を選択

検索ボックスで検索

右上に検索ボックスがある

検索ボックスに
Simple Custom CSS and JS

をコピペしてEnterを押すと、プラグインがずらーっと出てくる

「Simple Custom CSS and JS」を有効化

検索したら、↑のアプリが出てくるので「インストール」ボタンを押す。
すでに入っている場合は、最新版へアップデート(更新)して「有効」ボタンを押す。

↑のように「有効」になっている事を確認する

横幅を広げるカスタムコードを追加

「カスタムコード」って何？

ネットのサイトは、HTML文から作られているらしい。

↑を管理するプログラムコードみたいなのを「カスタムコード」って呼ぶらしい
（素人のガバガバ知識）

「カスタムコード」を開く

「Simple Custom CSS and JS」を有効にした場合…

WordPressの管理画面(ダッシュボード)から、
「カスタムCCS & JS」
が出てくる

↑を選択して、「カスタムコード」の画面を開く

横幅を広げるカスタムコードを追加

「カスタム CCSの追加」を選択する

すると、↑の赤枠の画面が開く

新たなカスタムコードの記入

ワイのブログの場合、↓のように書いた。

カスタムコードのタイトル名：

TwentySeventtenの最大幅を変更

※タイトル名は日本語・英文字が混ざってもOK

コード内容：

/* TwentySeventtenの最大幅を1200pxに変更 */
@media screen and (min-width: 79em) {
.wrap {
max-width: 1150px;
padding-left: 5em;
padding-right: 5em;
}
.has-sidebar:not(.error404) #primary {
width: 60.0%;
}
.has-sidebar #secondary {
width: 31.3%;
}
.navigation-top .wrap {
max-width: 1120px;
}
.site-footer .wrap {
padding-left: 10em;
padding-right: 8em;
}
}