ブログスポットボタンの作成：短縮コードで1秒でデザインボタンを入れる方法

ブログスポット（ブロガー）で投稿を書くたびに強調したいリンクボタンを作成するには、HTMLモードに入り、複雑なタグでボタンを追加する必要があります。この方法は面倒で時間がかかりますが、簡単にするとコードがねじれてレイアウトが壊れる可能性があります。

投稿編集画面で [ボタン1|テキスト|URL]同様に簡単な短縮コードのみ入力すると、自動的にスタイリッシュなデザインボタンに変換してくれる軽いスクリプトをご紹介します。サイトの速度を落とさずにブログの書き込み効率をアップグレードできます。

ブログスポットボタンの作成：短縮コードで1秒でデザインボタンを入れる方法

組織は制裁が激しくなり、独自の広告を導入した AdSense アンカー広告やフロント広告などが禁止されています AdSense 収益の低下を経験しているユーザーが増えています。このため WordPress私はブログスポットに目を向けるユーザーが増えています。

参考までに WordPressに移動する場合は、無料のティーストーリー移行プラグインを使用してティーストーリーの投稿を WordPressに移すことが可能です。

ティーストーリーマイグレーションプラグインを使用して簡単にティーストーリーを WordPressに移転する

ブログスポットにボタンを追加するには、HTMLモードに変換してHTMLタグを入力する必要があります。

ボタンを追加することが多い場合は、これまで面倒ではありません。初心者の場合は、誤ってHTMLコードを入力してサイトのレイアウトを変にすることがあります。

この記事では、 [ボタン1|詳細情報|URL]と同じ形式でボタンを追加する方法を紹介します。

最後に、次の2色のボタンと2つのオープン方式（現在のウィンドウと新しいウィンドウ）で合計4つのボタンを実装するようにしました。コードを拡張して色を追加することができ、ボタンスタイルはCSSコードを変更して目的のデザインに置き換えることもできます。

ボタンスタイルはCSSに変更できます。

参考までに WordPressの場合、ブロックエディタで簡単にボタンを追加することができ、以下のようなボタンもパターンを作成し、素早く簡単に追加できます。

💡WordPress ボタンを作る

💡グラデーションボタンの作成

HTML編集画面に移動する

ブログスポット（Googleブロガー）アカウントにログインし、左側のテーマメニューをクリックします。以下の画面が表示された場合 カスタマイズ 横の下矢印アイコンをクリックします。

下のような画像が表示された場合 HTMLの編集を選択します。

これでHTML編集画面が表示されます。

CSSコードを追加する

HTML編集画面が表示されたら、Ctrl + Fを押して "「と入力して検索し、」「行のすぐ上に CSS コードをコピーして貼り付けます。

