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.このプラグインのメリットについて

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

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


2016-04-14

Jetpackの日本語化ができない場合&専用のコメント投稿フォームに変更されない場合の対処法

プラグイン「Jetpack by WordPress.com」を導入しました。

1.と2.はサイト管理者向け、3.はこのサイトの利用者向けの情報になっています。

1.日本語化について

既にAkismetを入れている等、Wordpress.comのアカウントを持っている場合、それをJetpackにも使用することができます。

Jetpackを日本語で使うためには、wordpress.comに既存のアカウントでログインし、

管理画面の言語変更「プロフィール、個人設定などを更新」(左上のアイコン)
 ↓
「アカウント設定」
 ↓
「管理画面の言語」を「ja – 日本語」に変更し、「アカウントの設定を保存」をクリックします。

それから自分のサイトのダッシュボードにアクセスし、「更新」の最下段にある「翻訳の更新」をクリックすると、

Jetpack日本語化

こんな感じで日本語化されます。

 

2.コメント投稿フォームの変更について

Jetpackの機能の一つに、コメントの投稿フォームを変更する、その名も「コメント」という機能があります。

もし、Jetpackで「コメント」を有効化したにもかかわらず、コメント投稿欄が変更されない場合、comments.phpの設定を変更する必要があります。

ダッシュボードから「外観」→「テーマの編集」→「comments.php」にアクセスします(一応メモ帳などにバックアップを取っておきましょう)。

おそらく<form></form>で囲まれた部分があると思いますので、それを削除し、

<?php comment_form(); ?>

に置き換えてください。これで変更できると思います。

 

3.コメントの投稿について

今回これを導入したことで、皆様からいただくコメントの投稿フォームが変更されました。

コメント

こんな感じで、wordpress.com、twitter、facebook、google+のアカウントでログインしてコメントできるようになっています。アイコンもご自身で設定しているものが反映されるはずですので、ぜひご利用ください。


2016-01-04

サイト更新 トップページ最上部に「新着記事」を表示しました

長期休暇ということで、サイトをいじっていました。といっても作業は1日で終わりましたが。今回の大きな変更点は2つです。

更新情報の改訂

見ての通り、トップページの最上部に表示していた更新情報を、画像付きのものに変更しました。それに伴い、サイドバーに表示していた「最新のエントリ」は削除しています。

YAS 更新情報

プラグイン「Newpost Catch」を使わせてもらっています。作者様のサイトで、詳しい使い方が掲載されています。

Newpost Catch | 今村だけがよくわかるブログ
【いろんなところにサムネイル付き最新記事を表示できます】WordPressプラグイン「Newpost Catch」の新機能「ショートコード」の使い方 | 今村だけがよくわかるブログ

そのままだとサイトの雰囲気に合わないので、こちらのサイトの参考にカスタマイズを行いました。

コンテンツとしての画像付き記事一覧を作れるNewpost Catch | WordPressブログ作ってみる?

さらに、画像の横にタイトルと日付を並べるのではなく、画像の上にタイトルと日付を載せています。

CSS3で画像をおしゃれに演出 | Think IT(シンクイット)

最終的に作成したコードはこんな感じ。

テーマの編集 > index.php

<div class="update-header">新着情報</div>
<div class="update">
<?php echo do_shortcode( '[npc posts_per_page="10" width="200" height="200" id="new-post" date=1]' ); ?>
</div>

テーマの編集 > style.css

/**Newpost-Catchを横並びにする**/
#new-post ul{
}

#new-post ul li {
float: left;
margin-right: 5px;
padding: 2px;
}

#new-post li {
display: inline-block;
overflow: hidden;
clear: both;
margin:15px 0px 0px 10px;
list-style: none;
vertical-align: top;
border-style:solid; /*各投稿ごとに白線で囲む*/
border-color:white;
border-width:5px;
position: relative; /*画像に文字を載せるための基準位置とする*/
}

#new-post img{
/*サムネイルのスタイル*/
float:left;
padding:0px;
margin:5px;
border-radius: 0px;
box-shadow: none;
}

#new-post .title {
/*記事タイトルのスタイル*/
width: 190px; /*画像幅-サムネイルのpadding*/
float: left;
margin:5px;
padding: 5px;
font-size:83.3%;
position: absolute; /*画像に文字を載せるための位置指定*/
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6); /*文字の背景を半透明にする*/
color:#fff;
}

