[webLinx]

ご回答いただきました内容とmedia queryを組み合わせ、無事表示することができました。
ありがとうございました。

[webLinx]

ちなみにsiteHeader_subにposition: absolute;をつけてみましたが、レイアウトがさらに崩れてしまいました。。。
現在、一時的にFacebookアイコンは表示しておりませんが、ご回答のほどよろしくお願いいたします。

[webLinx]

このカスタマイズを行うにあたり、どこに親要素をつければいいのでしょうか？

[webLinx]

回答ありがとうございました。
設定が存在するのを知りませんでした。。。

ありがとうございました！！

[webLinx]

functions.phpに修正を行うことで、実現したいカスタマイズを実装することができました。
ありがとうございました！！

[webLinx]

>>おそらく
>>
>>1. 外観 > カスタマイズ > Lightning アーカイブ設定 で標準レイアウトを選択
>>2. 子テーマに template-parts/post/ ディレクトリを作って loop-投稿タイプ名.php を配置
>>3. loop-投稿タイプ名.php に一件分のコードを書く
>>
>>のが一番希望に添うものが作りやすいのではないかと思います。
>>
>>テキスト1カラム以外のレイアウトなら以下の方がおすすめです。
誤っている場合は申し訳ございません。。。
ご回答いただきました内容については、アーカイブページのカスタマイズになるかと存じます。

今回はVK Blocks・Proのスレッドに質問させていただきましたので、質問の内容としては、
【VK Blocks・Proの投稿リストの表示タイプ：テキスト1カラムで表示した際、カスタムフィールドの値も表示させたい】となり、カスタマイズ箇所が別のファイルではないかと思うのですが、いかがでしょうか。

[webLinx]

>> 子テーマのサンプルの中にカスタム投稿タイプのアーカイブのサンプル
>
>こちらが何の事を指しているのか不明ですが、
>手動で投稿タイプを追加するコードの事であれば
>下記参照ください。
module_loop_★ポストタイプ名★.php のサンプルファイルが、zipファイルにふくまれていることを期待していました。

以前のbizvektorには存在していたようにおもいましたので。。。

勘違いであれば申し訳ないです。

[webLinx]

>>各SNSアイコンのURLは記入されていますか？
設定はしておりません。
おそらくですが、お客様の現状を考えるとSNSのURLについては設定しないまま公開となりそうです。

ウィジェットのエビデンスを追加します。

>>該当サイトは開発中のものでまだ公開されていないURLですか？
現在開発中ですので、公開はしておりません。

[webLinx]

fujinaga様

以前、まったく同じ現象が発生していたものです。
私の場合は、以下の作業の流れで発生していました。

１．無料のLightningを使用。
２．無料のLightningのheader.phpをコピーして子テーマを作成
３．Lightning Proに更新
４．子テーマのheader.phpは無料のLightningのもののまま

解決方法としては、子テーマのheader.phpを、
Lightning Proのheader.phpをコピーすることで解決することができました。

[webLinx]

設定内容は以下の通りです。

■使用テーマ

■関係しそうなプラグイン

■設定したウィジェット

■背景色の設定内容

■使用している画像

■表示結果

上記以外にエビデンスの必要な箇所がありましたら追加で取得し掲載いたします。

[webLinx]

>>class=”table-responsive” をtableタグにではなく、tableの外側のdivに<div class=”table-responsive”> と書くと>>横スライドになります。
>>（tableタグからは table-responsive ） は削除してください。
★スマホ表示の際に横スライドは求めていないため、table-responsiveは削除します。
　
>>『レイアウト崩れ』とはどういう状態を指していますか？
★スマホ表示した場合にtype=fileのinputタグがテーブルタグの枠をはみ出します。
　type=fileのinputタグがテーブルタグの枠をはみ出したせいなのか、
　その他のinputタグもテーブルタグの枠をはみ出します。

>>table {font-size:12px;}
>>input[type=file] {width:300px;}
★input[type=file] {width:300px;}を使用しても変化はありませんでした。
　table {font-size:12px;}を使用したところ、BizVektorでtype=fileのinputタグを使用した際の表示と同じになりました。

■結果
BizVektorの場合
スマホ表示した場合、ContactForm7のinputタグのtype=fileのフォントサイズは12pxとなり、テーブルタグの枠をはみ出さない

Lightningの場合
スマホ表示した場合、ContactForm7のinputタグのtype=fileのフォントサイズは16pxとなり、テーブルタグの枠をはみ出すため、table {font-size:12px;}を記述する必要がある

[webLinx]

以下のURLのページをスマホにてご確認ください。
※PC表示ではレイアウト崩れはおきません。

http://weblinx01.xsrv.jp/dev_andoh-mitsuki.com/%E3%81%8A%E5%95%8F%E5%90%88%E3%81%9B%E3%83%BB%E3%81%94%E6%B3%A8%E6%96%87/

