![](https://hrdyuic.com/wp-content/uploads/8335d558d151e09a696fb916ebabfbd5.png)
「\ よかったらシェアしてね! /」の文言を変えて記事内に設置したいんだけど方法があれば教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- 「\ よかったらシェアしてね! /」の実装に必要なコード(コピペコード付き)
- 「\ よかったらシェアしてね! /」の実装方法(文言のみの変更も可能)
是非、最後までご覧ください。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
【SWELLブロックエディタ使い方ガイド】テーマ専用機能まとめ
SWELLでのブロックエディタの使い方を知りたいですか?本記事では、ブロックツールバーで使えるSWELL専用機能やWordPress標準搭載のブロックをカスタマイズしたブロック、SWELL専用のカスタムブロックの使い方を解説しています。SWELLでのブロックエディタの使い方を知りたい方は是非ご覧ください。
本記事の内容
SWELLの「よかったらシェアしてね」を記事内に設置
設置例
※ 文言のみ変更しています!
Typingstock
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://hrdyuic.com/wp-content/uploads/132215e4245b5b7a3705929226f9e056.jpg)
![](https://hrdyuic.com/wp-content/uploads/132215e4245b5b7a3705929226f9e056.jpg)
![](https://hrdyuic.com/wp-content/uploads/132215e4245b5b7a3705929226f9e056.jpg)
404: ページが見つかりませんでした | Typingstock
主にコーディングやWordPressに関する記事を発信中。人生で得た知識や技術、経験のアウトプットブログです。
実装方法
テキストの実装
管理画面メニューから、「投稿」>「新規投稿を追加」を選択します。
![](https://hrdyuic.com/wp-content/uploads/88a81decefe931955becc1429bc5ebc3.jpg)
![](https://hrdyuic.com/wp-content/uploads/88a81decefe931955becc1429bc5ebc3.jpg)
(ブロック挿入ツールを切り替え)から、「ブロック」>「ウィジェット」>「カスタムHTML」を選択します。
![](https://hrdyuic.com/wp-content/uploads/71bb2e85af5e2a8ce8136ae87ad56988.jpg)
![](https://hrdyuic.com/wp-content/uploads/71bb2e85af5e2a8ce8136ae87ad56988.jpg)
下記コードをカスタムHTMLにコピペします。
<div class="c-multiUsage">
<div class="c-multiUsage__message">
<span class="__text">
例)よかったらシェアしてね!
</span>
</div>
</div>
下記画像はコピペ済みの状態です。
![](https://hrdyuic.com/wp-content/uploads/af958d2fa026eb3aa3bacf2c33482818.jpg)
![](https://hrdyuic.com/wp-content/uploads/af958d2fa026eb3aa3bacf2c33482818.jpg)
「投稿を表示」または「
(プレビュー)」から表示を確認してみます。「よかったらシェアしてね!」と表示されています。
![](https://hrdyuic.com/wp-content/uploads/54e2e4fc6b405cb9067d62ca77d0dc26.jpg)
![](https://hrdyuic.com/wp-content/uploads/54e2e4fc6b405cb9067d62ca77d0dc26.jpg)
次は、テキストの左右にある「\/」を実装していきます。
「\/」の実装
- 方法①:カスタムCSS&JS
- 方法②:追加CSS
方法①
編集ページの「CSS用コード」にコードを書きます。
![](https://hrdyuic.com/wp-content/uploads/319af79e253ce371591b458735cea070.jpg)
![](https://hrdyuic.com/wp-content/uploads/319af79e253ce371591b458735cea070.jpg)
方法②
手順
プレビュー画面から、「カスタマイズ」を選択します。
![](https://hrdyuic.com/wp-content/uploads/2366b0de8951fc2ec24a4e5a83847f0f.jpg)
![](https://hrdyuic.com/wp-content/uploads/2366b0de8951fc2ec24a4e5a83847f0f.jpg)
手順
左サイドバーから、「追加CSS」を選択します。
![](https://hrdyuic.com/wp-content/uploads/abfafd71cf43c5ac013a66922f3b81cb.jpg)
![](https://hrdyuic.com/wp-content/uploads/abfafd71cf43c5ac013a66922f3b81cb.jpg)
手順
下記画像の赤枠内にコードを書きます。
![](https://hrdyuic.com/wp-content/uploads/aabb8263bd4d5f1f15efd63b69b188f8.jpg)
![](https://hrdyuic.com/wp-content/uploads/aabb8263bd4d5f1f15efd63b69b188f8.jpg)
今回は、「カスタム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;
}
下記画像はコピペ済みの状態です。
![](https://hrdyuic.com/wp-content/uploads/de238ca2066a28d0c9ad376cbf0516d4.jpg)
![](https://hrdyuic.com/wp-content/uploads/de238ca2066a28d0c9ad376cbf0516d4.jpg)
再度、「投稿を表示」または「
(プレビュー)」から表示を確認してみます。「よかったらシェアしてね!」の左右に「\/」が実装されています。
![](https://hrdyuic.com/wp-content/uploads/8901c695033b9a53d1e436cf1ca95a25.jpg)
![](https://hrdyuic.com/wp-content/uploads/8901c695033b9a53d1e436cf1ca95a25.jpg)
補足
今回の記事を参考に「ブログパーツ」または「パターン」に登録しておくことで、いつでも呼び出せるようになります。
![](https://hrdyuic.com/wp-content/uploads/335bf1097b8a947770fc71833991722f.jpg)
![](https://hrdyuic.com/wp-content/uploads/335bf1097b8a947770fc71833991722f.jpg)
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
【SWELLブロックエディタ使い方ガイド】テーマ専用機能まとめ
SWELLでのブロックエディタの使い方を知りたいですか?本記事では、ブロックツールバーで使えるSWELL専用機能やWordPress標準搭載のブロックをカスタマイズしたブロック、SWELL専用のカスタムブロックの使い方を解説しています。SWELLでのブロックエディタの使い方を知りたい方は是非ご覧ください。
今回は以上です。