*Y.A.S.*

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

今年も例年通り、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」で定義できます。

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

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

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

今年も色々ありました。森岡先生にお会いしたのが今年の初めか…本当あっという間ですね。

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

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

• このサイトについて

今年は例年になくアクセス数が伸びた年でした。いつもアクセスして下さっている皆様、ありがとうございます。2～3月と7～8月のアクセスが多いですが、オーディンスフィアとサモンナイト6のプレイ日記を読んで頂いたみたいですね。検索ワードも「サモンナイト6 夜会話」が一番多かったです。

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

1. サモンナイトU:X 人物図鑑
2. テイルズ オブ ゼスティリア プレイ日記
3. サモンナイト6 夜会話＆エンディング集

でした。来年はU:Xの新刊来るといいですね！

• 購入した書籍について

購入数は72冊でした。おお、一昨年の145冊、昨年の93冊から大幅に減っている。え？電子書籍？256冊買ってます…年末に名探偵コナンの全巻セット（85冊）が超割引だったのでつい…
小説のレビューを4冊しか書いていなくて愕然。最近ゲームのしすぎで本当に小説を読んでいない。昨年10冊以上積んでいると書いた本の内、今年呼んだ本が一冊もない件について。マジか…。このサイトは一応聖界のことをやっていない時はレビューサイトという認識なんですが、そのレビュー記事も80回くらいで、5日に1回しか書いてない件について。反省。でも改善できそうにない。

• 今年の抱負の達成状況
  • 榊ガンパレの更新をもう少し頑張りたい。せめて2週に1回は…
    →15回しか更新してない。orz
  • サモンナイト6とTOBのプレイ日記はやります。
    →やりました。やってます。
  • もう3年くらい言ってるけど、ロボノアニメを見たい。とりあえず正月休みの間にたまっているアニメを消化して…
    →見てない…
  • 星界の最新巻が出ますよーに！（ただの願望
    →出てない…
• 来年の抱負
  • 榊ガンパレの更新をもう少し頑張ります。今年はゲームプレイ日記の予定が今のところないので…
  • ロボノアニメ見ます。
  • 最低1ヶ月に1回は小説のレビューを書きます

現在ベルセリアのプレイ日記を更新中ですが、表紙のページはCSSをかなり使ってデザインしています。

そのため、ビジュアルエディタをそのまま使用していると、レイアウトなどがまったく反映されない上に、テキストエディタとの切り替え時にタグが飛んだりして、最初の頃は結構苦労しましたが、ようやく解決策を見つけました。

1.editor-style.cssを作成する

まず、ビジュアルエディタに適用されるCSSを定義するため、新たなCSSファイルを作成します。これは普通のメモ帳で新規ファイルを作成してこの名前で保存すればOK。中は空で構いません。

