WordPress の「カラム」ブロック、SWELLの「リッチカラム」ブロックは左右にカラムを分けられる便利なブロックです。ただし、中にコンテンツを配置した場合、左右の高さが揃わず若干見た目が悪くなります。

左右の高さが合わない例

上記サンプルでは、カラムブロックの中のコンテンツについてグループ化して背景色を設定していますが、普通に作ると左右の高さが異なって表示されてしまいます。

左右の高さを揃えたサンプル

左右の高さを揃えたサンプルです。多様なパターンでもそろえることが可能です。

グループの高さを揃えた例

キャプションボックスの高さを揃えた例

左右の高さを揃える方法

左右の高さを揃る方法です。多様なパターンでもそろえることが可能です。

グループで囲った部分で高さを揃える方法

サンプル

STEP

カラム内のブロックをグループ化する

左右のカラム両方とも同じ対応をします。

• カラム内のブロックを選択してグループ化する

• 必要に応じてグループに背景色をつける

• グループの「追加CSSクラス」に任意のクラス名（例：myColumn）を設定する

左右両方のカラムにて同じ設定（同じクラス名）を入れます。

STEP

CSSを設定する

WordPressの管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。

• CSSを設定する

設定するCSSは下記です。

.myColumn{
  height : 100%;
}

• 「height」に 100% を設定して高さを揃えます

「追加CSS」はサイト内で共有になるので、記事内の他ブロックや、他記事で同じように高さを揃えたい場合は、対象のブロックにクラス名を設定するだけで反映されます。

キャプションボックスで高さを揃える方法

SWELLでは「キャプションボックス」ブロックという使い勝手の良いボックス表現のブロックがあります。カラムブロックや立地カラムブロックとの相性がよく使えます。こちらで高さを揃える方法です。

サンプル

STEP

キャプションボックスのクラス名をつける

左右のカラム両方とも同じ対応をします。

• キャプションボックスの「追加CSSクラス」に任意のクラス名（例：myColumnCaptionBox）を設定する

STEP

CSSを設定する

WordPressの管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。

• CSSを設定する

設定するCSSは下記です。

.myColumnCaptionBox {
  height : 100%;
}

.myColumnCaptionBox .cap_box_content{
  height : 100%;
}

• キャプションボックス全体およびコンテンツ部分を 100% に設定します

「追加CSS」はサイト内で共有になるので、記事内の他ブロックや、他記事で同じように高さを揃えたい場合は、対象のブロックにクラス名を設定するだけで反映されます。

まとめ：カラムブロック・リッチカラムで左右の高さを揃える方法

WordPress の「カラム」ブロック、SWELLの「リッチカラム」ブロックは左右にカラムを分けられる便利なブロックです。ただし、中にコンテンツを配置した場合、左右の高さが揃わず若干見た目が悪くなります。

本記事では、カラム・リッチカラムブロックで高さを揃える方法を解説しました。

おしゃれなサイトを作るコツを知りたい方は以下の記事を参照してください。

あわせて読みたい

【デモサイト・サンプルあり】SWELL でおしゃれなサイトを作る方法！ SWELL はデザインセンス抜群のテーマです。ひとつ手を加えることでさらに一段上のおしゃれデザインのサイトを作れます。本記事ではSWELLで作ったサンプルとおしゃれサイトを作るポイントを解説します。

素敵なサイトを作ってくださいね！

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

新規記事を作成するときに毎回「見出し」や「画像」、「必ず設定するブログパーツ」を打ち込んだりコピーするのはけっこう手間ですね。SWELLでは「カスタムパターン」という、記事テンプレートのような機能があります。

「カスタムパターン」を使うと記事の構成を最初にコピーできるので、とても楽！

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

記事テンプレート（カスタムパターン）とは

記事テンプレートとは、あらかじめ登録しておいたブロックのパターン（ブログパーツ）を記事作成時に呼び出し数クリックで記事本文にコピーできる機能です。

記事作成時や、決まった形のブロック集などでテンプレートとして利用すると便利です。

記事作成時に「パターン」から「「SWELL」カスタムパターン」を選びます。

