WordPress初歩2-編集画面でのテキストデザイン-
はじめに
WordPressによるBlog記事編集中のメモ。
作業の大まかな流れとしては下の通り。
- ブロック選択
- 色の編集
- タイポグラフィ編集
記事編集および投稿は以下レンタルサーバーでのWordPress環境を使用。
シン・レンタルサーバー![](https://www16.a8.net/0.gif?a8mat=3T8P7I+7KOKM2+CO4+1HLFVM)
![](https://www19.a8.net/0.gif?a8mat=3T8P7I+7KOKM2+CO4+1HMIGH)
各流れについては以降に書いていく。
その他、環境整備に関する新情報。
同系列WordPress特化型レンタルサーバー
WordPress専用クラウド型レンタルサーバー『wpX Speed』![](https://www14.a8.net/0.gif?a8mat=3TCZ0D+AL1GPM+CO4+ZQFQA)
![](https://www18.a8.net/0.gif?a8mat=3TCZ0D+AL1GPM+CO4+ZRXQP)
同系列安定型レンタルサーバー
格安ドメイン名取得サービス『Xserverドメイン』![](https://www14.a8.net/0.gif?a8mat=3TCZ0D+ALMWBE+CO4+15OK2A)
![](https://www19.a8.net/0.gif?a8mat=3TCZ0D+ALMWBE+CO4+15WWZL)
その他キャンペーン中WordPress対応レンタルサーバー
ロリポップ公式サイト![](https://www17.a8.net/0.gif?a8mat=3TCZ0D+AM8BX6+348+64Z8Y)
![](https://www17.a8.net/0.gif?a8mat=3TCZ0D+AM8BX6+348+6E71D)
ドメイン管理に関しては
格安ドメイン名取得サービス『Xserverドメイン』![](https://www19.a8.net/0.gif?a8mat=3TCZ0D+ALMWBE+CO4+15OK2A)
![](https://www13.a8.net/0.gif?a8mat=3TCZ0D+ALMWBE+CO4+15WWZL)
![](https://www18.a8.net/0.gif?a8mat=3TCZ0D+ANF74Q+348+1C1W8I)
![](https://www14.a8.net/0.gif?a8mat=3TCZ0D+ANF74Q+348+1BRTKX)
![](https://www19.a8.net/0.gif?a8mat=3TCZ0D+AMTRIY+50+2HHVNM)
![](https://www17.a8.net/0.gif?a8mat=3TCZ0D+AMTRIY+50+2HTO1D)
WordPress初歩2-編集画面でのテキストデザイン-
ブロック選択
デザイン変更対象のブロックを選択すると右にメニューが表示される。
![ブロック選択でメニュー表示](https://nemunori.com/wp-content/uploads/2023/05/wp_20230512textvisual_500_264.png)
色の編集
ブロックの「色」メニューから以下の部分の変更可能。
- テキスト
- 背景
- リンク
![ブロックメニューの色からテキストや背景などの色を変更できる。](https://nemunori.com/wp-content/uploads/2023/05/wp_20230512textvisual2_500_158.PNG.png)
デフォルトカラーの他カスタムカラーの使用も可。
背景はグラデーション色も選択可。
テキストと背景の組み合わせが読みにくい配色となった場合、WordPress側でアラート表示されるので参考にすると良い。
タイポグラフィ編集
一先ずタイポグラフィの意味は「書式によるデザイン」と思っておけば良さそう。
WordPress編集画面のタイポグラフィにはその為の下記パラメーターが用意されている。
- フォントサイズ
- 外観(フォント?)
- 文字間隔
- 装飾(下線や打ち消し線)
これらでテキストの書式を変更する事ができる。
他にドロップキャップ、大文字小文字もある。
テキストの配置
ブロック選択時に表示されるメニューバーから下記配置に変更可。
- 左寄せ
- 中央寄せ
- 右寄せ
![テキストの配置メニュー](https://nemunori.com/wp-content/uploads/2023/05/wp_20230512textvisual3_417_209.PNG.png)
まとめ
WordPressの記事編集画面でのテキストデザインは、部分的かつ簡易的な変更には向いているが、作り込んだデザインにする場合、特に雑な性分のニートだと難しい印象。多分、編集画面以外に変更方法があると思うので調べておく。
よろしく。