wordpressトピックスの情報フルページ表示
返信先: PC画面だと画像がずれてしまう
瀬戸内ことり (Setouchi Kotori)さん、Toshihiko Tsushimaさん
ご回答ありがとうございます!
Toshihiko Tsushimaさんのご回答通り以下CSSを削除したら全幅で表示されました!
.wp-block-image {
margin: 0;
}今後のために瀬戸内ことり (Setouchi Kotori)さんのおっしゃる通りElementorの利用停止も視野に入れ対応していきます。
とても助かりました。改めまして、ありがとうございます。
(2025-1-29)返信先: 事業内容のページで空白が出来てしまう
再度こちらをご確認いただき、
- 追加 CSS (記載されたものがあれば)
- サンプルページの HTML
- 該当ページの HTML
をすべてお願いします。
また、問題のページが閲覧できない状態になっているようですので、ご確認ください。
情報が欠けているとご進言できません。
(2025-1-29)返信先: 事業内容のページで空白が出来てしまう
ご返信ありがとうございます。
<!-- wp:cover {"url":"https://www.siliconvillage.co.jp/wp-content/uploads/2025/01/217134_small.mp4","id":7585,"dimRatio":0,"customOverlayColor":"#FFF","isUserOverlayColor":false,"backgroundType":"video","minHeight":800,"align":"full","layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignfull" style="min-height:800px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim" style="background-color:#FFF"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://www.siliconvillage.co.jp/wp-content/uploads/2025/01/217134_small.mp4" data-object-fit="cover"></video><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"タイトルを入力...","style":{"elements":{"link":{"color":{"text":"#ffff00"}}},"color":{"text":"#ffff00"}},"fontSize":"x-large"} -->
<p class="has-text-align-center has-text-color has-link-color has-x-large-font-size" style="color:#ffff00">事業内容</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->
<!-- wp:html -->
<h2 class="wp-block-heading has-text-align-center has-small-font-size" style="font-style:normal;font-weight:100;line-height:0">© Siliconvillage Inc. All Rights Reserved.</h2>
<!-- /wp:html -->
(2025-1-29)こればHTMLのコードです。よろしくお願い致します。
返信先: 事業内容のページで空白が出来てしまう
画像ではなく、お伝えした方法で HTML をご共有ください。
こちらで再現して検証するために必要です。また、
(2025-1-29)https://www.siliconvillage.co.jp/?page_id=7675
はページが表示できません。ご確認ください。返信先: PC画面だと画像がずれてしまう
ページを拝見したところ、おそらくご自身が追加された以下の CSS があるために全幅にならないようです。
(2025-1-29).wp-block-image {
margin: 0;
}返信先: エクスポートの記事に空白行が出来てしまいます
ありがとうございます。「WordPressで本をつくる」サイトからは、「記事毎に手作業で修正する」との回答がありました。すみませんでした。場違いな質問にお付き合いくださり、ありがとうございました。
(2025-1-29)返信先: PC画面だと画像がずれてしまう
ご利用になっているテーマ「LIQUID CORPORATE」はブロックエディタに対応しているはずです。Elementor の利用をおやめになれば、こちらのページの画像のように画像を全幅にできるのではないでしょうか。
↑ 未検証です。
なお、有料の商品をお使いの場合、私たちボランティア回答者は検証環境を用意できません。テーマ開発者様のフォラームを利用なさる、あるいはサポートをお受けになり解決を図ってください。
この公式サポートフォーラムでは商用の商品はサポートされません。
(2025-1-29)PC画面だと画像がずれてしまう
PC画面表示にすると画像が右にずれてしまうため、そのほかの画像と同じように全幅で表示させたいです。なお、モバイル表示だと問題なく全幅で表示されます。
右にずれてしまっている画像部分のコードをお伝えします。
“https://www.amazon.co.jp/dp/〇〇〇”は実際は商品ページです。
<!– wp:image {“lightbox”:{“enabled”:false},”id”:847,”linkDestination”:”custom”,”align”:”full”,”style”:{“color”:{}}} –>
(2025-1-28)
<figure class=”wp-block-image alignfull”><a href=”https://www.amazon.co.jp/dp/〇〇〇” target=”_blank” rel=” noreferrer noopener”><img src=”http://sasaruweb.com/wp-content/uploads/2025/01/e6a8a829ed53a4c142f0b07302ccb574.jpg” alt=”” class=”wp-image-847″/></a></figure>
<!– /wp:image –>返信先: エクスポートの記事に空白行が出来てしまいます
簡単な方法としては…
Microsoft WordでそのXMLファイルを開く。すると、赤字でお示しの部分は消えるので、名前をつけて保存で、プレーンテキスト形式で保存してやればOKです。
ただし、その後まだ、一部残ったタグがあるのと、画像がURL表示になってたりなどいろいろあるので、お望みの状態ではないのかなと思います。そもそもツールのエクスポートは記事の引っ越しとかに使うものなので、テキストに書き出す機能ではありません。記事をCSVとかに書き出すプラグインなどを使って、必要な情報だけ取り出すといいかもしれませんね。
なお、XMLファイルからこれらのタグを消し去ると、おそらくWordPressから本を作るサイトは機能しないような気がします。(気がするだけで試したわけではありません。)
(2025-1-28)返信先: エクスポートの記事に空白行が出来てしまいます
早速のご回答、ありがとうございます。やはりWordPressの投稿は改行なしで文章を書くべきでした。後の祭りです。作業目的はホームページの年間記事を「WordPressで本をつくる」サイトで準備作業としてPDF化したら「段落の度に3行の空白行」が出来る不具合がありました。そこで段落をやめればと思ったのですが。XMLファイル、XMLのエディター知識が全くないため諦めざるをえないのかと思います。知識がなくても簡単にできる方法があればご教示ください。すみません。
(2025-1-28)返信先: ブロックテーマのカスタムメニュー作成について
Hidekazu Ishikawa様、返信ありがとうございます。
一度試してみます。
またブロックテーマとは別にハイブリッドテーマでのオリジナルデザインのサイトも構築テストしてみます。
とりあえずクローズさせて頂きます。
ありがとうございました。
(2025-1-16)返信先: ブロックテーマのカスタムメニュー作成について
ナビゲーションブロックを選択すればできます。他のブロックも共通です。
id については指定できるブロックが限られていますが、CSSの装飾に使うのであればクラスですので問題ないと思います。
どうしてもidを使いたい場合はグループブロックで囲えばそのグループブロックにはid(HTMLアンカー)が指定できます。
(2025-1-16)返信先: ブロックテーマのカスタムメニュー作成について
Hidekazu Ishikawa様、返信ありがとうございます。
CSSというのはクラス名の事でしょうか? 装飾のCSS自体この事でしょうか?
クラス名の事であれば該当のブロックを選択して、右下の「高度な設定」タブから id(ブロックによる) や css のクラス名を追加する事は可能です。
ブロックテーマの「ナビゲーション」機能から使用した際に、割り当てられるショートコード「<!– wp:navigation /–>」にこちらで要したオリジナル(idやcss)で装飾したいと考えています。
それと「高度な設定」からid(ブロックによる)はどのブロックを選ぶと、idを付与できますでしょうか。
質問内容が伝わりにくく恐縮ですが、ご返信頂けましたら幸いです。
(2025-1-16)返信先: ブロックテーマのカスタムメニュー作成について
CSSというのはクラス名の事でしょうか? 装飾のCSS自体この事でしょうか?
クラス名の事であれば該当のブロックを選択して、右下の「高度な設定」タブから id(ブロックによる) や css のクラス名を追加する事は可能です。
ブロックエディタの機能ですので「ブロックテーマ」に限らずクラシックテーマの本文でブロックを使用する際も同じです。
(2025-1-15)返信先: ブロックテーマのカスタムメニュー作成について
<!-- wp:navigation /-->
このショートコードには、自動で下記のソースコードが埋められます。
例えばにユニークなIDやCSSを追加したい時にはブロックテーマで実装可能でしょうか。<nav class="is-responsive wp-block-navigation is-layout-flex wp-block-navigation-is-layout-flex"
~~~~~~~~~~~省略~~~~~~~~~~~
(2025-1-15)<ul class="wp-block-navigation__container is-responsive wp-block-navigation"><li class=" wp-block-navigation-item current-menu-item wp-block-navigation-link"></a></li></ul>
</div>
</div>
</div>
</div>
</nav>返信先: ブロックテーマのカスタムメニュー作成について
お世話になります。
質問の仕方下手ですみません。ブロックテーマではクラシックテーマで言うところの「メニュー」がない分、管理画面上でデザイン変更できますが、細かい仕様迄となるとhtmlの知識を要してコードを書く方が良い場合もあると思います。
今回は後者で、且つブロックテーマでできないかと考えています。
(2025-1-15)返信先: ブロックテーマのカスタムメニュー作成について
functions.phpからウィジェットを追加などでhtmlタグにcss付与できました。
ウィジェットでカスタムテキストウィジェットを追加してCSSを書いたという事ですか?
それは不自然なのでそうではないと思いますし、ちょっとやりたい事がよくわかりません。ナビゲーションをどうカスタマイズしたいのでしょうか?
(2025-1-15)ブロックテーマのカスタムメニュー作成について
いつもお世話になっております。
twentytwentyfiveのデフォルトテーマを子テーマ化して完全オリジナルデザインで企業サイトを構築しようと試みています。基本クラシックテーマをカスタマイズするべきかと思いますが、進化についていきたい一心でブロックテーマのカスタマイズに挑戦しています。
そこで管理画面の「外観→エディター」からナビゲーションをカスタマイズしたいのですが、htmlソースなどは触れないものでしょうか。
theme.jsonで触れる項目はcssだけなので、困っています。以前のクラシックテーマですとfunctions.phpからウィジェットを追加などでhtmlタグにcss付与できました。
ご存じの方、お手数ですがご教授頂けませんでしょうか。
(2025-1-15)返信先: Voyagerテーマのリンクの下線
リンクが
a
、マウスオーバーが:hover
。
覚えて使ってやってください。解決してよかったです^^
(2025-1-11)返信先: Voyagerテーマのリンクの下線
回答ありがとうございます。希望通りの挙動になりました。
cssの記述で、マウスオーバーの場合は
a:hover { ~
ですね。応用もできそうです。gracias!
(2025-1-11)