[DRILL LANCER]

色々試す前に下記記事を一読してみるといいかもしれません。

全てのWordPressテーマで使える！デザインをピンポイントで変更する方法 〜親テーマのCSSは書き換えないで〜

[DRILL LANCER]

「VK 最新記事」ウィジェットではなく、「LTG コンテンツエリア投稿ウィジェット」で妥協するという案はどうでしょうか？
すでにおわかりかと思いますが、私は一顧客であり、Lightning Charmを所持しておりませんのでなんとも言えませんが・・・

[DRILL LANCER]

追記：
今しがたLightning Charmのデモサイトを見てきました。
どうやらLightning CharmではVK最新記事のデザインが大幅に変わっているようです。
（まさかLightning CharmにおいてVK最新記事のデザインが変わっているなんて思っていませんでした。）

Lightning Charmでは記事の画像エリアと記事タイトル等があるエリアが50:50で配置されています。
記事の画像エリアは

@media (min-width: 992px) {
    .mainSection .veu_postList.pt_0 .postList_item .postList_thumbnail {
        overflow: hidden;
        width: 50%;
    }
}

で定義されていて、記事タイトル等があるエリアは

@media (min-width: 992px) {
	.mainSection .veu_postList.pt_0 .postList_item .postList_body {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    display: block;
	    width: 50%;
	    -webkit-transform: scale(0,-50%);
	    transform: translate(0,-50%);
	}
}

で定義されています。
この両方のwidthと記事タイトルがある部分のtopやleftやtransformあたりををうまく調整すれば良くなると思います。

992px以下のデバイスでは画像が上、その他が下で表示されるのでそのあたりも踏まえて編集すると良いでしょう。

[DRILL LANCER]

うーむ、なんかデザインが標準のものと違っているのでカスタマイズされていますか？
それともこれがCharmの標準なのでしょうか？
ただ、これまでのやりとりで

.mainSection .veu_postList.pt_0 .postList_thumbnail a {
　　　　width: 80px;
　　　　height: auto;
}

か

.mainSection .veu_postList.pt_0 .postList_thumbnail {
　　　　width: 80px;
　　　　height: auto;
}

のどちらかで解決しそうな感じがします。

もしこれで解決できなければ、サイトのURLを貼っていただかないとちょっと無理です。

[DRILL LANCER]

.mainSection .veu_postList .postList_miniThumb .postList_thumbnail {
　　　　width: 80px;
　　　　height: auto;
}

を試してみてください。

imgタグにはテンプレートの方でmax-width:100%が設定されているので、
画像の幅は「そのすぐ外側の枠の幅」か「画像の最大幅」の小さい方が適用されます。

ちなみに、私は子テーマに

.subSection .veu_postList .postList_miniThumb .postList_item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	padding: 10px;
	vertical-align: middle;
	-webkit-box-align: center;
	-ms-flex-align: center;
}

.subSection .veu_postList .postList_miniThumb .postList_thumbnail {
	float: none;
	width: 60px;
	padding: 0;
	margin-right: 10px;
	margin-bottom: 0;
}

を記述することで、下記のようなデザインを実現しています。

• この返信は6年前にDRILL LANCERが編集しました。

[DRILL LANCER]

VK最新記事ウィジェットのお話でしょうか？
下記コードを適用してみてはいかがでしょうか？

.veu_postList .postList_miniThumb .postList_thumbnail {
　　　　width: 80px;
　　　　height: auto;
}

あと、適用後にサーバー＆ブラウザのキャッシュの削除を忘れずに。

• この返信は6年前にDRILL LANCERが編集しました。
• この返信は6年前にDRILL LANCERが編集しました。
• この返信は6年前にDRILL LANCERが編集しました。

[DRILL LANCER]

カテゴリーすみれの広場（その他の活動）

これはこの部分をクリックすると、同じカテゴリを持つ記事を探すことができるパーツです。

≪メッセージ色に込めて
≫リレーエッセイ　4月

これはこの記事の前後に投稿された投稿を読むためのナビゲーションパーツです。
カテゴリ等やタグ等の要素に関係なく表示されます。

これらのパーツは閲覧者にとっていちいちトップページに戻らずに
前後の記事や関連する記事を読めるものなので便利そうなものなのですが、
どうしても消したいのなら下記CSSを下記のように設置すれば良いでしょう。

• 全ての記事で不要な場合は子テーマのCSS or 外観 → 追加CSSに追加
• 個別にコントロールしたい場合は消したい記事のカスタムCSS欄に追加

.entry-footer{
	display:none
}

.pager{
	display:none
}

ちなみに、.entry-footerが「カテゴリーすみれの広場（その他の活動）」等の記述を削除するもので、
.pagerが「≪メッセージ色に込めて」や「≫リレーエッセイ　4月」を削除するものです。

[DRILL LANCER]

