twentyfourteenの子テーマでメインコンテンツエリアの幅を拡げる

Image

twentyfourteenのテーマは良く出来ていてほんと、かっこいいです。

けれど、必要に迫られてちょっと変えたいなぁと思ったりします。

色は、

twentyfourteenの色を好きな色に変える子テーマを作りました

で変更しましたが、今度は ちょっとバランスが良くてかっこいい感じの「メインコンテンツの幅」が気になってきました。
文章中心だとこれでいいと思うんですが、私が書くblogって画面のハードコピーを貼ることが多く、この幅に合わせるとちょっと細部が見にくいかなぁ~、かっこよくなくてももちょっと幅が欲しいな、と。そこで子テーマでこのエリアの幅を拡げてみました。

twentyfourteenの子テーマを作ってありますのでそこにあるstyle.cssにこんな感じで追加してみます。

要は474pxとなっているところを抜き出して800pxに指定し直してあるだけ、なのですが。

再度読み直してみると、こんな感じになりました。

Image

ここまで直して出来たっ!と思ったのですが、記事を書くときのビジュアルエディタがまだ474pxのままのようでした。

Image

こちらも800pxにしてみたいと思います。子テーマのフォルダに css というフォルダを作り、editor-style.cssというファイルを新しく作ります。
その中にこれだけ記述してください。

html .mceContentBody {
max-width: 800px;
}img {
max-width: 800px;
}.wp-caption {
max-width: 800px;
}

Image

これで記事を書くときのビジュアルエディタの幅も拡がりました。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

コメント

  1. 向井 より:

    初めまして。向井と申します。

    こちらの記事を参考にさせていただきました。

    一点、ご記載のとおりに進めても、
    そのようにならなかった箇所がありましたので、
    質問させていただけないでしょうか。

    ビジュアルエディタの幅についてです。

    >こちらも800pxにしてみたいと思います。子テーマのフォルダに css というフォルダを作り、editor-style.cssというファイルを新しく作ります。
    >その中にこれだけ記述してください。

    >html .mceContentBody {
    >max-width: 800px;
    >}img {
    >max-width: 800px;
    >}.wp-caption {
    >max-width: 800px;
    >}

    上記「子テーマのフォルダに css というフォルダを作り」の子テーマですが、
    例えばフォルダ名が「twentyfourteen-hogehoge」だった場合、
    「twentyfourteen-hogehoge」の中に「css」フォルダを作り、
    その中に「editor-style.css」というファイルを作成し、
    上記コードを入力の上、他テーマが並ぶ階層上に
    アップロードという手順で合っていますでしょうか。

    ※この手順で進めたのですが、ビジュアルエディタの幅が
    変わらなかったため質問させていただきました。

    突然の連絡にも関わらず厚かましい内容で恐縮ですが、
    ご回答いただけますと幸いです。よろしくお願い致します。

    • 兎本 美佳 より:

      向井さん、おはようございます。

      >上記「子テーマのフォルダに css というフォルダを作り」の子テーマですが、
      >例えばフォルダ名が「twentyfourteen-hogehoge」だった場合、
      >「twentyfourteen-hogehoge」の中に「css」フォルダを作り、
      >その中に「editor-style.css」というファイルを作成し、
      >上記コードを入力の上、他テーマが並ぶ階層上に
      >アップロードという手順で合っていますでしょうか。

      なのですが、CSSファイルの名前は style.css でした。ちゃんと書いて無くてわかりにくいなーとあとで思いまして、

      WordPress子テーマの作り方
      https://usortblog.com/somosomokotheme/

      という記事をあとでかきました(^_^;。きっと、それを見ていただけるとわかりやすいかとおもいます。とりあえずファイル名をstyle.cssにすればいけるんじゃないかなーと思いますが記事も見てみてください。よろしくお願いします(^^)/

  2. […] 投稿時のビジュアルエディタは、 引用元: twentyfourteenの子テーマでメインコンテンツエリアの幅を拡げる | RYUS blog. を、まんま参考にし、 子テーマのフォルダに css というフォルダを […]

  3. […]  参考にしたサイトは以下の通りです。ありがとうございますhttp://hikikomori-channel.com/twentyforteen_sidemenu/http://licoco.info/wordpress-twenty-fourteen-width-17.htmlhttps://firegoby.jp/archives/2394http://iinamotto.com/2014/01/1718.htmlhttp://netaone.com/wp/wordpress-plugin-first/http://wp-themetank.com/https://usortblog.com/twentyfourteenwidthwide/http://wpdocs.sourceforge.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E […]

  4. nori より:

    はじめました。
    ノリといいます。

    参考になりました。
    早々にサイトに反映させて頂きました。
    ありがとうございました。 m(_._)m

    • 兎本 美佳 より:

      ノリさん、こんにちは!

      参考になったということをお知らせいただき、ありがとうございます(^^)/。励みになります

  5. Shiro Okayama より:

    はじめまして。
    子テーマに関する他の記事もそうですが、特にこの記事、とても参考にさせて頂きました。
    6/19に自分のブログに投稿する記事で、感謝の意味を込めてこの記事へのリンク張らせて頂きますので宜しくお願い申し上げます。
    ピンバックが送信されるかもしれませんが、承認or非承認は、管理方針があると思いますので、どちらでも構いません。
    本当にありがとうございました。今後もいろいろ参考にさせて頂きます。

    • 兎本 美佳 より:

      Shiro Okayamaさん、こんにちは(^^)/。コメントありがとうございます。サイトを拝見して「幅が広くなってる~」と思いましたお役に立てたようで何よりです。19日の記事も楽しみにしています!

  6. […] RYUS blog   株式会社RYUSのblog twentyfourteenの子テーマでメインコンテンツエリアの幅を拡げる […]

トップへ戻る