ワードプレスのブログなら記事下に定型文をプラグインで簡単に挿入できる

記事下定型文

全てのブログ記事下に定型文を入れたい。

そう思った時、あなたならどうするだろうか。

もしコピペで行おうと思うなら、macなら優秀なアプリがあるから助かるよね。

↓  ↓  ↓

macのコピペ履歴を保存する最強アプリ【全てのコピペが過去になる】

だけど、さすがに全ての記事下に定型文を挿入するのは大変だ。

実は、ワードプレスのブログなら、プラグインを使うことで、全ての記事下に簡単に定型文を挿入することができる。

そのプラグインとは

Bottom of every post

今回は、「Bottom of every post」で、

  1. ブログ記事下に定型文を挿入する
  2. CSSを使ったカスタマイズ

この二つの方法を紹介する。

Bottom of every post

先ずは、ダッシュボード左メニューのプラグインから「新規追加」を選択。

右上の検索窓に「Bottom of every post」と入力してインストール。

インストールしたら「有効化」しよう。

記事下定型文

右側のプラグインは初めから赤枠で囲ってあったので、間違わないよう×印を私がつけた。

なんか、落書きみたいになってしまい申し訳ない。

気を取り直して、次にダッシュボード左メニューのプラグインから「インストール済みプラグイン」を選択して「編集」をクリック。

記事下定型文

編集画面の右側、「bottom-of-every-post/bottom_of_every_post.txt」を選択。

末尾が「.php」ではなく「.txt」の方を選択しよう。

記事下定型文

上記画像のように、最初からコードが記載されている。

このままだと記載されている「英文」が定型文として挿入されてしまうので、コードを全て削除して定型文を入力しよう。

もし、定型文をすぐには設置しない。

または、記事下の定型文を解除したい時は、「Bottom of every post」を「停止」しよう。

記事下定型文

「Bottom of every post」で記事下に定型文を挿入するには、テキストエディタでの入力が必要になる。

私はExcelの関数は得意な方だが、「HTML」や「CSS」決して得意な方ではない。

ちょっと見栄を張ってしまったが、正直なところできない。

そこで、こちらの方法を紹介する。

ダッシュボード左メニューの投稿から「新規追加」を選択。

ビジュアルエディタを選択する。

記事下定型文

ビジュアルエディタを選択したら、定型文を入力しよう。

記事下定型文

入力が完了したら「テキストエディタ」に切り替える。

すると、ご覧のようにコードが表示される。

記事下定型文

このコードをコピペすれば完了だ。

背景色を変更

私のブログでは、広告を記事下の定型文に使っている。

そのまま挿入すると、私の記事なのか広告なのかがわからない。

そこで、わかりやすくするために定型文(広告部分)の背景色を変更している。

それと枠線も追加している。

変更方法は簡単で一番上に

<div style=”padding: 16px; border: solid 3px #dcdcdc; border-radius: 10px; background-color: #f5f5f5; margin-top: 30px; margin-bottom: 30px;”>

このCSSを挿入する。

記事下定型文

定型文に限らず記事本文でも使えるのでオススメだ。

CSSの使い方

先ほど紹介したCSS(スタイルシート)だと、枠線と背景色がグレーになってしまう。

他の線や別の色が良い

本当はそう思っているあなたのために、CSSを使ったカスタマイズを解説する。

領域内に余白をつくる

「padding」(パディング)の隣の数値を変更すると、領域内の余白を変更できる。

記事下定型文

「領域内」とはここでは「背景色」の内側のことだ。

記事下定型文

右側は初めから余白があったのでわかりづらいが、左と上下に余白ができたよね。

領域外に余白をつくる

今度は背景色の「外側」、つまり領域外に余白をつくる。

「margin-top」の隣の数値を変更する。

記事下定型文

すると、背景色外側の「上」に余白ができる。

記事下定型文

「margin」(マージン)とは「余白」のことだ。

ただし、「padding」が「内側」の余白なのに対し「margin」は「外側」の余白になる。

領域外の下に余白をつくるには、「margin-bottom」の隣の数値を変更する。

記事下定型文

すると、背景色外側の「下」に余白ができる。

記事下定型文

線の太さを変える

次は線の太さを変えてみよう。

「solid」の隣の数値を変更すると線の「太さ」が変わる。

記事下定型文

数値を大きくすれば太くなる。

記事下定型文

線の種類を変える

次は線の種類を変更してみよう。

「border」の隣の英文を変更すると線自体が変更される。

記事下定型文

今回は「破線」にしてみよう。

記事下定型文

「border」の種類は他にもあるんだ。

一覧を記載するので、必要な時に【】の中の英文をコピペして頂きたい。

【dotted】点線

【dashed】破線

【solid】実線

【double】二重線

【groove】線がへこんで見える

【ridge】線が浮き上がって見える

【inset】線より内側がへこんで見える

【outset】線より内側が浮いて見える

背景色が白だと【inset】と【outset】がわかりづらい。

線の色を変える

線の色を変えてみよう。

「#」の隣の数値を変更。

記事下定型文

線の色が変更される。

記事下定型文

「#」の隣の数値は「カラーコード」だ。

カラーコードはこちらで確認しよう。

↓  ↓  ↓

カラーコード一覧表

ここから好きなカラーコードを選択する。

背景色を変える

背景色を変えてみよう。

「background-color」の隣の「#」を変更する。

記事下定型文

センスは別にして、背景色が変わったね。

記事下定型文

角丸をつくる

最後は角丸。

「border-radius」の隣の数値を変更しよう。

記事下定型文

角丸ができる。

記事下定型文

配色は別として、CSSを使うことで色々カスタマイズできることが理解頂けただろうか。

もちろん、記事だけではなく、ブログ全体のカスタマイズも可能だ。

ただし、ブログ全体のカスタマイズをする際は、必ず子テーマを使うようにしよう。

親テーマのCSSを変更して元に戻らなくなったり、レイアウトが崩れるのを防ぐことができる。

子テーマの使い方はこちらの記事で確認頂きたい。

↓  ↓  ↓

ブログのデザインをカスタマイズする【ワードプレスが簡単すぎる】

最後に

以上がワードプレスのブログ記事下に、プラグインで定型文を挿入する方法になるのだが、実は「Simplicity」ならプラグインを使わなくても挿入できる。

外観のウィジェットから、テキストウィジェットを「投稿本文下」にドラッグすれば完了だ。

ただし、ウィジェットから挿入した場合、背景色や文字の色を変更する際には「HTML」が必要になる。

私は「HTML」は「CSS」以上にわからないので、プラグインを使用している。

「HTML」がわかる方はウィジェットを使ったほうが早いかもしれない。

ワードプレスのブログでは、記事下の定型文以外にも様々設置することができる。

たとえば、サイドバーにプロフィールを設置する。

その方法はこちらの記事で確認いただきたい。

↓  ↓  ↓

プロフィールをわかりやすい場所に設置する【サイドバーに設置する方法】

この記事が気に入ったら
いいね ! しよう

Twitter で

シェアする

フォローする