*Y.A.S.*Yukkun20's Association Secrète
2017-04-26
昨日に引き続き、当サイトで大きなテーブルを使用しているページ（主にプレイ日記とナディアの感想ページ）の修正を行いました。
ナディアのページはサイトの初期から存在しているだけあって、デザインがかなり不格好です。正直今回の修正も場当たり的な感じは否めないので、時間があればきちんとリニューアルしたいとは思っています。そもそもHTMLの表は横に横に見ていくものだから、第1回の感想の右隣に第21回の感想がある現状がおかしいんですけどね…
皆さんお気づきだと思いますが、僕はデザインセンスが皆無の人間なので、こういう作業は苦手です…。時々ウェブデザインの本やサイトを見て研究をしているつもりなのですが、一向にセンスが向上しませんね。何かもし良いアドバイスがあればお寄せください。マジで。
2017-04-25
うちのメインコンテンツの一つ「テイルズオブフェスティバル 歴代出演者リスト」なんですが（なぜか意外とアクセス多いです）、携帯などで見るとデザインが崩壊し、ほとんど役に立たないことが以前から気になってました。
あの表は、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 /]]
とします。
○○には「flip」「scroll」「collapse」のいずれかを挿入します。それぞれ画面の幅よりも表の幅が大きくなった場合に、表をどのように表示するかを指定します。
具体的にどう見えるかは公式サイトをご覧ください。
○○には、「phone」「tablet」「desktop」「all」のいずれかを挿入します。画面の幅がどの大きさより小さい場合に、↑の方法での表示に切り替えるかを指定します。それぞれ「768ピクセル以下」「980ピクセル以下」「1200ピクセル以下」「常に」に対応しています。
datatables_fixedcolumns_left_columns=○○○○には、0以上の数字を挿入します。最も左の列からいくつ目の列までを固定（常に表示する）かを指定します。
うちの場合ですと、「出演者名」と「作品/キャラ名」の2つの列を固定しているので、「2」と指定しています。
leftをrightに変えれば、右側の列を固定することもできます。
２．利用方法
これでタブレットやスマホなどで該当ページにアクセスすると、（タッチパネルであれば）スワイプすることで、表をスクロールできるようになっているはずです。
表の上部にある、「○件表示」で表示件数を少なくしたり、「検索」で探したいキャストや作品の名前を入力したりすることで、より見やすくなるのではないかと思います。
その他、どさくさに紛れて、これまで小さな画面では見づらかった（というより見られなかった）ページのいくつか（主にゲームプレイ日記）を修正しています。
2017-03-24
ブラウザで見ているウェブページにマーカーを引き、電子栞としても使えるアドオン「Wired-Marker」ですが、先日から使用ができなくなっています。
このアドオンを立ち上げると、「mcMainService.init():ReferenceError: nsPreferences is not defined」または「done():ReferenceError: nsPreferences is not defined」とエラーを吐いてしまいます。
原因を探していたところ、アドオンの公式サイト（Wired-Marker :: Add-ons for Firefox）に開発者の方のコメントが。
Wired-Marker does not work with Firefox 52 or later
Thank you for using Wired-Marker and we are sorry for the inconveniences.
Wired-Marker does not work with Firefox 52 or later, because of the change of Firefox specifications.
We do not have plan to fix the problem now, as it takes lots of costs.
（yuukkun20訳）
Wired-MarkerはFirefox52以降のバージョンでは作動しません
Wired-Markerをご利用頂きありがとうございます。ご不自由をおかけしております。
Wired-Markerは、Firefoxの仕様変更に伴い、Firefox52以降のバージョンでは作動しません。
コストの問題があり、現時点ではこの問題点についての対応予定はありません。※原文は上記公式サイトより引用
ということで、あきらめるしかなさそうです。
これまでのデータがサルベージ不能になってしまったのもさることながら、このアドオンに代わる機能を持つアドオンが存在しないのが問題。（おそらくFirefoxのバージョンを51に戻せば大丈夫ですが、セキュリティの問題でやりたくない）
なにかのブレイクスルーがあってアドオンが修正されるのを待つか、代わりのアドオンが登場するのを待つか…。このアドオンが再び使えるようになるなら寄付でも何でもさせて頂く所存ですが、それで解決するような問題ではないんでしょう。これからどうしよう。
2017-03-22
プラグイン「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」で定義できます。
３．このプラグインのメリットについて
レスポンシブな表示が可能なので、スマホ向けサイトでも見やすくなっているはずです。
上手く使えばゲームプレイ日記ももう少し読みやすく表示できるような気がしますが、デザインセンスがないのでまだなんとも。
2016-12-31
今年も色々ありました。森岡先生にお会いしたのが今年の初めか…本当あっという間ですね。
今年も例年通り、1年間の総括で今年のエントリを締めたいと思います。
[関連記事]2015年まとめ | Y.A.S.
[関連記事]2014年まとめ・今年もありがとうございました | Y.A.S.
[関連記事]2013年まとめ | Y.A.S.
[関連記事]2012年まとめ | Y.A.S.
今年は例年になくアクセス数が伸びた年でした。いつもアクセスして下さっている皆様、ありがとうございます。2～3月と7～8月のアクセスが多いですが、オーディンスフィアとサモンナイト6のプレイ日記を読んで頂いたみたいですね。検索ワードも「サモンナイト6 夜会話」が一番多かったです。
統計上アクセスが多いページは、
でした。来年はU:Xの新刊来るといいですね！
購入数は72冊でした。おお、一昨年の145冊、昨年の93冊から大幅に減っている。え？電子書籍？256冊買ってます…年末に名探偵コナンの全巻セット（85冊）が超割引だったのでつい…
小説のレビューを4冊しか書いていなくて愕然。最近ゲームのしすぎで本当に小説を読んでいない。昨年10冊以上積んでいると書いた本の内、今年呼んだ本が一冊もない件について。マジか…。このサイトは一応聖界のことをやっていない時はレビューサイトという認識なんですが、そのレビュー記事も80回くらいで、5日に1回しか書いてない件について。反省。でも改善できそうにない。
2016-10-11
現在ベルセリアのプレイ日記を更新中ですが、表紙のページは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が適応されていることが分かりますね。編集も直感的に行えるので便利ですよ。
2016-04-17
サモンナイトU:X 人物図鑑ですが、一応先週くらいから更新の準備は始めてます。現在第2章。このペースだとあと1ヶ月くらいはかかりそうなのでご容赦ください。今回情報量多いし。
最近、アクセス解析を見ていると、facebook経由でのアクセスが多いようです。…が、facebookのどのページからアクセスしているのかは表示されないので詳細は不明です。
どうもうちでお世話になっているプラグイン「Newpost Catch」（↓を表示するためのプラグインです）の作者様のFBにリンクをして頂いているようです（これを見つけられたのは完全な偶然でした）。
ぎゃあああ…ありがたやありがたや。例によってFBのアカウントも持ってないので、この場でお礼を言わせて頂きます。こちらこそありがとうございました！
2016-04-14
プラグイン「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+のアカウントでログインしてコメントできるようになっています。アイコンもご自身で設定しているものが反映されるはずですので、ぜひご利用ください。
2016-01-31
Microsoftが提供しているクラウドサービス「OneDrive」。Office関係のデータのデフォルトの保存場所になっていることもあり、使っている方も多いのではないでしょうか。
ご存じの通り無料で15GBまで使用でき、カメラロールのバックアップ先にしているするとさらに15GB使用できるのですが、実は近日中に、これが5GBまで減らされてしまうようです。マジデスカ…
が、事前に申請をしておくことで、減少後も引き続き15（または30）GBを無償で使用できるようになります。詳しくはこちらのサイトにまとめられています。
OneDriveユーザーは今すぐポチッとしてこう！今後も15GBの無料ストレージ容量が使用継続可能になるよ！ – enjoypclife.net
大事なのは、この申請が2016/1/31、つまり今日までしかできないという事です（多分米国時間なので多少猶予はありそうですが…）
え…あと数分しかないし、リンク先読んでる暇ないんだけど…という方のために、一応申請用のリンクを貼っておきます。
こんな感じのサイトに飛ばされるので、最下部の Keep your free storage をクリックしてください。
それはさておき、これを機にOffice365を購入してみました。これはこれまでのOfficeのようなパッケージ版とは違い、年間12000円程度を支払って使用するタイプのソフトです。パッケージ版は24000円くらいですから、2年でとんとんになるのですが、①常に最新のOfficeが使用できること、②OneDriveの容量に1TB追加されることなどを考えるとまあいいかな、と。
特に1TB追加は大きいです。僕のバックアップしたいデータは500GBくらいなので、1TBあればフルバックアップが可能なんですよね。これでパソコンのクラッシュにおびえずに済みます。外付けHDDでもバックアップは取っていますが、結構面倒くさくてなかなかやらないですからね…これなら常時バックアップしてくれるので安心です。
2016-01-11
今日は時間がありましたので、PC周りをいろいろと整理しました。
タブレットの方を試験的にWindows10にしていたのですが、あまり不具合もなかったので、メインマシンの方もアップグレードしました。一応念のためにデータのバックアップを取り、デフラグもしてからアップグレードを始めたのですが、1時間くらいで無事終了しました（バックアップやデフラグを含めると数時間かかってます）。
マルチモニターでそれぞれのモニタに別々の壁紙を設定するのが面倒になってるんですよね…。設定へたどり着くには、エクスプローラーのアドレスバーに、
control /name Microsoft.Personalization /page pageWallpaper
と入力して下さい。
Windows10に対応していないアプリの場合、アプリの文字がにじむことがあります。特定のアプリだけにその問題が生じている場合、アプリケーションのアイコン上で【右クリック→プロパティ】を開き、
【高DPI設定では画面のスケーリングを無効にする】にチェック。
その下の【すべてのユーザの設定を変更】をクリックし、
【高DPI設定では画面のスケーリングを無効にする】にチェック。
これで大丈夫です。
これまでこのサイトでは、サイト内検索用にWordpress標準の検索を設置していたのですが、死ぬほどダサくて使いづらかったので、Googleカスタム検索に頼ることにしました。
←こんな感じになりました
詳しい方法はこちらを参考にしました。
Googleカスタム検索導入手順と導入する時につまづいたこと。 | 極楽ひだまり保育園
僕は検索フォームのデザインをいじるために、コードをJavaScriptではなくHTMLで取得していますが（コード取得時に「高度な機能を使用する場合は、代わりに V1 コードを取得します。」を選択する）、あとはほとんどかわりません。
これでPHPではなくHTMLで作成されたページ（星界事典など）も検索の対象になっています。
蔵書管理に使用している私本管理PlusがWindows10に対応していたので、アップグレードしました。ナイスタイミング。
あとは年賀状などの郵便物を整理したり、確定申告の準備をしたり、ワールドトリガーのビデオ（全60話）を見て、12話で力尽きたりしてました。充実してますね！
Y.A.S. 2000-2025 All rights reserved.since 2000-10-10
おお、本当ですね。新ハードの情報ももちろん楽しみですけど、ローンチタイトルがどう…