ヘッダーの下やサイドバーに、おすすめ記事や別サイトへのリンクを貼りたいと思うことはありませんか？
どうせリンクを貼るなら、文字だけよりも画像やボタンで分かりやすくしたいところです。
（QooQテストブログ例）
（Emporioテストブログ例）
本記事ではこんな感じのメニューをガジェット追加で作成する方法を解説します！
ガジェット追加の基本
メニューの作成にはレイアウトのガジェット追加の【HTML／JavaScript】を使用します。
コンテンツに後述のコードを貼り付ければOKです。
タイトルは未記入でも構いません。
ヘッダーやサイドバーなど、どの位置でも使用が可能になっています。
公式テーマであれば、ガジェットはドラッグで移動が可能です。
例えばEmporioだと【ガジェットを追加】がサイドバーにしかありませんが、サイドバーで作成したガジェットはヘッダーやフッターに移動ができます。
QooQなどガジェットの移動ができないテーマでは、HTMLを変更することでガジェット追加が行えるようになります。
詳細はコチラ ➡ QooQでレイアウトのガジェット追加を記事表示部分でも使えるようにする方法
画像を使用したメニュー用コード
画像のURLの取得方法
画像のURLが必要なので、その取得方法を説明します。
ブログの記事から画像を取得する場合、画像の上で右クリックをして【画像リンクをコピー】を選択します。
取得したURLをメモ帳などに貼り付ければ、画像URLの取得は完了です。
別途画像を用意する場合は、新しいページを作成して【画像を挿入】から画像をアップロードします。
こうすることで、自分のブログの画像としてサーバーに保管された状態になります。
貼り付けた画像を右クリックして【画像リンクをコピー】を選択します
取得したURLをメモ帳などに貼り付ければ、画像URLの取得は完了です。
URLを再取得したい場合に備えて、ページは下書きで保存しておくことをオススメします。
画像を使用したメニュー用コード【基本】
基本の画像を使用したメニュー用コードは以下の通りです。
<div class="menu-box">
<div class="menu">
<a href="リンク先URL1"><img src="画像URL1" /></a>
</div>
<div class="menu">
<a href="リンク先URL2"><img src="画像URL2" /></a>
</div>
<div class="menu">
<a href="リンク先URL3"><img src="画像URL3" /></a>
</div>
</div>
<style>
.menu-box{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 2em; /*画像間*/
background: #fff; /*最背景色*/
}
.menu-box img{
width: 180px; /*画像横幅*/
height: auto; /*画像高さ自動*/
border-radius: 5%; /*角丸*/
margin-top: 1em; /*画像上の隙間*/
margin-bottom: 1em; /*画像下の隙間*/
}
</style>
リンク先URLと画像URLの部分にそれぞれのURLを貼り付けて使用してください。
背景色や画像サイズなどは<style>で調整可能です。/*コメントアウト*/で説明を加えているので参考にしてみてください。
基本コードはマウスカーソルが変わるだけで分かりにくいので、ホバー（マウスをのせる動作）で変化を付けたコードを次に紹介します。
画像を使用したメニュー用コード【ホバー拡大】
基本コードの<style>部分を以下に変更してください。
<style>
.menu-box{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 2em; /*画像間*/
background: #fff; /*最背景色*/
}
.menu-box img{
width: 180px; /*画像横幅*/
height: auto; /*画像高さ自動*/
border-radius: 5%; /*角丸*/
margin-top: 1em; /*画像上の隙間*/
margin-bottom: 1em; /*画像下の隙間*/
}
.menu-box a img{
transition: all .3s ease-in-out; /*ホバー時間*/
}
.menu-box a:hover img{
transform: scale(1.05); /*ホバー拡大*/
}
</style>
ホバー時間とホバー拡大コードを加えることで、ゆっくり拡大する動作が追加されます。
画像を使用したメニュー用コード【ホバー半透明】
基本コードの<style>部分を以下に変更してください。
<style>
.menu-box{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 2em; /*画像間*/
background: #fff; /*最背景色*/
}
.menu-box img{
width: 180px; /*画像横幅*/
height: auto; /*画像高さ自動*/
border-radius: 5%; /*角丸*/
margin-top: 1em; /*画像上の隙間*/
margin-bottom: 1em; /*画像下の隙間*/
}
.menu-box a{
transition: all .3s ease-in-out; /*ホバー時間*/
}
.menu-box a:hover{
opacity: .6; /*ホバー半透明*/
}
</style>
ホバー時間とホバー半透明コードを加えることで、ゆっくり画像が明るくなるような動作が追加されます。
画像を使用したメニュー用コード ※使用例※
上述のコードは画像３つ分でしたが、実際はいくつでも追加可能です。
横幅が入りきらないと次の行に回りますので、その辺を加味して調整する必要があります。
画像６つ分にホバー拡大とホバー半透明の両方のコードを追加し、更にホバー影を加えた使用例のコードは以下の通りになります。
<div class="menu-box">
<div class="menu">
<a href="リンク先URL1"><img src="画像URL" /></a>
</div>
<div class="menu">
<a href="リンク先URL2"><img src="画像URL2" /></a>
</div>
<div class="menu">
<a href="リンク先URL3"><img src="画像URL3" /></a>
</div>
<div class="menu">
<a href="リンク先URL4"><img src="画像URL4" /></a>
</div>
<div class="menu">
<a href="リンク先URL5"><img src="画像URL5" /></a>
</div>
<div class="menu">
<a href="リンク先URL6"><img src="画像URL6" /></a>
</div>
</div>
<style>
.menu-box{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 1em; /*画像間*/
background: #e0ffff; /*最背景色*/
}
.menu-box img{
width: 90px; /*画像横幅*/
height: auto; /*画像高さ自動*/
border-radius: 5%; /*角丸*/
margin-top: 1em; /*画像上の隙間*/
margin-bottom: 1em; /*画像下の隙間*/
}
.menu-box a img{
transition: all .3s ease-in-out; /*ホバー拡大影時間*/
}
.menu-box a:hover img{
transform: scale(1.05); /*ホバー拡大*/
box-shadow: 0 0 15px #4997d0; /*ホバー影*/
}
.menu-box a{
transition: all .3s ease-in-out; /*ホバー半透明時間*/
}
.menu-box a:hover{
opacity: .6; /*ホバー半透明*/
}
</style>
ホバー影の色#4997d0はお好きなカラーコードに変更してください。
単色ボタンメニュー用コード
単色ボタンメニュー用コード【基本】
基本の統一ボタンメニュー用コードは以下の通りです。
<div class="menu-box">
<div class="menu">
<a href="リンク先URL1">メニュー<br />1</a>
</div>
<div class="menu">
<a href="リンク先URL2">メニュー<br />2</a>
</div>
<div class="menu">
<a href="リンク先URL3">メニュー<br />3</a>
</div>
</div>
<style>
.menu-box{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 2em; /*ボタン間*/
background: #fff; /*最背景色*/
}
.menu a{
cursor: pointer;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1em; /*ボタン上の隙間*/
margin-bottom: 1em; /*ボタン下の隙間*/
padding: 20px 60px; /*上下・左右の背景余白*/
border-radius: 20px; /*角丸*/
background: #fa8072; /*背景色*/
color: #ffef00 !important; /*文字色*/
font-size: 1em; /*文字大きさ*/
font-weight: bold; /*太文字*/
text-align: center; /*文字改行時中央寄せ*/
}
</style>
リンク先URL123にURLを、メニュー<br/>123の部分を任意のテキストに変更してください。
<br/>を使うことで改行ができます。
背景色や文字色などは<style>で調整可能です。/*コメントアウト*/で説明を加えているので参考にしてみてください。
基本コードはマウスカーソルが変わるだけで分かりにくいので、ホバー（マウスをのせる動作）で変化を付けたコードを次に紹介します。
単色ボタンメニュー用コード【ホバー下線】
基本コードの<style>部分を以下に変更してください。
<style>
.menu-box{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 2em; /*ボタン間*/
background: #fff; /*最背景色*/
}
.menu a{
cursor: pointer;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1em; /*ボタン上の隙間*/
margin-bottom: 1em; /*ボタン下の隙間*/
padding: 20px 60px; /*上下・左右の背景余白*/
border-radius: 20px; /*角丸*/
background: #fa8072; /*背景色*/
color: #ffef00 !important; /*文字色*/
font-size: 1em; /*文字大きさ*/
font-weight: bold; /*太文字*/
text-align: center; /*文字改行時中央寄せ*/
text-decoration: none !important; /*下線非表示*/
}
.menu-box a:hover{
text-decoration: underline !important; /*ホバー下線表示*/
}
</style>
ホバーで下線を表示します。
ブログの設定で勝手に下線が表示されてしまう場合などはnone !importantで下線を非表示にできます。
単色ボタンメニュー用コード【ホバー色変更】
基本コードの<style>部分を以下に変更してください。
<style>
.menu-box{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 2em; /*ボタン間*/
background: #fff; /*最背景色*/
}
.menu a{
cursor: pointer;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1em; /*ボタン上の隙間*/
margin-bottom: 1em; /*ボタン下の隙間*/
padding: 20px 60px; /*上下・左右の背景余白*/
border-radius: 20px; /*角丸*/
background: #fa8072; /*背景色*/
color: #ffef00 !important; /*文字色*/
font-size: 1em; /*文字大きさ*/
font-weight: bold; /*太文字*/
text-align: center; /*文字改行時中央寄せ*/
}
.menu-box a{
transition: all .3s ease-in-out; /*ホバー時間*/
}
.menu-box a:hover{
background: #ffdab9; /*ホバー時背景色*/
color: #ff7f50 !important; /*ホバー時文字色*/
}
</style>
ホバーで色を変更します。
#fa8072や#ffdab9の部分に、好きなカラーコードを入力してください。
単色ボタンメニュー用コード【ホバー発光＆拡大】
基本コードの<style>部分を以下に変更してください。
<style>
.menu-box{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 2em; /*ボタン間*/
background: #fff; /*最背景色*/
}
.menu a{
cursor: pointer;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1em; /*ボタン上の隙間*/
margin-bottom: 1em; /*ボタン下の隙間*/
padding: 20px 60px; /*上下・左右の背景余白*/
border-radius: 20px; /*角丸*/
background: #fa8072; /*背景色*/
color: #ffef00 !important; /*文字色*/
font-size: 1em; /*文字大きさ*/
font-weight: bold; /*太文字*/
text-align: center; /*文字改行時中央寄せ*/
}
.menu-box a{
transition: all .3s ease-in-out; /*ホバー時間*/
}
.menu-box a:hover{
box-shadow: 0 0 20px #fa8072; /*ホバー発光*/
transform: scale(1.05); /*ホバー拡大*/
}
</style>
ホバーで発光と拡大をします。
どちらか片方でも使えます。不要なコードを削除して使ってください。
単色ボタンメニュー用コード ※使用例※
複数のホバー動作と枠線を追加した使用例を２つ掲載しておきます。
参考にしてみてください。
使用例①
<style>
.menu-box{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 3em; /*ボタン間*/
background: #ffefef ; /*最背景色*/
}
.menu a{
cursor: pointer;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1em; /*ボタン上の隙間*/
margin-bottom: 1em; /*ボタン下の隙間*/
padding: 20px 20px; /*上下・左右の背景余白*/
border-radius: 30px; /*角丸*/
background: #ffe4e1; /*背景色*/
border: 10px dashed #db7093; /*線の太さ・線の種類・線の色*/
color: #db7093 !important; /*文字色*/
font-size: 1em; /*文字大きさ*/
font-weight: bold; /*太文字*/
text-align: center; /*文字改行時中央寄せ*/
transition: all .2s ease-in-out; /*ホバー時間*/
}
.menu-box a:hover{
background: #ffb6c1; /*ホバー背景色*/
color: #db7093 !important; /*ホバー文字色*/
box-shadow: 0 0 20px #db7093; /*ホバー発光*/
}
</style>
使用例②
<style>
.menu-box{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 2em; /*ボタン間*/
background: #e5e4e2; /*最背景色*/
}
.menu a{
cursor: pointer;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1em; /*ボタン上の隙間*/
margin-bottom: 1em; /*ボタン下の隙間*/
padding: 10px 25px; /*上下・左右の背景余白*/
border-radius: 5px; /*角丸*/
background: #b0e0e6; /*背景色*/
border: 15px inset #87a2c4; /*線の太さ・線の種類・線の色*/
color: #36454f !important; /*文字色*/
font-size: 1em; /*文字大きさ*/
font-weight: bold; /*太文字*/
text-align: center; /*文字改行時中央寄せ*/
transition: all .2s ease-in-out; /*ホバー時間*/
}
.menu-box a:hover{
background: #afeeee; /*ホバー背景色*/
border: 15px outset #87a2c4; /*線の太さ・ホバー線の種類・線の色*/
box-shadow: 5px 5px 5px #87a2c4; /*ホバー影*/
}
</style>
色別ボタンメニュー用コード
色別ボタンメニュー用コード【基本】
基本の色別ボタンメニュー用コードは以下の通りです。
<div class="menu-box">
<div class="menu1">
<a href="リンク先URL1">メニュー<br />1</a>
</div>
<div class="menu2">
<a href="リンク先URL2">メニュー<br />2</a>
</div>
<div class="menu3">
<a href="リンク先URL3">メニュー<br />3</a>
</div>
</div>
<style>
.menu-box{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 2em; /*ボタン間*/
background: #fff; /*最背景色*/
}
.menu1 a, .menu2 a, .menu3 a{
cursor: pointer;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1em; /*ボタン上の隙間*/
margin-bottom: 1em; /*ボタン下の隙間*/
padding: 20px 60px; /*上下・左右の背景余白*/
border-radius: 20px; /*角丸*/
color: #fff !important; /*文字色*/
font-size: 1em; /*文字大きさ*/
font-weight: bold; /*太文字*/
text-align: center; /*文字改行時中央寄せ*/
}
.menu1 a{
background: #db7093; /*背景色1*/
}
.menu2 a{
background: #4997d0; /*背景色2*/
}
.menu3 a{
background: #93c572; /*背景色3*/
}
</style>
リンク先URL123にURLを、メニュー<br/>123の部分を任意のテキストに変更してください。
<br/>を使うことで改行ができます。
背景色や文字色などは<style>で調整可能です。/*コメントアウト*/で説明を加えているので参考にしてみてください。
基本コードはマウスカーソルが変わるだけで分かりにくいので、ホバー（マウスをのせる動作）で変化を付けたコードを次に紹介します。
色別ボタンメニュー用コード【ホバー下線】
基本コードの<style>部分を以下に変更してください。
<style>
.menu-box{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 2em; /*ボタン間*/
background: #fff; /*最背景色*/
}
.menu1 a, .menu2 a, .menu3 a{
cursor: pointer;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1em; /*ボタン上の隙間*/
margin-bottom: 1em; /*ボタン下の隙間*/
padding: 20px 60px; /*上下・左右の背景余白*/
border-radius: 20px; /*角丸*/
color: #fff !important; /*文字色*/
font-size: 1em; /*文字大きさ*/
font-weight: bold; /*太文字*/
text-align: center; /*文字改行時中央寄せ*/
text-decoration: none !important; /*下線非表示*/
}
.menu1 a{
background: #db7093; /*背景色1*/
}
.menu2 a{
background: #4997d0; /*背景色2*/
}
.menu3 a{
background: #93c572; /*背景色3*/
}
.menu-box a:hover{
text-decoration: underline !important; /*ホバー下線表示*/
}
</style>
ブログの設定で勝手に下線が表示されてしまう場合などはnone !importantで下線を非表示にできます。
色別ボタンメニュー用コード【ホバー色変更】
基本コードの<style>部分を以下に変更してください。
<style>
.menu-box{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 2em; /*ボタン間*/
background: #fff; /*最背景色*/
}
.menu1 a, .menu2 a, .menu3 a{
cursor: pointer;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1em; /*ボタン上の隙間*/
margin-bottom: 1em; /*ボタン下の隙間*/
padding: 20px 60px; /*上下・左右の背景余白*/
border-radius: 20px; /*角丸*/
color: #fff !important; /*文字色*/
font-size: 1em; /*文字大きさ*/
font-weight: bold; /*太文字*/
text-align: center; /*文字改行時中央寄せ*/
}
.menu1 a{
background: #db7093; /*背景色1*/
}
.menu2 a{
background: #4997d0; /*背景色2*/
}
.menu3 a{
background: #93c572; /*背景色3*/
}
.menu1 a:hover, .menu2 a:hover, .menu3 a:hover{
color: #ffffe0 !important; /*ホバー文字色*/
}
.menu1 a:hover{
background: #ffb6c1; /*ホバー背景色1*/
}
.menu2 a:hover{
background: #89cff0; /*ホバー背景色2*/
}
.menu3 a:hover{
background: #90ee90; /*ホバー背景色3*/
}
</style>
ホバーで色を変更します。
カラーコードを変更して使ってください。
色別ボタンメニュー用コード【ホバー発光＆拡大】
基本コードの<style>部分を以下に変更してください。
<style>
.menu-box{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 2em; /*ボタン間*/
background: #fff; /*最背景色*/
}
.menu1 a, .menu2 a, .menu3 a{
cursor: pointer;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1em; /*ボタン上の隙間*/
margin-bottom: 1em; /*ボタン下の隙間*/
padding: 20px 60px; /*上下・左右の背景余白*/
border-radius: 20px; /*角丸*/
color: #fff !important; /*文字色*/
font-size: 1em; /*文字大きさ*/
font-weight: bold; /*太文字*/
text-align: center; /*文字改行時中央寄せ*/
}
.menu1 a{
background: #db7093; /*背景色1*/
}
.menu2 a{
background: #4997d0; /*背景色2*/
}
.menu3 a{
background: #93c572; /*背景色3*/
}
.menu1 a, .menu2 a, .menu3 a{
transition: all .3s ease-in-out; /*ホバー時間*/
}
.menu1 a:hover, .menu2 a:hover, .menu3 a:hover{
transform: scale(1.05); /*ホバー拡大*/
}
.menu1 a:hover{
box-shadow: 0 0 20px #db7093; /*ホバー発光1*/
}
.menu2 a:hover{
box-shadow: 0 0 20px #4997d0; /*ホバー発光2*/
}
.menu3 a:hover{
box-shadow: 0 0 20px #93c572; /*ホバー発光3*/
}
</style>
ホバーで発光と拡大をします。
どちらか片方でも使えます。不要なコードを削除して使ってください。
色別ボタンメニュー用コード ※使用例※
複数のホバー動作と枠線を追加した使用例を２つ掲載しておきます。
参考にしてみてください。
使用例①
<style>
.menu-box{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 2em; /*ボタン間*/
background: #c1a7c4; /*最背景色*/
}
.menu1 a, .menu2 a, .menu3 a{
cursor: pointer;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1em; /*ボタン上の隙間*/
margin-bottom: 1em; /*ボタン下の隙間*/
padding: 30px 25px; /*上下・左右の背景余白*/
border-radius: 50%; /*角丸*/
background: #ffffe0; /*背景色*/
font-size: 1em; /*文字大きさ*/
font-weight: bold; /*太文字*/
text-align: center; /*文字改行時中央寄せ*/
transition: all .3s ease-in-out; /*ホバー時間*/
}
.menu1 a{
border: 20px double #db7093; /*線の太さ・線の種類・線の色1*/
color: #db7093 !important; /*文字色1*/
}
.menu2 a{
border: 20px double #4997d0; /*線の太さ・線の種類・線の色2*/
color: #4997d0 !important; /*文字色2*/
}
.menu3 a{
border: 20px double #93c572; /*線の太さ・線の種類・線の色3*/
color: #93c572 !important; /*文字色3*/
}
.menu1 a:hover, .menu2 a:hover, .menu3 a:hover{
border: 20px double #ffffe0; /*線の太さ・線の種類・ホバー線の色*/
color: #ffffe0 !important; /*ホバー文字色*/
}
.menu1 a:hover{
background: #db7093; /*ホバー背景色1*/
}
.menu2 a:hover{
background: #4997d0; /*ホバー背景色2*/
}
.menu3 a:hover{
background: #93c572; /*ホバー背景色3*/
}
</style>
使用例②
<style>
.menu-box{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 2em; /*ボタン間*/
background: #eae0c8; /*最背景色*/
}
.menu1 a, .menu2 a, .menu3 a{
cursor: pointer;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1em; /*ボタン上の隙間*/
margin-bottom: 1em; /*ボタン下の隙間*/
padding: 10px 40px; /*上下・左右の背景余白*/
border-radius: 0; /*角丸*/
border: 5px dotted #e8f48c; /*線の太さ・線の種類・線の色*/
color: #fff !important; /*文字色*/
font-size: 1em; /*文字大きさ*/
font-weight: bold; /*太文字*/
text-align: center; /*文字改行時中央寄せ*/
}
.menu1 a{
background: #fa8072; /*背景色1*/
}
.menu2 a{
background: #0abab5; /*背景色2*/
}
.menu3 a{
background: #a095c7; /*背景色3*/
}
.menu1 a, .menu2 a, .menu3 a{
transition: all .3s ease-in-out; /*ホバー時間*/
}
.menu1 a:hover, .menu2 a:hover, .menu3 a:hover{
border: 5px dashed #e8f48c; /*線の太さ・ホバー線の種類・ホバー線の色*/
transform: scale(1.1); /*ホバー拡大*/
}
</style>
注意点
スマホでの表示
紹介したコードを使用すると、横幅に入りきらない場合には自動で次の行に回るようになります。
冒頭に載せたQooQテストブログ例をスマホ表示で見るとこうなります。
↓↓↓
 |  |
ヘッダー下のメニューは縦並びになり、サイドバーのメニューは横幅が変わらないのでそのままの並びになりました。
このように、スマホでの表示も意識しながら調整してみると良いと思います。
複数メニューコードを使用する場合
複数のガジェットでメニューコードを使用する際、同じコードだと指定が上手く反映されなくなります。
例えばヘッダー下とサイドバーに別のコードを設置する時などが該当します。
複数のコードを使いたい場合、<div class="●●">の部分で違う名前をつけて判別させる必要があります。
例えば<div class="menu-box">の部分を<div class="menu-box1"><div class="menu-box2">のように番号付けすれば、別の名称として認識されます。
<style>の部分も同じように.menu-box1{ .menu-box2{のように変更を加えていけば、ちゃんと指定が反映されるようになります。
ガジェット追加でメニューを作成してみよう！
少し長くなってしまいましたが、ガジェット追加でメニューを作成する方法でした。
お気に入り記事など色々なリンクを好きに配置できると、ブログデザインの幅が広がるのではないでしょうか。
ぜひ試してみてくださいね！
ちなみに自分のブログでは現在は使用していません。
来年になったらまとめ記事を書いて、それを配置したくて考えたものになります。
皆さんの参考になっていたら嬉しいです。