表示されて（事前に登録しておいた）ブログパーツをクリックすることで、記事本文に張り付けることができます。

記事テンプレートの作り方

記事テンプレートはブログパーツで作ります。作り方は超簡単です。

STEP

ブログパーツで記事のテンプレート（ひな形）を作成する

• WordPress の管理画面から「ブログパーツ」→「新規作成」でブログパーツを作成する
• 記事テンプレートとなるようブロックを配置する

STEP

ブロックパターンに登録する

• 用途で「ブロックパターン」をチェックする
• 「公開」ボタンをクリックして公開する

完成です。登録されたので、記事作成画面で呼び出して使うことができます。

まとめ

SWELL には「ブロックパターン・カスタムパターン」という記事やよく使うブロックをあらかじめ登録しておき、記事作成時に簡単にコピーして使える良い機能があります。

ぜひ、活用して、ブログ運営を楽にしていきましょう。

おしゃれなサイトを作るコツを知りたい方は以下の記事を参照してください。

あわせて読みたい

【デモサイト・サンプルあり】SWELL でおしゃれなサイトを作る方法！ SWELL はデザインセンス抜群のテーマです。ひとつ手を加えることでさらに一段上のおしゃれデザインのサイトを作れます。本記事ではSWELLで作ったサンプルとおしゃれサイトを作るポイントを解説します。

素敵なサイトを作ってくださいね！

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

SWELL では、標準で「目次」を表示する機能があります。

とても便利な機能で、サイドバーにも目次を表示することができますが、今自分が表示している位置がハイライトで表示されているともっとわかりやすくて便利になりますね。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

目次の現在位置をハイライトしたサンプル

実際にハイライトしたサンプルです。

左側の本文で表示している見出しに合わせて、右側のサイドバーの目次の該当部分をハイライト表示しています。本サイトでも実装しているので動きを参考にしてください。

目次の現在位置をハイライトする方法

目次の現在位置をハイライトするには、JavaScript と CSS を利用します。

JavaScript は対象となる記事全ページに適用させる必要があり、いくつか実装方法がありますので、あわせて紹介します。

■ 実装するコード（JavaScript）

実装するJavaScript を紹介します。

実装する JavaScript はこちら

var varHtagElements = null;
var varHtagPosition = null;
var varSideBarItem = null;

window.addEventListener('load', function () {
    setTimeout(function(){fnAfterContents();}, 10);
});

function fnAfterContents() {
    // H2、H3 を全て取得する（位置を計算する）
    varHtagElements = document.querySelectorAll('h2, h3');
    var varHtagArray = Array.from(varHtagElements);
    var varHtagPosition = varHtagArray.map(item => item.getBoundingClientRect().top);
    var varHtagPositionWithScroll = varHtagPosition.map(top => Math.floor(top + window.scrollY));
	
    // サイドバーの目次のリストを取得する
    varSideBarItem = document.querySelectorAll('#sidebar .p-toc__link');
  
    if (varSideBarItem == null || varSideBarItem.length == 0) {
        // 目次が無ければ終了
        return;
    }

    // 個数を取得
    const countHtag = varHtagElements.length;
    const countSideBarItem = varSideBarItem.length;
    const iMaxLoop = countHtag > countSideBarItem ? countSideBarItem : countHtag;

    window.addEventListener('scroll', () => {
        // 計算する位置
        const currentPosition = window.scrollY + 300;

        for (let iCount = 0; iCount < iMaxLoop; iCount++) {
            // 現在位置の表示を消す
            varSideBarItem[iCount].classList.remove('currentTocPosition');
            if (iCount >= iMaxLoop - 1 ) {
                // 要素の最後は、次の要素が無いので範囲外のみ判定
                if (currentPosition >= varHtagPositionWithScroll[iCount]) {
                    varSideBarItem[iCount].classList.add('currentTocPosition');
                }
            } else {
                // 要素の途中は、範囲内かどうかを判定
                if (currentPosition >= varHtagPositionWithScroll[iCount] && currentPosition < varHtagPositionWithScroll[iCount + 1]) {
                    varSideBarItem[iCount].classList.add('currentTocPosition');
                } 
            }
        }
    });
}

