フォーラムへの返信
-
徳本さん、こんにちは。改めまして、先日はTwitterでもご対応いただき、ありがとうございました。^^
あらら、そうなのですね。。私の方はデモ環境でCSSもゼロの状態でしたので、試しに徳本さんが記述されているCSSを反映してみたところ、下記画像のとおり、それでもフォームの要素は中央に問題なく配置されていました。※加えて、管理画面でのブロックの内容も見えるようにしてみました。
反映したCSSは、
.c-entry__content { position: relative; overflow: hidden; }から
.attachment-large { border: 3px solid #ccc; }まで、です。
Snow Monkey の設定でそうなってしまっているのかまでは確認できなかったのですが、もし可能であれば一度初期状態でお試しいただいて、問題が生じる部分の切り分けができるとよいかもですね。
私の方でも、設定でそうなってしまう可能性があるのかは、引き続き確認してみようと思います。
取り急ぎのお返事で申し訳ないのですが、よろしくお願いいたします。^^いいねをした人:megさん
私が回答したことで他の方からの回答がなくなってしまったとしたら申し訳ないと思い、CSSも考えてみました。
私の環境では下記CSSで添付画像のように表示されるのですが、ご要望はこんな感じで合っていますかね。
.smb-spider-slider .smb-spider-slider__figure-wrapper, .smb-spider-slider .spider__slide { flex: 1 0 100% !important; flex-wrap: wrap; overflow: hidden; position: relative; text-align: center; } .smb-spider-slider .spider__figure { max-width: none; width: 50%; } .spider__arrow[data-direction="prev"]::before { border-bottom: 1px solid #000; border-left: 1px solid #000; left: calc(50% - 5px); top: calc(50% - 5px); transform: rotate(45deg); } .spider__arrow[data-direction="next"]::before { border-right: 1px solid #000; border-top: 1px solid #000; bottom: calc(50% - 5px); right: calc(50% - 5px); transform: rotate(45deg); }割愛できるコードもありますが、元コードと比較しやすいよう、そのままにしています。
お試しいただけたら幸いです。
いいねをした人:
megさん
ご質問への直接的な回答ではないのですが、私はよくスライダーの入ったボックスをコンテナーやセクションに組み込み、それらのブロック設定でコンテンツの最大幅を指定することで任意の幅にしているのですが、もしそれでも弊害がないようでしたら簡単でオススメです。
なおセクションだと上下に余白が入るため、コンテナーの方が扱いやすいかもです。もしよければお試しください。いいねをした人:
横から失礼します。
上記2つの画像の上では便宜上、上段・中段・下段の画像と表しますね。
1920×1080のモニターで表示した場合、
上段の画像は、
1枚目では1024×576（16:9）の画像が、1920×500（16:4.166･･）と上下がカットされ表示されていて、
2枚目では1700×900（16:8.47･･）の画像が、1903×500（16:4.20･･）と上下がカットされ表示されています。中段の画像は、
1枚目では1024×576（16:9）の画像が、186×104（16:9）とそのまま表示されていて、
2枚目では800×600（4:3）の画像が、400×300（4:3）と、そのまま表示されています。下段の画像は、
1枚目では768×407（4:2.119･･）の画像が、186×139（4:3）と上下に引き延ばして表示されていて、
2枚目では768×432（16:9）の画像が、186×139（4:3）で上下に引き延ばして表示されています。以上のことから、この場合中央に文字があるサムネイルでは、解決方法は以下の2つかと思います。
1．16:9で画像を作り、文字は上下で16:4以下、左右で4:3以下の範囲内に収まるよう作成する。
2．4:3で画像を作り、文字は上下で16:4以下、左右で4:3以下の範囲内に収まるよう作成する。1．2．とも、上・下のどちらともか、いずれかで見切れることにはなりますので、
今のように枠線をつけてしまうと見切れている感がでるため、枠線は用いない方が望ましいです。上記をご参考に、一度、試してみてくださいませ。
いいねをした人:
あれ？そんなことはなかったような…と思ってテストしてみたところ、ブロック設定で
『各項目のボタンの下部を揃えます (スタンダード・ブロックリンクのみ)。』をチェックし、
項目（スタンダード）で試したところ、ボタンは下端揃えされました。ただ、内容を書く…の欄が空白だと上揃えになるため、一文字でも入れる必要はあります。
すべての項目の種類は試せていませんが、注釈のようにスタンダードかブロックリンクの
必要があると思いますので、一度、そのあたりも確認してみてください。
いいねをした人:
もしもですが、CSSでの方法が難しいな、PCやスマホごとの調整が厄介だな、ということがありましたら根本的な解決方法ではないのですが、発想を変えて以下の方法で対処するのもアリかなと思います。
「お問い合わせ」の文言の下に例えば（メールフォーム 受付時間24時間）等の1行を追加し、両方のボタンを2行にしてしまう。
また前のトピックのこととなりますが、クローズ後だったのこちらで失礼しますね。
情報の検索方法について、「スノーモンキー、フッターにメニューを入れる方法」で検索されたとありましたが、例えばGoogle等であれば「Snow Monkey フッター メニュー 方法」と、正式名称と空白を挟んでの単語の組み合わせがよいですし、フォーラム内であれば、「フッター メニュー」で検索されると情報に出会える確率は高まると思います。
効率よく情報に出会えるよう、いろいろと探してみてください♪
いいねをした人:
toshihito.okazaki さん
ひとまず解決したようで何よりです♪
私の方こそ、本番環境ということも目にして、てっきりそのあたりはご確認の上でのことと思い込んでしまっていたので、最初の回答で示せていれば…と思っていました。
解決ということですので、またお手すきの時にでもトピックを閉じていただくとよいと思います。
Web制作、今後も頑張ってください！いいねをした人:
ソースコードをざっと確認したところ、すべてのページのヘッダーに
<meta name='robots' content='noindex, nofollow' />
が記述されているようですが、SEO系のプラグイン等を使用されていてそちらの方で設定されている、ということはありませんか？
あるいは、さくらインターネットをご利用のようですが、サーバーやファイルマネージャーの設定のどこかで、そうしてしまっているということがあるのかも知れません。いいねをした人:
CSSの勉強は、特にこの本このサイト、というものはなくさまざまなものからですが、恐らく勉強しようという視点になると色々と見えてくると思います。
なお、このSnow Monkey フォーラムだけでもかなり勉強になると思いますので、特にSnow Monkeyをお使いであれば、まずはここからはじめてもいいと思いますよ。
PCと、それ以外でフォントサイズを変える際、私は下記のようにしています。
@media (max-width: 1279px) { html { font-size: 14px; } }私は、デフォルト（PC）を16pxにしている場合、14pxがバランスがいいかなと思ってそうしていますが、お好みで調整ください。
CSSを記述するにはいくつかの方法がありますが、カスタマイズ画面（カスタマイザー）の下記の項目を開いて、記述するのが簡単でいいと思います。
これからも楽しんで制作や勉強ができるといいですね。^^
いいねをした人: 居ません
