\このブログが役に立ったら/
【SWELL】サイト型カスタマイズで画像ブロックを見出しブロック(h2)に変換する方法
![](https://misaki-web.com/wp-content/uploads/2021/03/8c71e829e578cba5274316b68f84627f.png)
SWELLと言えば「サイト型カスタマイズが簡単にできる!」のが魅力ですよね。実際に「SWELL カスタマイズ」と検索すると、ほとんどがトップページのサイト型カスタマイズ記事です。
いろんな人のサイト型カスタマイズ記事を見ていて、「新着記事」や「おすすめ記事」などの見出しを画像にした時、画像ブロックのまま使っている(見出しタグをつけてない)人が多いなーと感じました。
個人的には、トップページに見出しが全くないと持ち悪いなと思ってしまうので、いつもやっている《画像ブロックを見出しブロックに変換する方法》をご紹介します。
追記:適切な方法を教えていただきました
この記事を書いてツイートした後、Snow Monkey作者のキタジマさん(@inc2734)から、適切な(正しい)方法を教えていただきました!!
ブロックを変換のときに「インライン画像」に変換されてると思うので、見出しブロックにカーソルを合わせてブロックツールバーから「インライン画像」を挿入でもいけるかなと思います。
— キタジマタカシ🐒Snow Monkey 開発者 (@inc2734) March 15, 2021
私の紹介した方法は「画像ブロックをHTMLに変換」→「画像に<h2>を付けて見出しブロックに変換」と言う方法だったのですが、最初から見出しブロックに「インライン画像」を挿入すればOKと教えていただきました!ありがとうございます!!(土下座)
こねくり回さず、もっとシンプルな方法があったようです。「インライン画像」の名前を初めて知ったので、とっても勉強になりました…!!
また、SWELLのコミュニティでお馴染みのつぶさん(@tbshiki)からもアドバイスをいただきました!
こちらは要研究(次の課題)です。ありがとうございます!
ど、どういたしまして!?(; ・`ω・´)
— つぶ (@tbshiki) March 15, 2021
SWELLの場合、標準でLightBoxクラスが当たるので打ち消しできるとよりいいと思いました🙌
と言うわけで、キタジマ先生に教えていただいた方法を早速ご紹介します。
見出しブロックに画像(インライン画像)を挿入する4ステップ
↓デフォルトの見出しは、お馴染みのやつです↓
![新着記事](https://misaki-web.com/wp-content/uploads/2021/03/5df45aacd14c9b0e33ed4797244bdfe5.jpg)
今回は、以下の見出し用の画像を使います。
CANVAで作成しました。(ドネーション素材かわいい)
![New list-新着記事-](https://misaki-web.com/wp-content/uploads/2021/03/36c77fdd35e7325a58f570e59448391d.png)
まずは画像を入れたい場所に、見出しブロックを入れます。文字は空白でOK。
![](https://misaki-web.com/wp-content/uploads/2021/03/54a44dbb2451a76960bce7c91cd359d9.jpg)
![](https://misaki-web.com/wp-content/uploads/2021/03/32c971a234719cd389a3b5aaf4c805ed.jpg)
「インライン画像」をクリックするとメディアページが開くので、入れたい画像を選択します。
代替えテキスト(Altテキスト)も忘れずに入力してください。
![](https://misaki-web.com/wp-content/uploads/2021/03/1908fab31393f38c0ba946c9674a4d38-1024x571.jpg)
画像が挿入できました。デフォルトの見出しスタイルが適用されているので、「セクション用」にして装飾を取っておきましょう。
![](https://misaki-web.com/wp-content/uploads/2021/03/fd2683141544a24d7c89e8649f5c08f9-1024x241.jpg)
セクション用のスタイルを選ばず、「高度な設定」から「追加CSSクラス」を任意で付けてCSS当ててもOKです。
その他のページで下線付きのセクション用タイトルを使っている場合には、自分でクラスを付けた方がいいかも。
画像が小さいので、好きなサイズを入力します。
今回は400pxに設定してみました。
![](https://misaki-web.com/wp-content/uploads/2021/03/221444708c674517479c739d88643ffe.jpg)
![](https://misaki-web.com/wp-content/uploads/2021/03/62353700dfc4c90d8087d36907ce1df1.jpg)
かわいい見出しが完成しました!嬉しい!!
まとめ
もっとスマートなやり方がありそうなのですが、とりあえず簡単な方法を紹介しました。
キタジマさんに教えていただき、適切な方法をご紹介することができました!
「ブロックエディターは簡単な代わりに自由度が低い」なんて思ってましたが、意外と好き勝手できるんですよね。
まだまだ使いこなすには程遠いですが、少しずつ使えるようになると嬉しい!
キタジマさんの作っているテーマ「Snow Monkey」はコチラです。
phpのカスタマイズが必要だったりと少しレベル高めですが、ぜひチャンレンジしてみて欲しいテーマです!(私も持ってます)
【旧】画像ブロックに見出しタグ(h2)をつけて見出しブロックに変換する方法
ここからは古い方(自分のやり方)です。失敗は成功のもとなので、自戒のため残しておきます。
画像ブロック→見出しブロック変換の7ステップ
画像に対して適切なAlt属性を入力するのはとても大切なので、忘れずに入力しておきましょう。
![](https://misaki-web.com/wp-content/uploads/2021/03/8fa94e5ff3ef981993d843bfeddcb773-1024x278.jpg)
![画像ブロックを選択して、三点リーダーをクリック](https://misaki-web.com/wp-content/uploads/2021/03/382e77b1937a787acda2a13f0f9a7ad3.jpg)
![メニューの中から「HTMLとして編集」をクリック](https://misaki-web.com/wp-content/uploads/2021/03/e51ed8b2283343e10b0a815a767d56a6.jpg)
画像ブロックのHTMLが表示されるので、最初と最後を見出しタグ<h2></h2>で挟みます。
(見出し3の時は<h3></h3>)
![出てきたHTMLに<h2>〜</h2>を追記する](https://misaki-web.com/wp-content/uploads/2021/03/a11b4bb3ba448d1fa402ac3dc62cc91f-1024x538.png)
ステップ1でAltの入力を忘れた方は、ここで入力すればOK。
書き終わったら、ブロックの外をクリックします。
![ブロックのエラーが出るので「解決」から「ブロックへ変換」する](https://misaki-web.com/wp-content/uploads/2021/03/c679cb5e64f1f9e738637cf13ed273e6.jpg)
![ブロックのエラーが出るので「解決」から「ブロックへ変換」する](https://misaki-web.com/wp-content/uploads/2021/03/b9e7b3e63e5ec2633712600536ba4a71.jpg)
この時「HTMLに変換」でも問題ないです。「ブロックに変換」を選ぶと、画像がそのまま表示されるようになるので、見やすくて便利ですね。
(「HTMLに変換」を選択しても、勝手に画像に直してくれる時があったりします)
変換された画像は、デフォルトの見出し装飾がついた状態になっています。「セクション用」にして、装飾を取っておきましょう。
![見出しのスタイルを「セクション用」に変更](https://misaki-web.com/wp-content/uploads/2021/03/68cbf42e7bb7360d12ed379342311927-1024x296.jpg)
この時点で見出しに変換されているので「高度な設定」から「追加CSSクラス」を任意で付けてCSS当ててもOKです。
その他のページで下線付きのセクション用タイトルを使っている場合には、自分でクラスを付けた方がいいかも。
画像部分をクリックすると、画像の下に幅の入力欄が出てきます。好きなサイズを入力してください。
![見出し画像の表示幅を入力して完了](https://misaki-web.com/wp-content/uploads/2021/03/eb17e4e5f3e8584e3c81b3b3c12d20c2.jpg)
画像サイズを800×200pxで作ったので、そのままだとちょっと大きいですよね。
400pxにしてみます。
![見出し画像の表示幅を入力して完了](https://misaki-web.com/wp-content/uploads/2021/03/22fb698a05a7d4dad5529c6118da49c0.jpg)
小さくなって、見出しっぽさが出ました。好きな大きさに調節してください。
(クラスをつけた場合は、CSSで指定してもOK)
お気軽にどうぞ!