登録されてないSVGアイコンを使いたい時のやり方です

WordPressテーマ「SWELL」や「Arkhe」は人気の高いテーマです。このポートフォリオサイトでも「SWELL」を使用しています。

今回は、「SWELL」や「Arkhe」のテーマに未登録のSVGアイコンを登録する手順を初心者にもわかりやすく解説します。

登録済みのアイコンの使い方

「SWELL」や「Arkhe」のテーマでは、投稿記事中に「ブロックツールバー」上の笑顔アイコンからあらかじめ登録されたアイコンを呼び出せます。この機能、とても便利です！

よく使うSNSアイコン

SNSアイコンを挿入したい時、下記のようなfacebook,Instagram,YouTubeなどのアイコンはあらかじめ登録されています。

なぜSVGアイコンを登録するの？

登録されていないアイコンを使用したい時、自分でSVGコードを入力して登録することができます。例えば、「Arkhe」にはX（旧Twitter）のアイコンの登録がありません。その場合、SVGタグを登録すれば使用することができます。

SVGアイコンを使う方法

STEP

Xの公式ブランドページから、svgコードをダウンロードします。

 Xブランドツールキットのページ

STEP

ダウンロードして解凍したフォルダの中の「logo.svg」をお使いのコードエディタで開いて、コピーしておきます。

STEP

svgコードを貼り付ける

<svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
</svg>

このコードを「ブロックツールバー」の笑顔アイコンから表示されるポップアップ「アイコンを選択」画面の下部に貼り付けます（赤枠）。貼り付けたら「決定」ボタンを押します。

STEP

Xのアイコンが表示されました！

 

注意点

• SVGのコードは信頼できるソースから取得しましょう（セキュリティ上の理由）。
• 複雑なSVGはコードが長くなるので、必要に応じて整形・圧縮を。

まとめ

「Arkhe」や「SWELL」テーマでオリジナルSVGアイコンを登録して使う方法をご紹介しました。登録されてないご希望のアイコンで、ぜひ試してみてください！

フォームの送信ボタンの色を変えたい！

Yum-designのお問い合わせフォームでは、Snow Monkey FormsというWordPressのプラグインを使用しています（2024年8月現在）。

Snow Monkey Formsには確認画面・完了画面も、入力（１）ー確認（２）ー完了（３）のステップバーも付いていて、短時間でWordPressにフォームを導入したい場合、使い勝手が良いです。

が、標準でついている送信ボタンの見た目があまり目立たないので、cssを追加して変更してみました。

カスタマイズ後の見た目

変更後のデザインはこちらです。

cssの追加場所

WordPressテーマ「SWELL」では、カスタマイザーの中にcssを追加できる場所があります。

css追加のポイント

ブラウザの検証ツールでボタンのクラス名を確認します。

確認すると、送信ボタンに設定されているクラス名は「.smf-action .smf-button-control__control」ということがわかります。入力画面内の「確認画面へ」ボタンと確認画面の「戻る」ボタン・「送信する」ボタンの全てに同じクラス名がついています。

そのためクラス名だけで指定すると、それらのボタンが全て同じ色・デザインになってしまいます。「戻る」ボタンはあまり目立たせたくないため、デザインを変えたいところです。

【対応策】クラス名に属性を追加する

それぞれのボタンには属性（data-action）がついているので、属性と共にcssを指定します。

ボタンごとの属性はこちらです。

• 入力画面「確認画面へ」ボタンは[data-action=”confirm”]
• 確認画面「戻る」ボタンは[data-action=”back”]
• 確認画面「送信する」ボタンは[data-action=”complete”]

「確認画面へ」と「送信する」ボタンのcss

「確認画面へ」と「送信する」ボタンは同じデザインにしたいため、下記のように指定しました。
※色や形・paddingなど、WEBサイトのデザインに合わせてお好みのものを指定してください。

.smf-action .smf-button-control__control[data-action="confirm"],
.smf-action .smf-button-control__control[data-action="complete"] {
	background: rgb(0, 215, 183);
       background: linear-gradient(110deg, rgba(0, 215, 183, 1) 20%, rgba(0, 181, 215, 1) 100%);
	color:white;
	border-radius:30px;
	border:none;
	padding:10px 80px;
}

