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専門家として事業を行っている栗田自身が実際に使用し、便利だと感じたWebflowの使い方を共有します。またノマドライフや、事業計画、経験と過程について発信しています。これは僕からあなたへの手紙です。ここでしか贈らない言葉があります。愛すべきあなたへ届きますように。