ひつじさんのテーマ「JIN」のブログカードをカスタマイズする方法

他ブログとの差別化と言いましてもサイトの外観を大きく変えるってのは大変なので、タイトルにある「ブログカード」をカスタマイズして差別化しようじゃないかという提案になります、今回はその具体的な手順について解説したいと思います。

ブログカードをカスタマイズする方法

①：完成イメージ

ブログカードについて解説

完成イメージは上記のような感じ、デフォルトの「あわせて読みたい」という囲みは無くなり、よりカードらしくシンプルに仕上げました。

左下にアイコンとサイト名を表示することで内部リンクということがハッキリ分かりますし、ブログも覚えてもらいやすくなると思います（再訪問されやすくなる）

右下に「続きを読む」と表示するだけだとベタすぎるので、カーソルを合わせた際に全体にアニメーションが走るようにしました（ちょっとお洒落にしてみた。笑）

実装手順について『2ステップでOK』

1. 「追加CSS」にコードをコピペ
2. アイコンの設定＋テキスト編集

難しいことはしなくていいよう基本的にはコピペと軽い編集で済むようになっています、編集といっても画像のリンク（パス）を設定してブログ名を記述するだけです(;^ω^)

それではサクッと解説してきましょう。

②：「追加CSS」にコードをコピペ

テーマ機能として「追加CSS」というがあるのでそれを使います、[外観>カスタマイズ>追加CSS]から下記のスタイルコードをコピペします。

a.blog-card {
  background: #fff;
  border-radius: 0;
  border-color: #999 !important;
  box-shadow: 4px 4px 0px #666;
  margin-top: 0 !important;
}
a.blog-card::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: '';
  background: rgba(0, 0, 0, 0.4);
  transform-origin: left top;
  transform: scale(0, 1);
  transition: transform .3s;
}
a.blog-card::after {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  left: 50%;
  z-index: 1;
  content: '続きを読む';
  color: #fff;
  width: 85px;
  height: 24px;
  border: solid 2px #fff;
  padding: 4px 25px 7px;
  transform-origin: left top;
  transform: scale(0, 1);
  transition: transform .3s;
}
a.blog-card:hover::before {
  transform-origin: right top;
  transform: scale(1, 1);
}
a.blog-card:hover::after {
  transform-origin: right top;
  transform: translate(-50%,-50%) scale(1, 1);
}
a.blog-card:hover .blog-card-thumbnail img {
  transform: scale(1);
}
a.blog-card .blog-card-hl-box {
  display: none;
}
a.blog-card .blog-card-thumbnail {
  padding-bottom: 15px;
}
a.blog-card .blog-card-thumbnail::before {
  content: "";
  background-image: url(ここに画像のパス);
  background-size: contain;
  display: inline-block;
  width: 23px;
  height: 23px;
  position: absolute;
  left: 20px;
  bottom: 7px;
}
a.blog-card .blog-card-thumbnail::after {
    content: "ここにブログ名";
  color: #333;
  font-size: 13px;
  display: inline-block;
  position: absolute;
  left: 48px;
  bottom: 10px;
}
a.blog-card  .blog-card-excerpt {
  color: #999;
}
@media (max-width: 767px) {
  a.blog-card .blog-card-thumbnail::before {
    bottom: 2px;
  }
  a.blog-card .blog-card-thumbnail::after {
    bottom: 5px;
  }
}
@media (max-width: 479px) {
  a.blog-card .blog-card-content {
    padding-bottom: 15px;
  }
  a.blog-card .blog-card-thumbnail::before {
    left: 15px;
  }
  a.blog-card .blog-card-thumbnail::after {
    left: 43px;
  }
  a.blog-card .blog-card-box {
    display: block;
  }
  a.blog-card .blog-card-box .blog-card-thumbnail {
    margin-right: 0;
  }
}

一応スクショも載せておきます、下記を参考に答え合わせしてください。

③：アイコンの設定＋テキスト編集

最後にコピペしたコードの一部を編集します、下記の通りです。

• アイコンの設定
  先ほどのコード56行目にある「ここに画像のパス」の部分をアイコンとなる画像のパスに置き換えてください、画像に関しては管理画面の「メディア」にアップロードし、そこで発行されたパス（リンク）を使用すればOKです。
  ※画像サイズは「１：１」推奨、アイコンを中心に正方形のものがオススメ
• ブログ名の設定
  先ほどのコード66行目にある「ここにブログ名」の部分をサイト名に置き換えてください（長すぎるのは勘弁な。笑）

下記のような感じで設定すればOKです、答え合わせにどうぞ。

両方とも設定して保存（公開）したら作業は完了です、お疲れさまでした。

ありそうな質問まとめ

ありそうな質問は先読みして答えておこうと思います（随時更新）、質問はTwitter→DMからどうぞ（返信するかは気分次第です）

ブログ名が表示されない＋エラーが出てる

保存しても変わらない

コードはstyle.cssに直接コピペしてOKですか？

質問していいですか（他含む）？

以上。