ちょっと長いですね。軽くポイントを説明します。

「JavaScript の中身に興味はないので早く実装方法を知りたい」という方は飛ばして次の章に進んでください。

JavaScript のポイント

以降は実際に SWELL で実装する方法です。全記事に反映させるためには、いくつか方法がありますので、ご自身のよりわかりやすい方法で実装してください。（どの方法を使っても結果は一緒です）

■（方法．１）functions.php に記載する

functions.php に記載して各記事に強制的に JavaScript を追記する方法です。

対応が簡単ですが、誤った場合にリスクの大きい方法です。

WordPress の管理画面から、「外観」→「テーマファイルエディター」を選択する。

設定するコードは下記です。（JavaScript の前後に出力用の php を追記しています）

//------------------------------------------------------
// サイドバーの目次をハイライトする
//------------------------------------------------------
function highlight_toc() {
    if (is_single()) {
        ?>
<script>
var varHtagElements = null;
var varHtagPosition = null;
var varSideBarItem = null;

window.addEventListener('load', function () {
    setTimeout(function(){fnAfterContents();}, 10);
});

function fnAfterContents() {
    // H2、H3 を全て取得する（位置を計算する）
    varHtagElements = document.querySelectorAll('h2, h3');
    var varHtagArray = Array.from(varHtagElements);
    var varHtagPosition = varHtagArray.map(item => item.getBoundingClientRect().top);
    var varHtagPositionWithScroll = varHtagPosition.map(top => Math.floor(top + window.scrollY));
	
    // サイドバーの目次のリストを取得する
    varSideBarItem = document.querySelectorAll('#sidebar .p-toc__link');
  
    if (varSideBarItem == null || varSideBarItem.length == 0) {
        // 目次が無ければ終了
        return;
    }

    // 個数を取得
    const countHtag = varHtagElements.length;
    const countSideBarItem = varSideBarItem.length;
    const iMaxLoop = countHtag > countSideBarItem ? countSideBarItem : countHtag;

    window.addEventListener('scroll', () => {
        // 計算する位置
        const currentPosition = window.scrollY + 300;

        for (let iCount = 0; iCount < iMaxLoop; iCount++) {
            // 現在位置の表示を消す
            varSideBarItem[iCount].classList.remove('currentTocPosition');
            if (iCount >= iMaxLoop - 1 ) {
                // 要素の最後は、次の要素が無いので範囲外のみ判定
                if (currentPosition >= varHtagPositionWithScroll[iCount]) {
                    varSideBarItem[iCount].classList.add('currentTocPosition');
                }
            } else {
                // 要素の途中は、範囲内かどうかを判定
                if (currentPosition >= varHtagPositionWithScroll[iCount] && currentPosition < varHtagPositionWithScroll[iCount + 1]) {
                    varSideBarItem[iCount].classList.add('currentTocPosition');
                } 
            }
        }
    });
}
</script>
        <?php
    }
}
add_action('wp_footer', 'highlight_toc');

前述の JavaScript に対して赤字の部分が追加になっていますのでご注意ください。

■（方法．２）「bodyタグ終了直前に出力するコード」に記載する

SWELL は記事内の各所にコードを追記できるよう準備されていますので、「bodyタグ終了直前に出力するコード」に JavaScript を記載する方法もあります。

「入力エリアが小さくて見てわかりにくい」、「他にも追加したいときにごちゃごちゃになりやすい」的なデメリットもありますが、比較的安全かつ簡単な方法です。

WordPress の管理画面から「外観」→「カスタマイズ」→「高度な設定」を選択します。

設定するコードは下記です。

<script>
var varHtagElements = null;
var varHtagPosition = null;
var varSideBarItem = null;

window.addEventListener('load', function () {
    setTimeout(function(){fnAfterContents();}, 10);
});

