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

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

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

2025年11月4日アップデート： 書き込み画面でリンクURLにリンクがあると、既存のコードが正しく機能しませんでした。その部分を修正したコードに置き換えました。

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

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

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

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

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

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

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

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

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

<script>
(function() {
	'use strict';
	
	function processCustomButtons() {
		const paragraphs = document.querySelectorAll('p');
		const button1Regex = /\[버튼1\|([^\|]+)\|([^\]]+(?:\][^[]*)?)\]?/;
		const button2Regex = /\[버튼2\|([^\|]+)\|([^\]]+(?:\][^[]*)?)\]?/;
		
		paragraphs.forEach(function(paragraph) {
			let content = paragraph.innerHTML;
			let matches;
			
			if (matches = content.match(button1Regex)) {
				const linkText = matches[1];
				let urlPart = matches[2];
				
				// URL 부분에서 <a> 태그가 있으면 제거하고 실제 URL만 추출
				const urlMatch = urlPart.match(/<a[^>]+href=["']([^"']+)["'][^>]*>.*?<\/a>/);
				let url = urlMatch ? urlMatch[1] : urlPart.trim();
				
				// URL 끝에 ]가 포함되어 있으면 제거
				url = url.replace(/\]$/, '');
				
				paragraph.innerHTML = '<a class="myButton1" title="바로가기" href="' + url + '">' + linkText + '</a>';
			} else if (matches = content.match(button2Regex)) {
				const linkText = matches[1];
				let urlPart = matches[2];
				
				// URL 부분에서 <a> 태그가 있으면 제거하고 실제 URL만 추출
				const urlMatch = urlPart.match(/<a[^>]+href=["']([^"']+)["'][^>]*>.*?<\/a>/);
				let url = urlMatch ? urlMatch[1] : urlPart.trim();
				
				// URL 끝에 ]가 포함되어 있으면 제거
				url = url.replace(/\]$/, '');
				
				paragraph.innerHTML = '<a class="myButton2" title="바로가기" href="' + url + '">' + linkText + '</a>';
			}
		});
	}
	
	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', processCustomButtons);
	} else {
		processCustomButtons();
	}
})();
</script>

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

👉既存のコードの場合は、書き込み画面でリンクURLにリンクがあるとうまくいきませんでした。その部分を修正し、他のJSとの競合を最小限に抑えるようにコードを改善しました。編集画面でリンクURLにリンクがあり、上記のコードでもエラーが発生した場合、リンクを解除すると問題が解決します。

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

図を見ると、次のように追加できます。 （下図では...部分のJSコードは既存のコードです。上記に更新されたJavaScriptコードを入力してください。）

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を実施すると役に立ちます。ボタンのスタイルを変更したい場合は、下の「ボタンジェネレータでカスタムボタンを作成する」セクションを参照してください。

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

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

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

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

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

• 無料定型句プログラムBeefText

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

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

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

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

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

ティーストーリーブログをリサイクルして WordPressから AdSense 承認を受ける

ティーストーリーは独自の広告を導入し、広告収入の半分以上をカカオから取得します。私は独自の広告の導入以来、あなたの記事から広告を削除しました。

ティーストーリー WordPress 移動するユーザーもいます。

• ティーストーリーバックアップファイルを利用して WordPressに移動する（更新）

ティーストーリーブログ投稿 WordPressに移動してプラグインを使用してチャットGPTに投稿を修正してリサイクルすることも可能です。

• ティーストーリーブログをリサイクルした WordPress AdSense 承認のレビュー

最後に、

以上で、ティーストーリーからボタンを簡単に追加できる方法を見てきました。

この記事を書いた後、ティーストーリーで AdSense 広告に関しては制限がより厳しくなった。今 AdSense アンカー広告とモバイルフロント広告を表示できないようにしました。

また、タイトル付近に広告を表示してティストリー自体の広告を妨害することも制裁対象となり、ほかにスキンを編集して書き込み日、投稿者名などを削除する場合でも、サービス妨害行為で30日ログイン制限措置を受けることができます。

参照

• Webスクレイピングプラグインでのティーストーリーから WordPressに移転する
• Google 検索アルゴリズム ドキュメントの漏洩とキーコンテンツ (+ 漏洩したドキュメント URL)
• WordPress Braveプラグイン：ポップアップ閉じるボタン遅延ロードとカウントダウンタイマーの表示