MENU
  • システマ
  • KT法
  • 論理的思考
  • 食品宅配・セール情報
  • ブログ運営
  • 雑記
  • サイトマップ
  • このブログについて
検索
システマ、KT法、論理的思考、食品宅配・セール情報、ブログ運営
いりやんブログ
  • システマ
  • KT法
  • 論理的思考
  • 食品宅配・セール情報
  • ブログ運営
  • 雑記
  • サイトマップ
  • このブログについて
いりやんブログ
  • システマ
  • KT法
  • 論理的思考
  • 食品宅配・セール情報
  • ブログ運営
  • 雑記
  • サイトマップ
  • このブログについて
  1. ホーム
  2. ブログ運営
  3. 【SWELL 2.7.3対応】アイコンの一覧:アイコンの使い方、使いどころ(隠しアイコンも)

【SWELL 2.7.3対応】アイコンの一覧:アイコンの使い方、使いどころ(隠しアイコンも)

2023 2/04
ブログ運営
2022-12-16 2023-02-04

※ SWELL 2.7.3 でアイコンが一新しました。

SWELLで使えるアイコンを紹介します。

高速化を実現するためにSWELLは独自のアイコンをフォントとして持ってます。
アイコンを使うと見栄えがよくなります。
読者の目を止めたり、使い方によっては読者の視点をコントロールすることができます。

積極的に使うことをおすすめします。

この記事では次の内容について説明します。

この記事の内容:

  1. .アイコンの使いどころ
  2. .アイコンの一覧
  3. .アイコンの設置や変更のしかた
  4. .隠しアイコンなど、その他の使えるアイコンの紹介

ぜひ最後まで、見ていってください。

\ 一覧を見たい方はこちら /

▼ SWELLアイコンの一覧にジャンプ

(スポンサーリンク)

タップできる目次

アイコンの使いどころ:アイキャッチとして使おう

アイコンを記事内に置くと記事が引き締まります。記事の見栄えがよくなるのでおすすめです。
私は「アイコンはアイキャッチ」と思って使っています。

記事内のアイキャッチ

アイコンがあると、そこで目が止まりませんか?アイコンは手軽なアイキャッチだと思います。要所要所で使えば、読者の目を止めることができます。

私も記事のあちこちにアイコンを置いてます。

注意喚起のアイキャッチ

ちょっと横道にそれる1行を書くとき、注意喚起のための段落を書くとき。基本的に私は背景色を変えるのですが、アイコンを置くときもあります。

重要な点、注意してほしいことを書いているからですね。

目に止まって読んでもらえれば、万々歳ですから。

疑似見出しや項目名のアイキャッチ

見出しにするまでもないけど、項目名と説明のコンビを置きたいとき。ただ太字だと目立たないため、見出しの役目を果たせないときがあります。

文字サイズを大きくしてもいいんですが、そうすると他との兼ね合いでページデザインがおかしくなることも多いのでやりたくありません。

そういうときは以前は一行だけのリストにしていたんですが、最近はアイコンを置くことにしています。
たとえば以下のような感じです。

疑似見出しの例

かくかくじかじか。説明、説明、説明。

アイコンを置くことで、見出しのような役割をしてもらえます。

項目リストは使うとパフォーマンスが下がるので、使わないようにしてます。

ボックスのアイキャッチ

ボックスのタイトルにアイコンを置くとアイキャッチになります。

私はSWELLではボックスの代わりに「ボーダー設定」をよく使うので重宝してます。

まぁ、最初からタイトル付きのボックスを使えばいいのですが・・・。

ボックスのタイトル例

ボックス内の説明・・・。

疑似リストアイコン

リストを使わず、「・」をつかって段落でリストを作る人がいますが、点だけでは味気ないです。

そういうときはリストアイコンを変更してみましょう。
アイコンのショートコードでリストを作ることができます。

私はテーマのリストアイコンが「内容に合わない」と思ったとき、ショートコードのリストアイコンにすることがあります。

リストはリストタグで作ったほうがいいのでおすすめはしませんが、そういう使い方もあります。
(CSSで作ればいいと思います)

疑似リストアイコンの例:
リスト項目の例
リスト項目の例
リスト項目の例

SWELLアイコンの一覧

普通に使える標準アイコンと、隠しアイコン(こっちも普通に使えます)があります。

標準アイコン

