他人のブログを見ている時に、トップページの記事一覧がタイル状に表示されるように設定してあり、「おしゃれでいいなぁ～」と思ったことはありませんか？
今回はそんな人のために、cssの記述だけで簡単にトップ画面の記事一覧をタイル状に変更する方法をご紹介したいと思います。
コピペで設定できるようにしているため、とても簡単に設定可能です！
- 今回の方法は「はてなブログpro」である事が前提となります。
トップ一覧をカードタイプからタイル状に変更する方法
まずは、はてなブログの「設定＞詳細設定」の中にあるトップページの表示形式を一覧形式に変更してください。
CSSの記述内容
/*--------------------------------------
タイル表示設定
--------------------------------------*/
.page-index .archive-entries {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.page-index .archive-entry {
flex: 0 0 48%;
position: relative;
display: flex;
flex-direction: column;
}
.page-index .archive-entry-header {
order: 2;
}
.page-index .date {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.page-index .categories {
margin-bottom: 0.5em;
}
.page-index .entry-thumb-link {
order: 1;
height: 200px;
}
.page-index .entry-thumb {
width: 100%;
height: 100%;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
position: static;
}
.page-index .entry-title {
padding: 0.5em 0 0 0;
}
.page-index .archive-entry-body {
display : none;/* スターの表示を消す */
}
.page-index .entry-description{
display:none;/* 説明文を消す */
}
.page-archive .archive-entry{
padding: 1%;
}
/*--------------------------------------
日付の位置設定
--------------------------------------*/
.page-index .date {
top: auto;
left: 27px;
}
/*--------------------------------------
タイトル表示設定＆位置設定
--------------------------------------*/
.page-archive .archive-entry .entry-title {
font-size: 130%;
}
.entry-title {
font-family: "Meiryo";
}
.page-index .entry-title {
padding: 1em 0 0 0;
}
/*--------------------------------------
カテゴリタグのレイアウト設定
--------------------------------------*/
@media (min-width: 768px){
.page-index .categories {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
position: absolute;
top: 10px;
left: 1px;
margin-bottom: 0.5em;
}
.categories a {
background: #a6d3c8;
color: white;
padding: 0 15px;
}
}
/*--------------------------------------
タイル表示設定(スマホレスポンシブ)
--------------------------------------*/
@media (max-width: 478px){
.page-index .entry-thumb-link {
height: 140px;
}
.page-index .entry-thumb {
height: 120px;
}
.page-index .entry-title {
font-size: 15px;
}
上記の内容をそのままコピペするだけでタイル表示に変更することが可能となります。
プレビュー
無事変更できました？
変更されると以下のように記事の一覧が表示されていると思います。
|
|
|
スマートフォン版もレスポンシブ対応を行っている場合は、次のように変更されます。
|
|
|
【スポンサーリンク】
スマートフォン表示は通常にしたい場合
スマートフォン表示は元の表示のままが良い場合は、以下の赤字の部分のCSSを追加で記述することにより対応が可能となります。
CSSの記述内容
/*--------------------------------------
タイル表示設定
--------------------------------------*/
@media (min-width: 768px){
.page-index .archive-entries {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.page-index .archive-entry {
flex: 0 0 48%;
position: relative;
display: flex;
flex-direction: column;
}
.page-index .archive-entry-header {
order: 2;
}
.page-index .date {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.page-index .categories {
margin-bottom: 0.5em;
}
.page-index .entry-thumb-link {
order: 1;
height: 200px;
}
.page-index .entry-thumb {
width: 100%;
height: 100%;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
position: static;
}
.page-index .entry-title {
padding: 0.5em 0 0 0;
}
.page-index .archive-entry-body {
display : none;/* スターの表示を消す */
}
.page-index .entry-description{
display:none;/* 説明文を消す */
}
.page-archive .archive-entry{
padding: 1%;
}
/*--------------------------------------
日付の位置設定
--------------------------------------*/
.page-index .date {
top: auto;
left: 27px;
}
/*--------------------------------------
タイトル表示設定＆位置設定
--------------------------------------*/
.page-archive .archive-entry .entry-title {
font-size: 130%;
}
.entry-title {
font-family: "Meiryo";
}
.page-index .entry-title {
padding: 1em 0 0 0;
}
}
そして、レスポンシブ(スマートフォン用)に対応させている下記のCSSの記述はこの場合は、不必要な部分になるため削除しても大丈夫です。
/*--------------------------------------
タイル表示設定(スマホレスポンシブ)
--------------------------------------*/
@media (max-width: 478px){
.page-index .entry-thumb-link {
height: 140px;
}
.page-index .entry-thumb {
height: 120px;
}
.page-index .entry-title {
font-size: 15px;
}
CSSが反映されない場合の対処法
CSSの記述がうまく反映されない場合は、私の過去の記事に対処するポイントが記載されているためそちらをごかくにんください。
【スポンサーリンク】
最後に
トップページのタイル表示はおしゃれで、とても人気のレイアウトになるため、はてなブログのテーマ設定でも変更することが可能になります。
しかしテーマ設定を新たに行うと、今まで記述してきたHTML・CSS・javascriptなどが全て削除されてしまい始めから設定のやり直しになるため、行う場合はバックアップを取っておくことをおすすめします。
といっても、自分でCSSやHTMLをいじった方が純粋にとても楽しいので自分で設定するほうをおすすめします！
ブログの見た目が良くなるとそれだけで、見やすく使いやすくなるのでPv数の伸びにつながります。
私もユーザビリティに優れたサイト運営ができればと頑張りたいと思います！