「戻る」ボタンのcss

戻るボタンは目立たなくするため、形は同じで色をグレーに、小さめサイズに指定しました。

.smf-action .smf-button-control__control[data-action="back"] {
	border-radius:30px;
	padding:10px 40px;
	margin-bottom:1em;
}

css追加後の表示

css追加後の表示はこのように、「戻る」ボタンが目立たず、「確認画面へ」と「送信する」ボタンが目立つ表示になりました。

実際の表示はこちらです。→Yum-designお問い合わせページ

「SWELL」内の追加cssで注意すること

最初追加cssが反映されず、困ったのですが、どうやら「SWELL」では追加css内にコメントを書くとエラーになるそうです。できれば備忘録としてどのパーツのcssかを書いておきたいのですが、仕方がないですね。

/* こんな風にコメントを入れるとエラーになる */

まとめ

標準で確認画面・完了画面やステップバーがついておすすめのSnow Monkey Formsですが、少しデザインをカスタマイズするとみやすい表示になって良いですね。

WordPressのテーマを変えました！

なぜテーマを変えたか

以前Yum-designのWEBサイトをリニューアルした際、WordPressのテーマをSnow Monkeyを使って作成しました。

Yum-design

ポートフォリオサイトをリニューアルしました ずっと後回しにしてきた自分のサイトのリニューアル。wordpressでやらないと…と思いつつ時間がどんどん過ぎ…

Snow Monkeyのテーマは1年間のサブスクリプション制です（2024年8月現在 16,500円/年）。最初は他の受託の仕事でも使えるなら良いかなと思っていたのですが、使う機会がないまま数年経過。自分のポートフォリオサイトのためだけに毎年支払いするほど使いこなせませんでした。

また、Snow Monkeyのカスタマイズには子テーマを作る方法ではなく、プラグインでのカスタマイズが推奨されています。また、フックを使う方法が多く、エンジニアではない私には慣れない方法で、いちいち時間がかかっていました。

そんな中お仕事でSWELLを使う機会があり、私の技術レベル（html/cssは得意だけどエンジニアではない）でのカスタマイズのしやすさと使いやすさを知り、自分のサイトでも使ってみることにしました。

SWELLの良いところ

SWELLを実際に使用してみて、良かったと思ったのはこんなところです。

このようなマーカーを引くこともできます。

カギカッコとか

方眼背景もあります。

SWELLのカスタマイザーでページの表示項目を設定できます

管理画面で登録済みのボタン・マーカーなど色や形状の変更が可能です

また、私は使いませんでしたが、他のテーマからSWELLに移行するにあたり、記事の表示崩れを一気に直してくれる「乗り換えサポートプラグイン」があるようです。乗り換えのテーマは、Cocoon、SANGO、JINなど複数あります。

SWELLでカスタマイズできなかった部分

こちらのWEBサイトはポートフォリオサイトなので、サイト型にカスタマイズしたのですが、できない部分もありました。制作実績をカスタム投稿タイプで作成しているのですが、アーカイブページのページヘッダーを、固定ページと同じように背景画像の上にタイトルテキストを設定する機能はカスタマイザーには付いていないようです。

フックを使えば背景画像を設定することはできました！

カスタム投稿アーカイブのページヘッダーはここ

フックをfunctions.phpに記載すると、コンテンツヘッダーに設定されている画像が表示されるようです。

カスタマイザーの「サイト全体設定」＞「コンテンツヘッダー」＞「タイトル背景用デフォルト画像」をから設定できると教えていただきました。

WordPressでテーマを移行する手順

テーマを移行する手順はこちらです。

参考：【WordPress】テーマ移行を確実に進めるための手順と注意点を解説！

この中でいちばん時間がかかったものが「6.修正」です。テーマに使われているブロックの表示崩れや、レイアウト変更、色の変更などまだこれから調整したい部分もあります。

Snow Monkey 用レイアウトで移行後にずれが発生

テーマを移行してみた感想

テーマだけだからすぐ終わるかと思いましたが、意外と時間がかかりました。自分のサイトなので、不具合は移行してから直せましたが、お客様のWEBサイトだとテスト環境でちゃんと直してから…となるともっと時間かかりますね。まだ変更したいところはあるので、徐々にやっていこうと思います。