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

2023/12/232024/07/04

当ページのリンクには広告が含まれています。

悩む人

「＼　よかったらシェアしてね！　／」の文言を変えて記事内に設置したいんだけど方法があれば教えてほしいです。

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

本記事で解決できること

「＼　よかったらシェアしてね！　／」の実装に必要なコード（コピペコード付き）
「＼　よかったらシェアしてね！　／」の実装方法（文言のみの変更も可能）

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

News

以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。

本記事の内容

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

設置例

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

SWELLに関する記事一覧

実装方法

テキストの実装

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

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

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


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

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

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

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

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

「＼／」の実装

方法①：カスタムCSS＆JS
方法②：追加CSS

方法①

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

方法②

手順

プレビュー画面から、「カスタマイズ」を選択します。

手順

左サイドバーから、「追加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;
}

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