Q&A
「WordPress」をタグに追加してください。「CSS」だけではほぼ見られないと思って良いのでは。
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
ワードプレス初心者です。
TCDの「FAKE」というテーマで作成しております。
http://plus0ne.xsrv.jp/plus0ne/
TOPページの「ミライのあたりまえをつくる」という文面を真ん中から左上に移動させたいのですが
どのようにすればいいか教えて頂きたいです。
おそらくカスタムCSSというところになるのかなと思うのですが分からずでして。
イメージはこのサイト見たいにしたいです。
お手数ですが宜しくお願いいたします。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
ソースコード
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
このような場合は、まずはブラウザの検証ツールでどのようなCSSが設定されているか確認します。
Chromeの場合なら、移動させたいタイトルの上で右クリックして「検証」をクリックすると検証ツールが開き該当のHTML要素が選択されてますので、順に親要素をたどっていきCSSの設定を確認します。
するとcaptionクラスで下記のようなCSSで位置を設定していると分かります。
css
1#index_slider .caption { 2 padding: 0; 3 width: 800px; 4 margin: auto; 5 position: absolute; 6 text-align: center; 7 z-index: 4; 8 left: 0px; 9 right: 0px; 10 top: 50%; 11 -webkit-transform: translateY(-50%); 12 transform: translateY(-50%); 13 -webkit-box-sizing: border-box; 14 box-sizing: border-box; 15}
左右の中央寄せはtext-align: center;
上下の中央寄せは
position: absolute; top: 50%; transform: translateY(-50%);
でしていると分かります。
あとは、Wordpressのカスタマイズの追加CSSか、子テーマのスタイルシートで上記の部分をお好みの位置になるように上書きすればいいでしょう。
追加CSSだと修正がその場で確認できますのでお勧めです。
例えば下記のように。
css
1#index_slider .caption { 2 text-align: left; 3 top: 20%; 4}
投稿2020/01/13 02:43
編集2020/01/13 02:45
総合スコア33715
親切に有難う御座います！！
凄い。できました！！
すいません。
高さはバッチリなのですが左上のロゴのの端くらいまで左に寄せる事は可能でしょうか。。
margin: auto; で中央寄せしているので、margin-left を追加して調節するといいでしょう。
やって見ましたが変化ありませんでした。。
おそらくサイト全体的な幅を広める必要があるのででしょうか？
http://plus0ne.xsrv.jp/plus0ne/
margin: left; ではなく、
margin-left: 40px;
というように左余白をお好みの数値に設定してください。
margin-left: 40px; とmargin-left: 5px;
などやって見たのですが全く変化がありません。。
では、下記を試してみてください。
margin-left: 40px !important;
それでだめなら、「FAKE」は有料テーマなのでダウンロードして確かめるわけにもいかないので、私にはこれ以上のアドバイスは無理ですね。結構高額なテーマなので、サポートに問い合わせてみては。
タブレット、スマホであればうまく反映されたのですが、、
PCサイトがうまく反映されずで。。
有難う御座います!!サポートにも確認して見たいと思います！！
大変助かりました！！
あなたの回答
tips
プレビュー
