【小技・裏技】WebflowでのSpanタグの使用方法

【小技・裏技】WebflowでのSpanタグの使用方法

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

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

✓本記事の内容

  • WebflowでのSpanタグの使用方法
  • WebflowのRich textではSpanタグが使えない
  • Rich textで一部分のみスタイル変更をする方法

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

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

WebflowでのSpanタグの使い方

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で一部分のみスタイル変更をする方法

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

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

  • Bold=Strongタグ
  • Italicize=emタグ

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

Webflowで作成したブログのHTMLコード

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

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

strongタグとemタグの違い

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

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

まとめ

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

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

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

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

併せて読むとおすすめの記事▼

【2022年最新版】Webflowの使い方を項目別にまとめました

Webflowの使い方で迷っていませんか?本記事ではWebflowの使い方をCMSやリッチテキスト、独自ドメイン、フォントの追加方法など項目別にまとめました。Webflowの使い方で悩むことがある方は必見です。

Read more...
くりたまさと
Masato Kurita

大学卒業後、セブ島とオーストラリアに1年間、語学留学。

現在は、Webflow専門のウェブサイト制作・SNS運用代行、MEO対策などを行っています。

#
Webflow 使い方
アフィリエイト
ご質問ありがとうございます。
確認次第、返信致しますので、
少々お待ち下さい!
エラーが発生致しました。もう一度お試し頂くか、Twitterより連絡ください。