【ブログテーマ「絢爛」カスタマイズ】リスト型レイアウトにする

この記事ははてなブログテーマ「絢爛」のカスタマイズ紹介ページです。

「全文表示」にしたときに適用されるカスタマイズです。

絢爛（KENRAN） - テーマ ストア

カスタマイズ後の見た目

注意点

• 記事の一番上の画像がアイキャッチ画像として表示されます。
• はてなブログによって広告が表示されている場合広告を非表示にする（Proのみ）もしくは当カスタマイズをしようしないでください。規約違反となる恐れがあります。
• Googleアドセンスをトップページで記事内に表示されないようにしてください。隠れてしまいポリシー違反となる恐れがあります。
• 記事中に「続きを読む」を挿入している場合に限り、トップページで続きを読むボタンが表示されます。

こちらも合わせてお読みください。

プライバシーポリシー・免責事項

コードの貼り付け場所

コードはデザインCSSに貼り付けますが、このとき一番下に貼り付けるようにしてください。

コード

.page-index .entry {
  width: 100%;
  height: 280px;
  box-sizing: border-box;
  padding-left: 50%
}
.page-index .entry::before {
  position: absolute;
  content: "";
  width: 50%;
  height: 100px;
  bottom: 60px;
  right: 0;
  background: linear-gradient(rgba(255,255,255,0), #FFF);
  z-index: 2
}
.page-index .entry-header {
  padding: 0 24px
}
.page-index .entry-inner {
  height: 160px;
  margin: 60px 0;
  overflow: hidden
}
.page-index .entry-title {
  font-size: 1.1em
}
.page-index .entry-content p:first-child img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 50%;
  height: 280px;
  border-radius: 5px 0 0 5px;
  object-fit: cover
}
.page-index .entry-content p:first-child img:hover {
  box-shadow: 0 0 0 10px #FFFA inset
}
.page-index .entry-content {
  padding: 0 24px 10px;
  font-size: .9em;
  line-height: 1.6em
}
.page-index .entry-content h1, .page-index .entry-content h2, .page-index .entry-content h3, .page-index .entry-content h4, .page-index .entry-content h5, .page-index .entry-content h6, .page-index p {
  display: inline;
  font-size: 1em;
  font-weight: 400;
  border: none
}
.page-index h3::before, .page-index h4::before, .page-index h5::before {
  display: none
}
@media(max-width: 480px){
  .page-index .entry {
    width: 100%;
    height: 500px;
    box-sizing: border-box;
    padding-left: 0;
    padding-top: 250px
  }
  .page-index .entry-inner{
    margin: 12px 0;
    height: 165px;
  }
  .page-index .entry-content p:first-child img {
    width: 100%;
    height: 250px;
    border-radius: 5px 5px 0 0
  }
  .page-index .date a{
    top: 24px
  }
  .page-index .categories a{
    text-shadow: 0 0 10px #000;
    color: #FFF
  }
  .page-index .entry::before{
    width: 100%;
    bottom: 73px
  }
}

このカスタマイズに不具合がある場合はコメントまたは、TwitterのDMでお知らせください。