ワイのブログは「WordPress」というツールをレンタルしている(有料)
デフォルト設定だと記事の幅が狭い＝画像がつぶれてしまう
横幅を広げる方法を調べてもなかなか解決しなかったので、備忘録に残しておく
目次
横幅を広げる方法を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;
}
}
横幅を調整する
こ↑こ↓でブログ記事の横幅を調整できる
max-width: 1150px;
1150の数字をいじれば横幅を変更できる。
デフォルトは1000pxくらいだっけ？
pxの数字を小さくすると、幅も小さくなる
pxの数字を大きくすると、幅も大きくなる
ちなみに、「ブログ記事の横幅」は↓の赤矢印の部分だゾ～
横幅をいじって保存 or 更新
横幅を調整する数字の修正が終わったら、右上の「公開」ボタンを押す
既に作成済の場合は「更新」ボタンに変わる
自分のブログを開いて、記事の横幅が変わっているか確認する。
横幅を修正したい時は？
カスタム CCS &JS→コードの一覧
を選択する
過去に自分で作ったカスタムコードのタイトル名が出てくる。
こ↑こ↓をクリックすると、さっきの編集画面が出てくるゾ～
あとは、↓の数字をいじって「更新」ボタンを押すだけ
max-width: 1150px;
ね？簡単でしょ？
参考URL
