*Y.A.S.*

これまでの、見出しを並べたタイプの目次をやめて、グリッドレイアウト（※）に変更しました。

※グリッドレイアウト…要素を格子状に並べたデザイン。割と最近のウェブサイトのトレンド。

これまでの目次（ゼノブレイド2のプレイ日記と同じデザイン）は手作業で作成し、更新の度に手作業で修正していたのです、これが結構面倒くさいというのと、プレイ日記の回数が増えるとどんどん縦に長くなって見づらくなるというのがその理由です。

またそのデザイン自体、TOZのプレイ日記を書くときに突貫で作成し、TOBで若干フラッシュアップして、ゼノブレ2でもほぼ流用していたので、きちんといろんなことを考えて作ったわけではないんですよ。ですのでデザインも別に気に入っているわけではありません。しかもスタイルシートばりばりでデザインしているんですけど、スタイルシートが効かないスマホとかで見るとデザインが崩れてめっちゃ見づらいし…

今やPCでサイトを見る方が少数派になりつつあるのでさすがに放置するわけにも行かず、今回思い切って修正することに相成りました。

新しいグリッドレイアウトは、Wordpressのプラグイン「Content Views」で作成しています。

• ページを作成すると自動的に目次が修正される
• スマホやタブレットでもレスポンシブに表示できる
• アイキャッチ画像も表示できる

と言うことで結構気に入ってます。ただし無償版にはいくつか制限があり，特にページの順番を任意で指定できない（id順やタイトル順、作成順、最終更新日順などでのソートのみ可能）というのは残念なところです（まあ通常はページを作成した順に並べればいいので、id順で問題ないのですが）。

また、各要素自体の見た目の細かいところをプラグインの設定画面から設定することが出来ず，CSSを後付けして修正するしかないのはちょっと面倒なところですね。それを差し引いても便利なので当面は使わせていただく予定です。

Y.A.S.

 

https://www.yukkun20.com/index.php/tov

テイルズ オブ ヴェスペリア REMASTER　プレイ日記

※大見出しは、ファミ通の攻略本の分類に対応しています。※中見出しは、ゲーム内のあらすじに対応しています。※小見出しは、ファミ通の攻略本のサブイベント名に対応しています。プレイ日記内で使用している画像は，いずれもPS4のスクリーンショット機能を利用してゲーム画面を撮影したものです。(c)藤島康介 (c)BANDAI NAMCO ENTERTAINMENT Inc.

あと、ついでにTOX2のプレイ日記も同じデザインに変更しました。こちらは元々グリッドレイアウトに近い構成で，スマホでは見やすかったんですが、PCで見るとやや間抜けな感じになっていたので、どうせならということで。スクショも画像へのリンクが剥がれてたり間違ってたりする部分も多かったので、全部修正したつもりです。誤字脱字が直っていないのは許されて。

Y.A.S.

 

https://www.yukkun20.com/index.php/tox2

テイルズ オブ エクシリア 2　プレイ日記

■ はじめに ファミ通DX版を購入しました。詳しくは日記をどうぞ。 今作はスクリーンショット機能に対応しています。SCEにお伺いを立てたら、スクリーンショット機能で撮影した画像はブログに載せてもいいとのことでしたので、今回は画像付きでお送りするつもりです。重いのでページは分割しています。 とりあえずPSNで、初回封入特典と、無料のDLCをゲット。 ご新規さんのために、TOXのダイジェストムービーが収録されています。５部構成で、全部で約15分。言うまでもなくTOXのネタバレがありますし、ムービーじゃなくぜひ前作もプレイ...

もっとも、TOX2のプレイ日記は、グリッドレイアウトに親和的だったから修正しただけです。ので、これまでのプレイ日記を全部修正するつもりはありません。スクショ付のゼノブレ2やオーディンスフィアのプレイ日記も修正予定はありませんのであしからずご了承ください。

しかしTOX2のプレイ日記は初めてスクショ付きで作成したプレイ日記なのですが、今から読み直すと内容がかなり薄味ですね。ストーリーあらすじも最低限しか書いてなくて、感想メインになっているのがわかります。最近プレイ日記を書くとどうしてもあらすじが冗長になりがちなのでそこは少し反省。

