カスタマイズ

WordPressの目次をスクロール連動＆自動ハイライト！Cocoonでの実装手順を紹介

2025.08.01
wordpress
WordPressでは記事の冒頭に目次を入れることが多いですが、サイドバーに表示している人もいますよね。目次があれば全体の流れがつかめて便利ですし、サイドバーでは「今どこを読んでいるか」がハイライトされたりすると更に親切。特に長い記事では読む側も現在地が分かってとても助かります。ということで、今回はスクロール...

【CSS】光るボタンアニメーションの作り方！カスタマイズまで手順を詳しく解説

2025.07.28
CSS
コクーン（cocoon）などのテーマで「キラッと光が横切るアニメーション付きのボタン」があったりしますが、何気にカッコいいし、目立ってクリック率も上がりそうですよね。ということで、ここではHTML, CSSを使って「自作で光るボタンの作り方」をご紹介。できあがりは、ほぼコクーンの光るボタンと同等になったと思い...

【WordPress】プレビュー時だけ上の黒いバー（管理バー）を非表示にする方法

2025.04.07
wordpress
投稿や固定ページの編集で「プレビュー時のみ」上段の黒いバー（管理バー/ツールバー）を非表示にする方法。ユーザー設定で管理バーを非表示にすると全ての場面で管理バーが非表示になって使いづらい。プレビューだけを判別するクラスを追加してCSSを設定すれば、投稿や固定ページのプレビュー時のみ管理バーが消え、その他の画面では表示されるのでワードプレスの使い勝手を落とさずプレビュー画面を実際の画面と同じように見ることができる。

【WordPress】記事タイトルにHTMLタグを入れる方法！ブラウザ向け対応も忘れずに

2025.02.07
カスタマイズ
この記事のタイトルは、一部色が変わっていたり「！」の後に改行されていたりと、タイトル（H1）にHTMLタグが入ってます。このブログでは「Coccon」というテーマを使ってますが、「Lightning」や「Luxeritas」など他のテーマでも同じことができますね。ここではワードプレスにおいて、記事タイトル（H...

【Cocoon】タイトル下に記事抜粋（ディスクリプション）が表示されない時の対処法

2024.10.29
wordpress
Cocoonは無料の人気のテーマで、このブログでも使ってますし、他の方にもおすすめしたりしてます。ただ、どうもトップページの表示（記事の一覧表示）で、モバイル表示（スマホ表示）で見ると、各記事のタイトル下に記事の説明（記事の抜粋：メタディスクリプション）が表示されないようですね。（パソコンでは表示されるのに何...

【CSS】次の要素ありなしで表示を変える方法

2024.05.25
CSS
以下のように「要素が1つだけ」の場合と「複数ある場合」とで表示を分けたい、ということがあります。たとえば記事の先頭によくある、カテゴリ、タグの表示などで、1つしか表示する要素がなければ、それだけを表示する。複数（つまり次の要素が）あれば、スラッシュ（ / ）で区切って表示するなんていう場合がありますよね。＜要...

【Cocoon】スマホメニューの検索をアドセンスの検索エンジン広告に置き換える方法

2024.05.17
wordpress
人気の無料テーマ「Cocoon」でスマホ表示したときに、下部のメニューに検索が表示されますが、これをグーグルアドセンスの検索エンジン広告に置き換える２つの方法を試してみました。置き換えたい箇所は「スマホ表示時のメニュー」（「モバイルスライドインメニュー」と呼ばれるもの）内にある検索。「検索」（虫眼鏡アイコン）...

【Cocoon】スマホ表示時のアドセンス検索エンジン広告！8つのレイアウトの表示のされ方

2024.01.17
wordpress
Cocoonのスライドインメニュー（スマホ表示の下部メニュー）をアドセンスの検索エンジン広告に置き換えた時の見え方をチェックしました。アドセンスの検索エンジン広告は、見え方（レイアウト）を複数の中から選べますが、結果としては「Googleがホスト」のレイアウトが良さそうです。関連）【Cocoon】スマホメニュ...

【Cocoon】モバイルメニューカスタマイズ：テーマファイルのダウンロードとアップロード

2024.01.17
wordpress
Cocoonでモバイルメニュー（スライドインメニュー）の「検索」ボタンをアドセンスの検索エンジン広告に差し替える、といったカスタマイズなどでは、テーマファイルのダウンロードやアップロードが必要になります。この場合、対象ファイルは「mobile-search-button.php」になりますが、ここではそのダウ...

【WordPress】記事一覧で抜粋の文字数を揃えたい！全角半角混在でも同じにする方法

2023.12.18
theme
ブログの記事一覧では、記事のタイトル下に記事の抜粋が表示されると思います。この抜粋、日本語の全角文字や全角記号、半角の英数記号が混在の場合、全角文字が多いか半角文字が多いかで見た目の文字の量も異なり、抜粋の表示を全体で見たとき整って見えない。細かいところですが、この「全角文字、半角文字」が混在でも見た目的に文...

【ヘッダタイトル】文字だけのロゴ画像の作り方！背景を透明にする方法（PhotoScape編）

2023.11.16
カスタマイズ
ブログのヘッダー画像を設定すると、テーマによってはそのヘッダー画像の上にサイトタイトルやキャッチフレーズが表示されるものがあります。（Cocoonなど）背景の画像の上にタイトルの文字が乗るため、背景の画像に溶け込んだりしてタイトルの文字が見づらくなる場合がありますが、こうした時には文字だけのロゴ画像を作成して...

ブログ記事一覧のサムネイル画像をマウスオーバーで拡大させる！CSSで簡単カスタマイズ

2023.08.06
CSS
ブログの記事一覧表示にアイキャッチ画像（サムネイル画像）を表示している場合が多いですが、その画像にカーソルを乗せる（マウスホバーさせる）と、「画像がふわっと拡大表示される」という場合がありますね。この「画像がふわっと拡大表示」は実はCSSを使って簡単に実現できますので、是非試してみてください。（私が使っている...

【WordPress】ハイフンとアンダースコアの使い分け

2023.02.05
wordpress
ワードプレス用に自作プラグイン作成してると、ワードプレスのドキュメントに命名規則（コーディング規約）があり、そこにハイフン（ - ）とアンダースコア（ _ ）の使い分けが書かれている。ここでそのハイフンとアンダースコアの使い分けを整理しておくメモ。※）URLにおけるハイフンとアンダースコアについては以下参照U...

【WordPress】画像に枠を付けるとぼやける？等倍で綺麗に表示する方法

2022.12.27
CSS
画像にフレームというか枠をCSSで付けると、画像が等倍で表示されず「ぼやける」「滲む」（にじんむ）場合があります。（特に画像に文字が入っていると気になったりしますよね）枠の分だけ画像が縮小されることが原因ですが、その場合CSSの設定はどうするのが良いか、ぼやける理由の詳細や、ぼやけない画像の基本、ワードプレス...