はてなブログ

【はてなブログ】トップページの記事一覧でアイキャッチ画像の横にタイトルを並べる方法

スマホ表示の時に、トップページの記事一覧を「Haruni」や「Minimalism」のように

f:id:langnerdmom:20210309010328j:plain:w160:h100:left
| ブログの記事タイトル


のようにしたい。

ついに、そんなカスタマイズを載せてくださっている記事を見つけました。

参考記事【はてなブログPRO向け】トップページをPCではカード型にスマホでは並列にカスタマイズしてみた~ナチュリ~【コピペOK!】 – 隣の花の育てかた

はてなブログPro」の登録が必要とのことです。

PCでの表示をカード型に変更

まずは、


「設定」➡「詳細設定」➡「トップページの表示形式」で「一覧形式」に変更しましょう。

下のコードをデザインCSSに貼り付けます。

/* トップページカード型 */
@media (min-width: 768px){
.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: 20px!important;
padding-bottom: 20px;
box-sizing: border-box;
width: calc(50% - 20px);
}
.page-index .entry-thumb {
float:none;
display: block;
width: 100%;
height: 200px;
background-position: center center;
background-size: cover;
border-radius: 8px;
}
.entry-thumb-link:hover {
opacity:0.7;
}
}
@media (min-width: 768px){
.page-index .archive-entry {
position: relative;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.page-index .entry-thumb-link {
order: 1;
height: 200px;
}
.page-index .archive-entry-header {
order: 2;
}
.page-index .categories {
order:3;
}
.page-index .archive-entry-body {
order:4
}
}
.page-index .entry-description{
display:none;
}

はてなスターを消す場合、

/* はてなスター */
.star-container {
display : none;
}

デザイン
f:id:langnerdmom:20210322141939j:plain:w200

カスタマイズ
f:id:langnerdmom:20210322142308j:plain:w200

{}デザインCSS
f:id:langnerdmom:20210322142320j:plain:w200

へ貼り付けて「保存」

スマホから見たときに画像が左、タイトルが右の横並びにする

ゆいさんの「【はてなブログPRO向け】トップページをPCではカード型にスマホでは並列にカスタマイズしてみた~ナチュリ~【コピペOK!】」では、

  • 画像が右側バージョン
  • 画像が左側バージョン

の2つが紹介されています。

私は左側バージョンが好きなので、そちらだけを載せさせていただきます。

/*スマホ表示*/
@media screen and (max-width: 768px) {
body.page-index .entry-title {
float:right;/*記事タイトルを右に*/
padding:5px 0 5px 5px;
width:95%;
line-height:1.00em;/*行間*/
}
body.page-index .entry-title a{
color: #402000 !important;/*記事タイトルの色*/
font-size: 0.65em;/*記事タイトルの文字の大きさ*/
}
body.page-index.page-archive .archive-entries .archive-entry{
position: relative;
margin: 0 0 8%;
}
body.page-index.page-archive .archive-entries .entry-title{
width: 58%;
}
body.page-index section.archive-entry .categories {
float:right;/*カテゴリーを右に*/
width: 58%;
border-bottom: 1px dashed #dddddd;/*カテゴリー下の破線をつける*/
padding-bottom: 15px;
}
body.page-index .entry-thumb-link{
position: absolute;
top: 0;
left: 0;/*アイキャッチを左に*/
}
/*アイキャッチの画像*/
body.page-index .entry-thumb-link .entry-thumb{
  width: 100%;
height: 100px;
background-position: center center;/*中央寄せに*/
  display: block;
margin: 0 auto;
border-radius: 8px;/*角を丸く*/
}
/*日付を消す*/
.entry-date.date.first, .date {
display: none;
}
}

デザインCSSに先ほどコピペした、PC表示だけをカード型にするCSSの下に、上記のコードを貼り付けます。

それだけで完成!!!

何て素敵なんでしょう💛

カスタマイズをしていく中で、このコードは使わないことにしたのですがせっかくなので忘備録として書いておくことに決めました

使いたくなった時に、参考にします!

以上、はてなブログのスマホ表示で
TOP画面のアイキャッチと記事タイトルを横並びにする方法でした。

簡単で素敵💛