macoblog

「ゲーム × プログラミング」で生きていく

MMORPGに人生捧げてみ?

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

WordPress

WEBトマト

WEBトマト
「どうも、トマトです。最近他の人のブログを読んでは『あ、また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;
  }
}

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

追加CSSにコードをコピペ(参考スクショ)

③:アイコンの設定+テキスト編集

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

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

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

画像のパスとブログ名を設定(参考スクショ)

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

ありそうな質問まとめ

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

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

・回答
コード66行目で黄色いエラーが出ていると表示されません、手前の空白部分を削除すると直るかと思います。それでもエラーが消えない場合は、その行だけ全て手入力で入力し直すか、別のエディタで書いたものをコピペしてください。

66行目手前にある空白を削除すると直るかも

保存しても変わらない

・回答
「Ctrl」+「F5」でブラウザを更新してみてください、Macの方は「command(⌘)」+「shift(⇧)」+「R」でおなしゃす。

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

・回答
問題ありません、子テーマを使用しトラブルのないようお願いします(責任もたんぜ)

質問していいですか(他含む)?

・回答
TwitterからDMでどうぞ、ほんわりとした質問はNGです、目的・現状・欲しい回答など要点をまとめた形でお願いします。場合によってはお金取ります(トマトが破裂してしまうので)

関連記事WordPress用『ショートコード』の作り方と使用例【ブロガー向け】

関連記事マナブ産テーマ『Minimal』のレビュー+カスタマイズ内容