Simplicityの特徴 › フォーラム › Simplicity2に関する話題何でも › キャッチフレーズの文字サイズ変更等
- このトピックには12件の返信、1人の参加者があり、最後に
ぬこにより9年、 9ヶ月前に更新されました。
-
投稿者投稿
-
-
2016年11月12日 8:53 AM #47271
ぬこ
ゲストお世話になります
Simplicity2使わせていただいてますキャッチフレーズの文字サイズが大きくヘッダー画像に被ってしまうため
位置の変更、フォントサイズの変更はできますでしょうか?モバイルだと画像にもろ被るため画像の人物などが隠れてしまいますw
あとモバイルでのホーム(トップページ)のヘッダー画像下の
余白を縮めることは可能でしょうか? -
2016年11月12日 10:38 AM #47273
Hidekichi
ゲスト質問の内容は全部可能ですが、移動するなら「どこに」、文字のサイズを変えるなら「どれぐらいに」などの具体的な指定がないので何をどうするかは回答しにくいです。
ここらをもう少し再考してみてください。
何かしらと比較して「これぐらい」というのでも良いですし、場所なら「ヘッダー下」とかの位置がわかる説明、あるいはセレクタで(メニューをどう表示しているかでまた変わると思いますが)「#mainの手前」とか。いっそのことタイトルとディスクリプションの下に画像を持ってくるとか、またその逆とか色々方法はあるかと思いますので「どこにどうしたい」という具体的な指定と、今どのような環境で表示しているか等の情報が必要です。メニューに何を使っているか、どんなカスタイズをしているか等ですね。この上でさらにサイトアドレスを公開してもらうのが一番良いです。
-
2016年11月12日 11:31 AM #47274
ぬこ
ゲストHidekichiさんお返事ありがとうございます!
ホーム(トップページ)のヘッダー画像下の余白の件ですがインデックスリストトップに、ウィジェットを入れてたのを外したら余白が
狭くなりました。ちなみにテキスト、モバイル用テキスト
広告ウィジェット どれを入れてもヘッダー下に余白ができるのは
仕様なのでしょうか?インデックスリストトップにウィジェットを入れても余白が広くならないように
できたら嬉しいです。キャッチフレーズの文字サイズですが、非表示はしないほうがいいと知人にアドバイス
うけてますので可能な限り小さく(最小サイズでもいいですw)サイトタイトルの上に表示できたらスッキリできるかと思うのですが。
-
2016年11月12日 1:54 PM #47275
Hidekichi
ゲスト> インデックスリストトップにウィジェットを
> 入れても余白が広くならないように#the-content .widget { margin: 0; }これで余白なしです。モバイルだけの問題であれば、
@media (max-width: 30em) { #the-content .widget { margin: 0; } }などとすればモバイルの時だけウィジェットの周りのマージンを0にできます。が、実質他の要素にもマージンやらは設定されていると思うので、ここらは単体で設定するよりはその周りのマージンも考慮する必要があります。
インデックストップということですから、#listの中に入っているだろうとは思うんですけれども、その場合は上記の#the-coentntを#listに変更します。#the-content部分をひっくるめて#mainやarticlとしてもよいですが、適用範囲が異なっていくのでここらは利用内容に応じて変更する必要があります。
> キャッチフレーズの文字サイズですが、
> 非表示はしないほうがいいと知人にアドバイス
> うけてますので可能な限り小さく(最小サイズでもいいですw)ヘッダ内のディスクリプションはまぁあればあったで特にマイナスにはならないでしょうけれどもなくても大丈夫かと思います。headタグ内にディスクリプションもあるでしょうし、SEOのプラグインとかで設定しても良いですしで。
サンプル: サイトタイトルとディスクリプションを入れ替え | codepen
以前作ったサンプルをフォークして上記内容(質問の内容)を入れているので余計なものも入ってますが、「↓ ここからサイトタイトルとディスクリプションを入れ替え」から「レスポンシブ表示用 不要」までが今回追加したものです。
#header内の.alignleftをflexで設定して、orderというプロパティでタイトルとディスクリプションの順番を変えています。メディアクエリで480px以下の画面サイズの時にこれらスタイルが動作するようにしてあります。
font-sizeは10px以下でも設定できますがたいていは10pxまでしかブラウザがデフォルトで設定されていないだろうということで10pxにしました。このサンプルはソース部分(htmlやらcssやらの欄)と結果表示の境界線をマウスで左右に動かしてレスポンシブを確認できるようになっています(ヘッダーだけ)。
ここで見てもらえると気が付かれるかと思いますが、背景画像の寝てる男の子が最初は中央なのにモバイルサイズになると右上になりますよね?
このようにして背景画像の位置をある程度変更することもできるので、表示したい場所を上手くやればより邪魔にならない(テキストにかぶさらない)ようにもできます。ここらは今公開されているサイトの内容がどうなっているかで微調整が必要なので、サイトアドレスを公開してもらわないと何とも言えませんが、こういうこともできると言う感じです。
本来のサンプルの内容は、ヘッダの画像をアスペクト比を保ったまま画面サイズで高さを可変にするというものです。
アスペクト比(縦横比)を保ったままにすると、Pcのように横幅が広ければより大きな画像になりますし、スマホのように幅が狭いと逆に狭くなります。そこらを考慮して、高さが逆になるように(たまい時には高く、広いときには狭く)という設定をしています。 -
2016年11月12日 2:18 PM #47276
ぬこ
ゲストHidekichiさんありがとうございました!!
早速やってみます! -
2016年11月12日 2:34 PM #47277
Hidekichi
ゲスト☓ ひっくるめて#mainやarticlとしてもよいですが
○ ひっくるめて#mainやarticleとしてもよいですがcssはscssで書いてあるので、css欄下向き三角からview compiledボタンを押しcssに変換したもので必要な範囲だけコピペして試してみてください。
-
2016年11月12日 2:37 PM #47278
Hidekichi
ゲストうほ、
☓ #the-coentnt
○ #the-content -
2016年11月12日 3:01 PM #47279
ぬこ
ゲストmod_pagespeed設定を無効しにて
#the-content .widget {
margin: 0;
}上記と
↓ ここからサイトタイトルとディスクリプションを入れ替え
以下三角ボタンでcssに変換してcssに書き込みましたが
変化ありません・・・(汗) -
2016年11月12日 3:23 PM #47280
Hidekichi
ゲストサンプルで動作する以上、実際のサイトを見てみないと何とも言えませんが、メディアクエリが設定してあるので480px以下の時しか動作しません。
PCの時はそのまま何も変化はありません。
#the-content .widget { margin: 0; }ここは説明通り、インデックストップが対象なら#listに変更しないと動きません。
ここから、どういう状況(PC、モバイル※)で見て、何がどう動作しないのかを説明してもらわないと回答ができません。
※ モバイルの場合、スマホなのかタブレット等かでも違います。何を対象にするかでメディアクエリの書き方も変わります。
-
2016年11月12日 3:28 PM #47281
Hidekichi
ゲストひとつ書き損じていたのを発見したので追記します。
#the-content .widget { //中身同じ }ではなく
#the-content .widgets { //中身同じ }でした。
-
2016年11月12日 4:01 PM #47282
ぬこ
ゲストHidekichiさんいろいろとすみません
#listに変更して書き込みしてもPC、スマホ共に
ヘッダー画像、 インデックストップ内ウィジェット間の余白は詰まりませんでしたヘッダー画像外したりしても同じく。
あとキャチフレーズ タイトルの位置も変化ありません
これはSimplicity2のバージョンも関係ありますでしょうか?
以前 わいひらさんにVer2.4 を頂き使わせていただいております。
-
2016年11月12日 4:23 PM #47283
Hidekichi
ゲスト> インデックストップ内ウィジェット間の
> 余白は詰まりませんでした実質他の要素にもマージンやらは設定されていると思うので、ここらは単体で設定するよりはその周りのマージンも考慮する必要があります。
おそらくこれかと。
> キャチフレーズ タイトルの位置も変化ありません
今どのような環境で表示しているか等の情報が必要です。
とにかく情報不足なので、何が上手く行っていないのかが判断がつかない感じです。
-
2016年11月12日 4:43 PM #47285
ぬこ
ゲスト了解です。
うまく伝えれなくてすみません(汗)
いろいろ試してまた報告させていただきます。お手数おかけしました。
-
-
投稿者投稿
- このトピックに返信するにはログインが必要です。