WordPress — ボタンの設置

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

基本操作

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

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

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

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

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

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

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

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

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

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

ボタンの修飾

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

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

なお、ここのパディングではボタンの大きさを変えることができます。

左上の親ブロック（黄丸）を押すと、ブロック全体の大きさを変えることができます。

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

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

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

なお、ボタンの背景に画像を埋め込む方法はこちらです。

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

できました。

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

ボタンを立体的にする

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

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

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

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

できました。

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

このボタンをもっと中央に寄せたい場合は、ボタンブロックをグループ化したのちに横並びに切り替えましょう。横並びブロックは中央配置にします。ボタンブロックは均等配置のままです。

もっとできました (^_^)/。

お疲れさまでした。