2022-03-02

WordPressにoEmbedで埋め込んだYouTubeの表示をカスタマイズする方法

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のため)。

こちらのサイトを参考にさせていただきました。ありがとうございます。


2022-01-01

2021年まとめ

2022年になりました。本年もよろしくお願いいたします。星界の新刊には期待したいですね。

今年も例年通り、昨年1年間の総括をしたいと思います。

[関連記事]年間まとめ | Y.A.S.

このサイトについて

※数字は左からビジット数(実人数)、セッション数(アクセス数)、ページビュー数(閲覧されたページ数)、クリック数(外部リンクのクリック数)。

いつもアクセスして下さっている皆様、ありがとうございます。2019年に比べると2020年はアクセス数が少し伸びていたのですが、2021は前年の1.3倍になりました。これもyukkun20の力…ではなくて、ナディア30周年とかSNU:Xの完結とか東方の迷宮の移植とか、うちの扱っているコンテンツにビッグニュースがあったからだと思います。

2021年中に統計上アクセスが多かったページですが、上から順に

でした。東方の迷宮はなぁ…面白いんだけどネット上に攻略情報少ないんだよな…ちなみに第5位はゼノブレイド2のプレイ日記、それも第28回(各キャラの水着衣装を紹介した回)なのですが、これはニア様のフィギュア化と関係があるに違いない…!(そうか?

購入した書籍

現在紙で購入しているコミックスは「ケロロ軍曹」「信長の忍び」「UQ HOLDER!」「百姓貴族」の4つに減りました。「UQ HOLDER!」は今年完結だからあと3つか…

2022年に特に楽しみにしているコンテンツ

  • アニメ
    • うる星やつら
    • ワールドトリガー第4期(未定)
  • 漫画
    • ワールドトリガー(作者の方が体調を崩されているので心配)
    • 半妖の夜叉姫
    • ニニンがシノブ伝ぷらす
  • ゲーム
    • 黎の軌跡Ⅱ
    • 星の欠片の物語。

今年の抱負

  • テイフェス情報まとめの、2010年分を更新したい(去年も言ってた)
  • 榊ガンパレ年表は「新大陸編」を進めたい

という感じでしょうか。


2021-01-01

2020年まとめ

2021年になりました。本年もよろしくお願いいたします。

今年はSNU:X完結するかなぁ。ナディア30周年にも期待したいところです。

今年も例年通り、昨年1年間の総括をしたいと思います。

[関連記事]年間まとめ | Y.A.S.

このサイトについて

※数字は左からビジット数(実人数)、セッション数(アクセス数)、ページビュー数(閲覧されたページ数)、クリック数(外部リンクのクリック数)。

いつもアクセスして下さっている皆様、ありがとうございます。ここ数年アクセス数は微減気味でしたが、昨年は上向きになりましたね。Twitterで情報発信をしているのが多少なりとも効果あったのでしょうか。特に5月の伸びがいいのですが、これはグランディアのプレイ日記のお陰だと思っています。みんなプレイしようぜ!

統計上アクセスが多いページですが、

    1. ナディアな人々 | Y.A.S.
    2. サモンナイトU:X 人物図鑑 | Y.A.S.
    3. 十三機兵防衛圏 プレイ日記 | Y.A.S.

でした。ナディアは30周年企画が始まり需要が高まったからかな。SNU:Xは原作者の方にうちのサイトの宣伝ツィートをリツィートしてもらえたのが大きかったでしょうか。十三機兵防衛圏のプレイ日記は個人的に思い入れも強い企画だったのでにんまり。

購入した書籍について

購入数は22冊でした。ここ5年で93冊→72冊→41冊→32冊→26冊と順調に減ってきてます。ただ今年はダイの大冒険新装版を紙で買い始めたので、すこし増えましたか。現在紙で購入しているコミックスは「ケロロ軍曹」「ダイの大冒険」「信長の忍び」「放課後さいころ倶楽部」「UQ HOLDER!」「絶対可憐チルドレン」「星界の紋章」「百姓貴族」の8つだけですかね。絶チルは今年で完結するようですが…

来年は「ワールドトリガー」のアニメ第2期、第3期が楽しみです。

今年の抱負

  • テイフェス情報まとめを、2010年分を更新したい(せめて10年経つ前に…)
  • 榊ガンパレは「北海道独立①」をせめて完成させたい
  • ナディア30周年を記念して、特設ページを多少改装したい

という感じでしょうか。


2020-10-10

本日付で当サイトは20周年を迎えました!

2000年10月10日から始めたこのサイトも、本日で無事20年を迎えることが出来ました!おめでとうありがとう。

パソコン黎明期からパソコンに触れ、インターネット黎明期からネットを使い、個人サイト黎明期にこのサイトを立ち上げてる訳ですからなかなか大概ですね。PCの奥底やインターネットアーカイブから古いデータがサルベージできたので、ここまでの流れをまとめておこうと思います。

2020-10-12追記:内容を修正しました。

第0期(大学サーバー時代)

  • 2000年5月頃

大学の「情報処理」の授業で、個人のウェブサイトを立ち上げ、そのサイト上にレポートをアップロードする、という課題が出たことを機に、ウェブサイトを立ち上げました(サイト名は存在せず、「My Home Page」という仮称が付いていました)。当初yukkun20が書いたレポートは、「ウェブサイトにおける背景色と文字色のバランスについて」みたいな感じで、どういう色の組み合わせが見ていて目に優しいのかみたいなことを書いてたような記憶があります。

またこのときにHTMLについての勉強を始め、ボタン一つで背景色と文字色を変更できるカラーエディタみたいなものを置いていました。

またサイトを課題提出に使うだけではもったいないので、何か世の中の役に立つものをつくろうと思い、「風の谷のナウシカ」の用語集を作りました。後述する事故でデータは無くしてしまったんですが、今の星界辞典と似たような感じです。yukkun20は英語版コミックスを持っていたので、後期にはそれも辞典に組み込み、和英辞典の要素も持たせていました。

第1期(OCNサーバー時代)

  • 2000年10月10日

サイト作りの面白さにはまってしまったyukkun20は、大学とは関係なくサイトを開設することにしました。今とは名前もデザインもコンテンツも全く異なりますが、この日を当サイトの設立日としました。当サイトのアクセス数は、この時からきちんと引き継いでいるはずです(第0期サイトにもカウンターはありましたが、そっちは引き継いでいません)。

この時は,実家のネット回線を提供していたOCNが、ウェブサイトのためのサーバースペースも無料で提供してくれていたので、それを利用することにしました。また生意気にも、トクトク(無料でウェブサイト用のサーバーを提供するサービス)にミラーサイトを置いていました。当時のミラーサイトは、バックアップと言うより、アクセスを分散させてサーバーが落ちないようにする意味が強かったので、どんだけ自己評価高かったんだよって感じです。しかしこれがわりと近年まで稼働していたおかげで、昔のサイトの情報もインターネットアーカイブで見つけ出せたので、人生何がいい結果になるかわからないものです。

当時から掲示板サービスを流用したようなサービスを使って日記をつけていましたが、今のように毎日更新ではなく、不定期更新でした。その他のメインコンテンツは、日常生活のトリビアと、缶紅茶のレビュー、それに第0期から引き継いだナウシカ用語集でした。

第2期(COOLサーバー時代・旧デザイン)

  • 2001年7月1日

理由はよく覚えていないのですが(おそらく,実家がOCNとの契約を切ったため)、サーバーを移転することにしました。当時は、無料でサーバーを提供する代わりに、ポップアップ広告(この用語も以下略)が出るサービスが一般的でしたが(第1期サイトもそうでした)、yukkun20はポップアップがいやだったので、コミュニケーションオンラインが提供していた「COOL ONLINE」というサービスを利用することにしました(※初期は無料版を利用しており、サイトの上下に広告が出る仕様でしたが、最終的には広告の出ない有料版に移行したような記憶があります)。COOL ONLINEは、当時ありがちだった「http://www.サーバー名.ne.jp/~ユーザー名」ではなく、「http://www.ユーザー名.cool.ne.jp」だったのもかっこよかった。yukkun20というHNを使い始めたのもこの頃だと思います。

このとき、少し真面目にウェブデザインの本を読み、サイトのテーマカラーを今も使用している黄色#ffcc00に決めて(今は水色#99ccffもテーマカラーにしていますが、当時は使ってませんでした)、デザインも大きく変更しました。またサイト名もほぼ今と同じになりました。サイトは左半分が真っ白背景にサイトロゴ、右半分がコンテンツと結構とがったデザインでした。

この移転を機に、今もしている「日記を毎日更新するスタイル」に移行しています。しかしなぜかナウシカ用語集は引き継ぎませんでした。

  • 2003年10月10日

サイト開設3周年という記念すべき日に、パソコンがクラッシュし、それまでのデータの大部分が失われてしまいました(バックアップ取ってなかったのかって?そういう時代じゃなかったんだよ!)。幸いサイトのデータはオンライン上にあったのですが、第0~1期サイトのデータの大半はオンラインに上げてなかったので、すべて失ってしまいました。大分サルベージ頑張ったんだけどね…(当時は日本語で名前の付けられたフォルダやファイルをサルベージするのが非常に難しかったのです。なのでそれから10年くらい、yukkun20はPCのファイルはすべて英語で名前を付けてました)

※ただしインターネットアーカイブには当時のデータが残されています。死ぬほど恥ずかしい内容なのでリンクは張りませんから!

yukkun20は(そして世間全体も)今ほどネットに依存していませんでしたし、ちょうど司法試験で忙しい時期でもあったので、ネット環境が無いまま3ヶ月過ごしました。なお試験には落ちたorz

第2.5期(COOLサーバー時代・新デザイン)

  • 2004年1月9日

年始に会った友人から、「最近サイト更新してないから死んだかと思った」と言われたのを機にサイトの更新を再開。このときサイトのデザインも大きく変更し、今のように右にサイドバーがあり、左にメインコンテンツがあるという構成にしました。今から考えると結構時代を先取りしている感がありますね。

缶紅茶評論はネタ切れ気味だったので、新しい試みとして、最近読んだおすすめの本を紹介することにしました。ちなみに第1回は森岡浩之先生の『月と闇の戦記三 神様はしらんぷり』でした。今思えば、これがレビューサイトとしての第一歩だったと思います。

  • 2004年4月8日

「ふしぎの海のナディア」の再放送をきっかけにその感想を書き始めました(後にまとめなおして、「ナディアな人々」として独立させました)。

  • 2004年8月2日

実家に帰るとネット回線の工事中でネットが使えなくなってしまったので(Wi-Fi?そんなものがこの時代にあるわけないのよ)、暇に飽かせて「星界」の用語辞典を作成し、ネット復旧後に「帝国星界軍案内所”銀河の星”」として公開しました。当時はナディアの用語集も並行して作っていたのですが、星界辞典の方が作っていて楽しかったので、以後ナディア用語集は更新を凍結してます(現在まで)。

当時はまだWikiも一般的では無かったので、HTMLで用語集を作成したのですが、そのせいで、サイトをブログ化してからも、今に至るまで抜本的な改装は出来ていません。多分今後もこのまま。

この時点で、現在のサイトに繋がる基本コンテンツ(日記+レビュー+星界+ナディア」が一応完成したと言えるでしょう。

  • 2004年8月12日

人に見せられるコンテンツが整ったので、サーチエンジン(サーパラと言えば分かる人には分かるはず)に初めて登録。同時にサイトバナーも作りました。9月28日にバナー・ナディアVer.、10月10日にバナー・サモナイVer.も追加。

  • 2008年4月26日

「サモンナイト」(DS版)をプレイし、初めてゲームのプレイ日記を公開しました。

  • 2008年12月22日

現在まで続けている「年間ゲームレビュー」を開始しました。当時から★5つで評価していたんですが、TOV(Xbox版)に★10個を付ける暴挙をかましてます。1年目にやるなよ。

第3期(ブログ時代)

  • 2011年5月3日

COOL ONLINEのサービス終了に伴い、ExpressWebに移転。同時にサイトをブログ化しました。yukkun20のサイト構築知識はHTMLで止まっているのに、ブログのテンプレを使わず、一からデザインするという無謀とも思えるチャレンジをしましたが、どうにか成功しました。現行のサイトデザインはこのときに出来たものです。

第2期サイトは「星界マスターガイドブック」に参考サイトとしてアドレスを載せていただいていたので、アドレスが変わったのは本当悲しかったです。このときの悲劇を教訓に、独自ドメインを取得し、サイトのアドレスがwww.yukkun20.comになりました。第2期サイトは2012年5月20日に消滅しています。

  • 2013年7月18日

ややサイトのコンテンツに閉塞感を感じていたので、新しい企画として、「榊ガンパレ」の年表を公開。これは自分が個人的に作っていたものだったんですが、どうせなら人の目に触れるところに置こうと思い立って始めたものです。まさか7年経っても半分くらいしか完成してないとは当時は思いもしませんでしたけど。

  • 2014年11月23日

Expresswebさんの転送量の上限(30GB/月)に引っかかるようになり、月末になるとサイトが閲覧できないことが増えてきたので、サーバーをファイアバード(現スターサーバー)に移転しました。転送量が10倍になり、それ以降安定しています(今でもこのサーバーを使っています)。

  • 2017年4月26日

PC以外の端末でサイトを訪問する方が多くなったため、サイト全体をレンスポンシブデザインに修正しました。と言ってもこのあたりになるともはや手探りではどうにもならなくなっているので、よそ様の作成したプラグインを使わせていただいてます。

  • 2019年11月

サイト管理用のツイッターアカウント(@yukkun20_yas)を開設し、サイトの更新情報などをつぶやくようにしました。と言っても毎日つぶやくのではなく、自分がそれなりにうまく書けた。あるいは他の人の役に立ちそうだ、と思った記事だけをつぶやくようにしています。

第4期(SSL時代)

  • 2020年1月11日

サイトをSSL化。これも全然知識が無い中手探りでスタートし、途中でサイトが吹っ飛ぶという憂き目に遭ったものの、なんとか回復できました。昔とは違ってバックアップが充実したいい時代になりましたね。

 

こうして見ると、起伏の少ないと思っていたうちのサイトにも、それなりの歴史があるものです。ともあれ始めた頃は、yukkun20は基本的に飽き性なので、まさか20年も続けられるとは夢にも思っていませんでした。この先いつまで続けられるかは分かりませんが、できる限り更新を続けていこうと思いますので、今後ともよろしくお願いいたします。


2020-08-15

Newpost Catchのアプデで表示が崩れてしまった場合の修正(自分用備忘録)

うちのサイトの一番上で、最新の記事を表示するのに使用しているプラグイン「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ページの「新着情報」のデザインが崩れているのにも気付いてますし、原因もほぼ究明できてるんですけど、修正は明日以降になります。


2020-05-17

Wonder Gallery(旧WonderPlugin Gallery)を手動でアップデートする方法

うちのサイトではカルーセルギャラリーを表示するため、プラグイン「Wonder Gallery」(旧WonderPlugin Gallery)の無料版を導入しています。カルーセルギャラリーっていうのは↓で使っているような、画像をスライド式に見せるやつのことです。

プラグインの公式サイトはこちら。

このプラグインには有料版と無料版があり、無料版はWordpressの機能を使ったアップデートが出来ません。しかし、手動でアップデートする方法があります。これは公式サイトのFAQに情報があるのですが、日本語での情報が見当たらなかったので、備忘のためにこちらで説明しておきます。

ちなみにFAQは↑ですが、以下の説明はその内容を直訳しているわけではないのでご注意ください。

これまでに作成したギャラリーを保存したままプラグインを更新する方法

更新する方法は2つありますが、ここで取り上げるのはスタンダードな1つめの方法です。(2つめの方法については原文に当たってください)

1.ギャラリーを保存する設定にしておく

Data option : Keep data when deleting the plugin

「ダッシュボード > (プラグイン名) > Settings」に行き、「Data option : Keep data when deleting the plugin」(データオプション:プラグインを消去してもデータを保存する)にチェックが入っていることを確認します。デフォルトではチェックが入っているはずです。ただし、バージョンがかなり古いとこのオプションがない場合があります。その場合は2つめの方法を使ってください(yukkun20は7.2でしたがオプションはありました)。

2.使用中のプラグインを停止して削除する

「ダッシュボード > プラグイン > インストール済みプラグイン」に行き、使用中プラグインを停止して削除します。削除する際に、「本当に WonderPlugin Gallery とそのデータを削除してもよいですか ?」という警告が出ますが、無視して「はい」を選択して大丈夫です。

3.最新のプラグインをインストールして有効化する

公式サイトの「Download Free Trial Version x.x」から最新のプラグインをダウンロードします(zipファイルですが解凍しないように)。
「ダッシュボード > プラグイン > 新規追加 > プラグインのアップロード」から先ほどのzipファイルをアップロードし、プラグインを有効化します。

4.Wordpressのキャッシュを削除する

キャッシュ系のプラグイン(Autoptimize, W3 Total Cache, WP Rocket, WP Fastest Cache, WP Super Cacheなど)を入れている場合はプラグインのキャッシュを削除します。

これで完成です。特に何もしなくても、新しいプラグインで以前作ったギャラリーをそのまま引き継げますし、ギャラリーを表示していたページも修正する必要はありません。ちなみにいつかのアプデでプラグインの名称が変わっていますが、その変更をまたいでいる場合(yukkun20の場合は7.2→13.1)でも問題なくアップデートできました。


2020-04-25

《一応解決?》firefoxのブックマークのファビコンがWordPressデフォルトの画像になってしまった場合の対処法

※今日の記事はWordpressのトラブルシューティングになっていますが冗長です。解決方法自体の結論は3項をご覧ください。→こちら

1.トラブル

数日前から、サイトのファビコン(ブラウザのブックマークやタブなどに表示されるアイコンのこと。うちの場合ナディアのドット絵です)がうまく作動しなくなってしまいました。

yukkun20の環境(Windows10+firefox)の場合、タブには正常に表示されるのですが、ブックマークにはWordpressのデフォルト画像(○にW。右の画像参照)が表示されてしまいます。(もっとも、職場のfirefoxでは普通に表示されてるんだよなぁ…)


2.試行錯誤

これまではヘッダーのソースに直接記載する方法でファビコンを指定していたのですが、Wordpressのダッシュボードから、「外観>CSS編集>サイト基本情報>サイトアイコン」で指定してみました。

その上でファビコンキャッシュを削除する(方法は↑)と一時的に正常に戻るのですが、またすぐデフォルトに戻ってしまいます。

Twitterで上のような情報を見つけました。確かにアプデのタイミングと問題が発生したタイミングは近い気がします。しかしうちのサイトは元からファビコンを設定していたので、これが原因ではないように思います。

さらに探ると、次のような情報が見つかりました。

まっさらな環境にインストールした直後、そこには/favicon.icoファイルはない。その状態でブラウザで何らかのページにアクセスすると、/favicon.icoのリクエストが発生し、青いWordPressロゴファイルへリダイレクトされ、それが表示されるという流れのようだ。5.4以降で/favicon.icoファイルがない場合は、こうなることは心にとめておけばよいだろう。

なおこの仕組みは、サイトに/favicon.icoがあったり、管理画面で「サイトアイコン」を設定している場合は、/favicon.icoのリクエストが発生しないため影響を受けることはない。

※上記サイトより引用

このサイトでも、ファビコンを設定していればリダイレクトは生じないとあるのですが…

ただこれを読んでいるうちに、ファビコンを置く場所が昔は決まっていたのを思い出しました。確かルートフォルダにfavicon.icoを置いておけば、古いブラウザなら自動的にファビコンとして読み込んでくれるんですよね。Y.A.S.のファビコンはテーマフォルダに入れていたのですが、ルートフォルダにも置いてみることにしました。さらにソースでルートフォルダに置いたアイコンをファビコンとして呼び出してやると…

直ったどー!(もしかするとまたすぐ戻るかも知れませんが)

というわけで結論です。

3.結論(ただし暫定的なもの)

サイト管理者向け
  1. ファビコンをルートフォルダ(Wordpressをサブフォルダに入れている場合も、当該サブフォルダではなくルートフォルダ)に置く
  2. ヘッダーに<link rel=”shortcut icon” href=”サイトドメイン/favicon.ico” />と記載する(サイトドメインは適宜置換してください)

 


2020-01-18

TablePress Extension: DataTables FixedColumnsで固定した列の表示がずれる場合の対策(未完)

テイフェスの出演者リストなんですけど、近年は表が大きくなりすぎていて、きれいに表示するのが大変です。

特に出演者は通算で100人を超えています。あの表は、Wordpressのプラグイン「TablePress」で作成し、かつ見出し列(キャスト名および登場作品の列のこと)を固定してスクロールさせるために「TablePress Extension: DataTables FixedColumns」も入れています。

ただ、行が100を超えるあたりから、見出し列だけ上下にスクロールしてしまい、表示がずれるという問題が出ていました。

こんな感じになります。

対応策が分からず長期間放置していたのですが、最終的に追加cssで、

div.DTFC_LeftBodyLiner {
overflow:hidden !important;
}

としてやれば、ずれることはなくなりました(ただし最終行の表示がちょっとおかしくなるので、そのあたりは今後の課題ですが…)。このコードは、見出し列だけが独立してスクロールしないようにするためのものです。

これでほぼ良くなりました。

あとはスマホで閲覧した時に表が表の機能を成してないので、それをどうにかしないとな…


2020-01-11

スターサーバー(旧ファイアバード)の常時SSL化手順

当サイトのSSL化がほぼ終わりました。正月からかなり時間がかかりましたが、どのような手順で行ったのかを備忘のために残しておこうと思います。

バックアップを取る

SSL化を始める前に、万が一に備えてバックアップを取っておきましょう。普段使っている方法でいいと思います。
yukkun20は普段からUpdraftPlusを使っているので、それでバックアップしました。

使い方についてはこちらのサイトが参考になりました。

スターサーバーで無料常時SSL化

ネームサーバーをスタードメインに変更

独自ドメインのサイトを運営している場合、ネームサーバーをスタードメインに移す必要があります。

yukkun20が使用しているドメイン”yukkun20.com”はもともとファイアバード(現スターサーバー)で取得したものだったので、ネームサーバーの変更は不要でした(勘違いして、旧ファイアバードからスターサーバーに変更したせいでサイトが落ちた)。スターサーバー、旧ミニバード、旧ファイアバード、旧クローバーの場合はなにもしなくていいと思います。

独自SSL設定

 

スターサーバーの場合、ボタンを一つクリックするだけなので楽勝です。ただし反映されるまで1時間程度待つ必要があります。いい時間になったら、新しいサイト「https://www.○○.○○」にアクセスしてみましょう。サイトに接続できたらOK。

ただし、Wordpressをサブディレクトリで展開している(サイトのホームページとWPのインストールディレクトリが異なる)場合は、サブディレクトリ(インストールディレクトリ)にアクセスする必要があります(サイトの404ページが表示されることもありますが別にOK)。

※例:うちのサイトの場合、ホームページはwww.yukkun20.comですが、WPのインストールディレクトリはwww.yukkun20.com/wp/です。この場合、https://www.yukkun20.com/wp/にアクセスします。

リダイレクト設定

旧サイトにアクセスした場合も、自動的に新サイトに飛ばされるようにします。スターサーバーの場合は、.htaccessを書き換えるのがいいようです。

  • サーバー管理ツールから、「FTPアカウント設定」 > 「(該当ドメイン)選択」 > 「WebFTPログイン」にアクセス
  • .htaccess(↓)を探します

  • 左端のアイコンをクリックし、.htaccessをダウンロードしておきます(何かあった時のバックアップ用)
  • 左から2番目のアイコンをクリックして編集します
    # END WordPress の直下に、以下の通り記載します。

RewriteEngine On

RewriteCond %{HTTPS} !on

RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

  • 旧サイトのどこかのページ(http://~)にアクセスしたら、新サイトの対応するページ(https://~)にきちんと飛ばされることを確認します。

WordPressの設定を変更する

  • サイトのダッシュボード > 「設定」 > 「一般」の「WordPress アドレス (URL)」と「サイトアドレス (URL)」をどちらもhttp://からhttps://に変更します。
  • 旧サイトのトップページにアクセスしたら新サイトのトップページに転送されることを確認

内部リンクを書き換える

これまでWordpress内に貼った内部リンクの宛先を切り替えます。もちろん手作業でやってもいいのですが、時間がかかりすぎますので、いくつかの方法を併用することで手間を大幅に省略することが出来ます。

WordPress内

本文中のデータやカスタムフィールドのデータは、Wordpressのプラグイン「Search Regex」で一括して変換することが出来ます。

Search patternとReplace patternにこんな感じで入力すればOK。はじめに「Replace ≫」をクリックして、変換箇所のプレビューをしておきましょう。ただし、変換箇所が多くなるとエラーが出て失敗します(変換箇所が何カ所あるかは「Search ≫」をクリックすれば分かります)。yukkun20の場合、変換箇所が34000ほどあったので失敗しました。

その場合、「サーバー管理ツール」にアクセスし、「PHP環境設定」 > 「(該当ドメイン)選択」 > 「php.inin設定変更」 > 「その他の設定」 >「 memory_limit」 の数値を変更するとうまくいくようです。yukkun20も2000Mにしたらうまくいきました。

また、アフィリエイトリンクなど、外部の画像を読み込んでいる場合、修正が必要です。ここ2年くらいのアフィリエイトリンクはSSL対応していますが、それ以前のは非対応なので…。yukkun20の場合、Amazon関係の修正が必要でした。

Search pattern Replace pattern
http://ecx.images-amazon.com https://images-fe.ssl-images-amazon.com
http://ecx-z.images-amazon.com
http://ws-fe.amazon-adsystem.com https://ws-fe.amazon-adsystem.com
http://ir-jp.amazon-adsystem.com https://ir-jp.amazon-adsystem.com
http://www.assoc-amazon.jp https://www.assoc-amazon.jp
http://ws.assoc-amazon.jp/ https://ws-fe.amazon-adsystem.com/

その他のリンクの修正方法についてはこちらが詳しかったです。

関係ありそうな部分をどんどん置換していきます。

HTMLページ

プラグインが使えないので、フリーソフト「複数のHTML&テキストファイルを一括置換 TextSS.net」で一括変換。

「検索する文字列」を「http://www.○○.○○」、「置換する文字列」を「https://www.○○.○○」として実行します。


ここまでで、無事SSL化がすんでいればいいのですが…

だめだったorz

その他

残っている非SSL化リンクを手作業で修正していきます。yukkun20の場合は主にこんな感じでした。

  • ダッシュボード > 「リンク」 > 「すべてのリンク」 > 「リンクの編集」
    リンクにローカルの画像を絶対パスで使用している場合、https://に変更します。
  • TablePressで作成したテーブル内の内部リンク
    https://に変更します。

完成

これでほぼ全てのページがSSL化されているはずです。ただし、ニコ動を埋め込んでいると、そのサムネイル画像がSSL対応していないのでそのページのみ混在コンテンツの警告が出ます。。正直ニコニコ動画の仕様の問題だと思うので、当面は諦めます。というわけで、SSL化完了!