一つ目のテーブル内にはファイルタグがありますが、
二つ目のテーブルにはファイルタグがありません。

Contact Form7のコードは以下の内容です。

<h2>ファイルタグあり</h2>
<table class="table table-responsive table-striped table-bordered mobile-block">
	<tbody>
		<tr>
			<th>お名前</th>
			<td>[text* your-name placeholder "お名前を入力してください"]</td>
        </tr>
		<tr>
			<th>メールアドレス</th>
			<td>[email* your-mail placeholder "メールアドレスを入力してください"]</td>
		</tr>
		<tr>
			<th>電話番号</th>
			<td>[tel* tel placeholder "電話番号を入力してください"]</td>
		</tr>
		<tr>
			<th>郵便番号</th>
			<td>[text zip class:p-postal-code minlength:8 size:8 placeholder "郵便番号を入力して下さい"]</td>
		</tr>
		<tr>
			<th>住所</th>
			<td>[text address class:p-region class:p-locality class:p-street-address class:p-extended-address placeholder "住所を入力して下さい"]</td>
		</tr>
		<tr>
			<th>写真1</th>
			<td>[file file-01]</td>
		</tr>
		<tr>
			<th>写真2</th>
			<td>[file file-02]</td>
		</tr>
		<tr>
			<th>写真3</th>
			<td>[file file-03]</td>
		</tr>
		<tr>
			<th>お問い合わせ内容</th>
			<td>[textarea your-message placeholder "お問い合わせ内容を入力してください"]</td>
		</tr>
	</tbody>
</table>

<h2>ファイルタグなし</h2>
<table class="table table-responsive table-striped table-bordered mobile-block">
	<tbody>
		<tr>
			<th>お名前</th>
			<td>[text* your-name placeholder "お名前を入力してください"]</td>
        </tr>
		<tr>
			<th>メールアドレス</th>
			<td>[email* your-mail placeholder "メールアドレスを入力してください"]</td>
		</tr>
		<tr>
			<th>電話番号</th>
			<td>[tel* tel placeholder "電話番号を入力してください"]</td>
		</tr>
		<tr>
			<th>郵便番号</th>
			<td>[text zip class:p-postal-code minlength:8 size:8 placeholder "郵便番号を入力して下さい"]</td>
		</tr>
		<tr>
			<th>住所</th>
			<td>[text address class:p-region class:p-locality class:p-street-address class:p-extended-address placeholder "住所を入力して下さい"]</td>
		</tr>
		<tr>
			<th>お問い合わせ内容</th>
			<td>[textarea your-message placeholder "お問い合わせ内容を入力してください"]</td>
		</tr>
	</tbody>
</table>

>>画面が狭い時にテーブルを横にスライドする事はできますか？
テーブルを横にスライドするようには見えないです。

[webLinx]

ご連絡ありがとうございます。

以下のコードを記述してみましたが、スマホ用のCSSはやはり当たっておらず、
レイアウトが崩れております。

<div class="table-responsive">
  <table class="table table-striped table-bordered">
    <tbody>
      <tr>
        <th>写真1</th>
        <td>[file file-01]</td>
      </tr>
    </tbody>
  </table>
</div>

ほかになにか原因がありますでしょうか。

[webLinx]

修正対応ありがとうございます。
プラグインを更新し、確認いたしました。

スライダー画像の見切れはなくなっておりました。

あと２点確認なのですが、
1.スマホ表示時に、サイトタイトルのfont-sizeが32pxは大きすぎるのでは？
2.ウィジェット：サイドバーのどれかに登録されるはずのウィジェット設定内容が、ウィジェット：トップページコンテンツエリア右に設定されているのでは？

こちらについては、Lightning Skin Fort の修正ではなく、
Lightning Proの修正となるのでしょうか。

[webLinx]

テーマ
Lightning Pro 0.1.2

プラグイン
Akismet Anti-Spam 4.0.8
Lightning Skin Fort 3.0.3
TypeSquare Webfonts for エックスサーバー 1.1.0
VK All in One Expansion Unit 6.6.8
WP Multibyte Patch 2.8.1

にて新しく環境を作成しました。

作成手順は、Xサーバの簡単インストールからwordpressをインストールし、
その後、上記のテーマとプラグインをインストール、有効化したのみです。

http://weblinx01.xsrv.jp/demodemo001/

↑のURLをスマホでご確認ください。

PC時でもスマホ時でも.navbar-brandのfont-size: 32pxが適用されており、
スマホ時はかなり文字が大きく感じます。

また、新しく環境を作成して気がついたのですが、
おそらくウィジェット：サイドバーのどれかに登録されるはずのウィジェット設定内容が、
ウィジェット：トップページコンテンツエリア右に設定されています。

こちらについても上記のURLでご確認ください。

[投稿者]

投稿