WebflowでのSpanタグの使用方法

WebflowでのSpanタグの使い方

そもそもSpanとは？

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

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

• divとspanの違いは？使い分け方を初心者向けに解説

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ラボで簡単に説明されています｡

• emタグとは？HTMLでの使い方とSEO効果について

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

まとめ

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

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

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

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

情報追加はツイッターで告知します。

Webflowの最新情報や使い方は新しくなる度に更新していく予定です。

情報の更新や便利な使い方はツイッターでつぶやきます！

是非フォローお願いします！