WordPress テーマ「COLORS」スライドショーの画像サイズを整えるCSSカスタマイズ

CSSカスタマイズサポート

ものくろキャンプを支えてくれている(感謝!)スタッフ 梅村さんのWordPressブログの外観(テーマ)の変更作業をサポートさせていただきました。

元々、同じ会社さんが販売されている「DigiPress」シリーズのMatureを活用したブログでしたので、スムースにCOLORSへ移行、、するかなと思っていましたが、いくつかはCSSのカスタマイズを行いました。

Zip圧縮ファイルをアップロードしてインストール

DigiPressシリーズのテーマはPaypal経由のクレジットカード決済にて購入すると、すぐWordPressに導入できます。

購入手続きを済ませると、Zip圧縮形式のテーマファイルをダウンロードでき、これをWordPressの管理画面の「外観 – テーマ – 新規追加」からアップロードすることで、インストールできます。

IMG_7709

テーマ導入時にはライセンス認証が必要

ただ、ちょっとわかりにくいのが、この後に必要となる「ライセンス認証」です。テーマの不正利用が多かったらしく、インストールしたままでは、DigiPressシリーズの優れている管理画面からの豊富なカスタマイズメニューがロックされています。これを解除するのに必要なのが、ライセンス認証です。

DigiPressさんのサイトから、ライセンス認証を解除するためのキーコードを、入力する必要があるのですが、ここがちょっとわかりにくいのです。

IMG_7739

緑色で統一

デザインを綺麗に表現するには、最小限の色使いにすることだと、考えています。ブログの場合、背景色(今回は白色)と文字色(黒色)の2色を使っているので、これにキーカラーの1色として、三色での構成にしました。

ほとんどの場所の色設定が、テーマ導入で管理画面に増える「DigiPressメニュー」から設定できるので、カスタマイズ作業も効率良くできます。ここの時間節約だけでも、有料テーマの価値はあると感じています。

IMG_7841

メニューにない場所もCSSを追記して調整できる

サイドバーのウィジェットのタイトル部分やブログの先頭へ戻るボタンなどは、管理画面から色設定を変更できないので、CSSカスタマイズを行っています。DigiPressメニューには、CSSを追記できる仕組みなっているので、Chromeブラウザーを使って「要素の検証」でCSSを変更しつつ、スムースにカスタマイズできます。

トップページのスライドショーの画像サイズを揃える

COLORSテーマの特徴なのが、PCから見た場合のトップページ ヘッダー部分に「エントリーのスライドショー」を表示できることです。なお、モバイル表示では、エントリーのスラドショーの機能は止まる仕様です。

IMG_7808

スライドショーを表示するには、DigiPressメニューでスライドショーを有効にして、スライドショーを表示したいエントリーのオブションにある「スライドショーに含む」をONにします。

すると、アイキャッチ画像を利用して、スライドショーが表示されます。ところが、ここで画像サイズが揃っていない場合は、下のようなガタガタなスライドショーになってしまいます。

ガタガタなスライドショー

CSSで画像表示サイズを固定

画像サイズを揃えて、アイキャッチ画像を設定することが大切なのですが、今となっては後の祭りでして、なんとか、画像がトリミングされてもいいので、揃った状態でスラドショー表示にしたいわけです。

そこで設定したのが、このCSSです。

[css]
/* top slide show img fitting */
#hd_slider .bx-viewport .loop-slider .sl-img {
width: 264px;
position: absolute;
clip: rect(0px 264px 198px 0px);
}
[/css]

CSSだけで、画像をトリミングする方法については、下のエントリーを参考にさせていただきました。感謝です。

CSSを設定した結果、このように綺麗に揃ったスライドショーになりました。

揃っている綺麗なスライドショー

関連エントリー

著者プロフィール

ものくろ(大東 信仁)
ものくろ(大東 信仁)
ブロガー・Web&Blogコーチ。親指シフト orzレイアウト開発者。ブログは月間65万PVを記録(2016年1月)。200回を超えるワークショップ開催・のべ1,000名のブログサポートに携わる。WordPressが得意。

詳しいプロフィールはこちら

もっと
ブログで情報発信
について読む