2017-05-22

Adblock Plusが作動しているとAmazonアフィリエイトが表示されない 解決編

先日取り上げた、「Adblock Plusが作動しているとAmazonアフィリエイトが表示されない」問題の一応続報。

[関連記事]Adblock Plusが作動しているとAmazonアフィリエイトが表示されない | Y.A.S.

「フィルタ設定」を開いて、ホワイトリストに「@@*amazon*」を追加します。

これでAmazonアフィリエイトが表示されるようになります。

もちろんうちのサイトのアフィのことは全然気になさらなくてもいいんですけど、Amazonが勧めてくる商品をついつい購入してしまう人(僕のことだ)は、フィルタを設定してAmazonの術中にはまってみるのも一興ではないでしょうか。


2017-05-15

Adblock Plusが作動しているとAmazonアフィリエイトが表示されない

タイトルそのまんまですが、Firefoxのアドオン「Adblock Plus」が作動していると、一部のAmazonアフィリエイトが表示されないようです。

Amazonアフィリエイトには3種類ありますが、

アドオンなし

アドオンあり

こんな感じで、「テキストと画像」のみが表示されないようです。

Adblock Plusをご利用の方で、もしうちのサイトに変なスペースが空いているのに気づいたら、優しく察してください。

※5/22追記:対策について5/22のエントリに記載しています

それはそうと重野先生の「雀荘のサエコさん」は、雀荘を舞台にした4コマですけど、麻雀を知らなくても面白いですよ。僕も麻雀全く分かりませんけど単行本は全部購入してます。


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-24

Firefoxのアドオン「Wired-Marker」が使用不能に(未解決)

ブラウザで見ているウェブページにマーカーを引き、電子栞としても使えるアドオン「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のカスタマイズについて

プラグイン「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-12-31

2016年まとめ

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

今年も例年通り、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回は小説のレビューを書きます

2016-10-11

WordPressのビジュアルエディタの表示を、お手軽に実際のビジュアルに近づける方法

現在ベルセリアのプレイ日記を更新中ですが、表紙のページは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)をしてみてください。これでこういう感じになります。

%e3%83%93%e3%82%b8%e3%83%a5%e3%82%a2%e3%83%ab%e3%82%a8%e3%83%87%e3%82%a3%e3%82%bf

テキストエディタでは

%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%82%a8%e3%83%87%e3%82%a3%e3%82%bf

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


2016-04-17

FBには完全に乗り遅れた感がある

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

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

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

YAS 更新情報

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


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+のアカウントでログインしてコメントできるようになっています。アイコンもご自身で設定しているものが反映されるはずですので、ぜひご利用ください。


1 / 812345...最後 »