「SWELLを利用していて、記事下に定型文を入れたいけどうまくいかない・・・」
「何度試しても、改行がおかしなことになってしまう」
本記事は、そんな風にお困りの方に向けて書いています。
ここでは、
全記事同じ定型文(お知らせなど)を綺麗に入れる方法
についてご紹介いたします。
![](https://ym-life.com/wp-content/uploads/2021/04/バストアップ8(丸)-150x150.png)
試行錯誤しまくること数時間(数週間?)、やっと良い方法を見つけました!
【SWELL】記事下に定型文を入れる方法
記事下に定型文を入れるには、「外観」→「ウィジェット」→「記事下部」に文字を入れたらOK!
![SWELL(記事下)](https://ym-life.com/wp-content/uploads/2024/02/d7b237b13b909fd994cd6484ba3dfaa6.jpg)
![SWELL(記事下)](https://ym-life.com/wp-content/uploads/2024/02/d7b237b13b909fd994cd6484ba3dfaa6.jpg)
ただし、この方法で文字入れすると、
- 改行が詰まってしまう
- ボックス機能や背景色を付けるなどができない
- 画像の体裁崩れを起こす(画質が悪くなる)
など、とにかく見栄えがよくありません。
また、高度なデザインを行うことができず、文字がメインの簡素なものになってしまいます。
今回やりたいのは、以下のように文字サイズを大きくしたり、画像を入れたりボタンを入れたりするなど、ナイス(?)なデザインの定型文を表示させる方法。
完成例
![記事下の定型文の例](https://ym-life.com/wp-content/uploads/2024/02/b658f8105b1faf3f1736e8ca2b06885e.jpg)
![記事下の定型文の例](https://ym-life.com/wp-content/uploads/2024/02/b658f8105b1faf3f1736e8ca2b06885e.jpg)
このようなデザインを記事下に入れる方法について、ここからはご紹介していきます。
SWELLで体裁崩れしない定型文の作成方法
これを作る手順は2つ。
- 定型文を作成する
- 記事下に設置する
それぞれ詳しく見ていきましょう。
定型文を作成する
まずは、記事下に入れる定型文を作成しましょう。
これについては、「ウィジェット」からではなく、通常の記事を作成する流れ「投稿」→「新規投稿を追加」から行うといいです。
![記事下の定型文の作り方1](https://ym-life.com/wp-content/uploads/2024/02/045878568b911ebe637f97af0061d250.jpg)
![記事下の定型文の作り方1](https://ym-life.com/wp-content/uploads/2024/02/045878568b911ebe637f97af0061d250.jpg)
まずは、この画面で記事下に設置したい定型文を作っていきましょう。
文字の装飾や吹き出し、背景なども自由にデザインしてOK!
今回は、このような形で作りました。
↓
![記事下の定型文の作り方2](https://ym-life.com/wp-content/uploads/2024/02/5551ca016fdbe3d0b53ff801faa4a888.jpg)
![記事下の定型文の作り方2](https://ym-life.com/wp-content/uploads/2024/02/5551ca016fdbe3d0b53ff801faa4a888.jpg)
既に背景色を付けている場合は、グループ化されているかと思いますが、まだの場合は全てを選択して「グループ化」し、一つの固まりにしましょう。
![記事下の定型文の作り方3](https://ym-life.com/wp-content/uploads/2024/02/6e23cd07b4c701d3b9f05b5f4747dcf0.jpg)
![記事下の定型文の作り方3](https://ym-life.com/wp-content/uploads/2024/02/6e23cd07b4c701d3b9f05b5f4747dcf0.jpg)
この状態でグループを選択(クリック)すると、全体に青枠がつくことが確認できます。
![記事下の定型文の作り方4](https://ym-life.com/wp-content/uploads/2024/02/ae44da15ea4c2374c76cd5859192eb2d.jpg)
![記事下の定型文の作り方4](https://ym-life.com/wp-content/uploads/2024/02/ae44da15ea4c2374c76cd5859192eb2d.jpg)
3点リーダーから、「スタイルをコピー」をクリックすると、全体がコピーされます。
![記事下の定型文の作り方5](https://ym-life.com/wp-content/uploads/2024/02/2a827c8d7bd22332c6bbde5770533156.jpg)
![記事下の定型文の作り方5](https://ym-life.com/wp-content/uploads/2024/02/2a827c8d7bd22332c6bbde5770533156.jpg)
![](https://ym-life.com/wp-content/uploads/2021/02/*バストアップ1(丸)-150x150.png)
![](https://ym-life.com/wp-content/uploads/2021/02/*バストアップ1(丸)-150x150.png)
![](https://ym-life.com/wp-content/uploads/2021/02/*バストアップ1(丸)-150x150.png)
上で作った定型文は、削除せずに下書き保存しておくと、今後変更する際にも使い回すことができるので便利!
記事下に設置する
あとは、コピーしたスタイルを記事下に設置するだけ。
「外観」→「ウィジェット」へ。
左の一覧から「ブロック」を選択し、「記事下」にドラッグ&ドロップします。
![記事下の定型文の作り方6](https://ym-life.com/wp-content/uploads/2024/02/0d093b12dc2e14dbc84a79469f39ba61.jpg)
![記事下の定型文の作り方6](https://ym-life.com/wp-content/uploads/2024/02/0d093b12dc2e14dbc84a79469f39ba61.jpg)
ここで「テキスト」を選択すると体裁が崩れてしまうので、必ず「ブロック」を選ぶこと。
「ブロックHTML」という箇所に、先ほどのコードを貼り付けてください。
![記事下の定型文の作り方7](https://ym-life.com/wp-content/uploads/2024/02/9758917dcfcbbe2d12de71ff266b63f9.jpg)
![記事下の定型文の作り方7](https://ym-life.com/wp-content/uploads/2024/02/9758917dcfcbbe2d12de71ff266b63f9.jpg)
貼り付けできたら、「保存」を押しましょう!
これで設定完了です。
![](https://ym-life.com/wp-content/uploads/2021/04/バストアップ8(丸)-150x150.png)
![](https://ym-life.com/wp-content/uploads/2021/04/バストアップ8(丸)-150x150.png)
![](https://ym-life.com/wp-content/uploads/2021/04/バストアップ8(丸)-150x150.png)
最後に、実際にサイトを見て、綺麗に表示されているかを確認しておこう。
あとがき
記事下に定型文を入れるにはプラグインを使う方法もありますが、SWELLであれば、標準機能で綺麗に表示させることができます。
また、デザインに関しても、通常の記事投稿ページでできるので便利ですね。
この方法を見つけるのに、ほんとぉ~~~~~に苦労したので、本記事の内容があなたの参考になれば嬉しいです!
コメント