【THE THOR】ブログカード・サイトカードのカスタマイズ

この記事では、WordPressテーマ【THE THOR(ザ・トール)】の「ブログカード」「サイトカード」をカスタマイズする方法をご紹介します。

ブログカード

サイトカード

ザ・トールの「ブログカード(外部記事リンク)」「サイトカード(内部記事リンク)」はシンプルなデザインですが、少し大きいなぁと感じるところがあります。そこで、シンプルさは活かしつつ、コンパクトなデザインへカスタマイズしてみたいと思います。

サイトカードのカスタマイズ

 カスタマイズ後のイメージ

関連記事

画像編集ソフトがなくても「エクセル」と「ペイント」だけでアイキャッチ画像が作れる！

表計算ソフトで有名な「Excel（エクセル）」ですが、実は、画像の編集や加工をするのに役立つソフトだってことを、知っていましたか？ 私自身も簡単な表を作ったり、データをまとめたりするぐらいの使い方しかしていませんでした。しかし、画像の編集[…]

カスタマイズ後のイメージと同じにしたい場合は、下のCSSをコピーし、外観 ＞ カスタマイズ ＞ 追加CSS　に貼り付けてください。

/*サイトカードのカスタマイズ*/
.content .sitecard{
padding:25px; 
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.15);
border-radius: 7px;
}
.content .sitecard__subtitle {
padding: 3px 10px;
background: rgba(0,191,255,0.3);
border-radius:0 0 7px 0;
}
.content .sitecard__contents {
margin-top: 2rem;
}
.content .sitecard__contents .phrase {
display: none;
}
.content .sitecard .eyecatch {
margin-top: 0;
max-width: 120px;
}
.sitecard__contents .heading-secondary a {
font-size: 1.6rem;
margin-top: 5px;
}

@media only screen and (min-width: 992px){
.content .sitecard {
max-width: 80%;
margin: 2rem auto;
}
}

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

カスタマイズ後のイメージ

FIT-フィット

FIT-フィット

千葉のホームページ制作会社…

カスタマイズ後のイメージと同じにしたい場合は、下のCSSをコピーし、外観 ＞ カスタマイズ ＞ 追加CSS　に貼り付けてください。

/***ブログカードのカスタマイズ***/
.content .blogcard{
padding:25px;
box-shadow:0 1px 2px 0 rgba(0,0,0,0.15);
border-radius:7px;
}
.content .blogcard__subtitle{
padding:3px 10px;
border-radius:0 0 7px 0;
}
.content .blogcard__contents{
margin-top:2rem;
}
.content .blogcard__contents .phrase{
display:none;
}
.content .blogcard .eyecatch{
max-width:120px;
margin-top:0;
}
.blogcard__contents .heading-secondary a{
font-size:1.6rem;
margin-top:5px
}
@media only screen and (min-width: 992px){
.content .blogcard {
max-width: 80%;
margin: 2rem auto;
}
}

細かい調整を行い方は、次のCSSコードの解説を参考にしてみてください。

CSSコードの解説

サイトカードは「.sitecard」、ブログカードは「.blogcard」を使ってスタイルが適用されるように指定しています。それ以外は、ほとんど同じ内容です。

１つ違う点は、サイトカードのサブタイトル(関連記事と表示されるところ)に背景色が設定されているところ。ブログカードのCSSに背景色を指定する記述を追加することで、オリジナルカラーに変えることができます。

解説は、サイトカードのCSSを例に説明していきますので、ブログカードについては、「.sitecard」を「.blogcard」に置き換えてくださいね。

それでは解説していきます。

.content .sitecard{ 
padding:25px; 
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.15); 
border-radius: 7px; 
}

padding:25px;

見出し、アイキャッチ、抜粋文の周りの余白を指定しています（ピンク色の部分）。上下左右、同じ幅です。

デフォルトは、20pxで設定されているので、広くしたい場合は数字を大きく、狭くしたい場合は小さくすることで調整することができます。

box-shadow: 0 1px 2px 0 rgba(0,0,0,0.15);

ボックスの周囲に影ができるように指定しています。デフォルトのサイトカードには影がないので追加しました。

「0 1px 2px 0」の部分は、上・右・下・左の順でボックス周りの影の太さを表しています。

太さの指定だけでは色が濃いので、「rgba(0,0,0,0.15)」で透明度を指定していきます。

「rgba(0,0,0,0.15)」は、色と透明度するCSSです。rgbaは、red、green、blue、alphaの略。RGBは0-255、または0-100%で指定し、透明度は0(完全に透明)～1(完全に不透明)の数値で指定します。ちなみに、0,0,0,は黒を表しており、数値を変えると別の色を指定することができます。

border-radius: 7px;

角を丸く指定。値が大きくなるとゆるやかなカーブになります。

.content .sitecard__subtitle {
padding: 3px 10px;
background: rgba(0,191,255,0.3);
border-radius:0 0 7px 0;
}

ここでは、サブタイトルのカスタマイズをしています。サブタイトルとは、サイトカードでは「関連記事」、ブログカードでは「サイト名」が表示される部分です。

padding:3px 10px;

余白(グレーの部分)を指定（上下3px、左右10px)。

background: rgba(0,191,255,0.3);

サブタイトルの背景色を指定。

border-radius:0 0 7px 0;

左上の角丸が7pxなので、右下の角丸も同じ値で指定しています。

border-radiusの値は、左上、右上、右下、左下の角の順に並んでいます。

.content .sitecard__contents {
margin-top: 2rem;
}

margin-top: 2rem;

オレンジ色エリアの高さ(余白)を指定しています。

.content .sitecard__contents .phrase {
display: none;
}

サイトカードに表示される抜粋文を非表示にするカスタマイズです。

.content .sitecard .eyecatch {
margin-top: 0;
max-width: 120px;
}

margin-top:0;

アイキャッチ上部の余白を０にしています。

max-width:120px;

アイキャッチ画像の横幅サイズを最大で120pxで表示するように指定しています。

.sitecard__contents .heading-secondary a {
font-size: 1.6rem;
margin-top: 5px;
}

font-size:1.6rem;

記事タイトルの文字サイズを指定。

margin-top:5px;

記事タイトル上部の余白を指定。

@media only screen and (min-width: 992px){
.content .sitecard {
max-width: 80%;
margin: 2rem auto;
}
}

「@media only screen and (min-width: 992px)」は、PCのレスポンシブ設定で「992px以下のサイズでは、以下の内容を指定しますよ」ということを説明しています。

max-width:80%;

サイトカードの横幅を指定。これだけだと、サイトカードが画面の左によってしまうので次のmarginで中央に表示されように指定しています。

margin:2rem auto;

「2rem」部分が上下の余白を指定。左右は「auto」を指定することで、サイトカードを中央に配置しています。

数値を指定する際、pxやremが出てきます。こちらが気になる方は、下のサイトを参考にしてみてください。

侍エンジニアブログ

CSSでのサイズ指定はどれがいい?「px」「%」「em」「rem」の違い | 侍エンジニアブログ

この記事では「 CSSでのサイズ指定はどれがいい?「px」「%」「em」「rem」の違い 」について、誰でも理解できるよ…