function fnAfterContents() {
    // H2、H3 を全て取得する（位置を計算する）
    varHtagElements = document.querySelectorAll('h2, h3');
    var varHtagArray = Array.from(varHtagElements);
    var varHtagPosition = varHtagArray.map(item => item.getBoundingClientRect().top);
    var varHtagPositionWithScroll = varHtagPosition.map(top => Math.floor(top + window.scrollY));
	
    // サイドバーの目次のリストを取得する
    varSideBarItem = document.querySelectorAll('#sidebar .p-toc__link');
  
    if (varSideBarItem == null || varSideBarItem.length == 0) {
        // 目次が無ければ終了
        return;
    }

    // 個数を取得
    const countHtag = varHtagElements.length;
    const countSideBarItem = varSideBarItem.length;
    const iMaxLoop = countHtag > countSideBarItem ? countSideBarItem : countHtag;

    window.addEventListener('scroll', () => {
        // 計算する位置
        const currentPosition = window.scrollY + 300;

        for (let iCount = 0; iCount < iMaxLoop; iCount++) {
            // 現在位置の表示を消す
            varSideBarItem[iCount].classList.remove('currentTocPosition');
            if (iCount >= iMaxLoop - 1 ) {
                // 要素の最後は、次の要素が無いので範囲外のみ判定
                if (currentPosition >= varHtagPositionWithScroll[iCount]) {
                    varSideBarItem[iCount].classList.add('currentTocPosition');
                }
            } else {
                // 要素の途中は、範囲内かどうかを判定
                if (currentPosition >= varHtagPositionWithScroll[iCount] && currentPosition < varHtagPositionWithScroll[iCount + 1]) {
                    varSideBarItem[iCount].classList.add('currentTocPosition');
                } 
            }
        }
    });
}
</script>

前述の JavaScript に対して赤字の部分が追加になっていますのでご注意ください。

■（方法．３）ブログパーツを使って各記事に張り付ける

SWELL には「ブログパーツ」というコンテンツを各記事で共有できる便利な機能があります。ブログパーツを使うのも一つの方法です。

各記事に張り付ける手間がかかりますが、最も安全で個人的には一番気に入っている方法です。（私見です）

Step.1. WordPress の管理画面から「ブログパーツ」を選択し、新規作成します。

設定するコードは下記です。（方法２と同じコードです）

<script>
var varHtagElements = null;
var varHtagPosition = null;
var varSideBarItem = null;

window.addEventListener('load', function () {
    setTimeout(function(){fnAfterContents();}, 10);
});

function fnAfterContents() {
    // H2、H3 を全て取得する（位置を計算する）
    varHtagElements = document.querySelectorAll('h2, h3');
    var varHtagArray = Array.from(varHtagElements);
    var varHtagPosition = varHtagArray.map(item => item.getBoundingClientRect().top);
    var varHtagPositionWithScroll = varHtagPosition.map(top => Math.floor(top + window.scrollY));
	
    // サイドバーの目次のリストを取得する
    varSideBarItem = document.querySelectorAll('#sidebar .p-toc__link');
  
    if (varSideBarItem == null || varSideBarItem.length == 0) {
        // 目次が無ければ終了
        return;
    }

    // 個数を取得
    const countHtag = varHtagElements.length;
    const countSideBarItem = varSideBarItem.length;
    const iMaxLoop = countHtag > countSideBarItem ? countSideBarItem : countHtag;

    window.addEventListener('scroll', () => {
        // 計算する位置
        const currentPosition = window.scrollY + 300;

        for (let iCount = 0; iCount < iMaxLoop; iCount++) {
            // 現在位置の表示を消す
            varSideBarItem[iCount].classList.remove('currentTocPosition');
            if (iCount >= iMaxLoop - 1 ) {
                // 要素の最後は、次の要素が無いので範囲外のみ判定
                if (currentPosition >= varHtagPositionWithScroll[iCount]) {
                    varSideBarItem[iCount].classList.add('currentTocPosition');
                }
            } else {
                // 要素の途中は、範囲内かどうかを判定
                if (currentPosition >= varHtagPositionWithScroll[iCount] && currentPosition < varHtagPositionWithScroll[iCount + 1]) {
                    varSideBarItem[iCount].classList.add('currentTocPosition');
                } 
            }
        }
    });
}
</script>

