ワードプレスの記事に追加CSS編集で余白やスペースを開ける方法【AddQuicktag】

こんにちは。会社員飽きたので辞めちゃいました、たまりこ@tamariko_mediaです。

ワードプレスで記事を書いている時にちょっとした場所に余白やスペースが欲しいなぁと思うことってありませんか?
画像や表から余白やスペースなしでいきなり文章が続くのって窮屈で読みづらいですよね。かといって改行を連打してスペースを稼ぐのも、テキストエディタがごちゃごちゃして気持ち悪いです。

私も何か良い方法はないかと模索していたのですが、追加CSS機能を使用してスマートに余白を作る方法を発見しましたのでシェアしたいと思います。

この記事を読めば、簡単な設定だけでテキストエディタからボタン1つで好きなサイズの余白を作れるようになります。

AddQuicktagのインストールと設定

AddQuicktagのインストール

まずは『AddQuicktag』と言うプラグインをインストールしましょう。このプラグインはよく使うタグをボタン1つで入力出来る便利なものです。

ワードプレス管理画面にいきます。
①左側のメニューからプラグインにカーソルを合わせます。
②新規追加をクリックします。

①『AddQuicktag』で検索します。
②今すぐインストールをクリックします。インストール出来たら有効化もしときましょう。

AddQuicktagの設定

ワードプレス管理画面に戻ります。

①左側のメニューから設定にカーソルを合わせます。
②AddQuicktagを選択します。

このような設定画面が表示されました。
①ボタン名を決めます。自分が分かる名前を付けておきましょう。今回は『余白30』としておきます。
②開始タグを入力します。今回は『div class=s30』と入力しておきます。実際は<>で囲います。
③終了タグを入力します。今回は空白で大丈夫です。
④このタグが使える記事の種類です。基本的に全部チェックで問題ありません。
⑤『変更を保存』をクリックします。

同じ要領で『余白50』と『余白100』も設定しておきます。

これでAddQuicktagにタグの登録は完了しました。次は追加CSSを編集していきます。

追加CSSの設定

ワードプレス管理画面にいきます。
①左側のメニューから『外観』にカーソルを合わせます。
②『CSSの編集』をクリックします。

①ここにこちらと同じものをコピー&ペーストしましょう。

.s30 {margin: 30px 0px 0px;}
.s50 {margin: 50px 0px 0px;}
.s100 {margin: 100px 0px 0px;}

②『公開』をクリックします。

チェックしてみよう

普段記事を書くようにテキストエディタを開いてみましょう。

①作成した余白タグを押してみましょう。
この上は普通の改行

この上が余白30

この上が余白50

この上が余白100

プレビューでチェックしてみましょう。このように余白が入っていれば成功です。

今回は余白30・50・100で試してみましたが、

.s30 {margin: 30px 0px 0px;}

追加CSSに登録したこの30pxの部分をいじればどんなパターンでも作れるので、自分好みの余白タグをカスタムすることが出来ます。私は5px~200pxくらいまで登録しており状況に応じて使い分けています。

まとめ

今回はボタン1つでよく使用するタグを一発変換出来るプラグインAddQuicktagと、追加CSS編集を組み合わせて自由なサイズの余白を簡単に作る方法を紹介しました。

AddQuicktagは単によく使う見出しタグを登録するだけでも便利ですしオススメのプラグインです。

追加cssをいじるだけで簡単に余白を作る事が出来るので、試してみてはいかがでしょうか。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です