今年は星界の新刊が出るなどいい年でしたね。あとねんどろいどに手を出したのは結構後悔してます。しかしこのまま突き進むのみ！

今年も例年通り、1年間の総括で今年のエントリを締めたいと思います。

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

このサイトについて

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

いつもアクセスして下さっている皆様、ありがとうございます。今年はゲーム日記の企画を立ち上げられなかった（ゼノブレ2はやってますが）せいなのかアクセス数は微減なのですが、そんな中9月のアクセス数が多いのは、やはり星界の新刊が発売されたからだと勝手に信じてます！

あと相変わらずサモンナイト6やU:X関連のアクセスも多いです。U:Xはもう前巻が出てから2年半以上たちますし、早く最終巻お願いします！作者のTwitterでもほとんど言及されなくなっているのが怖いのですが。

統計上アクセスが多いページは、去年と全く同じで、

1. サモンナイト6 夜会話＆エンディング集
2. サモンナイトU:X 人物図鑑
3. テイルズオブフェスティバル 歴代出演者リスト | Y.A.S.

でした。どこかにサモンナイト6の濃いファンがいるようですね。ありがとうございます。

購入した書籍について

購入数は32冊でした。ここ5年で145冊→93冊→72冊→41冊と大幅に減ってきてます。最近は電子書籍で購入しており、紙で購入しているのはいる4年以上前から連載している漫画とか、紙で読みたい小説とかだけですね。。最近では攻略本すら電子書籍で購入することが増えました。紙媒体の方が好きなんですけど、あれ場所をとりますからね…好きなゲームだけ紙で買うようにしています。ちなみに電子書籍は67冊買いました。

年末には、ジャンプで掲載されている「Dr.STONE」を購入しました。あのまんがずっと面白く読んでるんですけど、これまでタイミングを逃していて購入できてなかったんですよね。来年のアニメ化も決まりましたし、楽しみにしています。科学大好きっ子としてはクロムに感情移入しながら読んでますし、稲垣先生らしい素早い展開も魅力。

小説のレビューは2冊しか書いてない。あまりに書かなさすぎて、レビューの書き方を忘れてしまいました。シュタゲゼロの小説のレビューに手をなかなかつけられないのもそれが理由です。必ず感想を書いているキノの旅が今年は出なかったのもでかい。

今年の抱負の達成状況

• テイフェス情報まとめを、2017年分ともう1年分は最低更新します
  →2017年分の更新がやっとでした…
• 最低2ヶ月に1回は小説のレビューを書きます（日和った
  →絶望した！
• 少し早寝を心がけようと思います
  →昨年よりは多少できるようになりました

来年の抱負

• テイフェス情報まとめを、2018年分と2009年分は更新したい（せめて10年経つ前に…）
• 榊ガンパレの更新を今年は2回しかできなかったので、せめて月1更新で…
• 作りかけになっているペーパークラフトを完成させてレビューします

おまけ

ねんどろいど「牧瀬紅莉栖」のレイアウトを改良しました。

Y.A.S.

 

https://www.yukkun20.com/index.php/review/30796

【アニメグッズ】ねんどろいど 130 牧瀬紅莉栖　レビュー

今回の写真も(最後の1枚（と追記の１枚）以外は)買い換え前に撮影したものなのでピンボケ気味です。ねんどろいど 130 牧瀬紅莉栖レビュー2つ目のねんどろいどとしてクリスティーナを購入しました。さすがにこれをスルーするわけには。「アメリカ帰りのツンデレ才女」ってすごい肩書き付けてるなぁ。左サイドはこんな感じ。SG本編での立ち絵を再現したポーズになっているのがニクいですよね。裏面と右サイドはこんな感じ。こっちも「重度の隠れ＠ちゃんねらー」となかなかにひどい肩書きが。箱から出した時点でもう完成しています。スタ...

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

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

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

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

ことで解決出来ます。

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

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

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

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

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

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

takaakiokamoto.com

 

http://takaakiokamoto.com/?p=3962

ワードプレス『Parse error: syntax error』エラーでログイン出来ない時の対処法 | 元電車運転士がYouTu...

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

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

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

