WebflowでのSpanタグの使用方法

WebflowでSpanタグってどう使うんだろう？
文章の一部分だけスタイル変更したいときはどうするの？
Rich textで一部分だけスタイルはできないのかな？

今回はこんな疑問に答えていきます｡

✓本記事の内容

この記事を書く私は､WebflowでWebサイト制作を行い
月に30万円ほど収益を上げています｡
またこのブログもWebflowで作成･管理されており､
Rich textを使用してブログを更新しています｡

このような経験を活かし､今回のRich textの使い方を解説していきます｡

WebflowでのSpanタグの使い方

SpanとはHTMLで使用されるタグの名前です｡
文章などで一部分だけ､スタイルの変更をする際に使用します｡

詳しくはサルワカ先生を見てみましょう｡

Webflowでは主にparagraphタグ､Textタグを使った文章で使用可能｡

筆ペンのマークをクリックするとSpanタグを追加することができます｡
Spanを削除するときは1番右の✗Aをクリックしましょう｡

Webflowの｢Rich text｣ではspanが使用できません｡(2022年1月時点)

Paragraphなどで作成した文章とSpanを一緒にコピー＆ペーストして､
Rich textに入れるとRich textにSpanを一時的に追加することはできますが､編集ができなくなります｡

Rich textは便利な機能ですが多様するのは避けたほうが良いかもしれませんね｡

Rich textのBold､Italicizeを使用してスタイルの変更ができます｡

半ば強引なやり方にも感じるかもしれませんが
SEO的に特に問題はないと考えられます｡
なぜならこれらのタグは､HTMLでは以下のようにタグが割り当てられているからです｡

実際に僕がWebflowで作成したブログのHTMLコードを見てみましょう｡

赤字(Bold)にはstrong､黄色のアンダーバー(italic)はemがついていることがわかります｡

それぞれにスタイルを加え､Rich text内での
スタイル変更を行っています｡

strongタグとemタグの違いはSEOラボで簡単に説明されています｡

2つのタグの意味を理解すればSEO的にも問題なく
スタイル変更ができます｡
タグを正しく使うことを意識しましょう

Rich textは便利な機能ですが､クラス名やIDをつけることもできず､
いろいろ試行錯誤することがあります｡

僕のTwitterではそんな僕の試行錯誤を紹介しているので
興味のある方はフォローしてみてください｡

まだWebflowに登録してない方は一度､
登録して触ってみるのがおすすめです｡

少しだけ触ってみて
自分にあったノーコードを選択しましょう

‍