人生を加速させたい。

人生に変化を求めている20代前半の社畜です。ニッチな記事を書いていければいいと思います。

【スポンサーリンク】

ECサイトの商品一覧や図鑑のような一覧表示と記事へのリンクの作り方の紹介!!

別で運営しているブログで図鑑風に画像とタイトルで一覧表示して記事へと遷移させるパネルを作ってみたので紹介します。

(やり方はいくつかありますが、flexboxを使うのが簡単なのかな?と思います。)

カスタマイズするとECサイトなどの商品一覧のように見せることができます。

結構時間をかけてカスタマイズしたので、紹介してみます。(はてなブログには向いていない事をしています…)

 

 

最終的な完成形はこんな感じ

今回作ったのはこんな感じになります。画像、名前などパネル全体が記事へのリンクになっています。

まだ、レイアウトが気に入らないので修正予定ですが…

 

・チョウチョウウオ属(Chaetodon)
f:id:itsuwalove777:20200629081545j:plain
アケボノチョウチョウウオ
 
f:id:itsuwalove777:20200629082223j:plain
アミチョウチョウウオ
 
f:id:itsuwalove777:20200629082333j:plain
アミメチョウチョウウオ
 
f:id:itsuwalove777:20200629173458j:plain
カガミチョウチョウウオ
 
f:id:itsuwalove777:20200629173512j:plain
コーラレバタフライフィッシュ
 
f:id:itsuwalove777:20200629173517j:plain
ゴールデンバタフライフィッシュ
 
f:id:itsuwalove777:20200629173522j:plain
シチセンチョウチョウウオ
 
f:id:itsuwalove777:20200629173204j:plain
スダレチョウチョウウオ
 
f:id:itsuwalove777:20200629173209j:plain
セグロチョウチョウウオ
 
f:id:itsuwalove777:20200629173219j:plain
チョウチョウウオ
 
f:id:itsuwalove777:20200629173229j:plain
チョウハン
 
f:id:itsuwalove777:20200629173244j:plain
トゲチョウチョウウオ
 
f:id:itsuwalove777:20200629173441j:plain
トノサマダイ
 
f:id:itsuwalove777:20200629173257j:plain
ニセフウライチョウチョウウオ
 
f:id:itsuwalove777:20200629173308j:plain
バージェスバタフライフィッシュ
 
f:id:itsuwalove777:20200629173334j:plain
ベニオチョウチョウウオ
 
f:id:itsuwalove777:20200630104956j:plain
ミゾレチョウチョウウオ
 
f:id:itsuwalove777:20200629173340j:plain
ミレットシードバタフライフィッシュ
 
f:id:itsuwalove777:20200629173400j:plain
ユウゼン
 
f:id:itsuwalove777:20200629173420j:plain
リーフバタフライフィッシュ
 
f:id:itsuwalove777:20200629173435j:plain
レッドシーラクーンバタフライフィッシュ
 
・ハタタテダイ属(Heniochus)
f:id:itsuwalove777:20200629173449j:plain
オニハタタテダイ
 
f:id:itsuwalove777:20200629173527j:plain
シマハタタテダイ
 
f:id:itsuwalove777:20200629173325j:plain
ハタタテダイ
 
f:id:itsuwalove777:20200629173351j:plain
ムレハタタテダイ
 
・ハシナガチョウチョウウオ属(Chelmon)
f:id:itsuwalove777:20200629173315j:plain
ハシナガチョウチョウウオ
 
・フエヤッコダイ属(Forcipiger)
f:id:itsuwalove777:20200701063138j:plain
フエヤッコダイ
 
・カスミチョウチョウウオ属(Hemitaurichthys)
f:id:itsuwalove777:20200629173505j:plain
カスミチョウチョウウオ
 

 

見た目はこんな感じになります。

文字の大きさや背景、画像サイズなどは変更しても使用することができます。

作る際は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"

の部分は画像のポップアップなどの処理が組み込まれているので削除してください。

これで下のように表示されるようになると思います。(編集モードではレイアウトが整えられないので、プレビューで確認してみてください。)

・チョウチョウウオ属(Chaetodon)
f:id:itsuwalove777:20200629081545j:plain
アケボノチョウチョウウオ
 

 

一番初めの一覧のように横に並べるのは、

<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> 

 

・チョウチョウウオ属(Chaetodon)
f:id:itsuwalove777:20200629081545j:plain
アケボノチョウチョウウオ
 
f:id:itsuwalove777:20200629081545j:plain
アケボノチョウチョウウオ
 

 

画像サイズはアップロードの設定から変更することができます。

詳しくは下の記事で…! 

www.rotation-life.com

今回の場合は100pxの正方形で作っています。

 

ざっくり書いているので、不明点はコメントなどでお願いします。

カスタマイズ等は時間の関係上難しいですが… 

 

ここまで

最後までお読みいただきありがとうございます。

【スポンサーリンク】