ja.wordpress.org

 

https://ja.wordpress.org/support/topic/easy-fancy-boxのエラー/

トピック: Easy Fancy Boxのエラー « サポートフォーラム — WordPress

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

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

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

お気づきの方もいらっしゃるかと思いますが、Amazonのアフィリエイトリンクの表示形式を、これまでのデフォルト形式のものから、プラグイン「Amazon JS」を利用したものに変更しました。

これまでのリンクは

※これは画像なのでクリックしてもAmazonサイトには移行しません

こんな感じでしたけど、これ縦長すぎて配置にいつも困るんですよね…
現在はこうなっています。

それはさておき、ゼノブレ2の攻略本発売決まったんですね！攻略サイトはいくつかありますが、今作はマップ探索がかなり骨で、サイトによっても情報の網羅レベルに結構差があります。これでようやくコンプリートするための情報が手に入るんですね。

ところで発売元（角川）の紹介ページを見ると、掲載内容について紹介されているのですが、

●マップ
ゲーム中では少々わかりにくい各エリアのマップを、ランドマークや
コレクションアイテムの場所付きで掲載

…角川さん勇気あるなぁ。

ご存じの方もいたかもしれませんが、いつ頃からかうちの「サイト内検索」（←）が使用できなくなってました。検索をしてもエラーメッセージを吐いて検索結果が表示されません。

どうやら、先日Googleのカスタム検索の仕様が変更になり、これまで使用していたHTML（V1コード）でのカスタム検索が使用できなくなったのが原因っぽいです。ネット上でも情報が少なくて特定に苦労しました…

結局標準のJavaScript形式のものに変更しました。導入についてはこちらのサイトが参考になりました。

sozoen.com

 

http://sozoen.com/yuichiro/wordpress-google-customsearch

http://sozoen.com/yuichiro/wordpress-google-customsearch

検索窓のデザインについては同じくこちらが参考になります。

sozoen.com

 

http://sozoen.com/yuichiro/google-custom-search

http://sozoen.com/yuichiro/google-custom-search

うちのサイトで使っているテンプレートだと綺麗に表示されませんでしたが、CSSを多少いじることで安定しました（以下のコードのハイライト行を追加）。

#gsc{
    width:100%;
    margin:0 auto;
    position:relative;
}
#gsc td {
    border: none;
}
#gsc .gsc-control-cse,
#gsc .gsc-control-cse-ja,
#gsc .gsib_a{
    margin:0 !important;
    padding:0 !important;
    font-size:12pt !important;
}
#gsc td.gsib_a{
    margin:0 !important;
    padding:0 !important;
}
/* テキスト入力フォームとボタンの位置 */
#gsc table.gsc-search-box td,
#gsc table.gsc-search-box input {
    vertical-align: top !important;
}
/* テキスト入力フォーム */
#gsc input[type="text"]{
    border: 1px solid #dddddd !important;
    height:25px !important;
    margin-top: 100px;
    font-size:10pt !important;
    ime-mode:active;
}
#gsc input[type="text"]:focus {
    border: 2px solid #b2e0eb !important;
    outline: 0;  /*safariの自動フォーカスを切る */
}

/* テキスト入力フォームの影を消す */
#gsc #gsc-iw-id1{<
    border:none !important;
}
/* テキスト入力フォームの背景画像位置調整 */
#gsc #gs_tti0 input{
    background-position:5px 5px !important;
}
/* ボタンの色 */
#gsc input.gsc-search-button {
background: #000099 !important;
background: -ms-linear-gradient(top,  #008ee1 0%,#008ee1 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008ee1',endColorstr='#008ee1',GradientType=0 ); /* IE6-9 */
border: 1px solid #0000cc !important;
}
/* ボタンの位置調整と角丸消し */
#gsc .gsc-search-button{
    margin:0 0 0 -16px !important;
    border-radius:0px;
}
/* 入力時に出る「×」ボタンの位置調整 */
#gsc a{
    background-color:transparent;
    border:none;
}
/* 入力時に出る×ボタン -- Firefox位置調整 -- */
#gsc .gsib_b span{
        box-sizing: border-box;
   -moz-box-sizing: border-box;
        padding:2px 0 0 0;
}

