STINGER5などで盛り上がるWordpressブロガーをよそ目に、SuperMag(無料版)という海外製テーマでゴリゴリ記事を執筆する僕です。
SuperMagのトップページや全体のレイアウトは気に入っているのですが、デスクトップで自分のブログを閲覧する際に、「写真の幅」と「テキスト記事の幅」が異なる点にずっと違和感を感じていました。
基本的に読者の方は「スマホ・タブレットユーザー」であることが多いので、時間がある時にゆっくり修正するつもりでいたら、運営開始から1年近い年月が経過してしまっていました。
重い腰を上げて、ようやくSuperMagの記事幅をいい感じに調整するコードが書けましたので、備忘録を兼ねてこのエントリに記録しておきたいと思います。
（本当はもっと簡単に修正方法が見つかるかと思っていたのですが、参考になるブログ記事がなかったため、CSSコーディングの勉強がてら自分で記述しました）
/*ディスプレイサイズ920px以上（デスクトップ以上）の端末向け*/
@media all and (min-width: 920px) {
#primary {
width: 58% !important;
}
.secondary-sidebar {
width: 35% !important;
}
}
【記述箇所】
WordPressダッシュボード＞SuperMag＞外観＞カスタマイズ＞追加CSS
【記述内容解説】
① @media all and (min-width: 920px) { ② と ③ }
※表示する端末（ディスプレイサイズ）を921px以上の端末に指定し、②と③の表示を指示
② #primary { width: 58% !important; }
※主要なコンテンツエリアの幅を指定（メイン記事を58%に指定）
③ .secondary-sidebar { width: 35% !important; }
※サイドのスライドバーの幅を指定（スライドバー部分は35％に指定）
念の為、上記の記述で動作するか確認するために、【（W3C）CSS Validation Service】というCSSコード検証サービスを使用しておきました。
※記述誤り等でブログそのものがクラッシュする可能性もありますので、更新の前に確認することは大切です。
一通り確認を終え、追加CSSを記述して更新した結果、無事に記事の幅を調整することができました。
STINGER5以外のテーマでWordpressを運営していて、記事の幅を変更したいなと考えている方がいたら、参考資料としてお役立てくださいね！
