画像スライダーのタイトルの文字の色変更と、文字サイズをスマホでは小さく表示したい

2017年9月13日 at 13:44

最近、Concrete5を使い始めました。
レスポンシブ対応したサイトを作りたく、インストールしたままElementsのテーマを使っていますが、画像スライダーの文字について以下2点質問があります。

1.タイトルの文字を標準の黄緑色から他の色に変更したいのですが、可能でしょうか。どうすれば出来るでしょうか。

2.スマホで表示した際、画像スライダーの画像そのものはスマホに合わせて画像が小さくなるのですが、文字はサイズがそのまま?なので、3文字程度で改行されてしまい、表示がおかしくなってしまいます。また、タイトル10文字以上ははみ出て表示されません。スマホ用に文字を小さめにして表示することはできないのでしょうか。

1については、タイトルではなく、説明のところに文字を入力すれば文字色を変えられることまでは分かったのですが、文字を大きめにすると2と同じでスマホで表示がおかしくなります。

環境情報
# concrete5 Version
Core Version - 8.2.1
Version Installed - 8.2.1
Database Version - 20170802000000

# concrete5 Packages
None

# concrete5 Overrides
None

# concrete5 Cache Settings
Block Cache - On
Overrides Cache - Off
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software
Apache

# Server API
cgi-fcgi

# PHP Version
5.6.31

# PHP Extensions
cgi-fcgi, Core, ctype, curl, date, dom, ereg, fileinfo, filter, gd, gettext, hash, iconv, imap, json, libxml, mbstring, mysql, mysqli, openssl, pcre, PDO, pdo_mysql, pdo_sqlite, Phar, posix, Reflection, session, SimpleXML, soap, SPL, sqlite3, standard, tokenizer, xml, xmlreader, xmlrpc, xmlwriter, zip, zlib

# PHP Settings
max_execution_time - 30
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - -1
max_input_vars - 1000
memory_limit - 128M
post_max_size - 8M
sql.safe_mode - Off
upload_max_filesize - 2M
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
session.cache_limiter - no value
session.gc_maxlifetime - 7200
soap.wsdl_cache_limit - 5

タグ:

Re: 画像スライダーのタイトルの文字の色変更と、文字サイズをスマホでは小さく表示したい

2017年9月13日 at 14:30
narifaさま

画像スライダーのタイトル文字色は、ツールバーの

ページ設定(ギア・アイコン) > デザイン > テーマのカスタマイズ

で、変更できます。(添付画像を参照してください)

文字の大きさも変更できますが、レスポンシブに関係なく大きさが変わりますので、スマートフォン用には、別途スタイルシートを記述する必要があります。
 

Re: 画像スライダーのタイトルの文字の色変更と、文字サイズをスマホでは小さく表示したい

2017年9月13日 at 15:41
nipperさま

おかげさまでタイトル文字色の変更できました!
わざわざ画像まで貼って頂き、ありがとうございます!!

スマホ表示の件は、レスポンシブ対応しているのかと思っていたのですが、別途スタイルシートを記述することになるのですか、、、
一気にハードルが上がりますね。汗

CSSの知識は本を読んだぐらいなのですが、チャレンジするとしたら、どこに記述すればいいのでしょうか。
該当の画像スライダーはElementsのトップページにある標準のものですが、/XXXXX/concrete/cssのフォルダにあるCSSのどれかでしょうか。
何度もお手数おかけしてすみませんがよろしくお願いします。
 

Re: 画像スライダーのタイトルの文字の色変更と、文字サイズをスマホでは小さく表示したい

2017年9月13日 at 16:19
レスポンシブ対応しているのかと思っていたのですが

テーマとしては対応しているのですが、スライダーのタイトルに関しては、レスポンシブ用の文字の大きさの設定がないですね。

フォルダにあるCSSのどれかでしょうか

ファイルとしては、

concrete > themes > elemental > css > build > blocks > image-slider.less

です。
それの139行目ですね。

ただし、テーマのカスタマイズから変更できるように、変数で記述しています。
また、concrete 以下のファイルは直接修正等をしないというのが、concrete5のお作法になってます。
カスタマイズする場合は、

http://concrete5-japan.org/community/forums/design/post-13866

あたりを参考にしてください。


ちょっとハードルが高いと思いますので、下記のコードを

ページ設定(ギア・アイコン) > デザイン > テーマのカスタマイズの一番下にある『カスタムCSS』に記述してください。(添付画像参照)

div.ccm-page .ccm-image-slider-container .ccm-image-slider-text h2 {
font-size: 1.6em;
line-height: 1.2;
}

@media (min-width: 768px) {
div.ccm-page .ccm-image-slider-container .ccm-image-slider-text h2 {
font-size: 3.2em;
line-height: 1.42857143;
}
}

font-size は適宜変更してください。
 

Re: 画像スライダーのタイトルの文字の色変更と、文字サイズをスマホでは小さく表示したい

2017年9月13日 at 17:06
nipperさま

コードまで記述頂きありがとうございます!
頂いたコードを貼ったら文字サイズがレスポンシブになりました!!
感動です。。゚(゚^Д^゚)゚。

数日悩んでいただので本当に助かりました。
ありがとうございました!!!