これで完成…のはずが、今度は検索結果が表示されません。主な症状は以下の通り。

• エラーメッセージも表示されず、検索結果のページは真っ白（空っぽ）になる
• レイアウトを「2ページ」以外にすると正常に表示される
• 検索結果のページを何度か更新すると、正常に表示されることもある（確率的には2割程度）

正常に表示されることもあるということは、設定のやり方自体は間違っていないわけで、何が原因なのかかなり悩んだのですが、今度はこちらのサイトにヒントが。

Lancork

 

https://www.lancork.net/2014/07/google-custom-search-firefox-whiteout/

Googleカスタム検索のサイト内検索結果がFirefoxだけ表示されない時の対処法

Google カスタム検索を使えば自分で検索機能を作らなくてもサイト内検索を実装できます。しかし手順通りやったはずがFirefoxだけサイト内検索結果が表示されないトラブルが起きました。 ...

どうやらレイアウトを「2ページ」にした場合、同じページに、Googleが提供する「検索ボックスコード」と「検索結果コード」を表示すると、同じスクリプトが2回書かれることで干渉が起こり、表示がおかしくなるみたいです。

結局、重複するスクリプト部分を削り、

<script>
  (function() {
    var cx = '【検索ID】';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchbox-only></gcse:searchbox-only>
<gcse:searchresults-only></gcse:searchresults-only>

とすることで、きちんと検索結果のページに、検索ボックスと検索結果とが表示されるようになりました。

うまくカスタム検索が表示されない方は試してみてください。

今年は全体的に見ると地味な一年だったなぁ。意外と仕事の方が好調でした。

今年も例年通り、1年間の総括で今年のエントリを締めたいと思います。

[関連記事]2016年まとめ | Y.A.S.
[関連記事]2015年まとめ | Y.A.S.
[関連記事]2014年まとめ・今年もありがとうございました | Y.A.S.
[関連記事]2013年まとめ | Y.A.S.
[関連記事]2012年まとめ | Y.A.S.

このサイトについて

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

いつもアクセスして下さっている皆様、ありがとうございます。昨年もそうだったのですが、プレイ日記をやっているとアクセス数が伸びますね。今年はゼノブレイド2しかしていませんけど、来年も1～2本は書きたいと思います。

あと相変わらずサモンナイト6やU:X関連のアクセスも多いです。U:Xはもう前巻が出てから1年半以上たちますし、早く最終巻お願いします！

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

1. サモンナイト6 夜会話＆エンディング集
2. サモンナイトU:X 人物図鑑
3. テイルズオブフェスティバル 歴代出演者リスト | Y.A.S.

でした。

購入した書籍について

購入数は41冊でした。ここ4年で145冊→93冊→72冊と大幅に減ってきてます。最近は電子書籍で購入しており、紙で購入しているのはいる4年以上前から連載している漫画とか、電子書籍のない攻略本とか、紙で読みたい小説とかだけですね。。電子書籍は3倍の144冊買ってます。
小説のレビューを4冊しか書いてない。去年も4冊しか読んでなくて愕然としたのに全く反省がない。最近隙間時間があってもスマホだけで時間を潰すことが本当に増えました。

今年の抱負の達成状況

• 榊ガンパレの更新をもう少し頑張ります。
  →19回更新しました。昨年の15回よりは多少ましか。本当は2週に1回はしたいんですけどね。
• ロボノアニメ見ます。
  →見ました。数年来の懸念が解消できて良かった。アニメも結構良かったですよ。
• 最低1ヶ月に1回は小説のレビューを書きます
  →絶望した！

来年の抱負

• テイフェス情報まとめを、2017年分ともう1年分は最低更新します
• 最低2ヶ月に1回は小説のレビューを書きます（日和った
• 少し早寝を心がけようと思います

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

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

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

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

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

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

１．導入方法

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

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

１．ダウンロード

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

２．設定

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

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

[[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に変えれば、右側の列を固定することもできます。

２．利用方法

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

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

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

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

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

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

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

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

１．「続きを読む」との相性について

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

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

２．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」で定義できます。

３．このプラグインのメリットについて

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

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