SWELL│複数のブログパーツをメインビジュアルに重ねる方法

メインビジュアルの中央等に、ブログパーツを配置する場合

カスタマイズからブログパーツのIDを設定すると思います。

しかしそれ以外にもサイドにSNSアイコンを掲載したり、下側にメガメニューを配置したりと

メインビジュアルに対して複数のブログパーツを配置したいことがあります。

そんなときによく使うカスタマイズです。

今回はチュートリアルとして左下にSNSアイコンを表示させます。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

SWELLで複数のブログパーツをメインビジュアルに重ねる方法

トップページのメインビジュアル内に、標準設定とは別のブログパーツを1つ追加する例です。

ブログパーツとコード（PHPとCSS）を使います。

ブログパーツの用意

今回はメインビジュアルの左下に、縦向きのSNSアイコンをのせてみます。

ブログパーツにSNS名とリンクを作ります。アイコンだけにせず、リンクの目的が分かる表示テキストを付けてください。

最後に全体にグループブロックを作成して、side-snsというクラスも追加しています。

CSSは「追加CSS」または子テーマのstyle.cssの一方へ追加します。旧版の回転・left:-50px・z-index:1000を指定したCSSは置き換えてください。以下は960px以上で縦並び、小さい画面では横並びにする例です。回転表示は使いません。

#main_visual .waza-mv-sns .side-sns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}
#main_visual .waza-mv-sns a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}
#main_visual .waza-mv-sns a:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}
@media (min-width: 960px) {
    #main_visual .waza-mv-sns .side-sns {
        flex-direction: column;
        align-items: flex-start;
    }
}

ブログパーツの追加挿入

先ほど作成したブログパーツのショートコードをコピーしておきます。

あとはコードでメインビジュアルに追加で表示させるだけです。

バックアップ後、子テーマのfunctions.php内またはCode SnippetsのPHPスニペットの一方へ追加します。旧版の同じフックへの追加コードは置き換えます。

Code Snippetsでもエラーが起きない保証はありません。管理画面を開けなくなった場合の停止手段を用意してください。

確認した環境と範囲: 掲載コードの記述内容とクラス名を確認しました（SWELL 2.19 / WordPress 7.1 時点の表記）。未確認の点: 実環境でのメインビジュアルへの重なり、PC・スマホでの位置、ブログパーツを複数置いたときの表示は検証していません。元に戻すときは、追加したコードとCSS、ブログパーツのクラスを外します。

メインビジュアルの関連カスタマイズは固定表示する方法、ブログパーツの応用はポップアップ表示にする方法、一覧はSWELLカスタマイズまとめにあります。