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

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

ブログカード

ブログカードイメージ
これは画像のためクリックしてもジャンプしません。

 

サイトカード

サイトカードのイメージ
これは画像のためクリックしてもジャンプしません。

 

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

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

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

関連記事

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

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-フィット

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

カスタマイズ後のイメージと同じにしたい場合は、下の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」を使ってスタイルが適用されるように指定しています。それ以外は、ほとんど同じ内容です。

1つ違う点は、サイトカードのサブタイトル(関連記事と表示されるところ)に背景色が設定されているところ。ブログカードの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で設定されているので、広くしたい場合は数字を大きく、狭くしたい場合は小さくすることで調整することができます。

【参考】
<各方向を別々に指定するには?>
padding:5px 10px 15px 20px; (上、右、下、左、の順番で指定)

<左右は同じ値で指定>
padding:5px 10px 20px; (上、左右、下、の順番で指定)

<上下、左右が同じ値>
padding:5px 10px; (上下、左右の順で指定)

<上下左右いずれかのみ指定>
padding-top:5px;(上のみ)
padding-left:10px;(左のみ)
padding-bottom:20px;(下のみ)
padding-right:30px;(右のみ)

 

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,は黒を表しており、数値を変えると別の色を指定することができます。

RGBAの解説

【参考】RGBの調べ方
私はいつもこのサイトを使っています。→ WEB色見本 原色大辞典

使いたい色をクリックすると、色の情報が表示されます。
原色大辞典

border-radius: 7px;

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

radiusのイメージ

 

.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;

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

コンテンツのmargin設定

【参考】
<全方向同じ>
margin:10px;

<各方向を別々に指定するには?>
margin:5px 10px 15px 20px; (上、右、下、左、の順番で指定)

<左右は同じ値で指定>
margin:5px 10px 20px; (上、左右、下、の順番で指定)

<上下、左右が同じ値>
margin:5px 10px; (上下、左右の順で指定)

<上下左右いずれかのみ指定>
margin-top:5px;(上のみ)
margin-left:10px;(左のみ)
margin-bottom:20px;(下のみ)
margin-right:30px;(右のみ)

 

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

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

サイトカード抜粋文のイメージ
サイトカード抜粋文のイメージ
.content .sitecard .eyecatch {
margin-top: 0;
max-width: 120px;
}

margin-top:0;

アイキャッチ上部の余白を調整アイキャッチ上部の余白を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が出てきます。こちらが気になる方は、下のサイトを参考にしてみてください。

侍エンジニア塾Blog

みなさんこんにちは!フリーランスプログラマーのsatoです。皆さんは文字サイズの指定をどんな形式で行っていますか? di…