ブログのタグ一覧を、もう少しデザインとして楽しめないだろうか。
そんな思いから、大きさの異なるタグを、四角い枠の外側から内側へ詰めていくタグクラウドを作成しました。
投稿数の多いタグほど文字が大きくなり、配置する順序はランダムです。また、最も小さいタグは横表示、それ以外は縦表示にすることで、文字が組み合わさったような見た目になります。
横幅は設置場所に合わせ、高さは全タグが収まるように自動で調整します。記事本文やサイドバーなど、幅の異なる場所でも同じショートコードで表示できます。
この記事では、PHPとCSSを追加し、ショートコードを置くまでの手順を、初めて使う方にも分かるように紹介します。コードには、処理の役割が分かる説明コメントも入れています。
当ブログでは、WordPressテーマ「SWELL」の子テーマで動作を確認しています。ただし、他の環境での動作を保証するものではありません。
このタグクラウドでできること
タグクラウドとは、ブログに登録したタグを、文字の集まりとして表示するものです。今回のタグクラウドもタグをクリックすると、そのタグが付いた記事の一覧へ移動できます。
今回のコードには、次の特徴があります。
| 機能 | 表示・動作 |
|---|---|
| 四角形の枠内へ配置 | 横幅と高さを決めた枠の内側へ、全タグを配置します |
| 外側から内側へ詰める | 枠の外周に近い場所を優先して配置していきます |
| ランダム配置 | 大きなタグだけを先に置かず、大小を混ぜて配置します |
| 投稿数に応じた文字サイズ | 多くの記事に使われているタグほど大きくします |
| 縦表示と横表示 | 初期設定では最小文字のタグだけ横表示にします |
| タグ数の上限なし | 投稿に使われているタグを、取得数の制限なしで表示します |
| 設置場所の幅に対応 | 横幅を実測し、高さを自動調整します |
| 色の変更 | 全体の文字色と、タグごとの色を指定できます |
| 表示 | 読み込みごとに文字の配置が変わります |
「四角形」は正方形に固定するという意味ではありません。 サイドバーなら縦長に、幅の広い場所なら横長になるなど、設置場所とタグの量によって長方形になります。
また、文字やタグの長さが異なるため、細かなすき間まで完全になくなるわけではありません。四角い表示枠の中へ収めながら、できるだけ詰めて並べる仕組みです。その結果、中央に空白部分ができます。
設置前に確認すること
タグクラウドを設置する前に、PHP・CSS・ショートコードの役割を確認します。また、安全に作業を進めるため、子テーマとバックアップを用意しておきます。
PHP・CSS・ショートコードの役割
設置するものは3つです。
| 種類 | 役割 | 設置場所 |
|---|---|---|
| PHP（機能） | タグの取得と表示機能の登録。配置用のJavaScriptも含みます | 使用中の子テーマのfunctions.php |
| CSS（機能） | 文字色や縦表示、表示枠などの見た目を設定します | 「追加CSS」など |
| ショートコード（表示） | 登録した機能を、その場所へ呼び出します | 記事本文・固定ページ・対応するウィジェット |
PHPやCSSを記事本文へ貼り付けるだけでは、タグクラウドは動きません。機能を登録する場所と、表示する場所を分けて設置していきます。
配置を担当するJavaScriptは、下のPHPコードに含まれています。JavaScript用の別ファイルを作る必要はありません。
子テーマとバックアップを用意する
PHPコードは、現在使っている子テーマの functions.php に追加します。SWELLの場合は、SWELLの子テーマを有効にした状態で作業してください。子テーマを使うと、親テーマのファイルを直接変更せずにカスタマイズできます。
作業前に 追加前のfunctions.php をコピーし、元に戻せるようにしておきましょう。CSSも同じように追加前の追加CSSの中にある全コードもコピーておきます。
PHPの貼り付け位置や記号を誤ると、サイトにエラーが出る場合があります。注意して作業してください。
なお、以下は子テーマのファイルを編集できるWordPress環境を前提としていて、SWELLで動作するように作成したコードです。それ以外のテーマでは保証できません。
手順1：子テーマのfunctions.phpにPHPを追加する
使用中の子テーマの functions.php を開きます。すでに書かれているコードは削除せず、追記できる位置に、以下のコード全体を追加します。
以下のコードは、すでにPHPが始まっているファイルへ追記するため、先頭の <?php を省いています。 コードの途中に出てくる ?> と <?php は、JavaScript を出力するために必要なので、そのまま残してください。
PHPコード全文
/*
* 四角形のタグクラウド：タグの取得・表示設定
* このコード全体を、使用中の子テーマの functions.php に追加します。
* PHPの開始タグは先頭では省略しています。途中の開始・終了タグは残してください。
*/
function custom_tag_cloud_compact_outer_shortcode( $atts ) {
// ショートコードで指定できる初期設定です。
// smallest・largest：文字サイズの基準、unit：その単位。
// vertical：1なら最小文字以外を縦表示、0ならすべて横表示。
$atts = shortcode_atts( array(
'smallest' => 10,
'largest' => 40,
'unit' => 'px',
'orderby' => 'slug',
'order' => 'ASC',
'vertical' => 1,
), $atts, 'custom_tag_cloud_compact_outer' );
// 入力値を確認し、文字サイズが0以下になることなどを防ぎます。
$smallest = is_numeric( $atts['smallest'] ) ? (float) $atts['smallest'] : 10;
$largest = is_numeric( $atts['largest'] ) ? (float) $atts['largest'] : 40;
$smallest = $smallest > 0 ? $smallest : 10;
$largest = max( $smallest, $largest );
$unit = in_array( $atts['unit'], array( 'px', 'em', 'rem' ), true ) ? $atts['unit'] : 'px';
$orderby = in_array( $atts['orderby'], array( 'slug', 'name', 'count', 'term_id' ), true )
? $atts['orderby'] : 'slug';
$order = strtoupper( $atts['order'] ) === 'DESC' ? 'DESC' : 'ASC';
// 投稿に使用されているタグを、件数制限なしで取得します。
// number = 0：取得数の制限なし。hide_empty = true：未使用のタグは除外。
$tags = get_tags( array(
'orderby' => $orderby,
'order' => $order,
'number' => 0,
'hide_empty' => true,
) );
if ( is_wp_error( $tags ) || empty( $tags ) ) {
return '';
}
// 各タグの投稿数を調べ、最少・最多の投稿数を求めます。
$counts = wp_list_pluck( $tags, 'count' );
$min = min( $counts );
$max = max( $counts );
$spread = max( 1, $max - $min );
$html = '<div class="custom-tag-cloud-compact-outer" data-vertical="'
. ( (string) $atts['vertical'] === '0' ? '0' : '1' ) . '">';
foreach ( $tags as $tag ) {
$url = get_tag_link( $tag->term_id );
if ( is_wp_error( $url ) ) {
continue;
}
// 投稿数が多いタグほど、基準の範囲内で大きくします。
$size = $smallest + ( $tag->count - $min ) * ( $largest - $smallest ) / $spread;
$size = round( $size, 4 );
// タグのスラッグを、個別の色指定に使えるCSSクラスへ変換します。
$class = 'custom-tag-' . sanitize_html_class( $tag->slug );
// 実際の文字サイズで判定。全タグ同サイズの場合はすべて横表示です。
if ( $size === round( $smallest, 4 ) ) {
$class .= ' is-smallest-horizontal';
}
// タグの名前・リンク先・文字サイズをHTMLとして出力します。
// data-base-sizeには、幅変更時に戻せるよう元の文字サイズを保存します。
$html .= '<a href="' . esc_url( $url ) . '" class="' . esc_attr( $class )
. '" data-base-size="' . esc_attr( $size . $unit )
. '" style="font-size:' . esc_attr( $size . $unit )
. ';" title="' . esc_attr( $tag->count ) . ' 件の投稿">'
. esc_html( $tag->name ) . '</a> ';
}
return $html . '</div>';
}
// この名前のショートコードで、タグクラウドを呼び出せるようにします。
add_shortcode( 'custom_tag_cloud_compact_outer', 'custom_tag_cloud_compact_outer_shortcode' );
/*
* ブラウザー側でタグの寸法を測り、四角い枠の中へ配置します。
* JavaScriptを別ファイルに分けず、ページ下部へ出力する構成です。
*/
function custom_tag_cloud_compact_outer_scripts() {
?>
<script>
(() => {
'use strict';
// 同じスクリプトが誤って二重出力されても初期化は一度だけ。
if (window.customCompactOuterCloudLoaded) return;
window.customCompactOuterCloudLoaded = true;
// タグごとの乱数はページ内で保持し、幅変更で順序が変わるのを防ぎます。
const randomOrder = new WeakMap();
// contains：一方の矩形がもう一方に含まれるかを判定します。
// intersects：2つの矩形が重なるかを判定します。
const contains = (a, b) => b.x >= a.x && b.y >= a.y &&
b.x + b.w <= a.x + a.w && b.y + b.h <= a.y + a.h;
const intersects = (a, b) => a.x < b.x + b.w && a.x + a.w > b.x &&
a.y < b.y + b.h && a.y + a.h > b.y;
// 使用済み領域をすべての空き領域から差し引きます。
function subtract(free, used) {
const next = [];
for (const r of free) {
if (!intersects(r, used)) {
next.push(r);
continue;
}
if (used.x > r.x) next.push({x:r.x, y:r.y, w:used.x-r.x, h:r.h});
if (used.x+used.w < r.x+r.w) next.push({x:used.x+used.w, y:r.y,
w:r.x+r.w-used.x-used.w, h:r.h});
if (used.y > r.y) next.push({x:r.x, y:r.y, w:r.w, h:used.y-r.y});
if (used.y+used.h < r.y+r.h) next.push({x:r.x, y:used.y+used.h,
w:r.w, h:r.y+r.h-used.y-used.h});
}
return next.filter((r, i) => !next.some((s, j) =>
i !== j && contains(s, r) && (!contains(r, s) || j < i)));
}
// 中心を囲む相似の矩形の層を、外側から順番に埋めます。
function pack(items, width, height) {
let free = [{x:0, y:0, w:width, h:height}];
const positions = [];
for (const item of items) {
let best = null;
for (const r of free) {
if (item.w > r.w || item.h > r.h) continue;
const corners = [
[r.x, r.y], [r.x+r.w-item.w, r.y],
[r.x, r.y+r.h-item.h], [r.x+r.w-item.w, r.y+r.h-item.h]
];
for (const [x, y] of corners) {
if (x < 0 || y < 0 || x+item.w > width || y+item.h > height) continue;
// 縦横の距離をそれぞれの寸法で正規化します。
// 縦長・横長の枠でも余白が中央線状に偏るのを抑えます。
const nx = Math.abs((x+item.w/2-width/2)/(width/2));
const ny = Math.abs((y+item.h/2-height/2)/(height/2));
const score = Math.max(nx, ny);
const diagonal = nx*nx + ny*ny;
// 外側の層を優先。同じ層では四隅に近い場所から詰めます。
if (!best || score > best.score ||
(score === best.score && (diagonal > best.diagonal ||
(diagonal === best.diagonal &&
(y < best.y || (y === best.y && x < best.x)))))) {
best = {x, y, w:item.w, h:item.h, score, diagonal, tag:item.tag};
}
}
}
if (!best) return null;
positions.push(best);
free = subtract(free, best);
}
return positions;
}
// 全タグが入る四角い枠の高さを探します。
// 高さを変更した場合は、枠全体の配置を最初から計算し直します。
function fitRectangle(items, width) {
const area = items.reduce((sum, r) => sum+r.w*r.h, 0);
const tallest = items.reduce((max, r) => Math.max(max, r.h), 0);
const stackHeight = items.reduce((sum, r) => sum+r.h, 0) + 1;
let height = Math.max(tallest, area/width);
let lower = height;
let positions = pack(items, width, height);
while (!positions && height < stackHeight) {
lower = height;
// 枠全体の高さを決め直し、全タグを最初から配置し直します。
height = Math.min(stackHeight, Math.max(height*1.12, height+1));
positions = pack(items, width, height);
}
if (!positions) return null;
// 成功した矩形を保持しつつ、余分な高さを少しずつ減らします。
// 配置済みのタグを個別に移動したり、枠の下だけを継ぎ足したりしません。
for (let attempt=0; attempt<6 && height-lower>1; attempt++) {
const middle = (height+lower)/2;
const trial = pack(items, width, middle);
if (trial) {
height = middle;
positions = trial;
} else {
lower = middle;
}
}
// 全タグの座標が確定した矩形の内側にあることを、最後に確認します。
const valid = positions.every(p => Number.isFinite(p.x) && Number.isFinite(p.y) &&
p.x >= 0 && p.y >= 0 && p.x+p.w <= width && p.y+p.h <= height);
return valid ? {positions, height} : null;
}
// 表示先の横幅に合わせて、計測・配置・高さの反映を行います。
function layout(cloud) {
const outerWidth = cloud.clientWidth;
// 非表示のタブ等は、表示されて幅が決まった時に配置します。
if (outerWidth <= 0) return;
const tags = Array.from(cloud.children).filter(el => el.tagName === 'A');
if (!tags.length) return;
// 枠の内側には少量の余白、タグ同士には小さな間隔を確保します。
const padding = Math.min(4, outerWidth / 8);
const width = outerWidth - padding * 2;
const gap = Math.min(2, width / 8);
const available = width - gap;
cloud.classList.remove('is-packed');
cloud.style.height = '';
// DOMへの書き込みと計測を分けて、不要な再計算を減らします。
tags.forEach(tag => {
tag.style.fontSize = tag.dataset.baseSize;
tag.style.left = '';
tag.style.top = '';
});
// offsetWidth・offsetHeightで、実際のレイアウト上の寸法を測ります。
// 端数によるはみ出しを避けるため、計測値に1px分の余裕を持たせます。
const initial = tags.map(tag => ({tag, width:tag.offsetWidth+1,
font:parseFloat(getComputedStyle(tag).fontSize)}));
initial.forEach(({tag, width:tagWidth, font}) => {
// 横幅より長いタグだけ縮小。削除・省略・折り返しはしません。
if (tagWidth > available) {
tag.style.fontSize = (font * Math.max(0.001, available-1) / tagWidth * 0.999) + 'px';
}
});
const items = tags.map((tag, index) => {
return {tag, index, w:Math.min(width, tag.offsetWidth+1+gap), h:tag.offsetHeight+1+gap,
font:parseFloat(getComputedStyle(tag).fontSize)};
});
// 大小の優先をなくし、ページごとにランダムな順序で配置します。
// DOMの順序はA群のorderby / orderを維持します。
items.forEach(item => {
if (!randomOrder.has(item.tag)) randomOrder.set(item.tag, Math.random());
});
items.sort((a, b) => randomOrder.get(a.tag)-randomOrder.get(b.tag) || a.index-b.index);
const result = fitRectangle(items, width);
// 異常な計測値でも、枠外座標をDOMへ書き込みません。
if (!result) return;
const {positions, height} = result;
// 検証済みの座標だけを各タグへ設定し、確定した枠の高さを反映します。
positions.forEach(p => {
p.tag.style.left = (p.x + padding) + 'px';
p.tag.style.top = (p.y + padding) + 'px';
});
cloud.style.height = Math.ceil(height + padding * 2) + 'px';
cloud.classList.add('is-packed');
}
// 同じページに複数設置した場合も、それぞれの枠ごとに初期化します。
function init() {
document.querySelectorAll('.custom-tag-cloud-compact-outer').forEach(cloud => {
let frame;
const schedule = () => {
cancelAnimationFrame(frame);
frame = requestAnimationFrame(() => layout(cloud));
};
schedule();
// 親カラム幅の変更にも対応。自身の高さ変更では再配置しません。
if ('ResizeObserver' in window) {
let lastWidth = -1;
const observer = new ResizeObserver(() => {
const width = cloud.clientWidth;
if (width !== lastWidth) {
lastWidth = width;
schedule();
}
});
observer.observe(cloud);
} else {
window.addEventListener('resize', schedule);
}
// Webフォントの読み込みで文字幅が変わった場合にも再計算します。
if (document.fonts) {
document.fonts.ready.then(schedule);
document.fonts.addEventListener('loadingdone', schedule);
}
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init, {once:true});
} else {
init();
}
})();
</script>
<?php
}
// テーマがフッターを出力するタイミングで、上のJavaScriptを読み込みます。
add_action( 'wp_footer', 'custom_tag_cloud_compact_outer_scripts' );
設置時は全文を追加し、文字サイズなどの調整は後述するショートコードから行えます。
前半のPHPでタグの名前・リンク・文字サイズを用意し、後半のJavaScriptで文字の寸法を測って配置しています。
全タグが入らない場合は、四角い枠の高さを変え、枠全体の配置を計算し直します。 下側の一部だけを伸ばしたり、配置後にタグだけを移動したりしないことで、矩形の枠内へ収める構成にしています。
手順2：追加CSSに見た目の設定を追加する
SWELLでは、管理画面の「外観」→「カスタマイズ」→「追加CSS」へ進みます。既存のCSSコード下へ追加して、保存・公開してください。
CSSコード全文
/*
* 四角形のタグクラウド：見た目の設定
* 「外観 → カスタマイズ → 追加CSS」などに追加します。
*/
/* 表示枠。横幅は配置先に合わせ、高さはJavaScriptが設定します。 */
.custom-tag-cloud-compact-outer {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 2px;
width: 100%;
max-width: 100%;
min-width: 0;
height: auto;
max-height: none;
overflow: hidden; /* 万一の枠外描画を防ぎます。配置自体も枠内で計算します。 */
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
line-height: 1;
}
/* 全タグ共通の文字色・太さ・余白などを指定します。 */
.custom-tag-cloud-compact-outer > a {
display: inline-block;
flex: 0 0 auto;
box-sizing: border-box;
width: auto;
max-width: none;
min-width: 0;
height: auto;
margin: 0;
padding: 0;
border: 0;
font-weight: bold;
text-decoration: none;
color: #04384C; /* 通常の文字色。好みのカラーコードに変更できます。 */
line-height: 1.1;
white-space: nowrap;
word-break: keep-all;
overflow-wrap: normal;
letter-spacing: normal;
transition: color 0.3s;
transform: none !important; /* 動きによるはみ出しを防止します。 */
animation: none !important;
}
/* 縦表示モード。日本語は縦に、英数字は文字種に応じた向きになります。 */
.custom-tag-cloud-compact-outer[data-vertical="1"] > a {
writing-mode: vertical-rl;
text-orientation: mixed;
line-height: 1;
}
/* 最小文字サイズのタグだけは、縦表示モードでも横向きにします。 */
.custom-tag-cloud-compact-outer[data-vertical="1"] > a.is-smallest-horizontal {
writing-mode: horizontal-tb;
line-height: 1.1;
}
/* vertical="0"の場合は、すべてのタグを横向きにします。 */
.custom-tag-cloud-compact-outer[data-vertical="0"] > a {
writing-mode: horizontal-tb;
}
/* 配置計算が完了したら、指定した座標へタグを置きます。 */
.custom-tag-cloud-compact-outer.is-packed {
display: block;
}
.custom-tag-cloud-compact-outer.is-packed > a {
position: absolute;
right: auto;
bottom: auto;
}
/* マウスポインターを重ねたときの色。位置は動かしません。 */
.custom-tag-cloud-compact-outer > a:hover {
color: #ff6600 !important;
text-decoration: underline;
}
/* キーボードでリンクを選択したときに、選択位置を分かりやすくします。 */
.custom-tag-cloud-compact-outer > a:focus-visible {
outline: 2px solid currentColor;
outline-offset: 1px;
}
/* 特定のタグだけ色を変える例。末尾はタグのスラッグに合わせます。 */
.custom-tag-cloud-compact-outer .custom-tag-occupation { color: #EE82EE !important; }
.custom-tag-cloud-compact-outer .custom-tag-hobby { color: #FFFF00 !important; }
.custom-tag-cloud-compact-outer .custom-tag-expression9 { color: #0000FF !important; }
このCSSでは、文字を枠の外へ動かすアニメーションを無効にしています。マウスポインターを重ねたときは、位置を動かさずに色と下線だけを変更します。
文字の色を変更する
全体の文字色と、特定のタグだけを、変える方法があります。
全体の文字色を変える
CSS内にある、次の色指定を変更します。
color: #04384C;例えば、基本の文字色を濃いグレーにするなら、次のようにします。
color: #333333;「全タグ共通」のCSS内にある色指定を変更してください。 個別のタグに色を指定している場合は、その個別設定が優先されます。
特定のタグだけ色を変える
タグごとの色は、タグの名前ではなく「スラッグ」で指定します。
スラッグは、管理画面の「投稿」→「タグ」で、対象のタグを編集すると確認できます。
例えば、スラッグが occupation のタグを紫色にする指定は次のとおりです。
.custom-tag-cloud-compact-outer .custom-tag-occupation {
color: #EE82EE !important;
}別のタグに使う場合は、occupation の部分を対象のスラッグへ変更します。
上記のコードには、occupation・hobby・expression9 を入れています。もし該当するタグがなければ、その指定は見た目に影響しません。
手順3：表示したい場所にショートコードを置く
基本方法をもとに、記事本と文サイドバーに表示します。文字サイズや表示方法を変更することも可能です。
基本方法
PHPとCSSを保存したら、表示したい場所に以下を入力します。下記は当ブログの2026年11月4日の設定です。
[custom_tag_cloud_compact_outer smallest="14" largest="40"]この1行が、タグクラウドを呼び出すショートコードです。
記事本文に表示する場合
投稿・固定ページの編集画面で「ショートコード」ブロックを追加し、上の1行を入力します。ブロックは、追加ボタンから「ショートコード」を検索すると見つけられます。
1：「ショートコード」ブロックの追加。
2：次にカスタムHTMLの枠にショートコードを入力してください。
保存したら、公開側のページまたはプレビュー画面で表示を確認してください。
3：出力結果
サイドバーに表示する場合
1：「外観」→「ウィジェット」から、表示したいサイドバーの領域を開きます。
表示場所に入れるのは、ショートコードの1行だけです。
まずは1か所に設置し、パソコンとスマートフォンの両方で、文字サイズ・高さ・リンク先を確認すると調整しやすくなります。
2：出力結果｜全横文字表示です。
文字サイズや表示方法を変更する
初期設定、小さめの文字、全タグを横、に表示にするショートコードです。
初期設定のまま使う
[custom_tag_cloud_compact_outer]初期設定では、文字サイズの基準は最小10px・最大40pxです。投稿数に応じて、その間のサイズに振り分けます。
ただし、横幅より長いタグは、枠内に収まるように縮小します。指定した文字サイズは基準値で、狭い表示場所でも必ずその大きさを保つという意味ではありません。
小さめの文字で表示する
サイドバーなどで文字が大きすぎる場合は、最大サイズを下げます。
[custom_tag_cloud_compact_outer smallest="10" largest="28"]もう少し全体を読みやすい大きさにするなら、例えば次のように指定できます。
[custom_tag_cloud_compact_outer smallest="12" largest="32"]smallest が最小文字サイズ、largest が最大文字サイズです。数値は設置場所に合わせて調整してください。
全タグを横表示にする
縦表示を使わず、すべて横向きにする場合は、`vertical=”0″` を追加します。
[custom_tag_cloud_compact_outer vertical="0"]文字サイズと組み合わせることもできます。
[custom_tag_cloud_compact_outer smallest="12" largest="32" vertical="0"]初期設定の vertical=”1″ では、基準上の文字サイズが最小になるタグだけを横向きにし、それ以外を縦向きにします。※ショートコードに vertical=”0″ がない場合は、自動で vertical=”1″ の設定になります。
すべてのタグの投稿数が同じ場合は、全タグが最小サイズとなるため、すべて横表示になります。また、smallest と largest を同じ値にした場合も、全タグが同じ大きさで横表示になります。
主な設定項目
| 項目 | 初期値 | 内容 |
|---|---|---|
| smallest | 10 | 最小文字サイズの基準 |
| largest | 40 | 最大文字サイズの基準 |
| unit | px | 文字サイズの単位。px・em・rem に対応 |
| vertical | 1 | 1 は最小文字以外を縦表示、0 はすべて横表示 |
初めて使う場合は、smallest・largest・verticalの3つを主に調整します。
うまく表示されないときの確認ポイント
ショートコードの文字がそのまま表示される
PHPが追加されているか、編集した子テーマが現在有効になっているかを確認してください。ショートコードの名前は、以下のとおりです。
[custom_tag_cloud_compact_outer]入力先が「コード」ブロックや「カスタムHTML」ブロックになっていないかも確認します。記事内へ機能を表示する場合は、「ショートコード」ブロックを使います。
文字が横に並ぶだけで、四角い配置にならない
CSSが保存されているか、PHPの後半にあるJavaScriptまで追加したかを確認します。JavaScriptの実行前は、通常の折り返し表示になる構成です。
コードの一部だけを抜き出さず、PHPとCSSの両方を、全文追加できているかを確認してください。
表示が変わらない場合は、ブラウザーやキャッシュ機能に古いファイルが残っていないかも確認します。JavaScriptを遅延させる設定を使っている場合は、遅延によって配置開始が遅れていないかを確認してください。
タグクラウドが表示されない
投稿へタグが付いているかを確認してください。未使用のタグしかない場合、何も表示しません。
また、PHPを保存した後にエラーが出ている場合は、貼り付け位置やコードの重複を確認します。復旧が必要な場合は、保存しておいた元の functions.php に戻してください。
文字が小さい、または表示が縦長になる
横幅の狭い場所へ多数のタグを入れると、高さが必要になります。また、長い横向きのタグは枠に収めるため小さくなる場合があります。
表示場所を広くするか、largest の数値を下げると、配置の印象を調整できます。文字の読みやすさを優先したい場合は、全タグを横表示にする設定も試してみてください。
少しすき間が残る
中心に空白を作る処理は入れていませんが、縦長のタグと横長のタグでは、入れられる空きの形が異なります。文字そのものの余白もあるため、見た目のすき間が残る場合があります。
四角い表示枠を保ち、タグ同士の重なりを避けながら配置することを優先しています。すき間をなくすためにタグを重ねたり、文字を切って表示したりする仕組みではありません。
Q&A
表示場所と配置の仕組みについて.
まとめ｜タグ一覧をブログのデザインとして楽しむ
今回のタグクラウドは、投稿数に応じて大きさが変わるタグを、四角い枠の外側から内側へ、ランダムな順序で詰める仕組みです。
最小文字のタグだけを横向きにすることで、縦横の文字が混ざった見た目を楽しめます。表示先の横幅に合わせて高さも変わるため、記事本文やサイドバーなど、設置する場所を変えて試せます。
設置は、PHPを追加する・CSSを追加する・ショートコードを置くの3段階です。
まずは初期設定で表示し、文字サイズと色を少しずつ調整してみてください。記事を探すためのタグ一覧に、ブログらしい見た目を持たせる装飾方法として活用できます。
前回記事
コメント