ワードプレステーマ《SWELL》の＜ステップ＞ブロックですが、タイトルに何らかの装飾をかけると改行されてしまいます。
そこで改行されずに装飾をかけるやり方をご紹介します。
やり方
下のようなサンプルを用意してみました。
ここでSTEP1タイトル内の「（参加者全員）」の文字サイズを少し小さめに、STEP2タイトル内の「筆記」という文字を赤色に変えてみます。すると装飾をかけたところから改行されてしまいました。
この改行を無効化するべく、下のような独自スタイルを『追加CSS』もしくは子テーマの『style.css』に書き込んでみます。
.swell-block-step__title {
white-space: nowrap!important;
display: inline-block!important;
}独自スタイルを追加する5つのやり方
独自スタイルを追加するには複数のやり方があります。
- 1.テーマ付属のスタイル
-
ワードプレス管理画面の＜外観＞→＜テーマファイルエディター＞で表示される編集画面（style.css）に直接加筆するやり方です。
ただしこのやり方はテーマファイル本体への書き込みになるので危険度は”高”です。コーディングに詳しい方以外は触らない方が無難です。
またテーマがアップデートされると追加した独自スタイルは消去されてしまうため再度書き込む必要もあります。いずれにしてもこのやり方は非推奨です。
- 子テーマのスタイルシート
-
子テーマが用意されてるテーマなら子テーマ内のstyle.cssに書き込むというやり方もあります。こちらは前項と同じstyle.cssですが、テーマのアップデートによって内容が消えることはありません。
もしもテーマ付属のマニュアルを見てもわからないという方はやはり触らない方が無難です。また（独自）スタイルは一文字でも書き方を間違えるとレイアウト崩れが起きたり表示されないなどの弊害が起きる可能性もあるので注意は必要です。
なおそこに加筆したスタイルは全ページに適用されます。
- 3.追加CSS
-
テーマによっては管理画面の＜外観＞→＜カスタマイズ＞を開くと《追加CSS》という項目が表示されます。そこに追加した独自スタイルはテーマのアップデートでも消えることはありません。
また追加スタイルは前項と同じく全ページに適用されるので、広範囲で利用可能な独自スタイルを追記する際に使うと便利です。
- 4.プラグイン
-
《追加CSS》機能がない（or 見つからない）テーマや独自スタイルをわかりやすく管理したいという場合は「Simple Custom CSS and JS」や「Simple Custom CSS」などの無料プラグインを使うというやり方もあります。
Code snippetsという、PHP（function.php）やCSSを子テーマなしに簡単に追加や管理ができる超便利なプラグインもあります。ただし無料版はPHPとHTMLは使えますがスクリプトやCSSなどは有料版でないと使えないという制限があるので使いどころが難しいです。価格もそれなりに高いです。
- 5.カスタムCSS＆JS
-
テーマ《SWELL》であれば《カスタムCSS＆JS》を使うやり方もあります。
通常は編集画面下部にあるのでそこの『CSS用コード』内に書き込みます。
もしも表示されない場合は右上の《縦三点リーダー（オプション）》→『設定』→『一般』タブ→「カスタムCSS & JS」のチェックがOFFになってる可能性があるのでそこをONにします。
なお《カスタムCSS＆JS》に書き込んだ追加スタイルや追加スクリプトはそのページにのみ適用されるものでほかのページは適用外になります。
そのため汎用的に使う独自スタイルであれば2.の子テーマのstyle.cssか3.の《追加CSS》に書き込んだ方が効率的です。
反対に適用したいページが少ない場合は《カスタムCSS＆JS》に書き込むことで他ページへの余計な干渉を防ぐことができます。
その結果、下のように改行なしで表示されるようになりました。
（画像ではなく実際の表示です）
最初に健康診断を受けていただきます。
続いて筆記試験を行います。
合格者には…
【ワードプレス 7.0.2＆SWELL 2.17で動作検証済】
コメント