オリジナルのSVG画像チェックボックスを作ってみたよ

普段のチェックボックスに飽きかけていた今日このごろ。

なにか良いチェック()はないだろうか?と思っていたので色々参考にして作ってみました( ˶ˆ꒳ˆ˵ )

つくってみたよ

  • 箇条書き
  • オリジナルの画像
  • いい感じだね

  • 箇条書き
  • オリジナルの画像
  • いい感じだね

  • 箇条書き
  • オリジナルの画像
  • いい感じだね

  • 箇条書き
  • オリジナルの画像
  • いい感じだね
MENくん

シンプルなチェックマークを作ってみたよ~

今回のチェックマークは、ぼくがSVG画像でつくりました。そのため、カスタマイズするにはこのチェックマークのSVG画像をダウンロードしてWPにアップロードする必要があります。


FANBOX限定

  • 箇条書き
  • オリジナルの画像
  • いい感じだね

  • 箇条書き
  • オリジナルの画像
  • いい感じだね

  • 箇条書き
  • オリジナルの画像
  • いい感じだね

  • 箇条書き
  • オリジナルの画像
  • いい感じだね

  • 箇条書き
  • オリジナルの画像
  • いい感じだね

  • 箇条書き
  • オリジナルの画像
  • いい感じだね

  • 箇条書き
  • オリジナルの画像
  • いい感じだね

  • 箇条書き
  • オリジナルの画像
  • いい感じだね

  • 箇条書き
  • オリジナルの画像
  • いい感じだね

  • 箇条書き
  • オリジナルの画像
  • いい感じだね
MENくん

なるべくシンプルなチェックマークにしてみました

カスタマイズは自己責任でやろう

自己責任の意味がわからない方初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。

カスタマイズは自己責任。ぼくはこんな風に思っています。

SVG画像がよくわからない人はこちらの記事を見てみてください。

SVG画像を使って美しいイラストを挿入しよう

カスタマイズするための
準備

目次へ戻る

クラシックエディタでカスタマイズする方法を説明していきます。

まずは、投稿画面に書くコード(HTML)を説明して、次に気に入ったチェックマークのSVG画像をダウンロードします。これで準備はおしまいです。

投稿画面に書くHTMLコード

これを投稿画面(テキストエディタ)に書き込みます。

ちょっと詳しく説明

上で説明したHTMLコードは、ショートコードの中に箇条書きが入っている形です。一度、プラグインのadd quicktagに登録してしまえば、ビジュアルエディタでも簡単に挿入できます。

HTMLコードを投稿画面に貼り付け

テキストエディタに貼り付けている動画

チェックマークのSVG画像をダウンロード

好きな画像を保存してね

上の中からお好きなチェックマークをクリックして名前を付けて保存してください。

チェックマークをダウンロードしている動画
MENくん

上の4つから適当に好きな画像を保存してくださいね♫

保存したSVG画像をワードプレスにアップロード

パソコンの中に気に入ったSVG画像が保存できたと思います。

次は、その画像をワードプレスにアップロードしてあげましょう。やり方は通常の画像をアップロードするやり方と同じです。

あとで使用する、画像URLをコピーしておきましょう。

アップロードした画像のURLをコピー
MENくん

このURLはCSSコードの部分に追加するよ

続いてはCSSコードを書き込むための準備です。

おすすめは追加CSSからコードを追加する方法です。

はじまてカスタマイズする方は、こちらの記事を読んでくださいね。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方
追加方法難しさ
追加CSS
テーマエディター
FTPソフト

複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。

カスタマイズに必要な
CSSコード

目次へ戻る

この画像には alt 属性が指定されておらず、ファイル名は kopinosikata.png です

コメントあり

コメントなし

画像URLの部分にさっき保存したSVGのURL(Word PressにアップロードしたときのURL)を貼り付けてくださいね。

うまくできたか
確認

目次へ戻る

確認する際は必ずキャッシュを削除してから見てください

確認方法
「Ctrl」+「F5」(キャッシュ削除)

カスタマイズコードを追加CSS(またはテーマエディタ)に追加して保存したら、カスタマイズがうまく反映されているか、確認しましょう。

Mac bookやスマホではキャッシュ削除の仕方が違うので、詳しくはこちらの記事で確認してください。

カスタマイズはキャッシュ削除をマスターしてからです

FANBOXの方限定

  • 箇条書き
  • オリジナルの画像
  • いい感じだね

  • 箇条書き
  • オリジナルの画像
  • いい感じだね

  • 箇条書き
  • オリジナルの画像
  • いい感じだね

  • 箇条書き
  • オリジナルの画像
  • いい感じだね

  • 箇条書き
  • オリジナルの画像
  • いい感じだね

  • 箇条書き
  • オリジナルの画像
  • いい感じだね

  • 箇条書き
  • オリジナルの画像
  • いい感じだね

  • 箇条書き
  • オリジナルの画像
  • いい感じだね

  • 箇条書き
  • オリジナルの画像
  • いい感じだね

  • 箇条書き
  • オリジナルの画像
  • いい感じだね

こちらの5種類(✕2)のSVG画像はFANBOXの方に置いておきますね♫

お好きなやつを適当にダウンロードしてお使いください( ˶ˆ꒳ˆ˵ )

MENくん

SVG画像って拡大してもキレイだから好き♡

カスタマイズをもっとやりたい方

こんなカスタマイズじゃ満足できない!!そんな方に是非見て欲しい記事がこちらです。

【圧倒的SANGOカスタマイズまとめ】~ようこそ、沼への入口へ~
MENくん

現在は50を超えるカスタマイズが紹介されており、病的なページになります。

くまからのお礼

目次へ戻る

本ブログ(for men)では、ひとりでも多くの方にブログを楽しんで欲しくてカスタマイズ記事を書いています。(決して自己満足ではありません)

もっとカスタマイズしたい人はこちらの記事を見てください。

【圧倒的SANGOカスタマイズまとめ】~ようこそ、沼への入口へ~

まとめ・感想・雑談・こだわり

MENくん
ふぅ~ここにたどり着くまで、色違いも合わせると50個くらいチェックマーク作ったよ
くま3号
無駄なことするなや

コメントを残す

メールアドレスが公開されることはありません。