WordPress — ボタンの設置

きれいなボタンが設置できると、サイトの見栄えがグッとよくなります。ボタン作成はホームページ作りの基本を知ることもできるところです。マージン、パディング、スタイルといった概念です。覚えていきましょう。

基本操作

WordPress純正でも、テーマによって違いがあります。初期値で、ただの真四角のボタンだったり、ホバー効果（マウスポインターをのせると形が変わる）が違っていたりしています。

ここではテーマ『Twenty Twenty-Five』を使ってボタンを作っていきます。

ボタンの設置の仕方はいくつかあります。

ボタンはいくつでも作ることができます。

初期値でボタンが画面端に達すると次の行にボタンが移動しますが、『複数行に折り返す』のチェックボタンをはずすと、１行に表示させることができます。

レイアウトを中央配置にすることを忘れないようにしましょう。

スマホとPCで表示されるボタンを変えることはできません。PCとスマホで別々のボタンを表示させたい場合は、ブロックエディターの拡張プラグインを探していきましょう。スマホのことを考えると、ボタンは３つが限界という気はします。

ボタンジャンプの場所はURLで設定します。

ここにキーワードを入力し、表示された候補を選択すると、カテゴリーやタグの一覧を表示させたり、記事を簡単に選ぶことができます。ちょっとした『最新の記事』になります。

『最近の投稿』のリストを小さくしたい場合などに使っていきましょう。

ボタンの修飾

黒ボタンでは味気ないので、色や形を変えていきましょう。

ひとつひとつを説明すると膨大な量になってしまうので省略します。自分で色々とやってみましょう。習うより慣れろです。上の図では、白の破線を利用してボタンにミシン目を入れてみたものです。いろいろ工夫をして自分なりのボタンを作っていきましょう。

なお、ここのパディングではボタンの大きさが変わります。

左上の親ブロック（紫丸）を押すと、ブロック全体の大きさが変えられます。

『パディング』『マージン』『ブロックの間隔』—— なにを言っているのかよく分からない感じですが (^_^;、それが専門用語というものなので慣れていきましょう。要は余白を取る方向が違っているということです。

このうち、多用するのはブロックの間隔だと思います。パディングも背景に色を付けたりするときに使えます。

レイアウトを中央揃えにするのも忘れないようにしましょう。ボタン配置を均等にして、横方向にパディングを加えるといった方法もあります。いろいろ試してみましょう。

気に入ったボタンが作成できたら、そのスタイルをコピーして他のボタンに張り付けましょう。

できました。

こちらではスマホでの見栄えを考慮して、縦方向のブロック間隔を増やしています。

設定はこんな感じ。

ボタンを立体的にする

背景のグラデーションを使うと、ボタンを立体的に見せることができます。

ハンドラー（白〇）をクリックして、明るい色と暗い色をピックアップします。角度を180°付近に設定します。明るい色のHex番号をコピーします。

ハンドラーを暗いほうに動かして、下に影ができているように見せかけます。枠線をクリックして、暗い色のHex番号をコピペしてみても良いと思います。影が強調されるかもしれません。左図のように無理に影にしなくても柔らかな立体感が出ている場合は、これを行わなくてもいいと思います。大事なのは色のチョイスです。

完成したら、スタイルをコピーして、すべてのボタンに張り付けます。

ボタン配置の調整

できました。

そのままではいい感じのボタンにならないので、ボタン位置を調整しています。上の図ではボタン配置を均等にして、横方向にパディングを入れてみました。グラデーションの角度は177°に設定してあります。このほうが自然な丸みがかもしだせます。平べったい立体感が出せている感じですね。

設定はこんな感じです。

テーマによって見え方に微妙な差異があるので、うまく調節していきましょう。

自分で動かしてみて、体で覚えていきましょう。

レスポンシブなボタンの中央配置

初期設定では、ボタンをクリックして『項目の間隔（両端揃え）』を選択するとボタンが広く配置されますが、それではボタンが広く配置されすぎたりします。『中央揃え』ではボタンが中央に密集しすぎてしまうなんてこともあります。どちら大きな画面において起こりえます。スマホではボタン配置のズレが生じたりもします。それではレスポンシブ対応とはいえません。

そこで、ブロックを画面サイズから切り離して両端揃えとブロックの間隔で調整していきます。

まず最初に、画面の大きさを関係なくするために、ボタンブロックをグループ化したのちに横並びに切り替えます。

これでボタンを両端揃えにしてもボタンが画面いっぱいに広がることがなくなり、ボタンの間隔を目一杯に広げることができます。スマホにおいても、ボタンが端に揃うので見た目にきれいです。

テーマごとに表示のされ方は違うので、自分なりに調整していきましょう。

良い物が作れました (^_^)/。

お疲れさまでした。