#new-post .date {
/*記事日付のスタイル*/
padding-left: 100px;
font-size:120%;
color:#fff;
font-family:inherit;
font-weight:normal;
background-color:inherit;
}

#new-post a:link { /*サイトの他のリンクとデザインを変更しているため追加*/
color: inherit;
border:none;
}

#new-post a:hover {
background-color: transparent;
color: inherit;
border:none;
}

ブログカテゴリの整理

2年前まで、ゲームや小説に関するニュースも全て「レビュー」のカテゴリに入れていたのですが、正確さを期すため「最新情報」のカテゴリに全て移動しました(多少抜けや漏れがある可能性はありますが)。あとお気づきかもしれませんが、投稿のタイトルが【○○○】で始まるものは、全てレビューです。


2015-01-09

WordPressで「現在メンテナンス中のため、しばらくの間ご利用いただけません。」という表示が消えなくなってしまった時の対処法

うっかりやらかしてしまったので備忘のために記事にしておきます。

WordPressの管理画面で本体やプラグインなどの更新をする場合、更新作業中のサイトは「メンテナンスモード」になり、アクセスすると「現在メンテナンス中のため、しばらくの間ご利用いただけません。」というテキストが表示されます。

更新作業が終われば元の状態に戻るのですが、更新作業中に、更新の進捗状況が表示されているページ(↓)を閉じてしまうと、更新作業自体は正常に続けられますが、更新が終わっても先ほどのテキストが残ったままになってしまいます。

maintenance2

この場合の対処法ですが、まずFTPでWordpressのルートフォルダ(↓)にアクセスし、そこにある「.maintenance」というファイルを削除すると元に戻ります。

maintenance

ちょっと冷や汗が流れましたけど、あっさり解決して良かったです。皆様もご注意ください。


2014-05-25

しばらくサイトが落ちていて申し訳ないです

うちのウェブサイトはExpressWebというレンタルサーバーをお借りしています。

高機能・激安 Windows レンタルサーバー ExpressWeb / 高機能・激安 Windows レンタルサーバー ExpressWeb

30GBのディスクスペースで月250円。これはかなりの安値です。3年ほど使っていますけど、その間致命的な事故もなく、サーバーが落ちてしまったことも(確か)なく、非常に安定しています。ディスクスペースも、この程度のブログを運営するなら10GBもあれば余裕なので、特に問題ありません。

ただ転送量制限が30GB/月なんですよね…今日日1ヶ月30GBのレンタルサーバーなんてほとんどないです。大概10GB/日くらい。文字通り桁が違います。うちのサイト初期は15GB/月くらいだったので全然気にしていなかったのですが、最近なぜか転送量がうなぎ登りになり、ここ数ヶ月29~30日頃には転送量の上限に達してしまうことが増えました。最近月末になるとサイトが落ちていることがあったのはそのためです。

趣味のサイトなので別にいいといえばいいんですが、あいにく事務所のサイトも同じサーバーに置いているので、そちらが落ちてしまうのはまずい…しかも今月はまたも転送量が異常に多く、25日頃に上限に達してしまいました。

もちろんExpressWebでは転送量の上限を増やせますが、30GB/月増やすのに1ヶ月300円必要です。300円くらい払えよ!と思うかもしれませんけど、基本料金とあわせれば550円。550円出せば普通に転送量を気にしなくてもいいサーバへ旅立てます。そんなわけでいろいろ躊躇していたんですが、このままだと月末に開催されるTOF2014のレポートが上げられないということに気づき、急遽お金を払いました。

しかし一頃言いたいことが。レンタル前の公式サイトの情報では、

転送量画像はhttp://www.datajapan.ne.jp/expressweb/price/より引用

といかにも1ヶ月単位で追加出来るような書き方してるくせに、実際には3ヶ月単位でしか購入出来ないとかおかしくないですか?まぁサポートにメールしておきましたけど。

とりあえず4月に1年間契約を更新してしまったので、あと1年間はこちらでがんばろうと思います。

もし移転するなら、月額500円、容量100GB、転送量300GB/月のファイアバードかなぁ。とりあえずこちらのサイト様が参考になりました。


2014-01-31

サイト閲覧障害のお詫び

1/31の午前9時~2/1の午後1時頃まで、当サイトが閲覧出来ない状態になっていました。
サイトの更新を楽しみにして下さっていた方(…がいるかどうかはともかくとして)にはご迷惑をおかけしました。

