*Y.A.S.*Yukkun20's Association Secrète
2018-01-06
お気づきの方もいらっしゃるかと思いますが、Amazonのアフィリエイトリンクの表示形式を、これまでのデフォルト形式のものから、プラグイン「Amazon JS」を利用したものに変更しました。
これまでのリンクは
※これは画像なのでクリックしてもAmazonサイトには移行しません
こんな感じでしたけど、これ縦長すぎて配置にいつも困るんですよね…
現在はこうなっています。
それはさておき、ゼノブレ2の攻略本発売決まったんですね！攻略サイトはいくつかありますが、今作はマップ探索がかなり骨で、サイトによっても情報の網羅レベルに結構差があります。これでようやくコンプリートするための情報が手に入るんですね。
ところで発売元（角川）の紹介ページを見ると、掲載内容について紹介されているのですが、
…角川さん勇気あるなぁ。
2018-01-03
ご存じの方もいたかもしれませんが、いつ頃からかうちの「サイト内検索」（←）が使用できなくなってました。検索をしてもエラーメッセージを吐いて検索結果が表示されません。
どうやら、先日Googleのカスタム検索の仕様が変更になり、これまで使用していたHTML（V1コード）でのカスタム検索が使用できなくなったのが原因っぽいです。ネット上でも情報が少なくて特定に苦労しました…
結局標準のJavaScript形式のものに変更しました。導入についてはこちらのサイトが参考になりました。
検索窓のデザインについては同じくこちらが参考になります。
うちのサイトで使っているテンプレートだと綺麗に表示されませんでしたが、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ページ」にした場合、同じページに、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>
とすることで、きちんと検索結果のページに、検索ボックスと検索結果とが表示されるようになりました。
うまくカスタム検索が表示されない方は試してみてください。
2017-12-31
今年は全体的に見ると地味な一年だったなぁ。意外と仕事の方が好調でした。
今年も例年通り、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年半以上たちますし、早く最終巻お願いします！
統計上アクセスが多いページは、
でした。
購入した書籍について
購入数は41冊でした。ここ4年で145冊→93冊→72冊と大幅に減ってきてます。最近は電子書籍で購入しており、紙で購入しているのはいる4年以上前から連載している漫画とか、電子書籍のない攻略本とか、紙で読みたい小説とかだけですね。。電子書籍は3倍の144冊買ってます。
小説のレビューを4冊しか書いてない。去年も4冊しか読んでなくて愕然としたのに全く反省がない。最近隙間時間があってもスマホだけで時間を潰すことが本当に増えました。
今年の抱負の達成状況
来年の抱負
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-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+のアカウントでログインしてコメントできるようになっています。アイコンもご自身で設定しているものが反映されるはずですので、ぜひご利用ください。
Y.A.S. 2000-2023 All rights reserved.since 2000-10-10
