- Spanタグとは
- Spanタグとは、HTMLで使用されるタグの名前で、文章などで一部分だけスタイルの変更をする際に使用するものです。WebflowではParagraphタグ・Textタグを使った文章で使用可能です。
WebflowでSpanタグってどう使うんだろう？
文章の一部分だけスタイル変更したいときはどうするの？
Rich textで一部分だけスタイルはできないのかな？
今回はこんな疑問に答えていきます｡
✓本記事の内容
- WebflowでのSpanタグの使用方法
- WebflowのRich textではSpanタグが使えない
- Rich textで一部分のみスタイル変更をする方法
この記事を書く私は､WebflowでWebサイト制作を行い
月に30万円ほど収益を上げています｡
またこのブログもWebflowで作成･管理されており､
Rich textを使用してブログを更新しています｡
このような経験を活かし､今回のRich textの使い方を解説していきます｡
WebflowでのSpanタグの使い方
そもそもSpanとは？
SpanとはHTMLで使用されるタグの名前です｡
文章などで一部分だけ､スタイルの変更をする際に使用します｡
詳しくはサルワカ先生を見てみましょう｡
paragraphタグ､Textタグで使用可能
Webflowでは主にparagraphタグ､Textタグを使った文章で使用可能｡
筆ペンのマークをクリックするとSpanタグを追加することができます｡
Spanを削除するときは1番右の✗Aをクリックしましょう｡
Rich textではSpanタグが使えません｡
Webflowの｢Rich text｣ではspanが使用できません｡(2022年1月時点)
Paragraphなどで作成した文章とSpanを一緒にコピー＆ペーストして､
Rich textに入れるとRich textにSpanを一時的に追加することはできますが､編集ができなくなります｡
Rich textは便利な機能ですが多用するのは避けたほうが良いかもしれませんね｡
Rich textで一部分のみスタイル変更をする方法
Rich textのBold､Italicizeを使用してスタイルの変更ができます｡
半ば強引なやり方にも感じるかもしれませんが
SEO的に特に問題はないと考えられます｡
なぜならこれらのタグは､HTMLでは以下のようにタグが割り当てられているからです｡
- Bold=Strongタグ
- Italicize=emタグ
実際に僕がWebflowで作成したブログのHTMLコードを見てみましょう｡
赤字(Bold)にはstrong､黄色のアンダーバー(italic)はemがついていることがわかります｡
それぞれにスタイルを加え､Rich text内での
スタイル変更を行っています｡
strongタグとemタグの違い
strongタグとemタグの違いはSEOラボで簡単に説明されています｡
2つのタグの意味を理解すればSEO的にも問題なく
スタイル変更ができます｡
タグを正しく使うことを意識しましょう
まとめ
Rich textは便利な機能ですが､クラス名やIDをつけることもできず､
いろいろ試行錯誤することがあります｡
僕のTwitterではそんな僕の試行錯誤を紹介しているので
興味のある方はフォローしてみてください｡
まだWebflowに登録してない方は一度､
登録して触ってみるのがおすすめです｡
少しだけ触ってみて
自分にあったノーコードを選択しましょう
よくある質問
WebflowのRich textでSpanタグは使えますか？
使用できません（2022年1月時点）。Paragraphなどで作成した文章とSpanを一緒にコピー＆ペーストすると一時的に追加できますが、編集ができなくなります。
WebflowでSpanタグを追加するにはどうすればいいですか？
ParagraphタグやTextタグを使った文章で使用できます。筆ペンのマークをクリックするとSpanタグを追加でき、削除するときは一番右の✗Aをクリックします。
Rich textで一部分だけスタイルを変更するにはどうすればいいですか？
Rich textのBold・Italicizeを使用してスタイル変更ができます。HTMLではBoldにstrongタグ、Italicizeにemタグが割り当てられているため、2つのタグの意味を理解して使えばSEO的にも問題なく変更できます。
