別で運営しているブログで図鑑風に画像とタイトルで一覧表示して記事へと遷移させるパネルを作ってみたので紹介します。
(やり方はいくつかありますが、flexboxを使うのが簡単なのかな？と思います。)
カスタマイズするとECサイトなどの商品一覧のように見せることができます。
結構時間をかけてカスタマイズしたので、紹介してみます。(はてなブログには向いていない事をしています…)
最終的な完成形はこんな感じ
今回作ったのはこんな感じになります。画像、名前などパネル全体が記事へのリンクになっています。
まだ、レイアウトが気に入らないので修正予定ですが…
見た目はこんな感じになります。
文字の大きさや背景、画像サイズなどは変更しても使用することができます。
作る際はHTMLを書いていくことになるので、カスタマイズする際はHTMLの知識が必要になります。
一覧の作り方！
上のような一覧表示を作成する方法を紹介していきます。
はてなブログの デザイン->カスタマイズ->デザインCSSに以下のコードを張り付けてください。
.item {
width: 100%;
}
.item-img {
padding: 0;
}
.item-body {
padding: 0px;
}
.item-title {
margin: 0 0 8px;
font-size: 10px;
font-weight: 700;
color: #ef5350;
width: 100px;
line-height: 120%;
}
.item-body p {
font-size: 16px;
font-weight: 400;
color: #333;
}.items {
display: flex;
align-content:space-between;
}
.items .item {
width: 30%;
}.item {
position: relative;
z-index: 1;
background-color: #E7FFFF;
}/* aタグの設定 */
.item a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent:-999px;
z-index: 2;
}.items3 {
display: flex;
flex-flow: row wrap;
align-content:space-between;
}.items3 .item {
width: 110px;
margin: 0 0 8px;
}.group{
//background-color: #E7FFFF;
}.group_header{
font-size: 20px;
margin: 0 0 8px;
//background-color: #fff8dc;
}
幅は110px、画像幅を100pxにして使用しています。
必要に応じて幅や色などは調整してください。
下のコードを記事のHTML編集に張り付けてください。
<div class="group">
<div class="group_header">・チョウチョウウオ属(Chaetodon)</div>
<div class="items3">
<div class="item">
<div class="item-img"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/itsuwalove777/20200629/20200629081545.jpg" /></div>
<div class="item-body">
<div class="item-title">アケボノチョウチョウウオ</div>
</div>
<a href="https://www.gogo-zoo-aquarium.com/entry/fish/Perciformes/Chaetodontidae/Chaetodon/melannotus"> </a></div>
</div>
</div>
これで1つ分のリンクパネルが出来上がります。
(imgのtitle altは書いた方が良いですが、コードで書くと画像として表示されるので消しています。)
imgのURLは一度画像を張り付けて取得することができます。
class="hatena-fotolife" itemprop="image"
の部分は画像のポップアップなどの処理が組み込まれているので削除してください。
これで下のように表示されるようになると思います。(編集モードではレイアウトが整えられないので、プレビューで確認してみてください。)
一番初めの一覧のように横に並べるのは、
<div class="item">
<div class="item-img"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/itsuwalove777/20200629/20200629081545.jpg" /></div>
<div class="item-body">
<div class="item-title">アケボノチョウチョウウオ</div>
</div>
<a href="https://www.gogo-zoo-aquarium.com/entry/fish/Perciformes/Chaetodontidae/Chaetodon/melannotus"> </a></div>
の部分を繰り返し表記します。
<div class="group">
<div class="group_header">・チョウチョウウオ属(Chaetodon)</div>
<div class="items3">
<div class="item">
<div class="item-img"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/itsuwalove777/20200629/20200629081545.jpg" /></div>
<div class="item-body">
<div class="item-title">アケボノチョウチョウウオ</div>
</div>
<a href="https://www.gogo-zoo-aquarium.com/entry/fish/Perciformes/Chaetodontidae/Chaetodon/melannotus"> </a></div>/*ここから繰り返し*/
<div class="item">
<div class="item-img"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/itsuwalove777/20200629/20200629081545.jpg" /></div>
<div class="item-body">
<div class="item-title">アケボノチョウチョウウオ</div>
</div>
<a href="https://www.gogo-zoo-aquarium.com/entry/fish/Perciformes/Chaetodontidae/Chaetodon/melannotus"> </a></div>
</div>
</div>
画像サイズはアップロードの設定から変更することができます。
詳しくは下の記事で…！
今回の場合は100pxの正方形で作っています。
ざっくり書いているので、不明点はコメントなどでお願いします。
カスタマイズ等は時間の関係上難しいですが…
ここまで
最後までお読みいただきありがとうございます。