MENU

PrivacyPolicy｜Contact｜Profile

SWELLのアイコン付きBOXを自作するカスタマイズ！自分好みのデザインにする方法

SWELL
SWELLのアイコン付きBOXを自作するカスタマイズ！自分好みのデザインにする方法

SWELLのアイコン付きBOXは色や大きさを変える事はできますが、アイコンが変えられなかった。
調べても出てこなかったので、自作する事にしました。

とは言え、この見せ方も良いと思いましたので、かなりSWELL寄りにカスタマイズしてみました。

CSSでの設定なのでSWELLだけでなく、他のテーマでも使用できると思います。

Contents

SWELLのアイコン付きBOX

SWELLのアイコン付きBOXはディフォルトで以下のようなもの揃っています。

SWELLのアイコン付きBOXの種類

GOOD！（グッド）

BAD！（バッド）

INFO（インフォ）

ANNOUNCE（アナウンス）

PEN（ペン）

BOOK（ブック）

これらのアイコン付きBOXは、テキストの色や大きさ、背景色などは変更可能です。
ただ、どうしてもアイコンを変えたり、この他の使用にするのが分かりませんでした。
そこで、自作してみようと思った次第です。

自作のアイコン付きBOX

当サイトでは「fontawesome」を使用していません。
軽量化の為に、使用しないフォントを読み込むのを防いでいるからです。

しかし、一部で使用したい事もありますので、その場合は各ページで読み込むようにしています。
ただ、今回の場合は、ほとんど全ページで使用するものなので、アイコンに関してはSVGを当て込んでいます。

SVGのアイコンを使用する事で、fontawesomeからJSを読み込む必要はありません。
更に、サーバー内に置いたとしてもJSを使用するので結局は同じ事になります。

その為、頻繁に表示させる「アイコン付きBOX」で使用するアイコンはSVGで使用する事にしました。

自作のアイコン付きBOX見本

以下がカスタマイズしたSWELL風アイコン付きBOXです。
当サイトで使用するものは限られていますが、元々はメインのサイト用に作成しました。

いずれもアイコンはSWELLのアイコンより小さめに作っています。
スマホで展開した時にあまり大きくても野暮ったいかも？と思ったので小さめです。
PCとタブレット・スマホと出し分けても良かったのですが、そこまでする必要もないと思い現在この大きさです。

自作のアイコン付きBOX作成方法

私の備忘録も兼ねて
ここでは、カスタマイズしたアイコン付きBOXのCSSへの記載及び呼び出しコードを記載しておきます。

自作のアイコン付きBOX作成の手順

まずは順を追って解説いたします。

STEP
fontawesomeからアイコンをダウンロード

fontawesomeで使用するアイコンをSVGでダウンロードします。
アイコンの右上などにコードのコピーやダウンロードのアイコンがあるはずです。

STEP
wordpressにアップロード

ダウンロードしたSVGのアイコンをアップロードします。
通常のメディアアップロードと同じです。
ただし、SVGがアップロードできる環境でない場合は、プラグインが必要です。
「Safe SVG」などのプラグインを使用するとアップロードできます。

STEP
CSSコードと呼び出しコードの作成

作成したCSSコードは、追加CSSなどに記載します。
呼び出しコードはページ内でカスタムHTML内に記載します。

CSSコード

CSSコードは少し特徴があります。
それはダウンロードした画像のURLを記載しなければならない事。

/* =================================
   SWELL風 アイコン付きボックス（枠線なし版）
================================= */
.◯◯◯◯◯◯◯◯◯◯ {
  position: relative;
  padding: 1em 1.2em 1em 4.5em; 
  margin: 1.4em 0;
  border-radius: 6px;
  font-size: 0.95em;
  line-height: 1.8;
  /* 周囲のボーダーを削除 */
  border: none !important; 
  background: #f7f7f7;
}