前述の JavaScript に対して赤字の部分が追加になっていますのでご注意ください。

Step.2. 各記事の最後にブログパーツのショートコードを張り付ける

ちょっと手間ですけど、各記事の最後（今後記事を作成する場合も毎回）、ブログパーツのショートコードを配置します。目次のハイライト機能を適用したい記事のみに貼り付けます。

方法１，２，３のどれを用いても結果は同じになりますので、使い勝手が良い方法で実装してください。

■ 実装するコード（CSS）

実際にハイライトする見た目（背景色など）をCSSで実装します。

CSSは、WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」に設定します。

設定するコードは下記です。（方法２と同じコードです）

.p-toc__link.currentTocPosition {
  background-color: #FADCE9 !important;
}

「#FADCE9」の部分が色を指定しており、この値では赤系（ピンク）になります。

主な色は以下の通り。

その他、色を参考にしたい方は以下の記事を参照してください。

どんどん！ブログノウハウ紹介ブロ…

ブログで使う【色】【カラーコード】サンプル・早見表・色見本・カラーピッカー | どんどん！ブログノウハ… WEBサイト・記事で使う色は重要ですね。WEBサイトで使える色には全 16,777,216 色あります。主に使う色などカラーコード集があると便利ですね。 本記事では、カラーコード…

背景全部ではなく、下線蛍光マーカーにしたい場合

上図のように、下線蛍光マーカーにしたい場合は、CSSを変えることで可能です、次のCSSにしてください。

