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

この記事で紹介しているテーマは、100%GPLではないテーマです。WordPressコミュニティは、100%GPLライセンスを推奨しています。私も、現在は100%GPLライセンスのテーマのみを推奨しています。100%GPLテーマの記事はこちらです。

この記事は2年以上前に公開された記事です。情報が古くなっています。現在は状況が異なる可能性があります。

ものくろキャンプを支えてくれている(感謝!)スタッフ 梅村さんの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です。

/* 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を設定した結果、このように綺麗に揃ったスライドショーになりました。

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

この記事を書いた人

大東 信仁

カンパチが好きです。

プロフィールはこちら

10月14日開催 参加者募集中
(画像をタップ→詳細へ)

ミッションナビゲート モニター
(画像をタップ→詳細へ)

広告