/* ===== アイコン配置（共通設定） ===== */
.◯◯◯◯◯◯◯◯◯◯::before {
  content: "" !important; 
  position: absolute !important;
  top: 50% !important;
  left: 1.8em !important; 
  transform: translate(-50%, -50%) !important;
  
  width: 1.6em !important; 
  height: 1.6em !important;
  
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  
  display: block !important;
  z-index: 2 !important;
}

/* ===== 縦ボーダー（アイコン横の線は維持） ===== */
.◯◯◯◯◯◯◯◯◯◯:after {
  content: "" !important;
  position: absolute !important;
  top: 12% !important;
  bottom: 12% !important;
  left: 3.4em !important;
  width: 1px !important;
  opacity: 0.3 !important;
  display: block !important;
}

コード内の「◯◯◯◯◯◯◯◯◯◯」に好きな名称を英数字で記入。

各アイコン付きBOXの記載

/* ===============================
   info
=============================== */
.◯◯◯◯◯◯◯◯◯◯.is-info {
  background: #edf3ff !important;
  border-color: #5A79BA !important;
}
.swell-like-box.is-info::before {
  -webkit-mask-image: url("●●●●●●●●●●●●●") !important;
  mask-image: url("●●●●●●●●●●●●●) !important;
  background-color: #5A79BA !important; 
}
.◯◯◯◯◯◯◯◯◯◯.is-info::after {
  background: #5A79BA !important;
}

コード内の「◯◯◯◯◯◯◯◯◯◯」は同じ名称を記入。
「.◯◯◯◯◯◯◯◯◯◯.is-info」の「is-info」も好きなものに変更します。
ここでは「is-info」にしていますが単純に「info」だけでも良い。

「●●●●●●●●●●●●●」にはSVGのURLが入ります。
メディアからSVGのURLをコピーしてペーストします。

その他は色の変更のみです。「#5A79BA」を好きな色に変更します。

呼び出しコード

各アイコン付きBOXの呼び出しコードは下記になります。
カスタムHTML内に記載します。

<div class="◯◯◯◯◯◯◯◯◯◯">
<strong>内容をここに書きます。</strong>
</div>

私の呼び出しコードは
<div class=”swell-like-box is-good“>なら「swell-like-box is-good」という名前にしています。
「◯◯◯◯◯◯◯◯◯◯」の部分ですが、ここは好きに自作します。

記載文字を太くしない場合は「<strong></strong>」を消せば良いだけ。
改行する時は「<br>」を記入します。
ただ、難点はカスタムHTMLに記載しないとダメです。

エディター画面で表示する事も可能ですが、SWELLの中をいじる事になるのでやめました。
オリジナルのファイルを作っても良いのですが、エディターの画面が崩れる事もあるので我慢。

自作アイコン付きBOXのメリット・デメリット

自作のアイコン付きBOXにはメリットもデメリットもあります。

自作アイコン付きBOXのメリット

  1. 自作のアイコン付きBOXのメリットは、好きなアイコンとカラーを自由に作成できる事です。
  2. fontawesomeを使用していますが、外部からの読み込みが必要ないので、表示にストレスが無い。
  3. SVGを使用しているので軽量化できる。

上記の事がメリットとして挙げられます。

自作アイコン付きBOXのデメリット

  1. カスタムHTMLへの記載なので、エディターではカラーなどが確認できない。
  2. <strong></strong>・<br>などのコード挿入が必要だと、執筆時手間が掛かる。

上記の事がデメリットとして挙げられます。

自作アイコン付きBOX まとめ

SWELLで事足りるようであれば必要はありませんね。
この自作のアイコン付きBOXは、テーマがSWELLである必要はないので、どのテーマでも使用できるはずです。
ただ、SWELLに寄せてみたというだけですので、このようなアイコン付きBOXは探せばいくらでも出てきます。

アイコンをSVGにしているという点が特殊ではあるような気がします。
fontawesomeを読み込まないという点で、かなり軽量化できています。

SWELL
アイコン カスタマイズ
Contents