WordPress 6.6.1 ブロックエディタ ダウンロードボタン 縦表示 横表示 横積み 変更

はじめに

ごけたです
ブロックエディタでの設定に集中しすぎて
クラシックエディタでの設定が思い出せません。

今回は「Wordpress」編です。
「ブロックエディタ」で「ダウンロードボタン」を設置します。
2つ以上表示する場合、縦に並んで表示されます。
ちょっと面倒な方法ですがテーブル(表)を使用して
横に並べて表示する方法について書いてみました。
※Wordpressはバージョン「6.6.1」を使用。
※テーマは「Simplicity2」を使用。
※ブラウザは「Google Chrome」を使用。
※OSは「Windows 11」を使用。

ページ構成

画像、その下に説明文の構成になっています。
画像はクリックすると拡大されて表示されます。
リンクは予告なく削除される場合がございます。

「ブロックエディタ」で「ダウンロードボタン」を設置

まずは基礎となる「ブロックエディタ」で
「ダウンロードボタン」を設置から行います。

「投稿画面」で「ブロックエディタ」を選択

画面左上の「+」をクリック。
ブロックの機能一覧から「ファイル」アイコンをクリックします。

「ファイル」ブロックの表示

ここでは「ダウンロード」で使用する画像を選択します。
新規で画像を「アップっロード」するか、
すでにアップロード済みの画像を使用する「メディアライブラリ」を選択します。

「ダウンロードボタン」の表示

今回は新規で画像をするので「アップロード」をクリック。
「アップロード」させたい画像があるフォルダから画像を選択して
「開く」をクリックします。
これで「ダウンロードボタン」が表示されます。

動作確認

画面左上の「表示」ボタンをクリック、
プルダウンメニューから「新しいタブでプレビュー」をクリック。

「ファイル名」をクリック

ここで「ダウンロードボタン」の前の「ファイル名」をクリック。
ダウンロードする画像が表示します。
ダウンロードする前に画像を確認できるの利用者に優しい設定です。

「ダウンロード」ボタンをクリック

次に「ダウンロードボタン」をクリックして。
画像がダウンロードできるか確認します。
ダウンロードした画像を開き、ダウンロードさせたい画像かも確認します。
全て問題なければ「ダウンロードボタン」の設置は完了です。



※ここでは続けて2つ目の「ダウンロードボタン」を設置
上記の方法で2つ目の「ダウンロードボタン」を設置します。
※2つ目を設置後の画像は「投稿画面」と
「新しいタブでプレビュー」の画面で表示したものです。

「ダウンロードボタン」を横並びに設定する

2つのダウンロードボタンを右クリックしながらカーソルで選択反転させます。
上部にメニューが表示されます。
「縦積み」をクリックします。
縦表示から横表示になります。
非常に簡単に変更表示できました。
「新しいタブでプレビュー」の画面ではファイル表示確認、ダウンロード確認します。

ファイルを増やして横並び表示

さらに2つ増やして4つのダウンロードボタンを表示させました。
方法は上記を同じで4つのダウンロードボタンを右クリックしながら選択反転させます。
上部のメニューから「横積み」をクリック。
これで横並び表示になります。

詳細設定

横並び表示に変更した時に「行」、「列」の「位置表示」も設定できるメニューが表示されます。
どちらも「中央揃え」を選択しました。
画像の3番目が変更前、4番目が変更後ですが、変わってませんでした。

実際に「表示」

「ファイル名」をクリックするとダウンロードボタンをクリックした際に
ダウンロードされる画像が表示されます。
「ダウンロードボタン」をクリックするとファイル名の画像がダウンロードされます。

「ダウンロードボタン」の移動

2つでも4つでも設定したダウンロードボタンは1つずつブロックで区切られています。
1つずつ移動させるのは面倒です。
今回は4つのダウンロードボタンを右クリックしながら選択反転させます。
上部メニュー左隅の「ファイル」アイコンをクリック。
プルダウンメニューから「グループ」を選択します。
枠外でクリックすると上部メニューに「上下」アイコンが表示されます。
あとは移動させたい位置までクリックするだけです。


