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化完了!


2019-12-12

左メニューにツイートタイムラインを表示するようにしました

タイトルで全てなんですけど、左メニューの最下部に、ツイートタイムラインを表示するようにしました。最下部に置いていることからわかるとおり、単なるお飾りです。

JetPackを導入している場合は設置は簡単で、「外観 > ウィジェット > Twitterタイムライン(Jetpack)」を設定するだけです。yukkun20の場合はレイアウトオプションとして、ヘッダーとスクロールバーを消去しています。オプションで、リンクの文字色も変更できるはずなのですが、なぜかそこだけ変更がきかないんですよね。ボーダーカラーはきちんと反映されるのですが。

ただツイッターはかなりの時間泥棒になりそうなので、節度を持って使っていこうと想います。でも自分が始めたことで、みんながツイッターにはまる気持ちが少し分かったような気がします。自分は承認欲求が薄いタイプだと想ってましたが、やっぱり誰でも持ってるものなんですね。


2019-12-05

「Duplicate Post」で複製した投稿を「WP to Twitter」でツイートする際に気をつけるべきこと

※今日の記事はWordpressのトラブルシューティングになっていますが,解決方法を示すだけでなく,そこにたどり着くまでにyukkun20がたどった思考過程自体を記事にしています。なぜかというと,このトラブルを解決する直接的な方法は見つけられなかったのですが,いろんな人の書いた「似たようなトラブルを解決するまでの思考過程」自体が大変参考になったからです。自分の記事もそうなるといいなと思って書いてます。なので冗長です。解決方法自体の結論は2項をご覧ください。→こちら

1.トラブル

当サイトも先日ようやくTwitterとの連携を開始しました。もともとはPS4のスクショを流すために開設したアカウントなのですが,せっかくなのでサイトの更新情報も流すことにしました。そのためにプラグイン「WP to Twitter」(以下「WT」)を導入しています。

このプラグインで,記事を作成した際には,Twitterでも自動的にそのことがつぶやかれます。似たようなプラグインはいくつかありますが,このプラグインの優れている点は,記事に設定したタグを,ツイッター上ではハッシュタグに自動的に変換してくれるという点です。この記事だと,「Wordpress」「WPtoTwitter」「DuplicatePost」というタグが設定されていますが,この記事の更新ツイートでは,「#Wordpress」「#WPtoTwitter」「#DuplicatePost」というハッシュタグが付いているはずです。


これとは別にyukkun20が元から導入しているプラグイン「Duplicate Post」(以下「DP」)というのがあります。これは,既にある投稿や個別ページを複製できるプラグインです。カテゴリやタグ,本文等を新しい記事にそのまま引き継げるため,シリーズ化しているネタや,ほぼ同じ内容を繰り返すときに便利です。


ところが先日,DPで複製した個別ページを投稿したところ,Twitterの方に変なツイートが流されました。

  • 「A」という個別ページを投稿→「Aという記事が投稿された+Aへのリンクとツイッターカード」というツイート
  • 「A」をDPでコピーして「B」という個別ページを作成
  • 「B」を投稿→「Bという記事が投稿された+Aへのリンクとツイッターカード」というツイート

要するに,ツイートされた対象の個別ページとツイッターカードが一致しなくなりました。

この現象はどうやら既知の不具合のようで,その点を指摘しているブログもありました。

ですが解決策については載っていなかったため,自力でなんとかすることにしました。DP使わずに新規ページを作ればいいのですが,プレイ日記だとDPが使えることのメリットが大きすぎるからです。

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

解決策
「Duplicate Post 設定」の「複製しないカスタムフィールド」欄に,

_jd_wp_twitter,_wp_jd_twitter,_wpt_failed,_wpt_short_url

と入力する

以下の項でそこにたどり着くまでの詳しい経緯を説明します。あとこれがなぜ暫定的なのか,さらにどう改良するのが望ましいのか,そしてなぜそれをしないのかも説明します。

続きを読む(ネタバレ注意) »


2019-12-02

JetPack導入後、WordPressツールバーの「統計情報」が表示されなくなった場合の対処方法

WordPressのブログに管理者権限でアクセスすると、上部に黒いツールバーが表示されます。

かつプラグイン「JetPack」を導入していると、ツールバーの中央部分に統計情報が表示されます。

※↑の「SEO」の左隣に表示されている棒グラフのことです。

…が、これまでずっとこれが表示されずに困っていました。代わりに「統計情報」という文字だけが表示されます。ググってもあまり役立つ情報には当たらず、もう何年も諦めたまま放置していましたが、先日唐突に直りました。

はっきりしたことは不明なのですが、おそらくfunction.phpが悪さをしていたようです。

