【SWELL】記事作成に役立つちょっとした”装飾テクニック”を紹介

  • URLをコピーしました!

今回は当ブログでも使用しているブログが楽しくなるWordPressテーマ「SWELL」で、記事作成に役立つちょっとした装飾テクニックを紹介します。

がお

ブログを書いているとたまに「こんな使い方もできるだ!」とひらめくことがあるので、いくつか紹介するよ。

もくじ

「見出し」のテクニック

キャッチコピー・サブタイトルを付ける


このテクニックを使うと、見出しにキャッチコピーやサブタイトルのテキストを一緒に表示できます。

STEP
表示させたいテキストを入力
  • 見出しの上に表示させるなら見出しの前に入力
  • 見出しの下に表示させるなら見出しの後に入力

それぞれ用途に応じて入力します。

STEP
[shift]+[enter]で改行

改行させたい場所にカーソルを合わせ[shift]+[enter]で改行します。

[shift]+[enter]を押すとブロック内で改行できます。

STEP
注釈を適用

[SWELL装飾]→[注釈]を適用させて完成です。

通常見出しブロックに入力したテキストは目次に反映されますが、キャッチコピーやサブタイトルまで目次に表示されると非常に長くて見づらくなります。

しかし[注釈]を適用したテキストは目次に反映されないため、[注釈]を使ってキャッチコピーやサブタイトルが目次に表示されるのを防ぎます。

「テーブル(表)」のテクニック

セルを結合したように見せる


「SWELL」のテーブルブロックは機能が拡張されており非常に便利ですが、セルの結合は行なえません。

しかしこのテクニックを使うと、セルを結合したように見せることができます。

STEP
複数のテーブルを用意

まずはくっつけたいテーブルを別々に用意します。

STEP
ブロック下の余白量を無くす

上のテーブルの「ブロック下の余白量」を無し(0)に設定します。

エディター上では余白がありますが、実際の記事では余白はありません。

STEP
一つの表のように見える
価格内容量
77円ソーダ105ml
オススメ度

記事を確認すると余白が無くなり一つの表になります。

見た目には3行目と4行目が横のセルと結合したように見えます。

この方法を使えばアイデア次第で色々なバリエーションの表が作れます。

特定の行だけ色を変える


現状のテーブルブロックでは、特定の行のみ背景色やテキストカラーを変更することはできませんが、このテクニックを使うと、特定の行の背景やテキストの色を変更したように見せられます。

基本的には先述した「セルを結合したように見せる」の応用です。

STEP
色を変更したい行を別テーブルとして用意

色を変更したい行を別のテーブルとして用意します。

上の例では3つのテーブルを用意しています。

STEP
ブロック下の余白量を無くす

上から1つ目と2つ目のテーブルの「ブロック下の余白量」を無し(0)に設定します。

エディター上では余白がありますが実際の記事では余白はありません。

STEP
特定の行だけ色が変わったように見える
請求額pt
1月1,000円100pt
2月1,000円100pt
3月1,000円100pt
4月1,000円100pt
5月4,000円400pt
6月1,000円100pt
7月1,000円100pt
8月1,000円100pt

記事を確認すると特定の行だけ背景色やテキストカラーを変更したように見えます。

セルの文字数を合わせるのがポイントです。

「メディアとテキスト」のテクニック

テキストを見やすくする


「メディアとテキストブロック」を使うと画像とテキストを並べて表示させられ、さらにスタイルを「ブロークングリッド」に変更すると、画像とテキストの一部を重ねて表示できます。

ブロークングリットの例

神の住む雪山

この山には神がいるとされている。

「ブロークングリッド」は使い方によっては非常にオシャレですが、組み合わせる画像によってはテキストが読みづらいです。

しかしこのテクニックを使うと、どんな画像と組み合わせてもテキストが読みやすくなります。

このテクニックはパソコンで見た時の方がわかりやすいです。

STEP
「メディアとテキストブロック」を呼び出す

神の住む雪山

この山には神がいるとされている。

まずは「メディアとテキストブロック」を記事に呼び出します。

STEP
スタイルを「ブロークングリッド」に変更

神の住む雪山

この山には神がいるとされている。

スタイルを「ブロークングリッド」に変更します。

STEP
テキスト部分をグループ化

神の住む雪山

この山には神がいるとされている。

  • 神の住む雪山
  • この山には神がいるとされている。

上記のテキストは別々のブロックなのでグループ化します。

ブロックが一つの場合はグループ化は必要ありません。

STEP
背景を任意の色に設定する

神の住む雪山

この山には神がいるとされている。

グループ化したブロックの背景色やボーダーを設定します。

これでテキストが読みやすくなり、背景色がない状態と比べて引き締まって見えます。

グループ化しているので、背景色を変えるだけでなく、ストライプや方眼などのスタイルを設定することもできます。

まとめ

今回紹介したテクニックを知っていた方もいると思いますが、初めて知った方は記事作成時に使えるタイミングがあれば、ぜひお試しください。

今後も良さげなテクニックを思いついたら追記していきます。

がお

ブロックエディターはアイデア次第でいろんな使い方ができて面白いね。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

もくじ