これは「横積み」で横並び表示させた後でも可能です。

上記の「ファイル名」をクリックすると「新しいタブ」でPDFファイルが表示されます。

「ダウンロードボタン」の「ボタン」の色変更

上記の「ボタン」の表示で色指定、変形などを行ってきました。
ここではそれらをコード入力で行っています。
特に輪郭(罫線)と文字を別々に色で表示したいなどに利用できます。
ここでの「ダウンロードボタン」は画像を表示させる「ファイル名」も含んでいるため
「ボタン」のと敢えて表現しております。
「ボタン」の箇所だけの色変更方法

「右クリック」で「検証」

「ダウンロードボタン」の色変更のコードを確認するために
「ダウンロードボタン」をカーソルを合わせて右苦クリックします。
プルダウンメニューから「検証」をクリックします。
「検証」画面内の上部にカーソルを合わせると「ダウンロードボタン」が反応します。
画面下部の「style」部分を確認。
.wp-block-file__button {
background: #b22222;
color: #fff;
text-decoration: none;
}
これをそのままテーマファイルエディターにコピペしても反応しませんでした。

これをそのままテーマファイルエディターにコピペしても反応しませんでした。
「.wp-block-file__button」の前に「.wp-block-file a」を追加して
「.wp-block-file a.wp-block-file__button」としました。

上記のコードを「管理画面」の「外観」→「テーマファイルエディタ」をクリックします。
※色の変更は「カラーコード」で検索して好きな色のコードを入力してください。
「background: #b22222;」 ←ここは背景色
「color: #fff;」←ここは文字の色

「テーマを編集」画面に切り替わります。
「付属のCSSエディター」の使用を推奨してますが、
ここでは「子テーマ」から「style.css」ファイルの一番下に上記のコードを貼り付けます。
※「付属のCSSエディター」でも「コード」は一番下に貼り付けます。
画面左下の「ファイルを更新」ボタンをクリックします。
「ファイルの編集に成功してました。」表示が出たら貼り付けは完了です。

画面右上の「表示ボタン」をクリック。
プルダウンメニューから「新しいタブでプレビュー」をクリック
「ボタン」の色が変更してれば完成です。

「ダウンロードボタン」を「罫線」表示に変更

「 border: 2px solid #b22222; 」が罫線のコードになります。
「2px」が罫線の太さ。
「solid」が「罫線」の種類。「solid」以外にも罫線の種類は多数あります。
「#b22222」が罫線の色指定。色変更でボタンの背景色に色指定した色を罫線に充てています。

「background: #fff; 」罫線で表示するので背景色は「色抜き表示」にさせたいので
「白」に該当するカラーコードを入力しています。

「color: #0073aa;」背景色が「白」に指定されてので
文字の色も変更してないと同じカラー指定のままで文字が表示されません。
ここでは「 color: #0073aa; 」としてますが黒「#000000」でも問題ありません。
末尾の「;」を忘れないように確認してください。

コードのコピペ(貼り付け)

「管理画面」の「外観」→「テーマファイルエディタ」をクリックします。
「テーマを編集」画面に切り替わります。
「付属のCSSエディター」の使用を推奨してますが、
ここでは「子テーマ」から「style.css」ファイルの
「/* ボタンの色変更 */」のコードのある箇所に
「/* ボタンの罫線のみ表示 */」を上書きします。
※「付属のCSSエディター」でも同様に上書きします。
画面左下の「ファイルを更新」ボタンをクリックします。
「ファイルの編集に成功してました。」表示が出たら貼り付けは完了です。

表示確認

画面右上の「表示ボタン」をクリック。
プルダウンメニューから「新しいタブでプレビュー」をクリック
「ボタン」が「罫線」で表示変更してれば完成です。

