ブログタイトルを部分的に装飾する方法
SEOに配慮して我慢していた人に朗報「できるよ！」
サイト作成の困りごとをサクッと解決
ブログタイトルを装飾したい！
枠をつけたいとか色を変えたいとかそういうレベルではありませんよ？
1文節ずつ、いやもっと言うと1文字ずつサイズや色、ウェイトを変えたい。
長くやっていると、そう思う瞬間が誰しも訪れるのではないでしょうか。
例えばBloggerですと、タイトル入力欄までコーディング出来てしまうものですから、ゴチャゴチャやっていた時期が私にもあります。
だっさ…
やかましい！
装飾がダサいとかシンプルがオシャレとかそういう話はさておき、ブログやwebページのタイトルというのはプレーンテキストであるべきです。
タイトルからすでに想像できてしまうかもしれませんが、文章以外のコードがゴチャゴチャ入ってしまうと、ページの評価に悪影響を及ぼす可能性があるからです。
でもど～しても装飾したい。
そしてSEOにも配慮したい。
…
…
できます。
そう、JavaScriptならね。
注：今後Googleアルゴリズムのアップデートによって評価基準が変更される可能性があります。あくまで参考程度に留めていただきますようお願いします。
1.実装できる条件
条件はただひとつ。
ページ内でJavaScriptが実行できるサービスであるかどうかです。
参考までに以下、パッと思いつくブログサービスで記事ごとにJavaScriptの埋め込みができるかどうかを一覧にしました。
令和7年時点での情報ですが、誤り等ありましたらTwitter（X）の方でお知らせ頂けましたら喜びます。
| 記事内でのJavaScriptの扱い | 注記 | ||
| 楽天ブログ | × | 不可 | JavaScriptの埋め込みが公式に禁止されている |
| Amebaブログ | △ | 不可 記事本文に<script>やJavaScriptタグは禁止され、自動でエラー／削除される |
フリープラグイン機能を通じてテンプレートやサイドバーにスクリプトを入れる形なら一部可 |
| JUGEMブログ | △ | 不可 | ブログパーツとしてJavaScript使用可能であるため、工夫次第でタイトルの差し替えは出来なくもない |
| Tumblr | △ | 不可 | 投稿本文でのJSは禁止 テーマによってはサポート問い合わせの上で可能性あり |
| はてなブログ | 〇 | 可 記事本文に<script>を直接書いて表示できた例あり |
プラン問わず記事本文でスクリプト可能な例あり |
| WordPress | 〇 | 可 JavaScriptの埋め込み自由に可能 | |
| ライブドアブログ | 〇 | 可 JavaScriptの埋め込み自由に可能 | |
| Blogger | 〇 | 可 JavaScriptの埋め込み自由に可能 |
2.やりかた
2-1.ページタイトル部の目印を見つける
まずは何とかしてページタイトル部の目印を見つけてください。
方法は色々あるかもしれませんが、代表的なものとして以下二つあげておきます。
2-1-1.デベロッパーツールを使用する場合
ChromeやedgeでしたらF12キーを押してデベロッパーツールを立ち上げます。
2-1-2.ソースコードから根性で探す場合
対象のページが表示されている状態でCtrl+Uボタンを押します。
そうすると以下のようにページのソースコードがズラーっと表示された別タブが開きます。
この中から探すのは、自分でHTMLを組んだとかでないと大変だと思いますので、少し知恵を使いましょう。
Ctrl+Fキー（検索）を押して、ページのタイトルで検索してみてください。
ホームページとかでなければ、ここだろうと思う部分はそれほど苦労せず見つかると思います。
しかし例示したページはうちのホームですので、米子力研究所なんていう文字列は山ほど出てきますｗ
その数なんと26件ｗｗ
それでも目的の場所は16番目にありました。
デベロッパーツールはちょっと慣れが必要ですし、どちらが大変かと言われても微妙なところですが、まぁどちらにしても同じ結果が得られます。
どちらのアプローチを経ようとも、私の場合は以下のような結果が得られました。
これがページにタイトルを表示する最小単位です。
<h1 class="post-title entry-title">
米子力研究所
</h1>
┰
┣ "post-title"
┃
┗ "entry-title"
┰
┗ <h1>
あくまでこれは「うちのサイトの」結果です。
正直なところユニークな識別子であるidが見つかるとなお良かったのですが、取り敢えずidがないパターンを先にご説明します。
2-2.見つけたclass名を使ったJavaScriptを記事内に埋め込む
2-1.で得られたclass名のうち、まぁどちらでも良いでしょうが便宜的に"post-title"を使用したスクリプトは以下のようになります。
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.post-title').forEach(el => {
el.innerHTML = `
<span style="color:#ffc0c0;">つ</span><span style="color:#b4ff4a;">ぶ</span><span style="color:#ffe538;">よ</span><span style="color:#e7adff;">り</span>☆<span style="font-size:1.5em;">𝕏</span><span class="mono f08">（エックス）</span>
`;
});
});
</script>
黄色い部分が先ほど調べたclass名です。
Bloggerでしたらこのままでも使えますが、他のサービスでしたら、上述の調査を行って適宜書き変えてください。
そして水色の部分が差し替えたいタイトルのコードになります。
「まぁどちらでも良いでしょうが云々」とは言いましたが、念のため指定したclass名を他に使用している部分が無いか、胸に手を当ててよ～く考えてみてから使用してください。
該当のクラス名を使用している部分は全て書き変わってしまいますので。
それではお待たせいたしました。
今までSEOを意識するあまり改行すら控えていた慎重派のあなた！
これから遠慮はいりませんので、やり過ぎなくらいゴテゴテのタイトルに差し替えちゃってくださいｗ
2-3.見つけた目印がidだった場合のScriptサンプル
私はBloggerマンですので、ターゲットとして安心して使用できるセレクタがたまたま"post-title"でした。
繰り返しになりますが、idがあるならそちらの方が圧倒的に安心です。
一意（ユニーク）な識別子ですからね。
その場合は以下のスクリプトを使用してください。
<script>
document.addEventListener('DOMContentLoaded', () => {
const t = document.getElementById('decoration');
t.innerHTML = `
<span style="color:#ffc0c0;">つ</span><span style="color:#b4ff4a;">ぶ</span><span style="color:#ffe538;">よ</span><span style="color:#e7adff;">り</span>☆<span style="font-size:1.5em;">𝕏</span><span class="mono f08">（エックス）</span>
`;
});
</script>
2-4.idもclass名もなかった場合の対処
2-4-1.h1の使用はおすすめしない
2-1-2.で、目印としてついうっかり
┰
┣ "post-title"
┃
┗ "entry-title"
┰
┗ <h1>
が見つかったと書きましたが、よほどの覚悟がない限り<h1>は使用しないでください。
ページに一つの使用が望ましいタグですが、平気で複数使ってある可能性がありますので誤爆の原因になります。
とにかく唯一無二、ユニークな目印を使用してください。
いちおうclass名の時に使用したスクリプトでh1を入れてやれば動きますが、マジでおススメしません。
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('h1').forEach(el => {
el.innerHTML = `
<span style="color:#ffc0c0;">つ</span><span style="color:#b4ff4a;">ぶ</span><span style="color:#ffe538;">よ</span><span style="color:#e7adff;">り</span>☆<span style="font-size:1.5em;">𝕏</span><span class="mono f08">（エックス）</span>
`;
});
});
</script>
2-4-2.HTMLを編集してidを追加
HTMLの編集機能が使える環境でしたらidを追加してしまうのが実はもっともおすすめです。
Bloggerの場合ですと、ページタイトル部が謎のBlogger語によって動的に生成されますのでちょっと見つけにくいかもしれませんが、post-titleとかh1とかで検索してやれば見つける事ができるでしょう。
<b:if cond='data:post.title != ""'>
<h1 class='post-title entry-title' id='decoration'>
<b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
<a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>
以上のようなコードになっていると思いますので、黄色い部分に好きなidを追加して下さい。
あとは2-3.で述べたidをターゲットのマーカーとしたスクリプトを記事に仕込むだけで動きます。
<script>
document.addEventListener('DOMContentLoaded', () => {
const t = document.getElementById('decoration');
t.innerHTML = `
<span style="color:#ffc0c0;">つ</span><span style="color:#b4ff4a;">ぶ</span><span style="color:#ffe538;">よ</span><span style="color:#e7adff;">り</span>☆<span style="font-size:1.5em;">𝕏</span><span class="mono f08">（エックス）</span>
`;
});
</script>
2-4-3.それもダメならあきらめる
classもねぇ。
idもねぇ。
HTMLの編集もそれほど自信がねぇ。
という方は、ご縁が無かったという事で今回はあきらめてください。
そのうちいい方法を思いつくかもしれませんので、他の所に力を注ぎましょう。
3.使用上の注意『悪意のあるCloakingはダメ、絶対！』
まずCloaking（クローキング）についてざっくり説明します。
- 検索エンジンにはテキスト中心のページを表示させ、ユーザーには画像やFlashで作られたページを表示する
- 検索エンジンにだけキーワードを大量に含んだページを表示する
- ユーザーには表示されない場所にキーワードを隠して配置する
しかし、たいていの悪質なクローキングは、検索エンジンの評価を不正に操作し検索結果を歪める行為であるため禁止されているのです。
ペナルティを受けると検索順位が下落したり、検索結果に表示されなくなったりする可能性がありますのでマジでやめときましょう。
今回ご紹介した『タイトルをJavaScriptで装飾する』手法も広義ではCloakingに近い技術です。
しかしページの各所を『JavaScriptで装飾する』事自体はごく一般的に行われていますし、Googleの公式ドキュメントからも問題であるというニュアンスは感じられません。
もしかすると解釈に差が出るかもしれませんので、該当記事をリンクしておきます。
皆さん熟読のうえご判断ください。
とにかくここで言いたいのは、
1文字たりともテキストを変えるな！
という事です。
これは曖昧ラインを大きく超えた明確な黒です。
色々な例が考えられますが、たとえばタイトルに商品Ａと記述してあるにもかかわらずJavaScriptで商品Ｂに書きかえる等です。
ね、ダメでしょう？
以上のような点に注意しながら、ブログタイトルの部分的な装飾をどうぞ皆さん楽しんでください！
結果的にダサくなってしまった？
知らんがな！
それではさようなら。