Wordpress

Affiger5のブログ風カードをおしゃれにカスタマイズ

ブログカードサムネイル

AFFINGER5のブログ風カード使っていますか?

簡単に関連記事への内部リンクを貼れる機能で、ショートコード1つで挿入できるのですごく使いやすいです。

 

私はお手軽なので好んで使っているのですが、いかんせん見た目がちょっとシンプル・・

  • 関連記事なのかイマイチ分からない
  • シンプルすぎる

この2点が問題かな~と思いました。せっかく他記事への動線を作っているのに、クリックされなかったら悲しいですよね。

JINのオシャレなデザインを参考に、AFFINGER5のブログカードをカスタマイズしてみました。

このカスタマイズによるメリット

ラベルの文字部分に修正をかけるので、「あわせて読みたい」だけでなく、ブログカードごとに自分好みにカスタマイズ可能

このカスタマイズではラベル入力が必須になります。

元々ラベルに何も入れていない方は、Search Regexを使って一括更新しましょう。記事の最後に方法を書いておきます。

また、ブログカードBを使っている方はレイアウトが崩れてしまうのでオススメしません。Bの時にラベルを使わなければOKです。

↑何言ってるんだろう・・っていう人は多分使ってないと思うので問題なし!たぶん!

 

見た目はこうなる予定です

Before

before

After

after

個人的にはかなりいい感じ!だと思っています。

 

ブログ風カードのスタイル修正

子テーマのstyle.cssをテキストエディタで開きます。

以下のコードを終わりにコピペ。

/*ブログカードのカスタマイズ*/

.st-cardbox {
  border: 1px solid #9097f9;
  border-radius: 0px 3px 3px 3px;
  box-shadow: none;
  background-color: #f9fdff;
}

.st-cardbox:hover .st-card-img {
  transform: scale(1.08);
  transition: .3s;
}

.st-cardbox.kanren {
  margin-top:55px;
}

/*ブログカード風 - ラベル*/
.st-cardbox-label {
  position: absolute;
  top: -30px;
  left: -1px;
  width: 300px;
  height: 30px;
  overflow: hidden;
}

.st-cardbox-label-text {
  white-space: nowrap;
  display: inline-block;
  position: absolute;
  padding: 10px 10px 10px 26px;
  left: 0;
  top: -3px;
  width: auto;
  text-align: center;
  font-size: 80%;
  line-height: 1.2;
  font-weight:bold;
  background: #9097f9;
  color: #fff;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  box-shadow: none;
  z-index:9999;
}

.st-cardbox-label .st-cardbox-label-text:before {
  position: absolute;
  top: 10px;
  left: 8px;
  content: "\f15c";
  font-size: 13px;
  font-family: FontAwesome;
  font-weight: normal;
  color: #fff;
}

/*ブログカード風マガジン タイプB*/
  
.st-cardstyleb .st-cardbox {
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.st-cardstyleb .st-cardbox.kanren {
margin-top: 0px;
}

.st-cardstyleb .st-cardbox:hover .st-card-img {
transform: none;
}

更新アップロードして終わり!

WordPress上で変更する方は、「外観」→「カスタマイズ」→「CSSの追加」で上記コードをコピペすればOKです。

 

カスタマイズしたい人のために解説

.st-cardbox {
  border: 1px solid #9097f9;
  border-radius: 0px 3px 3px 3px;
  box-shadow: none;
  background-color: #f9fdff;
}

.st-cardboxはブログカードの大枠です。

borderの色や太さを変えたい方はこちら。太さを変えるとラベルの位置を微調整する必要がでてきますので注意。

border-radiusは好みで変更可能。今回のカスタマイズでは、左上にラベルで「あわせて読みたい」などの文字を表示することを前提にしています。なので、左上だけ0px。

background-colorでカード内の色を指定します。

 

.st-cardbox:hover .st-card-img {
  transform: scale(1.08);
  transition: .3s;
}

パソコンでしか分かりませんが、マウスオーバーするとサムネイル画像が少し大きくなります。

 

.st-cardbox.kanren {
  margin-top:55px;
}

ラベルの位置をbeforeで指定しているので、その分マージンを上にとる必要があります。

 

.st-cardbox-label {
  position: absolute;
  top: -30px;
  left: -1px;
  width: 300px;
  height: 30px;
  overflow: hidden;
}

ここは特にいじる必要ないと思いますけど、ラベルを長めの文字列にして右側が切れてしまった・・という時はwidthを変更します。

 

.st-cardbox-label-text {
  white-space: nowrap;
  display: inline-block;
  position: absolute;
  padding: 10px 10px 10px 26px;
  left: 0;
  top: -3px;
  width: auto;
  text-align: center;
  font-size: 80%;
  line-height: 1.2;
  font-weight:bold;
  background: #9097f9;
  color: #fff;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  box-shadow: none;
  z-index:9999;
}

ラベルのテキスト変更です。

元々は、画像の上に斜めリボンになっています。-webkit-transformあたりでその処理を行っているので、全てnoneに。

フォントサイズは相対指定の80%。レスポンシブサイトだと文字のサイズが変わったりするので、相対指定が良い気がします。

backgroundで文字の背景色を指定しています。変更する方はここ。

 

.st-cardbox-label .st-cardbox-label-text:before {
  position: absolute;
  top: 10px;
  left: 8px;
  content: "\f15c";
  font-size: 13px;
  font-family: FontAwesome;
  font-weight: normal;
  color: #fff;
}

Fontawesomeでアイコン追加。アイコンを変更したい方は、contentの中身で別のアイコンに置き換え可能。

 

/*ブログカード風マガジン タイプB*/
  
.st-cardstyleb .st-cardbox {
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.st-cardstyleb .st-cardbox.kanren {
margin-top: 0px;
}

.st-cardstyleb .st-cardbox:hover .st-card-img {
transform: none;
}

ブログカードBを使っている方はレイアウトが崩れますので、無効にしています。最低限しか処理していないので、ブログカードBではラベルが使えませんので注意

 

Search Regexを使って一括更新

このカスタマイズではラベル入力が必須になります。

今までラベルに何も入力してこなかった人は、記事を1つずつ更新するのは超面倒だと思うのでSearch Regexという神プラグインを使って一括更新しましょう。

 

「プラグイン」→「新規追加」で、Search Regexで検索します。

search regex

インストールして有効化してください。

 

「ツール」→「Search Regex」をクリック。

一括更新画面

  • Source:Post content
  • Limit to:No limit
  • Order By:Ascending

にします。

Search patternに、label=””と入力し、Searchを押します。

そうするとResultsにヒットした文字列がドドーっと表示されます。

間違ったものがないかなど確認してください。

 

OKであれば、Replace patternにlabel=”あわせて読みたい”と入力します。

文字間違えると大変なことになります

Replace & Saveを押して終わり。

 

まとめ

AFFINGER5のブログカードをおしゃれにカスタマイズする方法を紹介しました。

ラベル入力が必須ですが、カードによって文字を変更できるのでかなり汎用性が高いです。

アイコンなり、色なりはご自分で好みにカスタマイズしちゃってください!

サムネイル画像サイズの変更については、要望があったりすればまた。

スライドメニュー文字追加
Affingerのスライドメニューに「MENU」の文字を追加しよう!ツイッターでちょっと話題になっていたので、Affinger5のスライドメニューのトリガーに「MENU」文字を追加する方法について書きます...
AFFINGER5のカスタマイズ集AFFINGER5にしてから細かく行った色んなカスタマイズを備忘録として置いておきます。 ここで紹介しているカスタマイズはほとんど...