「ダウンロードボタン」を四角に変更(罫線)

上記の応用編
丸を四角に変更。
通常四角から丸への変更がおおいですが今回は逆になります。
そのため四角にするコードもちょっと変わっています。
「 border-radius: 0; 」の「radius:」は通常「丸」へ変更する際に使用しますが、
「0」にすることで「丸くをやめて四角にする」にしています。
あとは変更はありません。

コードのコピペ(貼り付け)

「管理画面」の「外観」→「テーマファイルエディタ」をクリックします。
「テーマを編集」画面に切り替わります。
「付属のCSSエディター」の使用を推奨してますが、
ここでは「子テーマ」から「style.css」ファイルの
「/* ボタンの罫線のみ表示 */」のコードのある箇所に
「/* ボタンのスタイルを調整 */」を上書きします。
※「付属のCSSエディター」でも同様に上書きします。
画面左下の「ファイルを更新」ボタンをクリックします。
「ファイルの編集に成功してました。」表示が出たら貼り付けは完了です。

表示確確認

画面右上の「表示ボタン」をクリック。
プルダウンメニューから「新しいタブでプレビュー」をクリック
「ボタン」が「罫線」で表示変更してれば完成です。

「ダウンロードボタン」を四角に変更(背景色)

次は四角の罫線を止めて、背景色のある四角に変更します。
「 border: 2px solid #b22222; 」罫線表示をやめるのでこのコードは削除します。
罫線で色指定した「#b22222」を背景色に変更。
ボタンの背景色で白指定した「#fff」を文字の色指定に変更。

コードのコピペ(貼り付け)

「管理画面」の「外観」→「テーマファイルエディタ」をクリックします。
「テーマを編集」画面に切り替わります。
「付属のCSSエディター」の使用を推奨してますが、
ここでは「子テーマ」から「style.css」ファイルの
「/* ボタンの罫線のみ表示 */」のコードのある箇所に
「/* ボタンのスタイルを調整 */」を上書きします。
※「付属のCSSエディター」でも同様に上書きします。
画面左下の「ファイルを更新」ボタンをクリックします。
「ファイルの編集に成功してました。」表示が出たら貼り付けは完了です。

表示確認

画面右上の「表示ボタン」をクリック。
プルダウンメニューから「新しいタブでプレビュー」をクリック
「ボタン」が「罫線」で表示変更してれば完成です。

「ファイル名」と「ダウンロードボタン」を分けて表示

今は上記のコードで「ファイル名」と「ダウンロードボタン」が1つとして表示されています。
「ファイル名」は無しで「ダウンロードボタン」だけ表示したい？時に。

「ファイル名」だけ表示

前半部分が「ファイル名」のコードになります。
そのままコピペではコードが成立しないので最後の「</div>」をおけば完成です。

上記をクリックして「表示」を確認

「ダウンロードボタン」だけ表示

「ダウンロードボタン」は後半箇所に書かれています。
こちらもそのままコピペではコードは成立しないので
先頭に「<div class=”wp-block-file”>」をおけば完成です。

さいごに

「ダウンロードボタン」の横並びの表示設定自体は簡単でした。
「画像」を投稿画面上に表示させる方法が多数あるので
その中から「ダウンロードボタン」の表示方法を見つけるが困難でした。
プラグインを利用せずに設置できるのはいいことです。
今回ダウンロード用に用意した画像は「jpg」ですが「png」でも利用できます。
「PDFファイル」のダウンロードボタンの設定では
投稿画面の右側メニューから表示設定が簡単に行えるのは驚きかもしれません。
普段見落としがちな「ブロックメニュー」非常に使えます。

ボタンだけの表示の簡単に行えますが、あとからダウンロード用の画像追加するには
コード入力が必要となり簡単には行えませんでした。
なのでリンク用ボタンとして設定しました。
ボタンの利用方法が他に思いつけば追加したいと思います。

最後までお付き合い下さいまして有難うございました。