完成したら、FTPでアップロードしておきましょう。ご使用のテーマのCSSと同じ階層（通常はwp-content > themes > (使用中のテーマ名）あたりだと思います）に入れておきます。

2.editor-style.cssを読み込ませる

このままだとビジュアルエディタがCSSファイルを読み込んでくれないので、function.phpの適当な位置（末尾でいいと思います）に、

/* ビジュアルエディタを本文スタイルに準拠 */
add_editor_style("editor-style.css");

と記入しておきます。

ダッシュボードから、「外観 > テーマの編集 > テーマのための関数」で直接記入できます。テーマによっては、既に記入されていることがあるので、一応検索しておきましょう。またfunction.phpは下手にいじるとWordpressが動かなくなるので、バックアップを忘れずに。

3.editor-style.cssを作成する

これで、style.cssの中身をコピーしていけばいいんですが、style.cssを変更するたびにeditor-style.cssを変更するのはかなり面倒です。

そこで、editor-style.cssの中身を、

@import url("style.css");

としておきます。（「外観 > テーマの編集 > ビジュアルエディターのスタイルシート」）こうすると、ビジュアルエディタにも、実際にサイトで使用しているCSSが適用されます（若干の見た目の違いはありますが）。
本来エディタで読み込む必要のないCSSまで読み込むので若干動作が遅くなるようですが、僕は気になりませんでした。

これで完成です。もし見た目に変化がない場合は、キャッシュが原因で表示が最新の物になっていない可能性がありますので、スーパーリロード（通常はCtrl+F5）をしてみてください。これでこういう感じになります。

テキストエディタでは

こんな感じなので、CSSが適応されていることが分かりますね。編集も直感的に行えるので便利ですよ。

サモンナイトU:X 人物図鑑ですが、一応先週くらいから更新の準備は始めてます。現在第2章。このペースだとあと1ヶ月くらいはかかりそうなのでご容赦ください。今回情報量多いし。

最近、アクセス解析を見ていると、facebook経由でのアクセスが多いようです。…が、facebookのどのページからアクセスしているのかは表示されないので詳細は不明です。

どうもうちでお世話になっているプラグイン「Newpost Catch」（↓を表示するためのプラグインです）の作者様のFBにリンクをして頂いているようです（これを見つけられたのは完全な偶然でした）。

ぎゃあああ…ありがたやありがたや。例によってFBのアカウントも持ってないので、この場でお礼を言わせて頂きます。こちらこそありがとうございました！

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

１．と２．はサイト管理者向け、３．はこのサイトの利用者向けの情報になっています。

１．日本語化について

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

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

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

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

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

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

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

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

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

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

<?php comment_form(); ?>

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

３．コメントの投稿について

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

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

今日は時間がありましたので、PC周りをいろいろと整理しました。

• Windows10へのアップグレード

タブレットの方を試験的にWindows10にしていたのですが、あまり不具合もなかったので、メインマシンの方もアップグレードしました。一応念のためにデータのバックアップを取り、デフラグもしてからアップグレードを始めたのですが、1時間くらいで無事終了しました（バックアップやデフラグを含めると数時間かかってます）。

• マルチモニタの壁紙

マルチモニターでそれぞれのモニタに別々の壁紙を設定するのが面倒になってるんですよね…。設定へたどり着くには、エクスプローラーのアドレスバーに、

control /name Microsoft.Personalization /page pageWallpaper

と入力して下さい。

• アプリケーションの文字がにじむ

Windows10に対応していないアプリの場合、アプリの文字がにじむことがあります。特定のアプリだけにその問題が生じている場合、アプリケーションのアイコン上で【右クリック→プロパティ】を開き、

【高DPI設定では画面のスケーリングを無効にする】にチェック。

その下の【すべてのユーザの設定を変更】をクリックし、

【高DPI設定では画面のスケーリングを無効にする】にチェック。

これで大丈夫です。

• サイト内検索の変更

これまでこのサイトでは、サイト内検索用にWordpress標準の検索を設置していたのですが、死ぬほどダサくて使いづらかったので、Googleカスタム検索に頼ることにしました。

←こんな感じになりました

詳しい方法はこちらを参考にしました。

Googleカスタム検索導入手順と導入する時につまづいたこと。 | 極楽ひだまり保育園

僕は検索フォームのデザインをいじるために、コードをJavaScriptではなくHTMLで取得していますが（コード取得時に「高度な機能を使用する場合は、代わりに V1 コードを取得します。」を選択する）、あとはほとんどかわりません。

これでPHPではなくHTMLで作成されたページ（星界事典など）も検索の対象になっています。

• 私本管理Plus 6.0.0にアップデート

蔵書管理に使用している私本管理PlusがWindows10に対応していたので、アップグレードしました。ナイスタイミング。

あとは年賀状などの郵便物を整理したり、確定申告の準備をしたり、ワールドトリガーのビデオ（全60話）を見て、12話で力尽きたりしてました。充実してますね！

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

更新情報の改訂

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

プラグイン「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;
}

ブログカテゴリの整理

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