◆ サムネイル画像、そして分かりやすいテキストを合わせたリンクボタンは簡単に作れます。

wordpress記事など、見栄えの良いリンクボタンが挿入できれば、ウェブサイトのデザインをアップデート出来ます。
そんなリンクボタンですが、サンプルコードで簡単に作成可能です。
まずは作成例をご覧ください。

『作成例』

◆ html/cssサンプルコードを確認してみる

<style>
.yokolink{
display: flex;
align-items: center;
width: 400px;
background: #fffaf0;
}
.yokolink span{
margin-left: 10px;
}
</style>
<a href=”https://tensyokuseikatsu.com/aviutl-sepia-noise/” class=”yokolink”>
<img width=”200″ src=”https://tensyokuseikatsu.com/wp-content/uploads/2022/08/aviutlでセピアノイズ動画を作ってみた.png” alt=””>
<span>Aviutlでセピアノイズ効果でレトロな動画を作る方法を解説</span>
</a>

(リンクボタンの書き方は https://tensyokuseikatsu.com/wordpress-link-design/ を参照)

◆ style部分の解説

『display: flex;』は画像とテキストを横並びとして表示できるコードです。

『align-items: center;』はテキストを上下中央の位置に配置するためのコードです。

『width: 400px;』では幅を400pxに制御。

『background: #fffaf0;』では、カラーコード#fffaf0を用いて背景色をつけてみました。

『.yokolink span{margin-left: 10px;}』は画像とテキストの間に、10pxの隙間を設けています。

◆ style以下のコードの解説

『a href=”～” 』には　”～”　の～部分へリンクしたいURLを入力。

『class=”～”』には　”～”　の～部分へ任意のクラス名を入力します。

『img width=”～”』には　”～”　の～部分へ200など数値を入れてサイズ指定します。

『src=”～”』には、画像の保存先のURLを入力。

『alt=”～”』は空白でも大丈夫です。必要あれば入力しましょう。

『span～/span』の～部分に表示させたいテキストを入力すれば、画像とテキストを並列させたリンクボタンの完成です。