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

ブログを書いているとたまに「こんな使い方もできるだ!」とひらめくことがあるので、いくつか紹介するよ。
「見出し」のテクニック
キャッチコピー・サブタイトルを付ける
このテクニックを使うと、見出しにキャッチコピーやサブタイトルのテキストを一緒に表示できます。


- 見出しの上に表示させるなら見出しの前に入力
- 見出しの下に表示させるなら見出しの後に入力
それぞれ用途に応じて入力します。


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


[SWELL装飾]→[注釈]を適用させて完成です。
通常見出しブロックに入力したテキストは目次に反映されますが、キャッチコピーやサブタイトルまで目次に表示されると非常に長くて見づらくなります。
しかし[注釈]を適用したテキストは目次に反映されないため、[注釈]を使ってキャッチコピーやサブタイトルが目次に表示されるのを防ぎます。
「テーブル(表)」のテクニック
セルを結合したように見せる
「SWELL」のテーブルブロックは機能が拡張されており非常に便利ですが、セルの結合は行なえません。
しかしこのテクニックを使うと、セルを結合したように見せることができます。


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


上のテーブルの「ブロック下の余白量」を無し(0)に設定します。
価格 | 味 | 内容量 |
---|---|---|
77円 | ソーダ | 105ml |
オススメ度 |
---|
記事を確認すると余白が無くなり一つの表になります。
見た目には3行目と4行目が横のセルと結合したように見えます。
特定の行だけ色を変える
現状のテーブルブロックでは、特定の行のみ背景色やテキストカラーを変更することはできませんが、このテクニックを使うと、特定の行の背景やテキストの色を変更したように見せられます。
基本的には先述した「セルを結合したように見せる」の応用です。


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


上から1つ目と2つ目のテーブルの「ブロック下の余白量」を無し(0)に設定します。
請求額 | 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 |
記事を確認すると特定の行だけ背景色やテキストカラーを変更したように見えます。
「メディアとテキスト」のテクニック
テキストを見やすくする
「メディアとテキストブロック」を使うと画像とテキストを並べて表示させられ、さらにスタイルを「ブロークングリッド」に変更すると、画像とテキストの一部を重ねて表示できます。
ブロークングリットの例


神の住む雪山
この山には神がいるとされている。
「ブロークングリッド」は使い方によっては非常にオシャレですが、組み合わせる画像によってはテキストが読みづらいです。
しかしこのテクニックを使うと、どんな画像と組み合わせてもテキストが読みやすくなります。


神の住む雪山
この山には神がいるとされている。
まずは「メディアとテキストブロック」を記事に呼び出します。


神の住む雪山
この山には神がいるとされている。
スタイルを「ブロークングリッド」に変更します。


神の住む雪山
この山には神がいるとされている。
- 神の住む雪山
- この山には神がいるとされている。
上記のテキストは別々のブロックなのでグループ化します。


神の住む雪山
この山には神がいるとされている。
グループ化したブロックの背景色やボーダーを設定します。
これでテキストが読みやすくなり、背景色がない状態と比べて引き締まって見えます。
まとめ
今回紹介したテクニックを知っていた方もいると思いますが、初めて知った方は記事作成時に使えるタイミングがあれば、ぜひお試しください。
今後も良さげなテクニックを思いついたら追記していきます。



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