WordPressテーマSANGOの質問

ボタンを中央揃えにしたいです。

アバター
えんどう

段落のブロックタイプでボタンを着たのですが、中央寄せを押してもボタンが中央揃えになりませんでした。他に方法はあるのでしょうか?

ボタンの挿入方法とデザイン一覧
ボタンの挿入方法と種類一覧
コメントへの回答
サルワカくん
サルワカくん
2019/03/09

Gutenbergエディターかクラシックエディター(旧エディター)のどちらを利用していますでしょうか。
ボタンを含む行全体を選択して、中央寄せボタン()を押しても反応しないという感じでしょうか。
また「エディターのみで中央寄せにならない」「エディターと実際のページ表示どちらも中央寄せにならない」などの詳細情報を教えていただけますか?

アバター
campion
2019/12/05

自分が書いた他の記事へのリンクを設定したボタンをセンタリングする方法を教えていただけないでしょうか。
(Gutenbergを使っています)

センタリングしようと思ってうまくいかなかった経緯はこうです。
1.Gutenbergでレイアウト要素>ボタンをクリック
2.ボタン内にテキストを入力
3. ボタンのスタイルをSANGO浮き出しに変更
4.背景色をオレンジに変更
5.配置を変更>中央揃えを選択

結果として、背景色がオレンジ、文字色が水色(編集画面の文字色は白です)、左揃えのボタンが表示されてしまいます。

ちなみにhtmlはこんな感じになっています。(XXXXXは、遷移したいリンク先を表しています)
テスト

よろしくお願い申し上げます。

サルワカくん
サルワカくん
2019/12/05

Gutenbergのボタンブロックで中央寄せする手順を動画で撮りました。
この手順でやれば中央寄せになると思います。
https://drive.google.com/file/d/1LYGCcmjCnaKB1LDbsH4AfSf28zAX5yPh/view?usp=sharing
(ページが切り替わるのはプレビューです)
HTMLは以下のようになります。

<div class="wp-block-button aligncenter is-style-sango-raised"><a class="wp-block-button__link" href="~">テスト</a></div>

もう試されていると思いますが、一時的に全プラグインの停止/ブラウザキャッシュの削除などをしてみて動作確認をすると良いと思います。

アバター
campion
2019/12/21

動画のアップありがとうございます。お返事が遅れてしまい、申し訳ありません。
教えていただいた手順で試してみましたが、やはりうまくできませんでした。
一時的に全プラグインの停止、キャッシュ削除も行いました。

状況としては、編集画面ではたしかにリンクを貼ったボタンがセンタリングされるのですが、実際の表示画面で見ると左寄せのままという状況です。
なかなかうまくいきません。。。

サルワカくん
サルワカくん
2019/12/22

詳細設定の[ Gutenberg用のCSSを読み込まない]にチェックが入っている、ということはないでしょうか?
またWordPressは最新バージョンになっていますか?

アバター
campion
2019/12/22

お返事ありがとうございました。
ご指摘のとおり詳細設定を見直したところ、編集画面だけでなく表示画面でもボタンがセンタリングされました。(Wordpressは最新版でした)
本当にありがとうございました。
素人の質問にも根気よくお付き合いくださりありがとうございました。
これからもSANGOライフを楽しみにしています。

サルワカくん
サルワカくん
2019/12/22

問題が解消したようで良かったです!
今後ともよろしくお願いいたします。