ショートコードでバナーのデザインを補完するバナーブロックを表示させるスニペット

2021年3月22日 5分

WordPressの記事内に、良かれと思いバナーを置いてみても、記事の文字量に埋れてしまい意図した導線としての機能を果たさない場面があります。

そこで、バナーのサイズや色味を変更して目立たせることができますが、外部サイトのバナーの場合、バナー自体をいじることができないので、それ以外のデザインでみやすくする必要があります。

そこで、CSSでバナー周りのデザインを補完して目立たせることができるので、方法を知っておくと非常に便利です。

そこで今回は、ショートコードでバナーのデザインを補完するバナーブロックを表示させるスニペットについてご紹介します。

バナーブロックのデザインサンプル
実装の手順概要
- 注意点
コピペ用コード

バナーブロックのデザインサンプル

このページのコピペでできるバナーブロックのサンプルです。

当サイトで利用しているWordPressテーマ SANGO のテイストに合わせ、かつ、ブロックの左右に余白ができないようCSSで調整しています。

CTAブロックとしても使えそうな感じです。

詳細はこちらで見れます

こんな感じで出力されます。

実装の手順概要

実装は、functions.phpにコードをコピペ → CSSをコピペ → 完成の3つの手順で完了です。

STEP.1

functions.phpにコピペ用コードをコピペ

functions.phpにショートコードを設定するコードをコピペします。出力するバナーと吹き出しの顔の画像や吹き出しのセリフを差し替えて記述するようにしましょう。

STEP.2

CSSをコピペ

デザインを整えるCSSをコピペします。背景色は、.muumuu の中に記述があるので書き換えれば色が変わります。

STEP.3

表示したいところにショートコードを貼る

ウィジェットや投稿ページなど、出力したいページにショートコードを貼り付けしましょう。

STEP.4

完成

無事コピペができて、出力できれば完成です。

注意点

実装は上記の手順で実装可能ですが、functions.phpに間違った記述を行うと全ての画面表示が真っ白になったりするので注意しましょう。

注意

functions.phpをいじる場合、ftpで必ずバックアップを取ってから行い、テーマ本体ではなく子テーマの方に関数をコピペするようにしましょう。

コピペ用コード

以下がコピペ用のコードと、ショートコードの一式です。

functions.php には画像のパスを記述する場所が2つ。CSSにはbefore after の擬似要素に1つパスをする箇所があるので、書き換えて利用ください。

コードを表示する

ショートコード

[banner]

functions.php

/* バナーブロック */
function bannerFunc() {
    return '<div class="muumuu">
<p class="muumuudes">詳細はこちらで見れます</p>
<div class="muuhref">
<!-- ここからバナー -->
<img src="" alt="">
<!-- ここまでバナー -->
</div>
<!--吹き出しはじまり-->
<div class="muumuufoot">
<div class="balloon5">
  <div class="faceicon">
<img src="" alt="ここに顔アイコン">
  </div>
  <div class="chatting">
    <div class="says">
      <p>こんな感じで表示されます</p>
    </div>
  </div>
</div>
</div>
<!--吹き出し終わり-->
</div>';
}
add_shortcode('banner', 'bannerFunc');

CSS

/* バナーブロック */
.muumuu {
    width: 100%;
    display: block;
    text-align: center;
    position: relative;
    background: #e1f3ff;
    box-sizing: border-box;
    padding-top: 20px;
    margin: 20px 0;
}
.muumuu:before, .muumuu:after{
  content: url(img/dotback.svg);
    position: absolute;
    width: 60px;
    height: 60px;
    z-index: 0;
    opacity: 0.4;
}
.muumuu:before {
    bottom: 15px;
    left: 15px;
    transform: rotate( 
90deg
 );
}
.muumuu:after {
    top: 15px;
    right: 15px;
    transform: rotate( 
270deg
 );
}
p.muumuudes {
    display: inline-block;
    margin: 0 0 5px;
    position: relative;
    letter-spacing: 0.04em;
    color:#6bb6ff;
    font-weight: 600;
}
p.muumuudes:before, p.muumuudes:after {
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 20px;
    height: 3px;
    border-radius: 3px;
    background-color: #6bb6ff;
    content: "";
}
p.muumuudes:before {
left: -30px;
    -webkit-transform: rotate(
50deg
);
    transform: rotate(
50deg
);
}
p.muumuudes:after {
right: -30px;
    -webkit-transform: rotate(
-50deg
);
    transform: rotate(
-50deg
);
}
.muuhref {
  display:block;
  padding-bottom:0;
}
.muumuu a img{
    box-shadow: 0 1px 5px 0 rgb(0 0 0 / 25%);
    transition: 0.2s ease-in-out;
    z-index: 1;
    position:relative;
}
.muumuu a img:hover {
  box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
    transform: translateY(-4px);
}

/* 吹き出し */
.muumuufoot {
    display: block;
    text-align: center;
    position: relative;
    padding: 20px 0 10px;
}
.balloon5 {
    max-width: 310px;
    margin: 5px 10px;
    display: inline-block;
    position: relative;
    width: 100%;
}

.balloon5 .faceicon {
    float: left;
    margin-right: -90px;
    width: 80px;
    display: inline-block;
    position: relative;
}

.balloon5 .faceicon img{
  width: 100%;
  height: auto;
  border: solid 3px #6bb6ff;
  border-radius: 50%;
}

.balloon5 .chatting {
  width: 100%;
}

.says {
    display: inline-block;
    position: absolute;
    margin: 0 0 0 15px;
    padding: 10px 15px;
    border-radius: 5px;
    background: #6bb6ff;
    width: 210px;
    left: 65px;
    text-align: left;
    color: #FFF;
    font-weight: 400;
    top: 0;
    line-height: 1.3em;
}

.says:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 24px;
    left: -22px;
    border: 10px solid transparent;
    border-right: 12px solid #6bb6ff;
}

.says p {
  margin: 0;
  padding: 0;
}
@media screen and (min-width:1030px) {
    /*　画面サイズが1030px以上はここを読み込む　*/
 .muumuu {
    width: calc(100% + 80px);
    margin: 20px -40px;
}
}
@media screen and (min-width:481px) and ( max-width:1029px) {
    /*　画面サイズが481pxから1029pxまではここを読み込む　*/
.muumuu {
    width: calc(100% + 50px);
    margin: 20px -25px;
}
}

@media screen and (max-width:480px) { 
    /*　画面サイズが480px以下はここを読み込む　*/
.muumuu {
    width: calc(100% + 30px);
    margin: 20px -15px;
}
}