<style>
/* [버튼 스타일 시작] */
/* 공통 스타일 */
.myButton1,
.myButton2 {
	display: block;
	width: 100%;
	max-width: 400px;
	margin: 15px auto;
	padding: 18px 0;
	
	font-size: 18px;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
	text-decoration: none !important;
	color: #fff !important;
	
	border: none;
	border-radius: 50px;
	box-sizing: border-box;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
	
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

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

/* 레드 계열 (버튼1, 버튼3) */
.myButton1 {
	background-color: #ff8a80;
	background-image: linear-gradient(135deg, #ff8a80 0%, #e57373 100%);
}
.myButton1:hover {
	background-color: #e57373;
	box-shadow: 0 8px 20px rgba(229, 115, 115, 0.4);
	transform: translateY(-3px);
}

/* 블루 계열 (버튼2, 버튼4) */
.myButton2 {
	background-color: #68bfe6;
	background-image: linear-gradient(135deg, #68bfe6 0%, #4fa3cf 100%);
}
.myButton2:hover {
	background-color: #4fa3cf;
	box-shadow: 0 8px 20px rgba(79, 163, 207, 0.4);
	transform: translateY(-3px);
}
/* [버튼 스타일 끝] */
</style>

ボタンスタイルには赤と青の色、2色があります。上記のコードを好きなスタイルに自由に変更できます。チャットGPTやジェミナイ、クロードなどの生成型AIに上記のコードを入れて、お好みのスタイルで修正をリクエストできるようになります。

矢印の付いたボタンスタイルが必要な場合は、上記のコードの代わりに次のコードを使用できます。

<style>
/* [업그레이드된 버튼 스타일 시작] */

/* 1. 공통 구조 및 폰트 */
.myButton1,
.myButton2 {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
    
    width: 100%;
    max-width: 420px;
    margin: 20px auto;
    padding: 18px 20px;
    
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.2;
    text-decoration: none !important;
    color: #fff !important;
    
    border: none;
    border-radius: 50px;
    box-sizing: border-box;
    
    /* 입체감과 부드러운 그림자 */
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 0.2);
    
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}

/* 2. 화살표 아이콘 수정 (여기가 핵심 변경 사항입니다) */
.myButton1::after,
.myButton2::after {
    content: '\2192'; /* HTML 엔티티 대신 유니코드 사용 (화살표 모양) */
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 1.2em;
    margin-left: 5px; /* 화살표와 텍스트 사이 간격 미세 조정 */
    transition: transform 0.3s ease;
}

/* 호버 시 화살표 이동 효과 */
.myButton1:hover::after,
.myButton2:hover::after {
    transform: translateX(5px);
}

/* 3. 모바일 최적화 */
@media (max-width: 768px) {
    .myButton1,
    .myButton2 {
        font-size: 17px;
        padding: 16px 0;
        width: 92%;
    }
}

/* 4. 색상 테마 */

/* 레드 계열 */
.myButton1 {
    background: linear-gradient(135deg, #FF6B6B 0%, #EE5253 100%);
    box-shadow: 0 10px 20px rgba(238, 82, 83, 0.3), inset 0 1px 0 rgba(255,255,255,0.3);
}
.myButton1:hover {
    background: linear-gradient(135deg, #EE5253 0%, #FF6B6B 100%);
    box-shadow: 0 15px 25px rgba(238, 82, 83, 0.4), inset 0 1px 0 rgba(255,255,255,0.3);
    transform: translateY(-2px);
}

/* 블루 계열 */
.myButton2 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    box-shadow: 0 10px 20px rgba(79, 172, 254, 0.3), inset 0 1px 0 rgba(255,255,255,0.3);
}
.myButton2:hover {
    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
    box-shadow: 0 15px 25px rgba(79, 172, 254, 0.4), inset 0 1px 0 rgba(255,255,255,0.3);
    transform: translateY(-2px);
}
/* [업그레이드된 버튼 스타일 끝] */
</style>

JSコードを追加する

Ctrl + Fキーを押して "「と入力してエンターを打ちます。が検索されます。」「すぐ上に下のJavaScriptコードをコピーして入力します。

<script type='text/javascript'>
//<![CDATA[
(function() {
    'use strict';

    // [안전 장치 1] 전체 로직을 try-catch로 감싸서 에러가 발생해도 사이트 전체가 멈추지 않게 함
    try {
        
        /**
         * URL 정제 함수
         */
        function sanitizeUrl(rawUrl) {
            // 입력값이 없으면 빈 문자열 반환 (방어적 코딩)
            if (!rawUrl) return '';
            
            var anchorMatch = rawUrl.match(/href=["']([^"']+)["']/);
            if (anchorMatch) return anchorMatch[1];
            return rawUrl.replace(/<[^>]*>/g, '').replace(/\]$/, '').trim();
        }

        /**
         * 메인 변환 함수
         */
        function processCustomButtons() {
            // [안전 장치 2] DOM 요소가 로드되지 않았거나 없을 경우 안전하게 종료
            var container = document.querySelector('.post-body');
            
            // post-body를 못 찾으면 body를 찾고, 그것도 없으면(극히 드문 경우) 중단
            if (!container) {
                container = document.body;
                if (!container) return; 
            }

            var paragraphs = container.getElementsByTagName('p');
            if (!paragraphs || paragraphs.length === 0) return;

            // 정규식: 버튼 1~4 감지
            var regex = /\[(버튼[1-4])\|([^|]+)\|([^\]]+)\]/g;

            for (var i = 0, len = paragraphs.length; i < len; i++) {
                var p = paragraphs[i];
                
                // 요소가 null인지 확인
                if (!p) continue;

                // 최적화: '[' 없으면 패스
                if (p.textContent.indexOf('[') === -1) continue;

                var content = p.innerHTML;
                
                if (regex.test(content)) {
                    var newContent = content.replace(regex, function(match, btnType, text, urlPart) {
                        // 내부에서 에러 발생 시 원래 텍스트 반환하여 깨짐 방지
                        try {
                            var cleanUrl = sanitizeUrl(urlPart);
                            var isRed = (btnType === '버튼1' || btnType === '버튼3');
                            var className = isRed ? 'myButton1' : 'myButton2';
                            var isNewWindow = (btnType === '버튼3' || btnType === '버튼4');
                            
                            var targetAttr = isNewWindow ? ' target="_blank"' : ' target="_self"';
                            var relAttr = isNewWindow ? ' rel="noopener noreferrer nofollow"' : '';
                            
                            return '<a class="' + className + '" href="' + cleanUrl + '"' + targetAttr + relAttr + '>' + text + '</a>';
                        } catch (innerError) {
                            return match; // 에러 시 변환하지 않고 원본 유지
                        }
                    });

                    if (content !== newContent) {
                        p.innerHTML = newContent;
                    }
                }
            }
        }

        // [실행] 즉시 실행하여 CLS 최소화
        processCustomButtons();

    } catch (e) {
        // [에러 로그] 개발자 도구 콘솔에만 표시하고 ユーザー에게는 영향 없음
        console.warn('Button Script Warning:', e);
    }
})();
//]]>
</script>

저장 アイコンをタップして変更を保存します。

この方式の長所と短所

利点(Pros)

速度(Performance) - 最上級
- Fail-Fast (クイックスキップ): すべての段落を精密検査せず、角括弧（[）のない段落は0.001秒で無視して進みます。投稿がいくら長くてもブラウザに負荷をかけません。
- 範囲制限： ブログ全体ではなく、本文領域（.post-body）だけを探索して演算量を最小化しました。
安全性と衝突防止（安全） - 非常に優れています
- 孤立した環境（try-catch）： このスクリプト内でエラーが発生しても、ブログの 広告（AdSense）、統計、メニューなどの他の機能は決して停止しません。
- 防御的コーディング： HTML構造がロードされていないか、異常な状況でもエラーを発生させることなく静かに終了するように設計されています。
SEO(検索エンジン最適化)
- スマートなリンク処理：
  - 内部リンク（ボタン1、2）： rel属性を削除して、「リンクジュース」が私のブログの中でうまく循環するのを助けます。
  - 外部リンク（ボタン3、4）： rel="noopener noreferrer nofollow" を自動的に付与し、外部サイトへの信頼度の漏洩を防ぎ、セキュリティを強化します。
- セマンティックタグ： spanやdivではなく、正しいアンカータグ（）を生成して、Googleボットがリンクであることを明確に認識します。
使いやすさ(Usability)
- 簡単な作成： 複雑なHTML/CSSを知らなくても [ボタン1|テキスト|URL]入力するだけです。
- 一括編集： デザインを変更したい場合は、CSSコードのみを変更すると、過去に書いた何百もの文章のボタンが一度に変わります。

欠点と制限（Cons＆Limitations）

CLS(累積レイアウト移動) - 最小化したが、0ではない
- 原因： テキストの1行（高さ約24px）がスクリプトによってボタン（高さ約60〜80px）に変わる過程で必然的に行間隔が広がります。
- 補完： コードを「即時実行」することで、瞬く間に変換されるようにしたので、肉眼ではほとんど感じられませんが、機械的には微細なCLSを測定できます。（これはJavaScriptの置換方式の生まれつき限界です。）
JavaScriptの依存関係（JS Dependency）
- 訪問者がブラウザ設定で JavaScriptを強制的にオフにした場合、ボタンに変換されずに[ボタン1 |… ] テキストがそのまま表示されます。（ただし、現代のWeb環境でJSをオフにして書き込むユーザーは1％未満です。JSをオフにすると、ほとんどすべてのサイトが正しく表示されません。）
エディタのプレビュー不可
- ブログスポットの書き込み画面（エディタ）では、テキストだけで表示されます。ボタンが正しく適用されていることを確認するには、「プレビュー」ボタンを押す必要があります。

使用方法

次の短縮コード形式でボタンを入力できます。

[ボタン1|テキスト|URL] ：赤、現在のウィンドウを移動（内部リンクを推奨）
[ボタン2|テキスト|URL] ：ブルー、現在のウィンドウを移動（内部リンクを推奨）
[ボタン3|テキスト|URL] ：赤、新しいウィンドウを移動（外部リンクを推奨）
[ボタン4|テキスト|URL] ：青、新しいウィンドウを移動（外部リンクを推奨）

ボタンコード	カラー(カラー)	オープン方式(ターゲット)	SEO属性(Rel)	推奨用途
[ボタン1]	🔴赤	現在のウィンドウ（_self）	(なし)	私のブログの他の投稿をリンクする
[ボタン2]	🔵ブルー	現在のウィンドウ（_self）	(なし)	私のブログの他の投稿をリンクする
[ボタン3]	🔴赤	新しいウィンドウ(_blank)	noopener nofollow	外部サイトリンク（ダウンロードなど）
[ボタン4]	🔵ブルー	新しいウィンドウ(_blank)	noopener nofollow	外部サイトリンク（参照など）

このブログスポットの投稿で例ボタンを確認できます。

問題がある場合、またはより良い方法がある場合はお知らせください。その後、この記事を更新する必要がある場合は、更新します。

参照

2のコメント

コメントを残す応答キャンセル

ブログボーイ

2026年02月10日午後1時05分

ブログスポットでボタンを簡単に追加する方法が本当に魅力的ですね！ HTMLコードを直接入力する手間をかけずに短縮コードでボタンを作ることができるということは、初心者に大きな助けになりそうです。特に、デザインをCSSに変更できるという点が創造的なブログに多くの可能性を開いてくれると思います。

ボタンの色やスタイルを変更するときは、特定の色の組み合わせやデザイントレンドにおすすめがありますか？
返信
コーディング愚か者

2026年02月07日午後11時06分

本当に便利な情報ですね！ブログスポットボタンの作り方、こんなに手軽に出来るなんて本当に便利だと思います。
返信

ブログスポットボタンの作成：短縮コードで1秒でデザインボタンを入れる方法

HTML編集画面に移動する

CSSコードを追加する

JSコードを追加する

この方式の長所と短所

利点(Pros)

欠点と制限（Cons＆Limitations）

使用方法

参照

ワードクラッカー

2のコメント

コメントを残す 応答キャンセル

コメントを残す応答キャンセル