ティーストーリーボタンを簡単に作成する方法

Last Updated: 2024 年 06 月 14 日 2のコメント
無料電子ブック AdSense ウェビナー

ティーストーリーでは、書式を使用してHTML / CSSでボタンを作成し、文章を作成するときに書式からボタンを呼び出して編集できます。私のティーストーリーブログではこの方法を利用しています。しかし、書式を使用してボタンを追加すると、ボタンのレイアウトが壊れると訴えるユーザーがいます。特にボタンをコピーして貼り付けると、CSSクラスが消えてボタンスタイルがめちゃくちゃになります。

より簡単な方法で[ボタン名|リンクテキスト|リンクURL]形式でボタンを追加する方法をご紹介します。

ティーストーリーボタンを簡単に作成して挿入する方法

WordPressでは、ブロックエディタを使用して簡単にボタンを作成し、CSSクラスを指定してボタンスタイルを好みに合わせて飾ることができます。 WordPress ボタンの作成の詳細については、次の記事を参照してください。

💡WordPress ボタンを作る

組織では、HTML / CSSを使用してボタンを作成してフォーマットで保存し、フォーマットからボタンを呼び出すことができます。

より簡単にボタンを作成する方法として、次の形式で入力すると、そのスタイルのボタンが表示されることを考慮することができます。

[버튼1|링크 텍스트|URL]

[버튼2|링크 텍스트|URL]

最後に、次のボタンの表示方法を見てみましょう。色などのスタイルは自由にカスタマイズできます。

ティーストーリーボタンを簡単に挿入する方法

1 ティーストーリーにログインして、 飾る » スキンの編集をクリックしてスキン編集画面を表示します。 html編集 ボタンをクリックします。

ティーストーリースキンの編集

2 HTMLタブで一番下までスクロールし、すぐ上に次のJavaScriptコードを入力します。

<script>
document.addEventListener('DOMContentLoaded', (event) => {
	const paragraphs = document.querySelectorAll('p');

	paragraphs.forEach(paragraph => {
		const button1Regex = /\[버튼1\|([^\|]+)\|([^\]]+)\]/;
		const button2Regex = /\[버튼2\|([^\|]+)\|([^\]]+)\]/;

		if (button1Matches = paragraph.innerHTML.match(button1Regex)) {
			const linkText = button1Matches[1];
			const url = button1Matches[2];
			paragraph.innerHTML = `<a class="myButton1" title="바로가기" href="${url}">${linkText}</a>`;
		} else if (button2Matches = paragraph.innerHTML.match(button2Regex)) {
			const linkText = button2Matches[1];
			const url = button2Matches[2];
			paragraph.innerHTML = `<a class="myButton2" title="바로가기" href="${url}">${linkText}</a>`;
		}
	});
});
</script>

コードを入力した後 適用 ボタンをクリックして編集内容を適用します。

新しいタブでリンクが表示されるようにするには、 target = "_ blank"を追加します。

図を見ると、次のように追加できます。

ティーストーリーHTML編集

3 上部の CSS タブをクリックし、下部に次のCSSコードを入力します。

/* 버튼 */
/* 레드 색상 계열 버튼 */
.myButton1 {
	display: inline-block;
	background: linear-gradient(135deg, #ff8a80 0%, #e57373 100%);
	background-color: #ff8a80;
	border: none;
	line-height: 1.5;
	color: white !important;
	text-align: center;
	font-size: 22px;
	width: 100%;
	padding: 20px 0;
	border-radius: 30px;
	transition: all 0.4s ease;
	cursor: pointer;
	font-weight: bold;
	text-decoration: none;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
}

@media (max-width: 768px) {
	.myButton1 {
		font-size: 16px;
		padding: 15px 0;
		width: 90%;
	}
}

.myButton1:hover {
	background: linear-gradient(135deg, #e57373 0%, #ff8a80 100%);
	background-color: #e57373;
	color: #ffffff !important;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* 블루 색상 계열 버튼 */
.myButton2 {
	display: inline-block;
	background: linear-gradient(135deg, #68bfe6 0%, #4fa3cf 100%);
	background-color: #68bfe6;
	border: none;
	line-height: 1.5;
	color: white !important;
	text-align: center;
	font-size: 22px;
	width: 100%;
	padding: 20px 0;
	border-radius: 30px;
	transition: all 0.4s ease;
	cursor: pointer;
	font-weight: bold;
	text-decoration: none;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
}

@media (max-width: 768px) {
	.myButton2 {
		font-size: 16px;
		padding: 15px 0;
		width: 90%;
	}
}

.myButton2:hover {
	background: linear-gradient(135deg, #4fa3cf 0%, #68bfe6 100%);
	background-color: #4fa3cf;
	color: #ffffff !important;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

CSS タブは HTML タブの右側にあります。

ティーストーリーCSSの編集

同様に、CSSコードを入力した後 適用 ボタンをクリックして変更を保存します。

CSSスタイルは自由にカスタマイズできます。 基本的なCSSを実施すると役に立ちます。ボタンのスタイルを変更したい場合は、下の「ボタンジェネレータでカスタムボタンを作成する」セクションを参照してください。

ステップ1～3は一度だけ進めるだけです。

4 これで、文章を書くときにボタンを置く場所に次の形式でボタンを追加できます。新しい段落にボタンを追加する必要があります。

ティーストーリーボタンを追加する

テストしてボタンがうまく表示されることを確認してください。個々の段落（段落）にボタンを追加する必要があります。そうしないとボタンは表示されません。 （エンターを打つと新しい段落が作成されます。）

ティーストーリー基本スキンの一つ Odyssey（オデッセイ）スキンでテストし、他のスキンでもうまく機能すると思います。

ボタンを追加するテキストを入力するのが面倒な場合は、定型句プログラムを使用して[ボタン1 |...]テキストを定型句として指定してすばやく呼び出すことができます。

ボタンジェネレータでカスタムボタンを作成する

オンライン無料 ボタンジェネレータ サイトを使用すると、カスタムボタンを簡単に作成できます。

ボタンスタイルを選択し、色などのスタイルを適切に変更してから、 Get Code（コードのインポート） ボタンをクリックするとボタンコードが生成されます。

提示されたCSSコードに置き換えることができます。 CSSクラス名は適切に変更してください。

他の方法で チャットGPTに希望のボタンスタイルを要求すると作成します。満足しない場合は、満足のいくボタンが生成されるまで要求できます。😄

参照

2のコメント

コメント

    • こんにちは、CSSが正しく適用されていないようです。

      1. CSSを正しく追加したかどうか、
      2.同じCSSクラスを使用したCSSコードがすでに追加されていないかどうか...

      などをチェックしてみてください。

      応答