こちらのサイトによると、function.phpを保存する時は、文字コードをUTF-8ではなく、UTF-8Nにしないとダメなようです。今まで全く気付いていなかったんですが、先日別のプラグイン(UpdraftPlus)がエラーをはいているのを見て、原因を調べたらこれでした。

「外観 > テーマ編集」からは文字コードはいじれないので、一度function.phpをFTPでダウンロードし、文字コードをいじれるエディタ(yukkun20の場合はTeraPad)でUTF-8Nで保存し直し、再度FTP経由でアップロードすると、エラーも消え、統計情報も正しく表示されるようになりました。

もし同じお悩みの方がいらっしゃったら、試してみてください。


2018-12-08

WordPress 5.0のエディタを旧バージョンに戻す方法

WordPressのバージョンが5.0に上がり、エディタが大幅に変更されましたね。

2021年までは旧バージョンのサポートも継続されるようですが、いずれ移行しないといけないんでしょうね…。新しいシステムは結構特殊な文法で要素を表現しようとしているからちょっと取っつきにくいんです。

というわけでしばらく旧エディタを使い続けようと思います。使い方はアプデの際にも表示されたと思うんですが忘れてしまった場合に備えて改めて。

Classic Editorというプラグインを導入する

ことで解決出来ます。

とりあえず新ビジュアルエディタにCSSを適用させる方法が見つかり、ローカライズがなされるまでは旧バージョンを使い続けようと思います。さすがに3年後までには誰かがどうにかしてくれるでしょ(豪快に投げっぱなし


2018-03-20

Easy-Fancyboxのアプデで「Parse error: syntax error」のエラーが発生するようになった場合の解決手順(ネットオウル編)

更新をしようとしたらエラーが出て管理画面に入れない…。サイトは普通に閲覧できるのに、更新作業が出来ない状態です。

あれこれいじっているうちに、どうやら「Easy Fancybox」というプラグイン(リンクされている画像をクリックした時に、ポップアップで表示されるようにするためのもの)が元凶であることが分かりました。このプラグインを止めれば一応解決するはず。プラグインを止めるためには管理画面にあるプラグインのページから…

ってその管理画面に入れないんだっつーの!

仕方なくFTPソフトで直接プラグインを削除しようとしたのですが、なぜかFTPも弾かれてしまいます。パスワードが違うって表示が出るんだけど、パスワードなんてサイト開設して以来買えたことないし、FTPソフトの設定もいじってないからそんなことはあり得ないんだー!体調が悪く頭が回っていないのでどうにもこうにもならず、ここで一旦ダウン。

休んでからネットの海を巡回していると、ようやく解決策が見つかりました。

うちのサーバーはロリポップじゃなくてネットオウルなのですが、その場合「サーバー管理ツール > FTPアカウント設定 > (該当のドメイン名を「選択」 > WebFTP ログイン」で入れます。

そこから該当のプラグインのフォルダの名前を変更することで、管理画面に入れるようになりました。こうすると自動的に当該プラグインがエラーで停止するので、フォルダの名前を元に戻しても、管理画面に入れなくなることはありません。

ちなみにこのプラグインのエラーですが、PHPのバージョンが5.3の場合に発生しているようです。

ネットオウルの場合、「サーバー管理ツール > PHPバージョン設定」からバージョンを変更できますので、最新版に変更しておきましょう。

これで再び「Easy Fancybox」を有効化しても、問題が発生しなくなりました。

しかし体調が悪い時にこういうのが起こると本当精神に来ますね…。やっぱり健康大事。


2017-04-26

サイトの大体全部をレスポンシブデザインに変更しました

昨日に引き続き、当サイトで大きなテーブルを使用しているページ(主にプレイ日記とナディアの感想ページ)の修正を行いました。

ナディアのページはサイトの初期から存在しているだけあって、デザインがかなり不格好です。正直今回の修正も場当たり的な感じは否めないので、時間があればきちんとリニューアルしたいとは思っています。そもそもHTMLの表は横に横に見ていくものだから、第1回の感想の右隣に第21回の感想がある現状がおかしいんですけどね…

皆さんお気づきだと思いますが、僕はデザインセンスが皆無の人間なので、こういう作業は苦手です…。時々ウェブデザインの本やサイトを見て研究をしているつもりなのですが、一向にセンスが向上しませんね。何かもし良いアドバイスがあればお寄せください。マジで。


2017-04-25

サイトの一部をレスポンシブデザインに変更しました

うちのメインコンテンツの一つ「テイルズオブフェスティバル 歴代出演者リスト」なんですが(なぜか意外とアクセス多いです)、携帯などで見るとデザインが崩壊し、ほとんど役に立たないことが以前から気になってました。

あの表は、Wordpressのプラグイン「Tablepress」で作成しているのですが、このプラグインの拡張機能がいつの間にか充実していたので、今回それを導入し、レスポンシブデザインに対応させることにしました。

以下備忘のためにメモ。1はWebサイト管理者様向けの、2は当サイトの利用者様向けの情報です。

1.導入方法

今回導入した拡張機能(Extensions)は「Responsive Tables」(公式サイト)と「DataTables FixedColumns」(公式サイト)です。

前者は、表をレスポンシブデザインに対応させるためのもの、後者は表の特定の列を固定する(表をスクロールしても、常に表示されるようにする)ための拡張機能です。

1.ダウンロード

↑からダウンロードし(上の図は「DataTables FixedColumns」のものですが、どちらもほぼ同じ構成です)、解凍。FTPで[wp > wp-content > plugins]フォルダにアップロードします。

2.設定

拡張機能を適用するテーブルを設置したページの編集画面を開きます。

おそらく現時点では、テーブルのショートコードは

[table id=○○ /]

となっているはずですが、これを

[table id=○○ responsive=scroll responsive_breakpoint=all datatables_fixedcolumns_left_columns=2 /]

とします。

  • responsive=○○

○○には「flip」「scroll」「collapse」のいずれかを挿入します。それぞれ画面の幅よりも表の幅が大きくなった場合に、表をどのように表示するかを指定します。

具体的にどう見えるかは公式サイトをご覧ください。

  • responsive breakpoint=○○

○○には、「phone」「tablet」「desktop」「all」のいずれかを挿入します。画面の幅がどの大きさより小さい場合に、↑の方法での表示に切り替えるかを指定します。それぞれ「768ピクセル以下」「980ピクセル以下」「1200ピクセル以下」「常に」に対応しています。

  • datatables_fixedcolumns_left_columns=○○

○○には、0以上の数字を挿入します。最も左の列からいくつ目の列までを固定(常に表示する)かを指定します。

うちの場合ですと、「出演者名」と「作品/キャラ名」の2つの列を固定しているので、「2」と指定しています。

leftをrightに変えれば、右側の列を固定することもできます。

2.利用方法

これでタブレットやスマホなどで該当ページにアクセスすると、(タッチパネルであれば)スワイプすることで、表をスクロールできるようになっているはずです。

表の上部にある、「○件表示」で表示件数を少なくしたり、「検索」で探したいキャストや作品の名前を入力したりすることで、より見やすくなるのではないかと思います。

その他、どさくさに紛れて、これまで小さな画面では見づらかった(というより見られなかった)ページのいくつか(主にゲームプレイ日記)を修正しています。


2017-03-22

Master Sliderのカスタマイズについて

プラグイン「Master Slider」を導入しました。いまのところ設置ページはこちらだけですが…

[設置先]空の軌跡SC Evolution トロフィーコンプに向けて その5 | Y.A.S.

使用方法についての詳細な情報は以下のサイトを参考にさせてもらいました。

[参考サイト]サムネイル付スライダー「Master Slider」の使い方 | ビジネスサイト制作

導入する上で若干引っかかることがあったので備忘のためにメモ。1と2はWebサイト管理者様向けの、3は当サイトの利用者様向けの情報です。

1.「続きを読む」との相性について

WordPressでは、moreタグを挿入すると、当該投稿の個別ページへのリンクが貼られる仕様になっているのですが、僕はいちいち画面遷移するのが好きではないので、プラグイン「Expand More Link」を入れて、「続き」を折りたたむようにしています。

ただ、このプラグインと「Master Slider」の相性が悪いのか、moreタグのあとにスライダーを挿入すると動作が不安定になります。これはまだ解決策が見当たらないため、やむなくmoreタグを削除しました。

2.CSSによるカスタマイズについて

「Master Slider」には、各スライドの解説(”Slide info”)を表示する機能があります。(赤線で囲んだ部分)

この部分の背景色は、「SLIDER SETTINGS > Appearance > Background color」で設定できます。またフォントの装飾は「SLIDES > Slide info」で設定できます(previewでは反映されないことがあります)。

ただ、それ以上のCSSでの装飾が出来ないんですよね…。多分「SLIDER SETTINGS > Appearance > Slider custom class name and style」から設定できるんだと思うのですが、これも上手くいってません。せめてマージンをきちんと取りたかったので、別途CSSをインラインでぶち込むことで解決しました。力技過ぎて全然スマートではないので、どなたか使用方法をご存じでしたら教えていただきたいです。

CSSをぶち込む時はこちらを参考にしました。

[参考サイト]WordPressのカスタムフィールドを用いて個別ページにCSS・JavaScriptコードを組み込むカスタマイズ方法

ちなみに解説部分は、「div .ms-info」で定義できます。

3.このプラグインのメリットについて

レスポンシブな表示が可能なので、スマホ向けサイトでも見やすくなっているはずです。

上手く使えばゲームプレイ日記ももう少し読みやすく表示できるような気がしますが、デザインセンスがないのでまだなんとも。