Simplicityのキャプションをカスタマイズする方法

キャプションをカスタマイズした後のサイト風景Simplicityがバージョンアップし、安定版である1.9.3が公開されました。

キャプション機能(イメージ画像)に、引用先を提示するのにも、非常に便利な機能だと感じています。

このキャプション機能のスタイシートをカスタマイズして、自分のサイトに合ったスタイルにする方法を解説していきます。

そこで、レポ部は・・・
Simplicityのキャプションをカスタマイズする方法
をレポートしたいと思います。
スポンサードリンク

キャプションの変数

Simplicityでのキャプション内で使用されている変数は以下のとおりです。

  • wp-caption(全体のキャプション)
  • wp-caption-text(テキストが書かれている部分)

大きく分けてキャプションは、これらの2つの関数によって構成されています。

この2つのクラスの内容をカスタマイズすることで、オリジナルのキャプション欄を作成することができます。

カスタマイズサンプル No.1

156

Simplicityのデフォルトでのキャプションのスタイルは「背景色」「枠線」などで固められています。

カスタマイズサンプルNo.1では、背景色を白色に、枠線も白色にし、シンプルにしてみました。

枠線を設定してないので、キャプションと本文をある程度切り離して、訪問者にもリンクが目立たないように調整しています。

文字の位置は「左寄せ」を設定していますが、お好みで調整してください。

ソースコード
.wp-caption {
border: 1px solid #ffffff; /*枠線のサイズと色*/
border-radius: 3px; /*角の丸み*/
background-color: #ffffff; /*背景色*/
text-align: center; /*画像を中心にする*/
}
.wp-caption-text{
font-size: 80%; /*文字サイズの調整*/
text-align: left; /*文字の位置を左寄せにする(leftをrightにすると右寄せ)*/
margin-top:8px; /*文字の上の余白を調整*/
line-height: 100%; /*文字の要素サイズの調整*/
}

カスタマイズサンプル No.2

155

Simplicityの横幅MAXに画像サイズを設定している場合のサンプルソース。

Simplicityで推奨している画像サイズの横幅は680pxなので、このサイズ以下だとスタイルが崩れていしまいますので注意してください。

ソースコードの解説は以下のとおりです。

ソースコード
.wp-caption {
padding-top: 0px; /*画像の上のスペースの調整*/
border: 1px solid #ddd; /*枠線の色*/
border-radius: 3px; /*角の丸み*/
background-color: #f3f3f3; /*背景色*/
text-align: center; /*画像を真ん中寄せ*/
}
.wp-caption-text{
font-size: 80%; /*文字サイズの変更*/
text-align: center; /*文字を真ん中寄せ*/
margin-top:8px; /*文字の上の余白を調整*/
line-height: 100%; /*文字の要素サイズの調整*/
}

カスタマイズサンプル No.3

159

border-radius(角の丸み)をパーセントで指定することで上記画像のような丸みを帯びたキャプションを作成することができます。

カスタマイズサンプルNo.3では、リンク先の文字カラーもホワイト(白色)にしています。

お洒落にキャプションをカスタマイズしたい場合に使用してください。

ソースコード
.wp-caption {
padding-top: 0px; /*画像の上のスペースの調整*/
border: 1px solid #ffffff; /*枠線の色*/
border-radius: 50%; /*角の丸み*/
background-color: #4169e1; /*背景色*/
text-align: center; /*画像を真ん中寄せ*/
}
.wp-caption-text{
font-size: 80%; /*文字サイズの変更*/
text-align: center; /*文字を真ん中寄せ*/
margin-top:8px; /*文字の上の余白を調整*/
color:#ffffff; /*文字色の設定*/
line-height: 100%; /*文字の要素サイズの調整*/
}
.wp-caption-text a{
color:#ffffff; /*リンクの文字色の設定*/
}

カスタマイズサンプル No.4

158

文字も真ん中寄せ、左寄せのサンプルはこれまでにいくつか作成してきました。

気になったので「文字が右寄せ」の場合のサンプルも載せておきます。

<text-align:○○○>の○○○の中に「left」「center」「right」の3種類のどれかを入れることで、英語の意味に沿った内容にスタイルが変化します。

以下のソースコードをコピーしてお使いください。

ソースコード
.wp-caption {
padding-top: 0px; /*画像の上のスペースの調整*/
border: 1px solid #ffffff; /*枠線の色*/
border-radius: 3px; /*角の丸み*/
background-color: #fa8072; /*背景色*/
text-align: center; /*画像を真ん中寄せ*/
}
.wp-caption-text{
margin-right:10px; /*文字の右からの余白の調整*/
font-size: 80%; /*文字サイズの変更*/
text-align: right; /*文字を右寄せ*/
margin-top:8px; /*文字の上の余白を調整*/
color:#ffffff; /*文字色の設定*/
line-height: 100%; /*文字の要素サイズの調整*/
}
.wp-caption-text a{
color:#ffffff; /*リンクの文字色の設定*/
}

まとめ

いかがでしたか。

少しソースコードを変更するだけで自分のサイトに合ったキャプションを作成することができます。

Simplicityは初心者の方でも簡単にカスタマイズできるように作られています。

レポ部ではカスタマイズする度にカスタマイズサンプルを載せてレポートしていく所存です。

今回のサンプルもコピー&ペーストをしてお使いください。