サイト構築後記事を投稿する際にダウンロードリンクやデモアドレスを提供する機会がよくありますが、デフォルトのハイパーリンクを挿入するのは見栄えが良くありません。記事にきれいなダウンロードボタンを挿入するにはどうすればよいでしょうか？2つの簡単な方法を紹介します。
純粋なコードバージョン、クラシックエディターにおすすめ
Naiba サイト構築ノートのダウンロードボタンは、コードを使用して実装されています。
実装方法は簡単で、ダウンロードボタン用のCSSスタイルを個別に設定するだけです。
使用方法は以下の通りです。
- CSSスタイル内にダウンロードボタンのCSSスタイルを作成します；
- 記事を投稿する際に、class属性値を持つaタグを挿入します。
Naiba サイト構築ノートのウェブサイトで使用されているダウンロードボタンのCSSは以下の通りです：
.theme-demo {
border-radius: 5px;
color: #ffffff!important;
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
padding: 10px 15px;
background-color: #3bc492;
text-decoration: none!important;
text-indent: 0!important;
}あなたのテーマのCSSスタイルファイルに追加します。方法：
- WP管理画面、外観、テーマエディター。
- 上記の内容をコピーしてstyle.cssの末尾に追加し、保存します。
ダウンロードボタン内にダウンロードアイコンなどを挿入したい場合は、対応するCSSスタイルを自分で追加すればOKです。このサイトには美しいボタンスタイルが多数ありますので、コピーして利用できます。
コードの挿入が面倒で、毎回手動でclass="theme-demo"をリンクに追加したり、コードをコピーする必要があると思うかもしれません。
ご安心ください。こちらの記事をご覧ください。WordPressエディター強化_特定コードの迅速挿入：AddQuicktag
システム標準ボタン、Gutenbergエディター推奨
Gutenbergエディタを使用している場合は、それほど手間はかかりません。ボタンを直接挿入できます。方法は以下の通りです。
1. 記事作成時に➕ボタンをクリックし、「ボタン」を検索します（下図参照）。
2、ボタンを挿入した後、右側のブロックエリアでボタンのスタイル、色を設定し、リンクを追加すると、美しいダウンロードボタンが出来上がります。
Gutenbergエディタのボタンが丸すぎる場合は、右側の設定で「枠線の半径」を小さくするか0に調整してください。
リソースダウンロードサイトを構築する場合は、専用のダウンロードプラグインをインストールすると、美しいダウンロードボタンが表示され、リソース管理も便利になります。