で原因なんですけど、僕が使用しているレンタルサーバ(ExpressWeb)の転送量上限に引っかかってしまったようです。上限は30GB。こんな弱小サイトで超えるわけないだろと高をくくっていたんですが、昨年末から「上限が近づいています」というメールが月末になると来るように…

それでも先月まではなんとかクリアしていたんですが(29GBを超えたこともあってギリギリだったのですが)、今月は先月よりアクセスが増えたことと、大の月だったことから30日に上限突破してしまいました…

しかしさすがに1日のために転送量を引き上げる気にはならず…そのまま放置したせいで、サイトが停止されてしまったようです。しかし昨年の夏は、アクセス数が今の倍あったけど全然問題なかったんだよな…かといって最近画像を増やしているわけでもないし…謎だ。

とりあえずサーバの引越も視野に入れつつ今後の対策を考えます。この度は本当に申し訳ありません。

PQやらTOF2014の情報やらの更新は明日以降に…


2013-07-24

Excelで作成した表をWordPressで使用する

最近始めた榊ガンパレの年表ですが、表が非常にでかく情報量も多いため、ひとまずExcelで作成し、それをHTMLに変換してWordpressで使用するという形を取っています。

Excelには元々、表をHTMLに変換する機能が備わっていますが、かなり使い勝手が悪いため、こちらのサイトを参考にさせていただき、プラグインで処理しています。結構見た目きれいでしょ?

参考サイト:Excelで作成した表組みをWordPressに取り込む | よもやま雑記帳

いくつか自分に合うように修正を加えている部分もあるので、そのことを備忘のために記載しておきます。

  • Excelアドインのセットアップについて(Vistaの場合)

上記サイトではXPが例に挙げられていますが、Vistaの場合やや仕様が異なります。
ダウンロードしてきたプラグインを解凍したら、フォルダごと適当な場所に保存しましょう。別にどこでもいいのですが、どうやらデフォルトの保存場所は

C:Users[UserName]AppDataRoamingMicrosoftAddIns

のようなのでそこに放り込んでおくと管理しやすいでしょう。

  • アドインの有効化について

Excel2007の場合です。

手順1まず左上のメニューから、「Excelのオプション>アドイン>設定」と選択します。

次に「参照」を選ぶと、先ほど保存したAddInsフォルダが開くので、先ほど保存したアドイン「XLS2HTMLTable.xla」を探してダブルクリックします。

手順2すると先ほどの画面に戻り、「有効なアドイン」に「Xls2Htmltable」という表示が増えているので、チェックボックスにチェックを入れ、「OK」をクリックします。これでアドインが有効になりました。

※アドインが有効な間、アドインのフォルダを移動させたり削除したりする事は出来ません。アドインが邪魔になった場合は、まず先ほどのチェックボックスからチェックを外し、アドインを無効化しましょう。

  • 表の作成について

アドインの仕様上、「(垂直方向の)セル内の配置」(上寄せ、下寄せなど)、「フォントの装飾」「フォントの大きさ」などは反映されません(セル内の配置は垂直方向は中央寄せがデフォルト)。

解決する方法は幾つかあると思いますが、僕はこうしています(HTML的に正しいかどうかは僕にはわかりません。あくまで見た目と手間を重視しています)。

    • tableタグとtrタグの間にtbodyタグを挟み、そこでセル内の配置についてのスタイルを指定する。例:上寄せにするのであれば、
<tbody style="vertical-align: top;">
    • フォントサイズについては、tableタグで直接指定する。例:全体を8ptのフォントにするのであれば
<table class="excel" style="width: 100%; font-size: 8pt;" border="0">
    • フォントの装飾については、Excelのセル内に直接装飾するタグを記入するのがよいでしょう。例:赤色で強調文字にしたい場合は、Excelのセル内の文字を直接装飾するのではなく、以下のように直接タグをセル内に記載しておきます。
<span style="color: #ff0000;"><strong>文字</strong></span>
    • アドインが吐いたHTMLソースを貼り付ける際に、tableタグから下の部分を貼り付けるのではなく、trタグから下の部分を貼り付けるようにすれば、表を更新してもtableタグ、tbodyタグはそのまま残るので、いちいち更新の度にソースをいじる必要はなくなります。

こんなところでしょうか。ご参考までに。