ロクブログは、MagBookというテーマを使わせていただいますが、
ずっとカスタマイズできるなら直したいと思っている箇所がありました。
それは記事カラムの幅が広いこと！
ざっくりな数字だと記事カラムの幅が850pxくらいあってウィジットカラムが350pxの
全体で1200pxくらいの横幅があります。
なのでhタグや改行しないテキストなどは自動的に850pxサイズに流し込まれていきますが、
ブログに貼り付ける写真は、基本的に横幅600px縦幅400pxサイズに統一しているので
250pxくらいのスペースが空きます。
じゃあアップする画像をMaxワイドで貼り付けたらいいじゃん…と
一瞬考えたのですが、横幅を850px MAXで貼り付けると同時に縦幅も伸びるので、
写真の主張が強くなってなんか嫌だなと思っていたのでどうにか触れないかチャレンジしてみました。
WordPressのことはまったく知識のない僕でもできたので、
よかったら参考にしてみてください。
まずはWordPressの修正したい箇所を探す
まずはwordpressで修正したい該当箇所をみつけます。
Chromeでwordpressを開いてキーボードのF12キーを押下してデベロッパーツールを起動します。
するとデベロッパーツールが開くので左上にある矢印アイコンをクリックします。
HP上にカーソルを合わせると色が変わり、自分がカスタマイズしたい部分が
何のタグやクラスで記述されているのかがわかります。
今回僕が使用しているテーマは「div class=”wrap”」で囲われていて
デフォルトだと1170pxの横幅サイズでしたので、
自分が使用しているWordPressの
外観→テーマファイルエディターに入り、スタイルシートの中から
先ほど調べた「wrap」のクラスを探します。
wrapのmax-widthが1170pxになっているのを見つけられたので、
960pxへ書き換えて左下の「ファイルを更新」ボタンを押して反映します。
そしてブラウザで確認すると、記事カラムのスペースが狭くなって
気になっていたスペースがほとんど無くなりました↓
もしWordPressの更新ボタンを押しても変わらない？という方は、
Chromeのキャッシュを削除してから確認してみてください。
僕はそれで反映されました。
まとめ
WordPressの知識は全然無い自分でも、CSSを少し習った知識でカスタマイズできました。
他にも、いろいろな部分を触れるようになるとカスタマイズが楽しくなると思うので
少しずつ学んでいきたいです。