まず、下記の記事をを読まれることをおすすめします。

お問い合わせ情報の別パターンを増やす

後は下記コードを編集して貼り付けたいところに貼り付ければOKだと思われます。

<div class="veu_contact">
<section class="veu_contact veu_contentAddSection">
<div class="contact_frame">
<p class="contact_txt">
<span class="contact_txt_catch">お気軽にお問い合わせください。</span>
<span class="contact_txt_tel veu_color_txt_key">000-000-0000</span>
<span class="contact_txt_time">受付時間 9:00 - 18:00 [ 土日・祝日除く ]</span>
</p>
<a href="https://demo-ja.lightning.nagoya/contact/" class="btn btn-primary btn-lg contact_bt">
<span class="contact_bt_txt"><i class="far fa-envelope"></i> お問い合わせはこちら <i class="far fa-arrow-alt-circle-right"></i></span>
<span class="contact_bt_subTxt">お気軽にお問い合わせください。</span>
</a>
</div>
</section>
</div>

[DRILL LANCER]

ボックス（小さめの窓）を配置して規約事項（長文）を記載。

ボックスのデザインについては【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30等を参考にすると良いでしょう。

スクロールして中身を見れるようにしたい。

高さを決めてCSSでoverflow: auto;を指定すればOKです。

HTMLの例

<div class="box scr300">
    <p>規約本文</p>
</div>

CSSの例

.box {
    border: solid 1px #555555;
}

.scr300{
    overflow: auto;
    height: 300px;
    padding: 10px;
}

ボックス（小さめの窓）の下にチェックボックスをつけて
次のぺージに進めるようにするにはどうすれば良いでしょうか。

フォームを複数ページにわたって展開する方法はわかりませんがWordPress 自作フォーム その３あたりが参考になりそうです。

１ページで済ませる場合にはContact Form 7を使用するのが簡単でしょう。

[DRILL LANCER]

Twenty Twelveでブログを運営しており、その時はそのような形で表示していました。

おそらく、当時はJetpackによる無限スクロールで対応していた可能性がありそうです。
なのでこのページを参考にコーディングすると以前の仕様を維持することが可能と思われます。

[DRILL LANCER]

俗に言う無限スクロールというやつですね。
YITH Infinite Scrolling
あたりで実現できそうなのですがいかがでしょうか？

[DRILL LANCER]

Notice: Trying to get property of non-object in /home/xxx/xxx.jp/public_html/xxx/wp/wp-content/plugins/vk-all-in-one-expansion-unit/plugins/template-tags/template-tags.php on line 68

Notice: Trying to get property of non-object in /home/xxx/xxx.jp/public_html/xxx/wp/wp-content/plugins/vk-all-in-one-expansion-unit/plugins/template-tags/template-tags.php on line 69

VK All in One Expansion Unitの何かが起因するエラーのようです。
VK All in One Expansion Unitを最新版に更新するなり、再インストールするなりすると解決するかもしれません。

[DRILL LANCER]

外観 > カスタマイズ > Lightning コピーライト設定 のテキストエリアに

<a href="（リンク先のURL）" style="color: （色コード）;">（表示したい文字列）</a>

を入力することで可能です。

例：
<a href="https://test02.rick-addison.com" style="color: #000080;">Copyright © Lightning実験場 All Rights Reserved.</a>

色コードはWEB色見本 原色大辞典等で調べてください。

• この返信は6年前にDRILL LANCERが編集しました。

[DRILL LANCER]

外観 > ウィジェットで表示されているウィジェットがサイドバーのどれかに設置されているか確認してみてください。
おそらく、他の場所に設置されている可能性が高いです。

[DRILL LANCER]

子テーマのfunctions.phpに下記コードをコピー＆ペーストして

/**
 * <head>タグ内に自分の追加したいタグを追加する
 */
function add_wp_head_custom() {
	?>
	<!-- head内に書きたいコード 開始 -->

	<!-- head内に書きたいコード 終了 -->
	<?php
}
add_action( 'wp_head', 'add_wp_head_custom', 1 );

/**
 * <body>タグ内下部に自分の追加したいタグを追加する
 */
function add_wp_footer_custom() {
	?>
	<!-- footerに書きたいコード 開始 -->

	<!-- footerに書きたいコード 終了 -->
	<?php
}
add_action( 'wp_footer', 'add_wp_footer_custom', 1 );

上記のどちらかの開始コメントと終了コメントの間にGoogleしごと検索のタグを貼り付けるのが一番手っ取り早いと思います。

プラグインで対応する場合はSimple Custom CSS and JSあたりが使いやすいと思います。
上記プラグインで対応する場合は<script>～</script>を除去して記入する必要があります。

【追記】
もしくは、JSON-LDではなくMicrodata形式で書くというのも手かもしれません。
その際はこちらのサイトが参考になるかもしれません。

[投稿者]

投稿