WordPress個別サポート

WordPressの編集画面にコピーペーストして使える便利なCSSを紹介します。活用する場面は、少しだけデザインを調整したいときです。たとえば、申し込みボタンをセンタリングしたり、画像の下に余白を入れたり、一部の文章を枠線で囲みたいときです。

ちょっとだけデザインを調整したいことも

ちょっとだけデザインを調整したいことも

そんな、ちょっとしたデザイン調整のときに、CSSに慣れていればさまざまな解決策が頭に浮かんでくるかもしれませんが、慣れていないと解決策が浮かんできません。

そこで、CSSに慣れていない方のために、定番のデザイン調整に使えるコードを3パターン(センタリング・余白・枠線)紹介します。投稿や固定ページの編集画面にそのままコピーペーストして使えます。参考にしてください。

スポンサーリンク

リンクや画像のセンタリング

編集画面に入力した文章や画像、ボタンなどのうち、一部をセンタリングしたいこともあります。たとえば、見ための問題でボタンやリンクなどを中央に表示したくなるかもしれません。

ボタンだけをセンタリングしたい

ボタンだけをセンタリングしたい

CSSの「text-align: center;」を使うとセンタリングすることができます。divタグを使って編集画面のテキストエディタに入力してみましょう。

まずは、編集画面のテキストエディタを使って、センタリングする部分を確認します。

テキストエディタでセンタリングしたい部分を確認

テキストエディタでセンタリングしたい部分を確認

この内容を次のコードで囲みます。divタグにスタイルが指定してあり、囲んだ部分がセンタリングされる仕組みです。

<div style="text-align: center;">★センタリングする内容★</div>

「★センタリングする内容★」を実際に中央寄せしたい文字などに置き換えます。入力したイメージは次のようになります。

センタリングしたい部分をdivタグで囲む

センタリングしたい部分をdivタグで囲む

「更新」ボタンをクリックして、ページを確認しましょう。指定した内容が中央にくるはずです。

指定した内容がセンタリングされる

指定した内容がセンタリングされる

文章ブロックのセンタリング

上記の例はリンクやボタンなど、ちょっとしたパーツのセンタリングでしたが、文章などではうまくいかない場合があります。

次の例では、文章のdivブロックの幅を狭くしてセンタリングしています。

文章のブロック幅を狭くしたのでセンタリングしてみたが…

文章ブロックに「text-align: center;」を指定してみたが…

ブロック自体は中央に寄らず、ブロック内の文章だけがセンタリングされてしまいます。

文章はセンタリングされたがブロックは中央にこない

文章はセンタリングされたがブロックは中央にこない

この場合、「text-align: center;」の代わりに「margin: 0 auto;」を使ってみましょう。

「text-align: center;」の代わりに「margin: 0 auto;」

「text-align: center;」の代わりに「margin: 0 auto;」

今度は文章のブロック全体が中央に表示され、ブロック内の文章は左寄せのままになります。

ブロック全体がセンタリングされる

ブロック全体がセンタリングされる

画像や文章の下に余白を入れたい

画像や文章の上下に余白を入れてスペースを空けたいこともあります。

好きな場所に余白を入れたい

好きな場所に余白を入れたい

CSSの「margin-top」や「margin-bottom」を使うと、指定ブロックの上下に余白を入れることができます。

編集画面のテキストエディタで余白を入れる部分を確認しましょう。ここでは画像(imgタグ)の下あたりに入れるとします。

画像の下に余白を入れる

画像の下に余白を入れる

そのあたりに、次のコードを入力します。

<div style="margin-bottom:50px;">&nbsp;</div>

入力したイメージは次のようになります。

余白を入れるコードを入力

余白を入れるコードを入力

「 」は半角スペースのようなものです。これにより、空白行が作成されます。

「更新」ボタンをクリックして、ページを確認しましょう。指定した部分に余白が入っているはずです。

指定した位置に余白が入る

指定した位置に余白が入る

「margin-bottom:50px;」の「50px」が余白のサイズです。あとは、好きなサイズに変更して自由に微調整してみてください。

一部の文章に枠線を付けたい

特定の文章だけを枠線で囲みたいこともあります。長い文章の中で特にお客様に見てもらいたい部分などです。

一部の文章を枠線で囲みたい

一部の文章を枠線で囲みたい

CSSの「border」を使うと、ブロックを枠線で囲むことができます。

編集画面のテキストエディタから、枠線で囲みたい部分を確認しましょう。

枠線で囲みたい部分

枠線で囲みたい部分

この部分を次のdivタグで囲みます。

<div style="border:solid 2px red;padding:5px;">★囲む内容★</div>

「★囲む内容★」を実際の文章に置き換えます。このdivタグで文章を囲んだイメージは次のようになります。

枠線を付けたい部分をdivタグで囲む

枠線を付けたい部分をdivタグで囲む

「更新」ボタンをクリックして、ページを確認しましょう。指定した部分に枠線が付いているはずです。

指定した部分が枠線で囲まれる

指定した部分が枠線で囲まれる

上記の例は実線で文章を囲んだだけでしたが、borderを使うと、さまざまな色、太さ、スタイル(実線、点線、二重線など)で枠線を付けることができます。詳しくは以下のページを参考にしてください。

スタイルシートリファレンス(border)

また、上記のCSSは枠線と余白だけでしたが、次のようなスタイルを追加して、お知らせ的な部分を強調してもよいでしょう。

  • 背景色 --- background-color(例:background-color: #f6bfbc;)
  • フォントサイズ --- font-size(例:font-size: 18px;)
  • 文字の色 --- color(例:color: #000;)
  • 文字を太字に --- font-weight:bold;

仕上がったイメージは次のようになります。

文章を枠線で囲んで目立たせる

文章を枠線で囲んで目立たせる

まとめ

このように、WordPressの編集画面に入力できるCSSを覚えておくと、ちょっとしたデザインを調整したいときに役立ちます。この記事で紹介したコードを以下にまとめておきます。ご自由にお使いください。

<div style="text-align:center;">★センタリングする内容★</div>
<div style="margin: 0 auto;width:px;">★センタリングする内容★</div>
<div style="margin-bottom:50px;">&nbsp;</div>
<div style="border:solid 2px red;padding:5px;">★囲む内容★</div>
この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート