[es：エス]

こんにちは。

セクションを使うと添付のようなイメージにできるのですが、こういうことで合っていますでしょうか？
もし違ったらごめんなさい…。

♥ 3

いいねをした人:

[es：エス]

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);
}

割愛できるコードもありますが、元コードと比較しやすいよう、そのままにしています。
お試しいただけたら幸いです。

♥ 1

いいねをした人:

[es：エス]

megさん

ご質問への直接的な回答ではないのですが、私はよくスライダーの入ったボックスをコンテナーやセクションに組み込み、それらのブロック設定でコンテンツの最大幅を指定することで任意の幅にしているのですが、もしそれでも弊害がないようでしたら簡単でオススメです。
なおセクションだと上下に余白が入るため、コンテナーの方が扱いやすいかもです。もしよければお試しください。

♥ 1

いいねをした人:

[es：エス]

横から失礼します。

上記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．とも、上・下のどちらともか、いずれかで見切れることにはなりますので、
今のように枠線をつけてしまうと見切れている感がでるため、枠線は用いない方が望ましいです。

上記をご参考に、一度、試してみてくださいませ。

♥ 2

いいねをした人:

[es：エス]

あれ？そんなことはなかったような…と思ってテストしてみたところ、ブロック設定で
『各項目のボタンの下部を揃えます (スタンダード・ブロックリンクのみ)。』をチェックし、
項目（スタンダード）で試したところ、ボタンは下端揃えされました。

ただ、内容を書く…の欄が空白だと上揃えになるため、一文字でも入れる必要はあります。

すべての項目の種類は試せていませんが、注釈のようにスタンダードかブロックリンクの
必要があると思いますので、一度、そのあたりも確認してみてください。

♥ 1

いいねをした人:

[es：エス]

もしもですが、CSSでの方法が難しいな、PCやスマホごとの調整が厄介だな、ということがありましたら根本的な解決方法ではないのですが、発想を変えて以下の方法で対処するのもアリかなと思います。

「お問い合わせ」の文言の下に例えば（メールフォーム　受付時間24時間）等の1行を追加し、両方のボタンを2行にしてしまう。

また前のトピックのこととなりますが、クローズ後だったのこちらで失礼しますね。

情報の検索方法について、「スノーモンキー、フッターにメニューを入れる方法」で検索されたとありましたが、例えばGoogle等であれば「Snow Monkey　フッター　メニュー　方法」と、正式名称と空白を挟んでの単語の組み合わせがよいですし、フォーラム内であれば、「フッター　メニュー」で検索されると情報に出会える確率は高まると思います。

効率よく情報に出会えるよう、いろいろと探してみてください♪

♥ 1

いいねをした人:

[es：エス]

toshihito.okazaki さん

ひとまず解決したようで何よりです♪

私の方こそ、本番環境ということも目にして、てっきりそのあたりはご確認の上でのことと思い込んでしまっていたので、最初の回答で示せていれば…と思っていました。

解決ということですので、またお手すきの時にでもトピックを閉じていただくとよいと思います。
Web制作、今後も頑張ってください！

♥ 1

いいねをした人:

[es：エス]

toshihito.okazaki さん

Snow Monkeyでも サーバーでも、特に設定した記憶がないということでしたら、ひょっとしたらWordpressをインストールする際に「検索エンジンがサイトをインデックスしないようにする」にチェックを入れられたのかもしれませんね。

Wordpressの管理画面から、設定→表示設定と進み、下端にある「検索エンジンでの表示」にチェックが入っていないかも、併せてご確認ください。

もしチェックが入っていたら、チェックを外してみてどうなるかをご確認いただけたらと思います。

♥ 0

いいねをした人: 居ません

[es：エス]

トップページは2カラムにできているとのことなので、下記をご覧いただくとできるのではないかと思います。

またカスタマイザーのホームページ設定からアイキャッチ画像をヘッダー画像として表示することもできますが、画像上に表示したテキストを頻繁に書き換えたいということなので、その点でもこちらかなと思います。

トピックの検索で、トピックの内容にもこの記事にもたどり着けたので、調整等はいろいろとお探しいただくとよいかもです。

サイドバーありレイアウトのときに、2つのカラムの上に1カラムのコンテンツを入れる方法

ちょっとわかりにくいタイトルかもですが、画像で説明するとこんな感じ。 この部分ってコンテンツエリアでもないし、…

snow-monkey.2inc.org

♥ 2

いいねをした人:

[es：エス]

ソースコードをざっと確認したところ、すべてのページのヘッダーに
<meta name='robots' content='noindex, nofollow' />
が記述されているようですが、SEO系のプラグイン等を使用されていてそちらの方で設定されている、ということはありませんか？
あるいは、さくらインターネットをご利用のようですが、サーバーやファイルマネージャーの設定のどこかで、そうしてしまっているということがあるのかも知れません。

♥ 1

いいねをした人:

[es：エス]

メールではなく電話ということですので、こちらが参考になるかと思いますね。

タップしたら電話が掛かるようにしたい

このトピックには3件の返信、3人の参加者があり、最後にCOMLSにより4ヶ月、 2週前に更新されました。 4件…

snow-monkey.2inc.org

♥ 0

いいねをした人: 居ません

[es：エス]

すでに下記トピックもごらんになられた上でのことかも知れませんが、
「js でリダイレクトさせる都合上、一瞬完了画面が見えてしまうのでご注意ください。」
ということのようですね。

Snow Monkey Formsの完了画面を別ページに設定するには

このトピックには2件の返信、2人の参加者があり、最後にIMPにより2年前に更新されました。 3件の投稿を表示中…

snow-monkey.2inc.org

♥ 1

いいねをした人:

[es：エス]

追伸
私はあまりしませんが、スマホのみ、とする場合は下記のようにしています。

@media (max-width: 639px) {
  html {
    font-size: 14px;
  }
}

♥ 0

いいねをした人: 居ません

[es：エス]

CSSの勉強は、特にこの本このサイト、というものはなくさまざまなものからですが、恐らく勉強しようという視点になると色々と見えてくると思います。

なお、このSnow Monkey フォーラムだけでもかなり勉強になると思いますので、特にSnow Monkeyをお使いであれば、まずはここからはじめてもいいと思いますよ。

PCと、それ以外でフォントサイズを変える際、私は下記のようにしています。

@media (max-width: 1279px) {
  html {
    font-size: 14px;
  }
}

私は、デフォルト（PC）を16pxにしている場合、14pxがバランスがいいかなと思ってそうしていますが、お好みで調整ください。

CSSを記述するにはいくつかの方法がありますが、カスタマイズ画面（カスタマイザー）の下記の項目を開いて、記述するのが簡単でいいと思います。

これからも楽しんで制作や勉強ができるといいですね。^^

♥ 0

いいねをした人: 居ません

[es：エス]

キタジマさんが仰っているとおり、どの状態でそうされたいのかにもよりますが、基本的にCSSは必要かなと思います。

CSSに頼りすぎるのもまた問題となることもありますが、納品予定ということはお仕事で制作されていると思いますので、CSSがちょっとでもわかってくると何かと便利ですし、何よりさらに楽しくなると思いますので、この機会にトライされることもおすすめしますよ。

もし、やってみようかな、トライしてみようかな、と思われたら、お返事ください。
私にわかる範囲で…とはなってしまいますが、一緒に考えて、お力になれたらと思います。

♥ 2

いいねをした人:

[投稿者]

投稿