SWELLのウィジェットエリアが一目で分かるサイトを作りました >>

【SWELL】サイト型カスタマイズで画像ブロックを見出しブロック(h2)に変換する方法

SWELLと言えば「サイト型カスタマイズが簡単にできる!」のが魅力ですよね。実際に「SWELL カスタマイズ」と検索すると、ほとんどがトップページのサイト型カスタマイズ記事です。

いろんな人のサイト型カスタマイズ記事を見ていて、「新着記事」や「おすすめ記事」などの見出しを画像にした時、画像ブロックのまま使っている(見出しタグをつけてない)人が多いなーと感じました。
個人的には、トップページに見出しが全くないと持ち悪いなと思ってしまうので、いつもやっている《画像ブロックを見出しブロックに変換する方法》をご紹介します。

タイトルに【SWELL】と書いてますが、ブロックエディターの標準的な機能なのでSWELL限定機能ではありません。

もくじ

追記:適切な方法を教えていただきました

この記事を書いてツイートした後、Snow Monkey作者のキタジマさん(@inc2734)から、適切な(正しい)方法を教えていただきました!!

私の紹介した方法は「画像ブロックをHTMLに変換」→「画像に<h2>を付けて見出しブロックに変換」と言う方法だったのですが、最初から見出しブロックに「インライン画像」を挿入すればOKと教えていただきました!ありがとうございます!!(土下座)

こねくり回さず、もっとシンプルな方法があったようです。「インライン画像」の名前を初めて知ったので、とっても勉強になりました…!!

また、SWELLのコミュニティでお馴染みのつぶさん(@tbshiki)からもアドバイスをいただきました!
こちらは要研究(次の課題)です。ありがとうございます!

と言うわけで、キタジマ先生に教えていただいた方法を早速ご紹介します。

見出しブロックに画像(インライン画像)を挿入する4ステップ

↓デフォルトの見出しは、お馴染みのやつです↓

新着記事

今回は、以下の見出し用の画像を使います。
CANVAで作成しました。(ドネーション素材かわいい)

New list-新着記事-
STEP
見出しブロックを挿入する

まずは画像を入れたい場所に、見出しブロックを入れます。文字は空白でOK。

STEP
見出しのツールバーの「インライン画像」から、画像を挿入する

「インライン画像」をクリックするとメディアページが開くので、入れたい画像を選択します。
代替えテキスト(Altテキスト)も忘れずに入力してください。

STEP
見出しスタイルを「セクション用」に変更しておく

画像が挿入できました。デフォルトの見出しスタイルが適用されているので、「セクション用」にして装飾を取っておきましょう。

セクション用のスタイルを選ばず、「高度な設定」から「追加CSSクラス」を任意で付けてCSS当ててもOKです。
その他のページで下線付きのセクション用タイトルを使っている場合には、自分でクラスを付けた方がいいかも。

STEP
見出し画像の表示幅を入力して完了

画像が小さいので、好きなサイズを入力します。
今回は400pxに設定してみました。

かわいい見出しが完成しました!嬉しい!!

まとめ

もっとスマートなやり方がありそうなのですが、とりあえず簡単な方法を紹介しました。

キタジマさんに教えていただき、適切な方法をご紹介することができました!

「ブロックエディターは簡単な代わりに自由度が低い」なんて思ってましたが、意外と好き勝手できるんですよね。
まだまだ使いこなすには程遠いですが、少しずつ使えるようになると嬉しい!

キタジマさんの作っているテーマ「Snow Monkey」はコチラです。

phpのカスタマイズが必要だったりと少しレベル高めですが、ぜひチャンレンジしてみて欲しいテーマです!(私も持ってます)

【旧】画像ブロックに見出しタグ(h2)をつけて見出しブロックに変換する方法

ここからは古い方(自分のやり方)です。失敗は成功のもとなので、自戒のため残しておきます。

画像ブロック→見出しブロック変換の7ステップ

STEP
見出しにしたい画像を挿入してAltテキストを入力しておく

画像に対して適切なAlt属性を入力するのはとても大切なので、忘れずに入力しておきましょう。

STEP
画像ブロックを選択して、三点リーダーをクリック
画像ブロックを選択して、三点リーダーをクリック
STEP
メニューの中から「HTMLとして編集」をクリック
メニューの中から「HTMLとして編集」をクリック
STEP
出てきたHTMLに<h2>〜</h2>を追記する

画像ブロックのHTMLが表示されるので、最初と最後を見出しタグ<h2></h2>で挟みます。
(見出し3の時は<h3></h3>)

出てきたHTMLに<h2>〜</h2>を追記する

ステップ1でAltの入力を忘れた方は、ここで入力すればOK。
書き終わったら、ブロックの外をクリックします。

STEP
ブロックのエラーが出るので「解決」から「ブロックへ変換」する
ブロックのエラーが出るので「解決」から「ブロックへ変換」する
ブロックのエラーが出るので「解決」から「ブロックへ変換」する

この時「HTMLに変換」でも問題ないです。「ブロックに変換」を選ぶと、画像がそのまま表示されるようになるので、見やすくて便利ですね。
(「HTMLに変換」を選択しても、勝手に画像に直してくれる時があったりします)

STEP
見出しのスタイルを「セクション用」に変更

変換された画像は、デフォルトの見出し装飾がついた状態になっています。「セクション用」にして、装飾を取っておきましょう。

見出しのスタイルを「セクション用」に変更

この時点で見出しに変換されているので「高度な設定」から「追加CSSクラス」を任意で付けてCSS当ててもOKです。
その他のページで下線付きのセクション用タイトルを使っている場合には、自分でクラスを付けた方がいいかも。

STEP
見出し画像の表示幅を入力して完了

画像部分をクリックすると、画像の下に幅の入力欄が出てきます。好きなサイズを入力してください。

見出し画像の表示幅を入力して完了

画像サイズを800×200pxで作ったので、そのままだとちょっと大きいですよね。
400pxにしてみます。

見出し画像の表示幅を入力して完了

小さくなって、見出しっぽさが出ました。好きな大きさに調節してください。
(クラスをつけた場合は、CSSで指定してもOK)

上手くいったらシェアしてね!
  • URL Copied!

お気軽にどうぞ!

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

もくじ
閉じる