フリーランスの道具箱

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

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

関連エントリー

広告

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


この記事を書いた人 :

profile2016autumn

ブロガー・Web&Blogコーチ・親指シフトユーザー・orzレイアウト考案者。WordPressが得意。HTML・CSS・PHPも熟知し広範囲の知識を持つ。ブログは年間 1450記事を更新した経験も(2013年)。

誰でもインターネットを活用できる時代だから、頭でモヤモヤしている「こんなのを実現したいなぁ」を引き出して形にし実現させるお手伝い、そして、インターネットを上手に使えるようにサポートするのが得意です。

iPhoneやAndroidなどのガジェット、デジタルだけでなく文房具などのアナログなツールも大好きです。写真や旅を楽しむこと、おいしいお食事、楽しい・ワクワクすることが大好きです。

Twitterやfacebookでも情報発信中、よろしければフォローしてください。



Instagram
follow us in feedly

ご依頼・講座開催情報はこちら

ブログ・情報発信でお困りごと、モヤモヤ、解決。あなたのステップアップをサポートしています。

広告

情報発信コンサルティング・コーチ

Web・ブログのコンサルティング・ご相談のご依頼を受け付けております。
・Webを活用して本気でビジネス・人生を切り開きたい方
・Webのテクニカルな改善でお悩みの方
・アイディアはあるのに、記事の文章にするのがうまくいかない方
・親指シフトを本気で習得したい方

そんな多様なお悩み、そして、さらに隠れていて見えないお悩みもダイレクトにアドバイス。ブログ2400記事をアウトプットした経験に基づく良質なノウハウ・スキルを手に入れてください。時間の大切さを感じてるあなたへオススメです。

お申し込みは
お問い合わせフォーム
からお願いします。

うまく表示されない時は
こちらをご覧下さい。

お申し込みは
お問い合わせフォーム
からお願いします。

こちらの記事も役立ちます
follow us in feedly