質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1943閲覧

2カラムをスマホで見たときだけ1カラムにして表示させたい

facebook

総合スコア8

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/10/28 02:50

http://twotic.online/registration/
リンク先のページでのお願いです。

パソコンで見ているときは現状のままの2カラムでいいのですが、
スマホで見たときは右側を下に回り込ませて、1カラムにしたいです。
(スマホで2カラムのままだと、文字などが重なり合ったりするので。)

また、Simple Custom CSS and JSを利用して変更したいと思っています。

可能であれば、ページ一番したにある、
ユーザー名とパスワードを入力してログインできる

<form name="bp-login-form" id="bp-login-widget-form" class="standard-form" をこのページのみ非表示にしたいです。

宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

スマホで見たときは右側を下に回り込ませて、1カラムにしたい

buddypressのCSSにメディアクエリがあるので直接追記するか、Simple Custom CSS and JS でメディアクエリで追加すればいいかと思います。

CSS

1.register-section{ 2 float:none; 3 width:100%; 4}

 

このページのみ非表示にしたいです

ウィジェットだと思うので、何らかのプラグインを使った方が楽そうです。
↓これとかはいかがですか。

「固定ページ」と書かれている部分をクリックすると、固定ページにウィジェットを表示するかどうかの設定もできます。

個々の固定ページを選択することもできますし、ある固定ページと、その子孫ページ(「All childs」を選択)すべてに表示・非表示するといった選択もできます。
WordPressのウィジェットを便利に表示・非表示にしてくれるプラグイン、「Dynamic Widgets」。 – ゼロからはじめる WordPress

投稿2017/10/28 03:39

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

facebook

2017/10/28 03:57

ウィジェットではなく、このサイトはBuddyPress Themeを使用しており、そのテーマの専用ページ?です。Lhankor_Mhyさんが言われるようなプラグインPage Builder by SiteOriginなどを利用したのですが、編集することはできませんでした。
Lhankor_Mhy

2017/10/28 04:19

うーん、もしかしてwordpressにおける「ウィジェット」とは何であるかをご存じない?
facebook

2017/10/28 11:24

ウィジェットは多少は理解しています。が、今回のはウィジェットではないです。実際、ウィジェットは1つも配置していないです。ウィジェットっぽいものはBuddyPressの設定でWordPress 固定ページを各 BuddyPress コンポーネントディレクトリと関係づけたために出現しているものです。
facebook

2017/10/28 11:30

教えてもらったcssを追加したのですが変化しませんでした。
Lhankor_Mhy

2017/10/28 11:49

CSSの方は詳細度の問題でしょうから、手っ取り早く、 float:none !important; のようにimportantをつけるのがいいかもしれませんね。
facebook

2017/10/28 11:54

importantを付けたり、キャッシュを消去して行ってもダメでした。 また、この方法でできたとしてもパソコンで見たときも1カラムになってしまうのではないでしょうか? 希望はスマホで見たときだけ1カラムにしたいです。
Lhankor_Mhy

2017/10/28 12:06

ええ、ですからメディアクエリをつけてください。
Lhankor_Mhy

2017/10/28 12:08

あと、ウィジェットに関しても、ここを参考に再確認してみてください。 https://41y.me/how-to-set-up-buddypress/#i-7 まあ、ウィジェットじゃないなら、固定ページにご自分で直接書いたのでしょうから、その部分を削除すればいいと思いますよ。
facebook

2017/10/28 12:26 編集

すみませんでした。メディアクリエが何かわかっていなかったので。 ありがとうございます。できました。 下に回り込ませたものが上のものとがっつりくっついているのを離すには、何を追記すればいいのでしょうか?現在このように書いています。 @media screen and (max-width:768px) { .register-section{ float:none !important; width:100%; } }
facebook

2017/10/28 12:33 編集

リンク先ありがとうございます。 ウィジェットのことも勘違いしていました。リンク先を読み理解できました。 言われた通りでした。ご迷惑をおかけしてすみませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問