iiie.nagoya

物づくりと生活、"経験"を記事へ

【'19/07/13】
当ブログで使用しているカスタマイズテーマ『riseup』をテーマストアで公開しました。はてなブログを使用している方なら無料でインストールすることが可能です。(はてなProでの利用を推奨しています)

詳細は以下のページに記載しています。
https://www.iiie.nagoya/entry/2019/07/13/210356

ブログテーマページはこちら
http://blog.hatena.ne.jp/-/store/theme/17680117127217464048

CSS:一覧記事表示の『カード型レイアウト』カスタマイズについて

f:id:gorislog:20190407194632p:plain



 

トップページである記事一覧ページのカスタマイズをちまちましていました。

今回はカスタマイズした一部分のコードを備忘録として掲載します。(そのままの使用を推奨する記事ではありません、仕様は自己責任で)

 

  

※当ブログで行ったカスタマイズ一覧

www.iiie.nagoya

本日触っていたのは、記事一覧ページのカード型レイアウト部分。

 

もともとは、Nakedというレスポンシブ対応の2カラムテーマを使用していたのですが、カスタマイズを行って1カラム化、はてなProにアップグレードして記事一覧化を選択し、CSSコードを書き込み、カード型レイアウトに換装しています。

 

カード型レイアウトへ換装するために使用したコードは"minimalgreen"さんが公開しているコードを元に書き換えました。

 

blog.minimal-green.com

 カード型レイアウトはアイキャッチ画像を大きく表示できるので、視覚的に興味を引くことができそうです。僕は写真を撮るセンスが無いので、フリー画像の"pixabay"を多用しています。

 

pixabay.com

 

カード型レイアウトを実装すると、通常の記事一覧表示よりも多く記事数を表示させたくなります(僕のブログは11記事)が、記事数を多くしてしまうと画像読み込み数が増えてしまいますので、ページ読み込み速度が遅くなります

はてなブログで実装する際は、はてなフォトライフの画像投稿時の圧縮設定を事前にやっておいたほうが良さそうです。

 

www.foxism.jp

 

使用しているコード

当ブログで使用しているコードです。カード型レイアウトに関する記述部分をコピーし、一部関係のないコードを撤去しています。そのままコピー&ペーストして動作するかは保証できかねますので、使用する際は元のコードの保存を行ってください

 

また、上記に記載した通り、はてなブログのProへアップグレードし、”記事一覧表示”を選択しなければ使用できません。(無料で記事一覧表示をトップにすることができる方法もあるそうですが....)

 

 ※当ブログが実際に使用しているコード(2019年1月20日現在)

@keyframes SlideUp {
0% {
opacity: 0;
transform: translateY(40px);/* Y軸方向に50px */
}
100% {
opacity: 1;
transform: translateY(0);/* Y軸方向に0px */
}
}

 

.page-archive .archive-entries .archive-entry {
animation-name: SlideUp;
animation-duration: 2s;
}
.page-archive .categories a {
margin: 0px 0px 3px 0px;
color: #333;
font-size: 7px;
display:inline-block;
width:auto;
padding:4px 8px;
border:none;
background-color:#f0f0f0;
}
.page-archive .categories a::before {
margin-right: 3px;
font-family: 'blogicon';
content: '\f022';
}

.page-index .archive-entries > section:first-child {
flex: 0 0 100%;
}
.page-index .archive-entries {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.page-index .archive-entry {
margin-bottom: 10px!important;
padding-bottom: 0px;
box-sizing: border-box;
width: calc(50% - 0px);
}
.page-index .entry-thumb {
float:none;
display: block;
width: 100%;
height: 200px;
background-position: center center;
background-size: cover;
}
.page-index .entry-description{
display:none;
}
.entry-thumb-link:hover {
opacity: 0.7;
}
.page-archive .entry-title {
padding: 0;
}
.page-index .date{
padding-top: 0px;
}
.page-index .archive-entry {
position: relative;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.page-index .entry-thumb-link {
order: 1;
height: 200px;
padding-top: 0px;
}
.page-index .categories {
order:2;
position: absolute;
z-index: 1;
padding: 10px 0 0 0;
}
.page-index .archive-entry-header {
order: 3;
padding-top: 10px;
}
.page-index .archive-entry-body {
order: 4;
border-bottom: 1px solid #f2f2f2;
padding-bottom: 20px;
margin-bottom: 10px;
}
.star-container {
display : none;
}
hatena-bookmark-button {
display : none;
}
.page-index .entry-thumb {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.page-index .entry-thumb:hover {
opacity: 0.6;
filter: alpha(opacity=40);
}  

 

部分解説

当ブログで使用しているコードですが、他の要素で表示される部位の設定を行っている箇所もありますので、そのまま記載しても正常な動作が起きない場合があります。大まかな変更した要素を記載しますので、必用な箇所の部分使用や、問題の解決に役立てていただければ幸いです。※paddingやmarginといった位置合わせの要素に関しては言及しません。

 

また、"minimalgreen"さんが公開しているコードの要素順番を変更しています。公開されているコードは

  1. アイキャッチ画像
  2. 日付とタイトル
  3. カテゴリー
  4. 本文(説明文)

ですが、僕のブログでは

  1. アイキャッチ画像
  2. カテゴリー
  3. 日付とタイトル
  4. 本文(非表示)と仕切り線

の順番に変更されています。ちなみに"order"番号の変更をすると表示順が変更できます。

 

ページ表示時に、カード型レイアウト部が下から持ち上がってくるようなモーションを追加する

@keyframes SlideUp {
0% {
opacity: 0;
transform: translateY(40px);/* Y軸方向に50px */
}
100% {
opacity: 1;
transform: translateY(0);/* Y軸方向に0px */
}
}

 

.page-archive .archive-entries .archive-entry {
animation-name: SlideUp;
animation-duration: 2s;
}

 

モーションを参考にした記事

www.uenoyou.net

 

カード型レイアウトのカテゴリー表示を背景指定したボックス内に表示し、カテゴリー名の前に指定したアイコンを表示する

.page-archive .categories a {
margin: 0px 0px 3px 0px;
color: #333;
font-size: 7px;
display:inline-block;
width:auto;
padding:4px 8px;
border:none;
background-color:#f0f0f0;
}
.page-archive .categories a::before {
margin-right: 3px;
font-family: 'blogicon';
content: '\f022';
}

 

 

 ページ上に表示される一件目の記事を拡大表示し、表示領域いっぱいに表示する。

.page-index .archive-entries > section:first-child {
flex: 0 0 100%;
} 

 

 

カテゴリー表示を画像上に設置する。画像左上より、10pxの間隔を空け、表示。

z-index: 1;
padding: 10px 0 0 0;

 

記事間に1pxの仕切り線を表示する

border-bottom: 1px solid #f2f2f2;

 

スター表示、はてなブックマークボタン(はてなブックマーク数)の非表示化

.star-container {
display : none;
}
hatena-bookmark-button {
display : none;

 

画像へのマウスオーバー時、色がふわっと白くなる動作の追加

.page-index .entry-thumb {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.page-index .entry-thumb:hover {
opacity: 0.6;
filter: alpha(opacity=40);
}   

 

 

おわり。

 

他のブログカスタマイズに関して

www.iiie.nagoya