SWELLセクション用見出しをカスタマイズ!Font Awesomeを使って見出しにアイコンを付ける方法

  • URLをコピーしました!

セクション用見出し」とは、通常の見出しとは別の、以下のようなシンプルなデザインの見出しのことです。

https://swell-theme.com/function/3569/ より引用
通常の見出し

通常の見出しだと上記の様になります。設定によって異なる場合があります。

セクション用見出し

セクション用見出しにすると上記のようにシンプルな見出しになります。更にFont Awesomeのアイコンを利用する事で更に特徴的にすることができます。

Font Awesomeのアイコンを利用する事で見出しをお洒落にすることが出来ます。

セクション用見出しをうまく利用して他のブログと差別化する事が出来ます。

目次

セクション用見出しの使い方

見出しブロック→スタイルをデフォルトからセクション用に変更してください。更にサブタイトルを使いたい場合は、

サブタイトルにしたい部分をドラック→SWELL装飾→注釈を選択すると

こんな感じになります。

Font Awesomeを使ってカスタマイズ

注釈をした画面から一番右の詳細設定→HTMLとして編集

この様な画面が出るはずなので、<h2~~~~>〇〇〇見出しと<small~~~~~></h2>〇〇〇の所にFont Awesomeのコードを入れると、

この様に見出しにアイコンを入れることが出来ます。

Font Awesomeのアイコンを利用する場合にはCSSで読み込めるように設定する必要があります。

こちらの記事に詳しい設定方法が書いてありますのでチェックしてください。

あわせて読みたい
【SWELL】グローバルナビ(ヘッダーメニュー)にアイコンを入れてブログをおしゃれにしよう!【Font Awe... アイコンがあると一気におしゃれになりますね! 今回、自分がやっている方法はSWELLで「Font Awesome」を使っています。 なるべくわかりやすく解説していきます。 SWELL...

私の場合は固定ページに使用しています。とっても見やすくお洒落になります。

関連記事

WordPressテーマSWELLを使ったブログ・WEBサイトをご紹介しています。被リンク効果もありますので、SEOにも影響するかも?是非お問い合わせください。Twitterからでも大丈夫です。

あわせて読みたい
SWELLを利用するブログ・WEBサイト一覧、リンク集【随時募集】 WordPressテーマSWELLを使ったブログ・WEBサイトをご紹介。 掲載、修正、消去等のご希望はお問い合わせorTwitterにてお願いします。 歯科治療とカフェ巡りについてブロ...

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

あなたの生活をプラスにします。ポイ活(楽天経済圏)、格安SIM、資産運用、お金に関する事や医療・福祉の資格を活かした情報などをSNSやブログで幅広く発信しています。

目次