2026-05-25
うちのサイトの一番上で、最新の記事を表示するのに使用しているプラグイン「Newpost Catch」について、以前アプデで表示が崩れてしまった場合の対処法をエントリに上げました。
その際の情報が古くなってしまったので、再度自分の備忘のため、修正方法を残しておきます。
「プラグイン > プラグインエディター > Newpost Catch > class.php」の355行目と357行目を
$post_title = apply_filters( 'npc_sc_post_title', '<span class="title">' . esc_html( get_the_title() ) . '</span>', $post_id );
$post_permalink = apply_filters( 'npc_sc_post_permalink', esc_url( get_permalink() ), $post_id );
$post_date = ( $date == true ) ? '<span class="date">' . esc_html( get_the_time( get_option('date_format') ) ) . '</span>' : '';
から
$post_title = apply_filters( 'npc_sc_post_title', '<span class="title">' . esc_html( get_the_title() ) . '', $post_id );
$post_permalink = apply_filters( 'npc_sc_post_permalink', esc_url( get_permalink() ), $post_id );
$post_date = ( $date == true ) ? '<span class="date">' . esc_html( get_the_time( get_option('date_format') ) ) . '</span></span>' : '';
に修正します。spanの閉じタグの位置を変更するだけです。
これでtitleクラスタグにdateクラスがくるまれるようになったので、従前と同じ表示に戻すことが出来ました。
2026-02-14
当サイトの左サイドバーに表示されている「サイト内検索」ですが、先日検索フォームのデザインが崩壊しているのに気づいたので、修正しておきました。めっちゃ力業ですが…
以前は↓にあるとおりかなりcssでデザインをいじっていたのですが、それが悪さしてたっぽいですね。
現在はデフォルトのデザインをなるべく活かすような形にしています。
/***** Google検索 *****/
#gsc form.gsc-search-box {
max-width: 650px;
font-size: 12px !important;
margin: 10px 0px !important;
}
#gsc .gsc-input {
font-size: 12px;
background:none !important;
height:25px !important;
}
#gsc .gsib_b {
height: 25px !important;
}
/***** Google検索終わり *****/
検索文字列の文字の大きさと、フォーム全体の幅と高さをいじるだけにしました。検索ボタンがなくなってちょっとスッキリしたかな。
2023-11-16
WordPressでは、ウェブサイトをモバイル端末に対応したレスポンシブデザインで表示させるプラグイン「WPtouch」が組み込まれています。しかし先日来、WPtouchのモバイルテーマのデザインが崩壊していることに気づきました。ご迷惑をおかけした皆様、申し訳ありません。
右が意図した表示/左が崩れた表示
原因が全然わからないし、ネット上にも情報が全然なくて対応ができず困っていたのですが、ようやく突き止めることができました。
WordPressのバージョンを6.4にすると、CSSがレンダリングされなくなるのが原因のようです。
上記サイトによると、Wordpressの次回のアップデートで改善されるようですが、それまでの暫定的な対応方法が記載されています。以下適当に翻訳＆補足。
1.リンク先にアクセスし、右上の「Download ZIP」からZIPファイルをダウンロードする
2.Wordpressのダッシュボードにアクセスし、「プラグイン > 新規プラグインを追加 > プラグインのアップロード」から先ほどDLしたZIPファイルをアップロードし有効化する
3.「プラグイン > インストール済プラグイン」に「WP 6.4 Theme path fixer」というプラグインが表示されていればOK
そもそもWP6.3以下を使用中の場合は、次のバージョンが出るまでバージョンアップしないことが推奨されているようです。6.4にアップグレード済の場合のみこの対応が必要になるみたいですね。yukkun20もこれで問題が解決しましたのでお困りの方はどうぞ。
2023-04-21
左メニューに表示されているタグクラウド（タグごとに、そのタグが付けられた投稿をまとめて閲覧できるページへのリンクを貼ったもの。これ→）ですが、先日までは「Configurable Tag Cloud」というプラグインを使用していました。
しかしいつの間にか（ここ数週間だと思うのですがしばらく気づかなかったので…）このプラグインではタグクラウドが表示されず、タグクラウドウィジェットも設置できなくなっていました。ネットで情報を収集したところ、PHPのバージョンによってそういう状況が起こるそうですが…
仕方ないので、Wordpressにデフォルトで搭載されているタグクラウドウィジェットを使用することにしました。ただしデザインがどうにも気になるので、タグが綺麗に並ぶようにCSSで調整することにしました。コードはこんな感じです。
/***** タグクラウド カスタマイズ *****/
.tagcloud {
padding: 0px 2px 0px 2px;
display:flex;
flex-wrap:wrap;
}
.tagcloud a {
text-decoration: none; /*テキスト初期化*/
color:; /*フォントカラー（無指定）*/
font-size: 11px !important ; /*フォントサイズ*/
font-weight:normal; /*文字強調（強調しない）*/
display: inline-block; /*横並びで上下左右空白有り*/
padding: 2px 6px 0px 6px; /*タグ内側の上右下左の余白*/
margin: 3px 1px 0px 1px; /*タグ外側の上右下左の余白*/
border: 1px solid white; /*タグを囲う枠線*/
word-break: break-all; /*テキストの途中で改行させない*/
flex: 1 1 auto; /* タグ枠を横に伸ばし、どの行も同じ幅になるようにする */
text-align:center; /* タグ枠内の文字を中央寄せ */
}
.tagcloud a:hover {
background: #ffffff; /*ホバー時のタグ背景色*/
color: #ff0033; /*ホバー時のタグフォントカラー*/
transition: all 0.6s ease; /*ホバー時に背景色・フォントカラー変更をアニメーションさせる*/
}
/***** タグクラウド カスタマイズ 終わり *****/
しかしいつの間にか知らないCSSが増えていますね…。yukkun20がcssを真面目に学んだのはもう20年くらい前なので、最近はついていくのが大変です。
2022-11-04
今週は祝日もあったりして少し時間に余裕があったので、PC版サイトの小規模改修をしていました。主に左カラムにあるメニュー周りです。
ゲームプレイ日記の整理
今までは適当に羅列しているだけだったプレイ日記ですが、数も大分増えてきましたので、「サモンナイトシリーズ」「テイルズオブシリーズ」「ヴァニラウェア作品」「その他」に分類することにしました。
「人気のあるページ」の設置
新たに「人気のあるページ」をメニューに加えました。「投稿」「固定ページ」の中から、直近24〜48時間以内の閲覧回数をベースに表示されているそうです。最近までTOX2のエンディング集がランキングに上がっていたのですが、先日ちょうど10周年だったからですかね。
やっぱりゲームネタが人気なのか…
メニューの量も大分増えて長くなってしまいました。そろそろ左カラムのみの2分割だけじゃなくて、左右カラムを備えた3分割タイプにすべきなんですかね…。
このサイトをブログ化する時にも死ぬほど悩んだのですが、結局それまでのデザインを踏襲した結果2分割型にしました。でもいつか3分割にする日が来るかもしれないと思って、3分割に変更できるような仕込みはしてたはずなんだよな…ただその仕込みがどこに仕込まれてるのかもう思い出せない。
2022-08-19
昨日の記事に記載したとおり、PHPのバージョンを7.3.33に上げました。しかし調べているうちに、7.4に上げられないのはプラグインとかのせいではなく、データベース（MySQL）のバージョンが古いからである可能性が浮上しました。
幸いスターサーバーには、MySQL5.0を5.7にバージョンアップする「データベース移行ツール」というものがあります。
使い方はこちらでわかりやすくまとめてくれています。スターサーバーはこういうところが好き。
ただ手順8の「8. ご利用プログラムの設定ファイルを編集し、データベースホスト名を変更します。」というところはどうやってすればいいのかわかりにくいかもしれませんので、Wordpressを使用している場合の処理方法をまとめておきます。
1.「サーバー管理ツール」から「FTPアカウント設定」> データベースを移行したいドメインの「選択」 > WebFTPの「ログイン」を順にクリック
2.ファイル一覧から「wp-config.php」を探し（通常は「wp」フォルダの直下）、編集アイコン（真ん中辺にある紙とペンのアイコン）をクリック
3.開いたウィンドウで「/** MySQL のホスト名 */」の次の行にあるデータベースの名称を、指示通り書き換える
4.ウィンドウの上部にある「上書保存」をクリックして終了
という感じでした。
あとは上記サイト通り進めて、わずか5分ほどでデータベースのバージョンアップが完了しました。その状態であればPHPも7.4.28に上げることが出来たので一安心です。
2022-08-18
これまでうちのサイトではPHP7.1.33を使用していたのですが、昨日あたりからWordpressのダッシュボードに入ると、そろそろPHPをバージョンアップしろという警告が出るようになったので、サクサクバージョンアップしました。ちなみにyukkun20はスターサーバー（旧ファイアバード）というサービスを使っていますが、その場合のPHPのバージョンアップの方法については以前扱っていますのでそちらをご確認ください。
7.1.33より上のバージョンで選択できるのは、7.2.34、7.3.33、7.4.28（推奨）、8.0.16、8.1.6なのですが、どれがいいかよく分からなかったのでとりあえず推奨の7.4.28にしておきましょう。ポチッとな。これでサイトにアクセスすると…
サイトが飛んでしまいました。Y.A.S.ここに眠る。「データベース接続確立エラー」が致命傷でした(ﾉД`)ｼｸｼｸ
…あまりのことに思考が停止してしまいましたが、どう考えてもPHPのバージョンアップが原因なのでひとまず7.1.33に戻したところ、ひとまず復旧しました。助かった。
さて、それで良しとするわけにはいかないので、抜本的な解決を図りましょう。いろいろググったところによると、おそらくプラグインかテーマがPHPの新しいバージョンに対応していないのが原因っぽいです。ではどのプラグインやテーマが悪さをしているのか調べましょう。
1．プラグイン「PHP Compatibility Checker」を導入する
このプラグインは、サイト上のテーマとプラグインのコードを精査し、PHPのバージョンごとの互換性を調べてくれるプラグインです。
インストールについては特筆すべき事はないので省略。インストールできたら、「ダッシュボード ＞ ツール PHP Compatibility」を開きます。
とりあえず「PHP 7.3」「有効化中のプラグインとテーマのみをスキャン」にチェックを入れてサイトをスキャンします。1回目はエラーが出たのですが、無視して「サイトを再スキャン」を選択するとうまくいきました。結構時間かかりますので気長に待ちましょう。
終わるとこんな感じでレポートが出ます。結果は「互換性あり」「警告：○」（○は警告の個数）「エラー：○」のような感じで出ます。
2.原因となっているプラグインやテーマを修正する
「エラー」が出たものについては修正した方が良さそうです。
一番簡単なのは、そのプラグインやテーマを無効化することだと思います。ただどうしても使い続けたい場合は、先ほどの結果の「詳細切り替え」をクリックすると、プラグインやテーマのうち、どのPHPファイルのコードの何行目に問題があるのか示してくれるので、そこを個別に修正しましょう。
yukkun20の場合、エラーは4つ出ました。
- プラグイン「Commented entry list」→いつ入れたのかも覚えてないくらい古いプラグイン。現在は「WP-RecentComments」を使っていて不要なので無効化。
- プラグイン「SyntaxHighlighter TinyMCE Button」→使い勝手が悪く、導入したものの一度も利用していなかったので無効化。
- プラグイン「Wp Pagenavi Style」→以前から問題があると言われていたものの、デザインの都合上使い続けていたプラグイン。プラグイン「WP-Pagenavi」のCSSを一括設定するためのものだったので、必要なCSSを「WP-Pagenavi」のpagenavi-css.cssにコピーし、設定画面で「pagenavi-css.css を使用」にチェックを入れれば「Wp Pagenavi Style」は不要になる。無効化。
- テーマ→「Assigning the return value of new by reference is deprecated in PHP 5.3 and has been removed in PHP 7.0」というエラーメッセージが出ました。意味が分からずググったところ、こちらのサイトに簡単な解決策が記載されていたのでそれに従って修正。
もう一度「PHP Compatibility Checker」でスキャンするとエラーはすべてなくなっていました。そこでPHPのバージョンを上げたところ、7.3.33までは問題無く上げられました。（ついでにPHP高速化設定もできました）
7.4以上にするとまた「データベース接続確立エラー」が出るので、おそらく7.4に対応できていないプラグインがあるんでしょうね。ただ現在の「PHP Compatibility Checker」ではPHP7.3までしか調査できないですし、7.3.33は現在公式にサポートされているので当面はこれで安心です。「PHP Compatibility Checker」がPHP8に対応したら、再び修正をしようと思います。(ただサポートページを見ると、開発が止まっているっぽい感じもします…）
Y.A.S.のテーマは、このブログを立ち上げたときにyukkun20が見よう見まねで作ったもので、yukkkun20自身も意味が分からず扱っているところがあるので、もし何か致命的な不具合が出たら自力で対処できる気がしないんですよね…。一般に配布されている最新のテーマに乗り換えるのも一つの選択肢ですが、そうするとこのサイトのデザインを捨てないといけないんです。もう18年くらいこのデザインを使っていて（マイナーチェンジはしていますが）自分でもすごく気に入っているので、捨てたくないんですよね。今回のエラーは軽いもので助かりました。
※2022-08-19追記
7.4にバージョンアップできました。こちらの記事をご覧ください。
2022-03-02
WordPressには、oEmbedという仕組みが導入されていて、YouTubeの動画のアドレスを貼り付けるだけで（わざわざコードを貼り付けなくても）、自動的に動画の埋め込みタグに変換してくれます。（詳しくはこちら）
ただYouTubeの場合、埋め込まれる動画は、640*360の大きさに固定され、左寄せになってしまいます。どうにかしたいと思っていたのですが、ようやく解決方法がわかりましたので備忘のために記録しておきます。
1.プラグイン「Jetpack」を導入する
いきなりプラグイン頼みですが勘弁してください。function.phpを書き換える方法でも可能なようですけど、yukkun20にはそういう高度な技術はありませんので…。
Jetpackはサイトのセキュリティや高速化にも役立つプラグインだと思うので、この機会に導入を検討してもらってもいいかもしれません。
導入したら、ダッシュボードから「Jetpack ＞設定 ＞執筆 ＞ 作成」を開き、「ショートコードを使って作成し、人気サイトからメディアを埋め込む」をONにします。↓こうなっていればOK。
これをONにすることで、YouTubeの埋め込みタグ（iframe）の前後に、
<span class="embed-youtube" style="text-align:center; display: block;"></span>
というタグが挿入されますので、これを使ってカスタマイズしましょう。
2.CSSを追加する
うちのサイトの場合は、幅を80％にしてセンタリングしているので、
/***** YouTube 埋め込み用CSS *****/
.embed-youtube {
position: relative;
display: block;
width: 80%;
height: 0;
padding-bottom: 45%;
overflow: hidden;
margin: 0 auto 25px;
}
.embed-youtube iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
/***** YouTube 埋め込み用CSS 終わり *****/
としています。ちなみにpadding-bottomはwidthの9/16倍にするときれいに表示できます（一般的な動画のアスペクト比が16:9のため）。
こちらのサイトを参考にさせていただきました。ありがとうございます。
2020-08-15
うちのサイトの一番上で、最新の記事を表示するのに使用しているプラグイン「Newpost Catch」のv1.3.9が昨日公開されました。こうやって普段使っているプラグインが継続的に更新されているのはありがたいですね（昨日の事故で学んだこと）。
さて、今回のアップデートで、出力されるコードが修正されたみたいです。それでデザインが若干崩れてしまいました。こんな感じです。
今まではtitleクラスタグの中にdateクラスタグの表示もくるまれていたんですが、アプデでtitleクラスタグが閉じられたあとにdateクラスタグの表示が来るようになってしまったので、日付の位置が変な事になっていますね。それで出力されるタグを修正しました。ちなみにプラグインのclass.phpを直接いじっているので、今後のアプデの度に修正が必要になるけど仕方ない。cssだけで修正できればどうにかなるのかも知れませんけど、yukkun20にはそんなスキルはないのです。
「プラグイン > プラグインエディター > Newpost Catch > class.php」の337行目と342行目と345行目を
$post_title = apply_filters( 'npc_sc_post_title', '<span class="title">' . wp_kses_post( get_the_title() ) . '</span>', $post_id );
$post_permalink = apply_filters( 'npc_sc_post_permalink', get_permalink(), $post_id );
$html .= '<li><a href="' . esc_url( $post_permalink ) . '" title="' . esc_attr( $post_title ) . '">';
$html .= '<figure><img src="' . esc_url( $thumb_url ) . '" width="' . esc_attr( $width ) . '" height="' . esc_attr( $height ) . '" alt="' . esc_attr( $post_title ) . '" title="' . esc_attr( $post_title ) . '" /></figure>';
$html .= '<div class="detail">';
$html .= $post_title;
$html .= $post_date;
$html .= '</div></a></li>';
から
$post_title = apply_filters( 'npc_sc_post_title', '' . wp_kses_post( get_the_title() ) . '', $post_id );
$post_permalink = apply_filters( 'npc_sc_post_permalink', get_permalink(), $post_id );
$html .= '<li><a href="' . esc_url( $post_permalink ) . '" title="' . esc_attr( $post_title ) . '">';
$html .= '<figure><img src="' . esc_url( $thumb_url ) . '" width="' . esc_attr( $width ) . '" height="' . esc_attr( $height ) . '" alt="' . esc_attr( $post_title ) . '" title="' . esc_attr( $post_title ) . '" /></figure>';
$html .= '<div class="detail"><span class="title">';
$html .= $post_title;
$html .= $post_date;
$html .= '</span></div></a></li>';
に修正します。これでtitleクラスタグにdateクラスがくるまれるようになったので、従前と同じ表示に戻すことが出来ました。
2020-08-14
今日もブログを更新しようと編集画面を立ち上げました。yukkun20はWordpressに「Classic Editor」を入れて旧式のクラシックエディタで編集を行っているのですが、今日Wordpress本体を5.5-jaにバージョンアップしたら、クラシックエディタに色々不具合が出ました。
- テキストエディタへの切り替えリンクをクリックしてもテキストエディタに切り替わらない
- 「公開」ボックスの「編集」リンクをクリックしても、ステータスや公開状態や公開日時などを編集できない
- 「WP to Twitter」ボックスの「設定」リンクをクリックしても、設定を編集できない
などなど…。これまで当たったことのない症状だったのでかなりびびりました。
ネットで調べたところ、導入しているプラグインとの相性を一つずつ探っていくしかないと言うことだったので、プラグインを無効化しては症状が改善するか調べ、改善しなければ有効化し、次のプラグインをまた無効化して…と繰り返した結果、
プラグイン：Drag & Drop Featured Image
が原因で、これを無効化すると全ての症状が消失しました。
調べてみると、4年前に更新が止まり、昨年にはガイドライン違反で配布も中止されているみたいです。ぶっちゃけこのプラグインはほとんど利用していなかったので、早々に削除して事なきを得ました。皆さんももし同じ症状で困っていたら試してみてください。
あと、indexページの「新着情報」のデザインが崩れているのにも気付いてますし、原因もほぼ究明できてるんですけど、修正は明日以降になります。
うむ…気がつくとプレイしてルーティンをこなしている不思議な魅力があるゲームなんだ…