フォーラム

トピックを立てる前にチェック
  1. フォーラムガイドライン」に必ず目を通してください。
  2. バージョンアップデート後に表示がおかしくなった場合は、
    「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。
  3. フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
SWEEL設定での添付画像のアイコン設...
 
通知
すべてクリア

[解決済] SWEEL設定での添付画像のアイコン設定方法

5 投稿
3 ユーザー
2 Reactions
822 表示
(@kouichi)
投稿: 7
メンバー
トピックスターター
 

 

スクリーンショット 2021 12 02 20.18.46

質問です。

ブロックエディタでSWELLテーマで制作をよくされています、添付画像のような円形+アイコンの設定はどうしたら行えますでしょうか?調べても画像ではないみたいで、SVGは確認はできたのですが。

こちらは画像で作成されてはめてののであればすみません。

ご教授の方をお願いしたいと思います。

確認項目
利用規約に同意します*, ガイドラインを読み、内容を把握しています*, よくある質問を先にチェック済みです*, 過去に同じようなトピックがないか検索済みです*, Googleなどでも検索してみました, プラグインを停止しても同じことが起こることを確認しました, デフォルトテーマ等、他のテーマでも同じことが起こることを確認しました, 自分で追加したコードに問題がないかチェック済みです
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.5.5.3
OS
Mac Windows10
利用中のWordPressバージョン
5.8.2
利用中のサーバー会社
Xサーバー
ブラウザ
Chrome
利用中のプラグイン一覧

TinyMCM Advanced
All-in-One WP Migration
Pricing Custom by Supsystic
Contact Form7
EWWW image Optimizer
custom CSS and JS
Instagram Feed
TCD Google Maps
Widget Clone
XML sitemaps
Yoast Duplicate Post

このトピックは3年前からkouichiに変更されました
 
投稿済 : 02/12/2021 8:19 pm
 
(@loos_ryo)
投稿: 1268
メンバー Admin
 

このページのURLがないのでなんとも言えませんが、HTMLブロックにSVG挿入してるんじゃないですかね〜。

SWELL開発者です。

 
投稿済 : 02/12/2021 8:24 pm
(@kouichi)
投稿: 7
メンバー
トピックスターター
 

すみません、追記でURLを添付しました。

https://www.tokorozawafit.com/price/

 
投稿済 : 02/12/2021 8:27 pm
かんた
(@swell_mania)
投稿: 719
Https://webrent.xsrv.jp/
 

参考サイトはカスタムHTMLブロックにFont Awesome、青い円形の背景はCSSです。
Font AwesomeとCSSが苦手であれば画像化したものを設置しても同じデザインになります。

一般ユーザー
SWELL初心者のために、ブロックパターンライブラリーを運営しています。

 
投稿済 : 03/12/2021 12:15 pm
skillsharejp reacted
(@kouichi)
投稿: 7
メンバー
トピックスターター
 

いけました!ありがとうございます。

アイコンのSVG画像ダウンロードからイラレ開いて保存してから、HTMLコード貼り付け方法も試したらいけました。

色んなやり方があるんですね。

 
投稿済 : 03/12/2021 4:50 pm
skillsharejp reacted
共有: