SWELLの「よかったらシェアしてね」の文言を変えて記事内に設置

こういった悩みにお答えします。

是非、最後までご覧ください。

SWELLの「よかったらシェアしてね」を記事内に設置

設置例

※ 文言のみ変更しています！

Typingstock

404: ページが見つかりませんでした | Typingstock 主にコーディングやWordPressに関する記事を発信中。人生で得た知識や技術、経験のアウトプットブログです。

実装方法

テキストの実装

管理画面メニューから、「投稿」＞「新規投稿を追加」を選択します。

（ブロック挿入ツールを切り替え）から、「ブロック」＞「ウィジェット」＞「カスタムHTML」を選択します。

下記コードをカスタムHTMLにコピペします。

<div class="c-multiUsage">
    <div class="c-multiUsage__message">
        <span class="__text">
            例）よかったらシェアしてね！
        </span>
    </div>
</div>

下記画像はコピペ済みの状態です。

「投稿を表示」または「 （プレビュー）」から表示を確認してみます。

「よかったらシェアしてね！」と表示されています。

次は、テキストの左右にある「＼／」を実装していきます。

「＼／」の実装

方法①

編集ページの「CSS用コード」にコードを書きます。

方法②

今回は、「カスタムCSS＆JS」に下記コードをコピペします。

.c-multiUsage {
    margin: 2em 0;
}
.c-multiUsage__message {
    padding: 0.25em 0 0.75em;
    text-align: center;
    width: 100%;
}
.c-multiUsage__message .__text {
    display: inline-block;
    line-height: 1.5;
    padding: 0 1.5em;
    position: relative;
}
.c-multiUsage__message .__text:before {
    left: 0;
    transform: rotate(-40deg);
}
.c-multiUsage__message .__text:after {
    right: 0;
    transform: rotate(40deg);
}
.c-multiUsage__message .__text:after, .c-multiUsage__message .__text:before {
    background-color: #000000;
    bottom: 0;
    content: "";
    display: block;
    height: 1.5em;
    position: absolute;
    width: 1px;
}

下記画像はコピペ済みの状態です。

再度、「投稿を表示」または「 （プレビュー）」から表示を確認してみます。

「よかったらシェアしてね！」の左右に「＼／」が実装されています。

補足

今回の記事を参考に「ブログパーツ」または「パターン」に登録しておくことで、いつでも呼び出せるようになります。

今回は以上です。