コンテンツへスキップ ナビゲーションに移動
Lightning G3 のカスタマイズ、TIPS
  • ホームHome
  • サイト案内Site Info
  • 賃貸物件Property
  • 料理Dishes
  • ブログBlog
  • お問合せInquiry
ブログ
  1. HOME
  2. ブログ
  3. カスタマイズ
  4. VK Post Author Display の投稿者プロフィールの画像のスタイル調整

VK Post Author Display の投稿者プロフィールの画像のスタイル調整

2022年4月11日(月)2022年4月13日(水)対馬 俊彦対馬 俊彦

VK Post Author Display で投稿者プロフィールを表示

このサイトでは、プラグイン VK Post Author Display を使って投稿者プロフィールを表示しています。

私のプロフィールに長々と文章を書いてあることもあって、プロフィール画像の下の余白(赤枠部分)が大きいのが気になります。

パソコンで見るときにはまだいいのですが、スマホで見たときに余白がかなり大きくて気になるので、CSS で以下のようにカスタマイズしてみました。

カスタマイズ前

カスタマイズ前

カスタマイズ後

カスタマイズ後

カスタマイズ手順

以下の CSS を追加します。

@media (max-width: 600px) {

#padSection {
    display: flex;
    flex-direction: column;
}

#padSection .avatar {
    float: none;
    text-align: center;
}

#padSection .avatar img {
    width: unset;
}

#padSection .profileTxtSet {
    margin-left: 0.2em;
}

#padSection .profileTxtSet dt {
    margin-bottom: 1.5em;
    text-align: center;
}

}

投稿者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス (新潟県南魚沼市)
WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

このサイトで行っているカスタマイズのやり方の多くもマンツーマンのオンラインレッスン形式などでわかりやすく説明させていただくことができますので、興味がある方はご連絡ください。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。

» ご相談・お問い合わせはこちらからどうぞ
最新の投稿

この著者の記事一覧

  • WordPress2023.02.02WordPress コアのナビゲーションブロックを使ったオーバーレイメニュー
  • VK Blocks2023.01.31【レスポンシブ対応】VK Blocks のスライダーで新着記事をカルーセル表示
  • VK Blocks2023.01.30VK Blocks のスライダーを使った全画面表示のスライドショー
  • 検索Lightning G32023.01.19Lightning でヘッダーに検索窓を設置したカスタマイズ例③

今よりもっといい WordPress サイトにしたいなら Vektor Passport がおすすめ

ベクトルから発売されている有料プラグイン Lightning G3 Pro Unit / VK Blocks Pro を使えば、このサイトで紹介しているようなコードを書かずにかんたんにカスタマイズできることがたくさんあります。

名前に Pro がついているので「制作のプロ向け製品」という印象を受けるかもしれませんが、
*もっといいサイトにしたい
* 効率よく作成・運用・管理をしたい
と考えているコーポレートサイトの担当者にこそ使っていただく価値がある製品です。

Lightning G3 Pro Unit / VK Blocks Pro は Vektor Passport というライセンス製品で販売されています(個々の単体販売はされていません)。これらのプラグインを使うと、便利なカスタマイズ機能やリッチなコンテンツ制作に役立つブロックをたくさん利用できるようになりますので、効率的にサイトを制作・運用したい方はぜひお使いになることをおすすめします。
ライセンス購入はこちら
  • Facebook
  • twitter
  • Hatena
  • Pocket

こちらの記事もいかがですか

WordPress コアのナビゲーションブロックを使ったオーバーレイメニュー
 2023年2月2日
【レスポンシブ対応】VK Blocks のスライダーで新着記事をカルーセル表示
 2023年1月31日
VK Blocks のスライダーを使った全画面表示のスライドショー
 2023年1月30日
検索
Lightning でヘッダーに検索窓を設置したカスタマイズ例③
 2023年1月19日
CSS
VK スライダーブロックの前後ボタンとページネーションを外に出してみた
 2023年1月13日
CSS
VK Blocks の全幅のスライダーブロックの最大幅を指定したカスタマイズ例
 2023年1月12日
カスタム投稿タイプ「おいしい料理」を追加しました
 2023年1月10日
Lightning を Katawara 風レイアウトにカスタマイズしてみた
 2022年12月25日
検索
Lightning でヘッダーに検索窓を設置したカスタマイズ例②
 2022年11月30日
検索
Lightning でヘッダーに検索窓を設置したカスタマイズ例①
 2022年11月29日
検索
VK Filter Search を使用した賃貸物件検索ページの機能追加
 2022年10月26日
マウス
WordPress コアのボタンブロックのマウスホバー時の色を指定する
 2022年10月21日
カテゴリー
カスタマイズその他
タグ
CSSVK Post Author Display
前の記事

register_block_style で追加したブロックスタイルの見本

2022年4月11日
カテゴリー
WordPressカスタマイズ
タグ
register_block_styleアクションフックカスタマイズ
この記事を読む
次の記事

Font Awesome 6 のスタイルいろいろ

2022年4月16日
カテゴリー
その他
タグ
Font AwesomeFont Awesome 6
この記事を読む
  • イベントカレンダー
  • 賃貸物件検索
  • かわいい動物たち
  • おいしい料理
lightning-g3-free-logo

WordPress の 100% GPL ライセンスのテーマ「Lightning G3 (無料版)」でいろいろと試しています。
役に立つ情報の発信もなるべくしようと心がけていますが、お客様に提示するカスタマイズ案のショーケースとして使ったり、自分の勉強・備忘録のために使ったり、動作確認でテスト投稿したり…というサイトなので、手順の説明などを詳しく載せていないものやナニコレ?的なものがあります。その点はご了承ください。

魚沼情報サービス https://uonuma-js.com/

Facebook page

従来の検索ウィジェット

検索ブロック (デフォルト)

検索ブロック (カスタマイズ)

Copyright © Lightning G3 のカスタマイズ、TIPS     All Rights Reserved.

Powered by WordPress with Lightning Theme & VK All in One Expansion Unit by Vektor,Inc. technology.

Customized by Toshihiko Tsushima & Special Thanks to Vektor,Inc.

MENU

WordPress の 100% GPL ライセンスの無料テーマ「Lightning G3」でいろいろと試しています。

  • ホームHome
  • このサイトについてAbout This Site
  • ブログBlog
  • お問い合わせInquiry
PAGE TOP