SWELLの標準アイコンです。
メニューからショートコードを挿入して、XXXXの部分に使いたいアイコンのクラスをコピペするだけで使えます。

アイコンクラスアイコンクラス
icon-caret-downicon-caret-left
icon-caret-righticon-caret-up
icon-chevron-downicon-chevron-left
icon-chevron-righticon-chevron-up
icon-homeicon-tag
icon-foldericon-file-empty
icon-bubbleicon-bubbles
icon-eyeicon-link
icon-shareicon-film
icon-imageicon-heart
icon-star-emptyicon-star-full
icon-star-halficon-blocked
icon-infoicon-info-fill
icon-alert-outlineicon-alert
icon-modifiedicon-posted
icon-settingsicon-download
icon-lock-openicon-lock-closed
icon-personicon-mail
icon-carticon-phone
icon-penicon-quill
icon-flagicon-bookmark
icon-bookicon-megaphone
icon-thumb_downicon-thumb_up
icon-light-bulbicon-light-bulb-fill
icon-circleicon-x
icon-triangleicon-check
icon-hatenaicon-minus
icon-plusicon-toc
icon-searchicon-close-thin
icon-menu-thinicon-more_arrow
icon-swellicon-tiktok
icon-roomicon-amazon
icon-codepenicon-facebook
icon-feedlyicon-github
icon-hatebuicon-instagram
icon-lineicon-medium
icon-pinteresticon-pocket
icon-rssicon-tumblr
icon-twittericon-wordpress
icon-youtube
SWELL 2.7.3 以前の旧アイコンリスト

SWELL 2.7.3 以前のアイコンです。表示されない部分は 2.7.3 では廃棄されたアイコンです。

アイコンクラスアイコンクラス
icon-amazonicon-pinterest
icon-codepenicon-pocket
icon-facebookicon-rss
icon-feedlyicon-tumblr
icon-githubicon-twitter
icon-googleplusicon-wordpress
icon-hatebuicon-youtube
icon-instagramicon-swell
icon-lineicon-medium
icon-phoneicon-info
icon-light-bulbicon-cart
icon-thumb_downicon-thumb_up
icon-personicon-mail
icon-downloadicon-megaphone
icon-penicon-more_arrow
icon-batsuicon-check
icon-postedicon-modified
icon-searchicon-close-thin
icon-menu-thinicon-alert
icon-hatenaicon-index
icon-arrow_drop_downicon-arrow_drop_up
icon-flagicon-settings
icon-chevron-small-downicon-chevron-small-left
icon-chevron-small-righticon-chevron-small-up
icon-bookicon-minus
icon-plusicon-lock-closed
icon-lock-openicon-share
icon-homeicon-quill
icon-booksicon-file-empty
icon-file-text2icon-file-picture
icon-file-musicicon-file-video
icon-file-zipicon-folder
icon-price-tagicon-bubble
icon-bubblesicon-quotes-left
icon-quotes-righticon-link
icon-attachmenticon-eye
icon-bookmarksicon-star-empty
icon-star-halficon-star-full
icon-hearticon-blocked
SWELLアイコン

隠しアイコン

SWELLには隠しアイコンもあります。
公式には発表されていないので、知らないうちに使えなくなることもあるので、注意が必要です。
SWELL 2.7.3 でかなり削除されました。

使い方は、同じです。

アイコンクラスアイコンクラス
icon-clipboard-copyicon-clipboard-copied
icon-roomicon-circle
icon-border_coloricon-film
icon-headphonesicon-image
SWELL の隠しアイコン

SWELLアイコンの挿入・設定のしかた

メニューから挿入する

ショートコードの手書きでも出来ますが、メニューから「アイコン」を選択します。

すると次のショートコードが記事内に挿入されます。

[icon class="XXXX"] 

XXXXの部分にクラスをコピペするだけで、アイコンを置くことができます。

色・大きさの変更

アイコンの色・大きさの変更は、文字の色・大きさの変更と同じです。
アイコンを選択状態にして、メニューのハイライト、もしくはフォントサイズを変更すれば変更できます。

例:次のような記述をします。

次のように表示されます。

アイコンの大きさ設定

アイコンの色設定

SWELLアイコンのサイズも fa-2x を右に追加して変更できるとする情報もありますが、確認したところサイズは変更されないようです。

SWELLアイコンの使える場所