.p-toc__link.currentTocPosition {
  background: linear-gradient(transparent 40%, #FADCE9 50%);
}

同じく、色を変えたい場合は、「#FADCE9」の値を変えます。

まとめ：目次の現在位置をハイライトする方法

SWELLで目次の現在位置をハイライトする方法を紹介しました。

現在位置の取得は JavaScript で行い、ハイライト表示はCSSで設定します。記事全部に適用する場合にはいくつかの方法があり、自分にとってより良い方法を利用すると良いでしょう。

ぜひ、すてきなサイトを作ってくださいね。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

SWELLには「SNSシェアボタン」という記事の下にSNSのボタンを表示する機能があります。

ボタンの上部に「＼よかったらシェアしてね！／」文字を表示しますが、消したい・変えたい場合の方法です。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

「＼よかったらシェアしてね！／」表示のサンプル

実際に表示するサンプルです。

標準の設定の場合、「＼よかったらシェアしてね！／」と表示します。

「＼よかったらシェアしてね！／」の消し方

「＼よかったらシェアしてね！／」の消し方です。

WordPressの管理画面から「外観」→「カスタマイズ」→「投稿・固定ページ」→「SNSシェアボタン」を選択します。

• 「「記事下部シェアボタン」の上に表示するメッセージ」から「よかったらシェアしてね！」文字列を削除し空白（完全削除）にする。

「＼よかったらシェアしてね！／」の表示が無くなります。

「＼よかったらシェアしてね！／」の変え方

文字を変更する場合は、同じく設定画面で文字を設定します。

• 「「記事下部シェアボタン」の上に表示するメッセージ」で文字を設定する

前後の「＼」と「／」を消す方法

前後の「＼」と「／」を消す場合はCSSを使って調整します。

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。

追加するCSSは下記です。

.c-shareBtns__message span.__text::before {
    display: none;
}

.c-shareBtns__message span.__text::after {
    display: none;
}

ポイントを解説します。

前後の「＼」と「／」を消すことができました。

ぜひ、すてきなサイトを作ってくださいね。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

ブログ・アフィリエイトでは記事に「広告」と表記するよう求められる時代になってきました。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

「広告」表示のサンプル

本記事では、SWELLの利用をターゲットとして、SWELL標準機能を利用したケース、CSS または、JavaScript で自作したケースを紹介します。

ポイント

SWELL 標準機能を利用したケース

SWELL 標準機能で表示したケースです。

※表示文字は変更できます。

ポイント

CSS または、JavaScript で自作したケース

JavaScript で自作したケースです。

登録日（日時）の下に「（記事内に広告を表示しています）」を表示しています。

※表示文字は変更できます。

SWELL標準機能を利用する

SWELLでは、ver. 2.7.9 以降、広告表記に対する機能が標準で実装されました。

WordPress の管理画面から「外観」→「カスタマイズ」→「投稿・固定ページ」→「PR表記」を選択します。

超簡単ですね。

また、カテゴリーページやタグページにも設定することが可能です。

カテゴリーやタグの編集ページ（WordPress の管理画面から「投稿」→「カテゴリー」または「タグ」）を選択します。

「PR表記をページに表示するかどうか」をONにすると、「PR表記（大）」で設定した文言を表示します。

CSS で自作する

CSS で自作するケースです。簡単なのがメリットです。

■ 登録日（日時）の右に表示するケース

CSS で実現します。WordPress の管理画面から「外観」→「テーマファイルエディター」を選択します。

設置するコードは以下です。

.p-articleMetas::after {
    content: "（ ページ内にてアフィリエイト広告を利用しています ）";
}

JavaScript で自作する

JavaScript で自作するケースです。表示する文言を変更できることと、タイトルの下に表示できることがメリットです。代わりに JavaScript を使いますので実装が面倒であるのがデメリットです。

■ 登録日（日時）の下に表示するケース

JavaScript で実現します。JavaScript は functions.php にてサイト記事に自動追記するように用意します。

WordPress の管理画面から「外観」→「テーマファイルエディター」を選択します。

設置するコードは以下です。

//------------------------------------------------------
// 広告明記
//------------------------------------------------------
function insert_custom_ad_below_h1() {
    if (is_single()) {
        ?>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                var h1Tag = document.querySelector('.p-articleMetas');

                if (h1Tag) {
                    // 新しい広告要素を作成
                    var adElement = document.createElement('div');
                    adElement.textContent = '（記事内に広告を表示しています）';

                    // スタイルを適用
                    adElement.style.fontSize = 'smaller';
                    // adElement.style.color = 'red';

                    // 直後に広告要素を挿入
                    h1Tag.insertAdjacentElement('afterend', adElement);
                }
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'insert_custom_ad_below_h1');

ポイントを解説します。

■ 登録日（日時）の右に表示するケース

ポイント

JavaScript で自作したケース

JavaScript で自作したケースです。

登録日（日時）の右に「（記事内広告あり）」を表示しています。

※表示文字は変更できます。

同じくWordPress の管理画面から「外観」→「テーマファイルエディター」の「functions.php」に設定します。

設置するコードは以下です。

//------------------------------------------------------
// 広告明記
//------------------------------------------------------
function insert_custom_ad_below_targettag() {
    if (is_single()) {
        ?>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                var targetTag = document.querySelector('.p-articleMetas__times');

                if (targetTag) {
                    // 新しい広告要素を作成
                    var adElement = document.createElement('div');
                    adElement.textContent = '（記事内広告あり）';

                    // スタイルを適用
                    // adElement.style.fontSize = 'smaller';
                    // adElement.style.color = 'red';

                    // 直後に広告要素を挿入
                    targetTag.insertAdjacentElement('afterend', adElement);
                }
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'insert_custom_ad_below_targettag');

ポイントを解説します。

■ タイトル直下に表示するケース

ポイント

JavaScript で自作したケース

JavaScript で自作したケースです。

登録日（日時）の右に「（記事内に広告を表示しています）」を表示しています。

※表示文字は変更できます。

同じくWordPress の管理画面から「外観」→「テーマファイルエディター」の「functions.php」に設定します。

設置するコードは以下です。

//------------------------------------------------------
// 広告明記
//------------------------------------------------------
function insert_custom_ad_below_targettag() {
    if (is_single()) {
        ?>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                var targetTag = document.querySelector('h1');

                if (targetTag) {
                    // H1タグの親要素を取得
                    var parentElement = targetTag.parentNode;

                    // 新しい広告要素を作成
                    var adElement = document.createElement('div');
                    adElement.textContent = '（記事内に広告を表示しています）';

                    // スタイルを適用
                    adElement.style.fontSize = 'smaller';
                    // adElement.style.color = 'red';

                    // 直後に広告要素を挿入
                    parentElement.insertAdjacentElement('afterend', adElement);
                }
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'insert_custom_ad_below_targettag');

 

ポイントを解説します。

まとめ：「広告（あり）」文字などを表示する方法

本記事では、タイトルタグ付近に「広告」などの文字を SWELL標準機能、CSS、JavaScript を用いて表示する方法を解説しました。主に表示する方法（場所）は３か所程度候補があります。

ぜひ、すてきなサイトを作ってくださいね。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

SWELL は標準の機能でテーブルの中に「〇（二重丸・丸）」や「△（三角）」を表示することができます。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

テーブル内にマークを付ける方法

SWELL のテーブルでは、設定でマークを表示することができます。

ツールバー右側の四角ボタンから表示されるポップアップで「アイコン」タブを選ぶことで、マークを選択することができます。

「アイコンを背景に表示する」のチェックを外すと、文字とは重ならず（先頭）に表示されます。

まとめ：テーブル内にマークを付ける方法

SWELLでテーブル内にマークを表示する方法は、ツールバーから操作して「アイコン」でマークを指定します。

いろいろな表現を工夫して、ぜひ、おしゃれなサイトを作ってくださいね。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

SWELL のリストブロック、キャプションボックスは、ブロックをそのまま使うとセンタリングができません。

ひと工夫することでセンタリングが可能です、

本記事の情報は SWELL（バージョン: 2.7.6.2）にて確認しています。以降のバージョンアップで動作が変わる可能性があります。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

センタリングしたサンプル

■「リストブロック」をセンタリング

実際にリストブロックをセンタリングします。

センタリングしています。

■「キャプションボックス」をセンタリング

実際にキャプションボックスをセンタリングします。

センタリングしています。

センタリングする方法

「リストブロック」も「キャプションボックス」もセンタリングする方法は同一です。

本記事では、「リストブロック」を例にして説明します。

STEP

リストブロック（またはキャプションボックス）をグループ化する

• リストブロック全体をグループ化する

STEP

横並びを指定する

• グループのプロパティで「横並び」を指定する

STEP

中央揃えする

• グループのプロパティで、「レイアウト」に「中央揃え」を指定する

完成です。

まとめ：リストブロック、キャプションボックスをセンタリングする方法

SWELL でリストブロック、キャプションボックスをセンタリングしたい場合は、ブロックをグループ化し、横並びしたうえで中央揃えすることで実現できます。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

SWELLでは標準機能で「目次」を表示する機能が入っています。使い方、表示の仕方を解説します。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

SWELL の目次サンプル

SWELLの目次です。

SWELLでは、記事本文の上側や、サイドバー（追尾スクロール部分）などに目次を表示できます。

本文記事への表示方法

SWELLの目次の表示・非表示、およびデザインの設定を行います。

WordPress の管理画面から「外観」→「カスタマイズ」→「投稿・固定ページ」→「目次」を選択します。

「投稿ページに目次を表示」のチェックの ON / OFF で記事本文中の表示を切り替えます。

SWELLでは目次のデザインや動作を設定で変えることが可能です。

主な設定項目

サイドバー（追尾スクロール部分）への表示方法

サイドバーの追尾スクロール部分に目次を設定すると、読者はいつでも目次を見ることができ便利な機能になります。

WordPress の管理画面から「外観」→「ウィジェット」→「追尾サイドバー」を選択します。

• 「追尾サイドバー」に「SWELL 目次」ウィジェットを配置する

まとめ：準の「目次」機能を利用する方法

SWELLでは標準機能で「目次」を表示する機能が入っています。

• 記事本文上部に表示できる
• サイドバーの追尾スクロールバーに表示できる

SWELLを使って素敵なサイトを作ってくださいね。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

WordPress のテーマ「SWELL」を使っている場合の記事の文字数の確認方法です。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

「SWELL」投稿記事の文字数を確認する方法

SWELLで投稿記事の文字数を確認する方法は簡単です。

• 左上の横線が三本のアイコンをクリックする
• 「アウトライン」を選択する
• 記事の「文字数」が表示される

「SWELL」投稿記事のタイトルの文字数を確認する方法

SWELLで投稿記事のタイトルの文字数を確認する方法は簡単です。

• 右上の「文字数」を確認する

ブログに最適な記事の文字数とタイトルの文字数

ブログに最適な記事の文字数

ブログ記事の文字数は○○○文字以上書きましょうと言われることもありますが、一体何文字が最適なのでしょうか？

結論はブログ記事の文字数に最適な文字数はありません。もう少し突き詰めると、記事の文字数は読者の目的を満たしており内容が簡潔に書かれている文字数が最適です。

文字数とSEOとの関係

文字数が多いということは記事内の情報量が多いということです。ユーザーの記事の滞在時間も増えるため、結果的にSEOには有利になります。ただし○○○文字以下は評価が低く、○○○文字以上は評価が高くなるという定量的な判断はありません。

文字数を多くすることは、すなわち、読者に対する記事の価値を高まることが必要です。適切な情報をもとに、文字数が多くなれば、SEOには結果的により有利になります。

ブログに最適なタイトルの文字数

ブログ記事のタイトルの文字数は何文字が最適でしょうか？

タイトル文字数には多くの議論があり、必ずしも正解を特定できるものではありませんが、おおむね「３２～４０文字程度が最適」と言われています。

「３２～４０文字が最適」の考え方

Google などで検索した場合に表示される一覧のタイトル文字数には上限があり、デバイスや検索サイトなどで差異はあるもののおおむね３２文字～４０文字が上限になります。それ以上の文字は切り取られるか、タイトルが自動で編集されます。

長すぎるとそれ以上の文字は切り取られるか、タイトルが自動で編集されます。短すぎるとキーワードなどが足りずSEO効果が薄れます。タイトルは32～40文字でキーワードを適切にまとめ、かつユーザーの目に留まる表現にすることが望ましいと言われています。

まとめ：投稿記事・タイトルの文字数を確認する方法

SWELLで投稿記事の文字数や、タイトルの文字数は投稿画面上で確認できます。

• 記事の文字数は左上の横線３本のアイコンから確認する
• タイトルの文字数は右上の「文字数」表示で確認する

SWELL を使って素敵なサイトをデザインしてくださいね。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

WordPress のテーマ「SWELL」には、独自デザインのボタン「SWELL ボタン」があります。さらにユーザーの設定によって見た目（デザイン）を変えることができるので、使い方と変更方法を解説します。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

「SWELL ボタン」のサンプル

「SWELL ボタン」を使ったデザインです。

基本的には「標準」のノーマルデザインのボタンになりますが、ボタンの設定をワンクリックで変えることができ、アウトライン（フラットデザイン）などのように簡単に見た目を変えることができます。

「SWELL ボタン」の使い方

「SWELL ボタン」の配置方法

「SWELL ボタン」はブロックを配置することで使えます。

配置後、ボタン上の表示文字列を「テキストを入力」表示個所から直接入力します。

同じく「リンク先：未設定」をクリックして、リンク先のURLを入力します。

「SWELL ボタン」の主な設定

SWELL ボタンは右側のブロックの設定項目から詳細を設定します。

主な設定項目です

※ボタンを光らせたい場合は「スタイル」で「キラっと」を指定します。

「SWELL ボタン」で「光る演出」をする場合

ボタンを光らせる（光る演出）をしたい場合は、「スタイル」で「キラっと」を指定します。

フラットデザイン

スマホの普及に伴い、インターネット上のデザインもフラット（ひらべったい・淡白な）デザインが主流となりました。

フラットデザインにする設定です。

• 「スタイル」で「アウトライン」を設定する

• 「カラー設定」でボタンの色を設定する

まとめ：SWELLボタンの配置と見た目を編集する方法

WordPress のテーマ「SWELL」には、独自デザインのボタン「SWELL ボタン」を使うことで、ボタン風のリンクを表現することができます。

SWELL を使って素敵なサイトをデザインしてくださいね。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記