WordPressテーマSANGOの質問

標準スタイルとそれ以外の引用を両方使用したい

アバター
マサ

標準スタイルの引用と、別に紹介されている青バージョンの引用を両方使用したいため、青バージョンの方をblockquoteではなくdivでクラス名をつけてデザインしてみました(もはや引用ではないですが・・・)。
しかし、引用符が表示されません。
解決法があればお教えいただけないでしょうか?
よろしくお願いいたします。

SANGOの箇条書き種類一覧
記事に様々なスタイルの箇条書きを挿入する
コメントへの回答
サルワカくん
サルワカくん
2022/06/08

お世話になっております。
お使いのエディターはクラシックエディターでしょうか?
それともブロックエディターでしょうか?
よろしくお願いします。

アバター
マサ
2022/06/08

ご返答ありがとうございます。
ブロックエディターのカスタムHTMLで挿入しています。
よろしくお願いします。

サルワカくん
サルワカくん
2022/06/09

お世話になっております。
なるほどですね。
それでしたら、引用ブロックを使っていただき、カスタムCSSなどでスタイルを調整していただくのが良いかと思います。
よろしくお願いします。

サルワカくん
サルワカくん
2022/06/09

また一度引用ブロックでCSSなどカスタマイズした内容はカスタムプリセットとして保存しておくと次回も使い回せて便利です。
https://saruwakakun.com/sango/sango-gutenberg-preset

よろしくお願いします。

アバター
マサ
2022/06/09

ご返答ありがとうございます。
引用ブロックでカスタムCSSを指定してみましたが、やはりダメでした。
最終手段としてFontAwesomeを画像化して使用してみますが、他に解決できそうな方法がありましたらご教示いただければと思います。
ありがとうございました。

サルワカくん
サルワカくん
2022/06/09

お世話になっております。
少しお聞きしたいのですが、SANGO Gutenbergプラグインはインストール済みでしょうか?
もしインストール済みの場合、引用ブロックですがデフォルトでFontAwesomeのアイコンは青色になっているかと思うのですが、
現在どのような見た目で表示されていますでしょうか?
もしよろしければURLを共有ください。

またもしうまくいかない場合はこちらのSANGO Landというサイトを利用すれば、お好みのブロックをコピーしていただき編集画面に貼り付けることができるようになっています。
今回のケースですと以下のブロックが適切かと思います。

https://www.sangoland.app/blocks/others/bef4d868-5429-40ad-a6fc-e5384274f624

よろしくお願いします。

アバター
マサ
2022/06/10

お世話になります。
こちらが試しに異なる引用を2つ配置したページになります。
https://bit.ly/3tpWgwu
SANGO Gutenbergプラグインはインストール済みですが、カスタムhtmlで引用を挿入しており、デフォルトではアイコンは黒となっていますが、追加cssに以下を記述して青に変えています。
.post blockquote:before {
color : #5ba9f7!important;
}
問題は、divでクラス名をつけた青バージョンの引用デザインのアイコンですが、なぜか記事を公開したPCでは表示されますが、それ以外のデバイスでは表示されません。
よろしくお願いします。

サルワカくん
サルワカくん
2022/06/10

お世話になっております。
SANGO Gutenbergプラグインはインストール済みということですね
ありがとうございます。
引用ブロックではなくdivを利用されている理由は何故でしょうか?
もしかするとこちらのブロックをコピーして貼り付けていただくのが良いかと思います。
https://www.sangoland.app/blocks/others/aa2e0052-00b4-4e71-8441-44c7cb8ec367

また、使用したブロックはカスタムプリセットとして保存しておくと次回も使い回せて便利です。
https://saruwakakun.com/sango/sango-gutenberg-preset
よろしくお願いします。

アバター
マサ
2022/06/11

お世話になります。
ご指定のデザインのブロックを使用することにより、問題を解決することができました。
なお、IEでは背景色が表示されなかったため、CSSを適用させました。
ありがとうございました。