記事内のアイキャッチとして使う方法は、上に書きました。ここでは普通にパーツに使う方法を紹介します。

SWELLボタン

SWELLボタンの中にSWELLアイコンを設置することができます。Font Awesomeアイコンを使うこともできます。

ボタンを選択して、画面右の設定パネルの「アイコン選択」から選択して、設置します。

ヘッダーメニュー(ブローバルナビ)、フッターメニュー

メニューの項目にSWELLアイコンを置くことができます。直接ショートコードをメニューのラベルに書く形になります。

アイコンを追加する

SWELLは、付属のアイコン以外のアイコンも使えます。

SWELLで「Font Awesome」アイコンを使う方法

SWELLはデフォルトで「Font Awesome」は読み込まない設定になっています。
使うためには設定を変更する必要があります。使い方はSWELLアイコンと同じです。

Font Awesome を読み込むように設定する

「SWELL設定」の「Font Awesome」で、「CSSで読み込む」か「JSで読み込む」を選択して保存します。

Font Awesomeの使い方

SWELLアイコンと同じように挿入して、Font Awesome から使いたいアイコンのクラスをコピペすれば使えます。

例:次のように書きます。

  [icon class="fas fa-apple-alt"] これはりんごです。

すると以下のように表示されます。

SWELLアイコンの追加

「マニュオン」管理者のsuyaさんが、SWELLで使えるアイコンを公開しています。
子テーマをダウンロードして置き換えることで、追加アイコンを使うことが出来るようになります。

詳細は、次のリンクを参照してください。

SWELL子テーマ「SWELL PLUS」で機能拡張【アイコン、目次ハイライト】
》https://manuon.com/demo/swell/swell_plus/

まとめ

この記事では次の内容について説明しました。

この記事の内容:

  1. .アイコンの使いどころ
  2. .アイコンの一覧
  3. .アイコンの設置や変更のしかた
  4. .隠しアイコンなど、その他の使えるアイコンの紹介

アイコンを効果的に使うと、検索順位も上がります。わかりやすく、ユーザーフレンドリーになるからです。

どんどん使い、使い方に慣れていきましょう。

ブログ運営
ブログ運営 ワードプレス
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • ブログを始めるコスト:初期費用と維持費はどれくらい?
  • 【国内シェアNo.1】ブログならエックスサーバーがおすすめ。その5つの理由

この記事を書いた人

いりやんのアバター いりやん

本業は外資系 IT エンジニアでお客様の問題解決を20年くらいやってます。趣味はロシア武術システマと投資をぼちぼち。

関連記事

  • 【国内シェアNo.1】ブログならエックスサーバーがおすすめ。その5つの理由
    2023-01-11
  • ブログを始めるコスト:初期費用と維持費はどれくらい?
    2022-12-06
  • ブログ開設に必要なもの。無料ツールを使ってコストを下げよう
    2022-12-06
  • ブログ執筆に使っているツール・無料アプリの紹介
    2022-12-01
  • ブログのバックアップはプラグインではなく、自動バックアップを使おう
    2022-11-19
  • Be-Stockさんで、中古のノートPC Thinkpad X1 Carbon を購入しました
    2022-11-14
  • 【2022年4月】中古ThinkPad X1 Carbon 2016をレビュー!軽くて丈夫で、仕事にも十分な性能
    2022-01-22
カテゴリー
  • KT法 (6)
  • システマ (29)
  • ブログ運営 (8)
  • 論理的思考 (11)
  • 雑記 (11)
  • 食品宅配・セール情報 (7)
関連ブログ

STORK19特化ブログ

いりやんSTORK19覚え書

独学で英語を上達させるブログ

だまって英語ドットコム

プロフィール

いりやん


外資系大手IT企業にて国内・海外向けのITテクニカルサポート業務をしています。

システマやったり、英語やったり

● 英語独学ブログをやってます→ だまって英語ブログ



読みたいところから読む
タグ
Amazon (2) PC・ガジェット (3) ウェビナー (8) オイシックス (4) セール情報 (3) ブログ運営 (5) マネーリテラシー (4) ミカエル (4) レンタルサーバー (2) ワードプレス (6) 一人練習 (1) 宅配 (1) 思考法・発想法 (1) 論理的思考 (9) 資産運用 (3)
  • ホーム
  • プライバシーポリシー
  • お問い合わせ

© いりやんブログ.

タップできる目次