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


2016-01-04

サイト更新 トップページ最上部に「新着記事」を表示しました

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

更新情報の改訂

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

YAS 更新情報

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

ブログカテゴリの整理

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


2015-12-31

2015年まとめ

このサイトも今年で15周年を過ぎてしまいました。始めた頃にはこんな事になるとは…。今後もだらだら続けていこうと思います。今年もご訪問くださった皆様、ありがとうございました。今年の年越しはどうしようかなぁ。

そんなわけで予定通りゲームレビューを完成出来たので、1年間の総括で今年のエントリを締めたいと思います。

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

  • このサイトについて

2015年アクセス

今年も全体的に落ち着いた感じでしたね。昨年より一回りアクセスが増えているようです。いつもアクセスして下さっている皆様、ありがとうございます。

ディスガイア4の攻略ページは相変わらずアクセスが多いです。去年、「プラチナまでたどり着けたのは4.32%のプレイヤーだけだそうです(ちなみに僕が持っているトロフィーで最も獲得プレイヤー率が低いのがこのトロフィーです)。少しでもそのパーセンテージが上がってくれればこれ幸い。」とコメントしたのですが、さっきチェックしたら4.01%に下がっていた件について。…まぁそれだけ新規プレイヤーが増えてるってことですね!ポジティブにいきましょう。

それからサモンナイトU:X人物図鑑も人気ありますねー。やはりニッチか!ニッチだからか!?来年も新刊出ますように。

  • 購入した書籍について

購入数は93冊でした。おお、昨年の145冊から大幅に減っている。え?電子書籍?132冊買ってます…銀魂と風雲児たちを買っちゃったからな。電子書籍は場所を取らないのはいいんですけど、取らない分「これ面白そうだけど置き場所ないから止めておこう」ブレーキが働かず、財布の紐がゆるゆるになるのが問題です。購入した書籍のうち感想を書いているのは45冊。今年はゲーム関係のニュースが多すぎたのでレビュー自体が少ない。特に小説を11冊しか読んでないのが問題。先日完結した「とある飛空士への誓約」の他、ボツコニアン4,5巻、マグダラで眠れ、マジオペ外伝、遙か凍土のカナンなど10冊以上積んでるんだ…
それはさておき、マンガについてはそろそろ電子書籍に完全に移行してもいいかと思っています(電子版が出ていないのは紙買いますけど)。とするとどこのサイトをメインにするかが問題です。いまはeBookJapanですが、将来倒産してデータが吹っ飛ぶ憂き目に遭うのは避けたいので、やっぱりKindleが安心かな…。でもKindleのWindowsアプリは使いにくいし、漫画も読みづらいので、Kindle本体の購入を考えてもいいかも。しかし財布が…

  • 来年の抱負
    • 榊ガンパレの更新をもう少し頑張りたい。せめて2週に1回は…
    • サモンナイト6とTOBのプレイ日記はやります。
    • もう3年くらい言ってるけど、ロボノアニメを見たい。とりあえず正月休みの間にたまっているアニメを消化して…
    • 星界の最新巻が出ますよーに!(ただの願望

2015-01-09

WordPressで「現在メンテナンス中のため、しばらくの間ご利用いただけません。」という表示が消えなくなってしまった時の対処法

うっかりやらかしてしまったので備忘のために記事にしておきます。

WordPressの管理画面で本体やプラグインなどの更新をする場合、更新作業中のサイトは「メンテナンスモード」になり、アクセスすると「現在メンテナンス中のため、しばらくの間ご利用いただけません。」というテキストが表示されます。

更新作業が終われば元の状態に戻るのですが、更新作業中に、更新の進捗状況が表示されているページ(↓)を閉じてしまうと、更新作業自体は正常に続けられますが、更新が終わっても先ほどのテキストが残ったままになってしまいます。

maintenance2

この場合の対処法ですが、まずFTPでWordpressのルートフォルダ(↓)にアクセスし、そこにある「.maintenance」というファイルを削除すると元に戻ります。

maintenance

ちょっと冷や汗が流れましたけど、あっさり解決して良かったです。皆様もご注意ください。


2014-12-31

2014年まとめ・今年もありがとうございました

だらだら続けているこのサイトも丸14年たちました。今年もご訪問くださった皆様、ありがとうございました。今年の年越しはどうしようかなぁ。いつもはテイルズ年越しですけど今年はレーヴユナイティアくらいしかないし。

そんなわけで予定通りゲームレビューを完成出来たので、1年間の総括で今年のエントリを締めたいと思います(これまでは年越えちゃってからでしたからね)。

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

  • このサイトについて
    2014年アクセス今年はあまり突出した月はなく、全体的に落ち着いた感じでした。固定のお客様が来てくださっているのかと思うと本当にありがたいです。

    今でもアクセスが多いのは、ディスガイア4の攻略ページです。PSN Profileさんによると、ディスガイア4のプレイヤーの内、プラチナまでたどり着けたのは4.32%のプレイヤーだけだそうです(ちなみに僕が持っているトロフィーで最も獲得プレイヤー率が低いのがこのトロフィーです)。少しでもそのパーセンテージが上がってくれればこれ幸い。

    今年始めた榊ガンパレ関係は需要が低いみたいですが、自己満足のために頑張って続けます。来年はTOZのプレイ日記を立ち上げたいですね。

  • 購入した書籍について
    購入数は145冊で、昨年、一昨年の170冊超から減りました。といっても電子書籍が集計に入っていないので、結局とんとんです。
    そのうち感想を書いているのは50冊強。意外と書いてますね…
  • 購入したCDについて
    13枚でした。最近は声優さんのトークを楽しむCDがメインですね。
  • 購入したDVDについて
    7枚です。うち5枚がペルソナ関係。最近はホントアニメ見なくなった。
    そういえば昨年も「ロボノを視聴したい」って書いてましたけど、結局まだ見てない。今でも見たいとは思っていますけど。

2014-05-25

しばらくサイトが落ちていて申し訳ないです

うちのウェブサイトはExpressWebというレンタルサーバーをお借りしています。

高機能・激安 Windows レンタルサーバー ExpressWeb / 高機能・激安 Windows レンタルサーバー ExpressWeb

30GBのディスクスペースで月250円。これはかなりの安値です。3年ほど使っていますけど、その間致命的な事故もなく、サーバーが落ちてしまったことも(確か)なく、非常に安定しています。ディスクスペースも、この程度のブログを運営するなら10GBもあれば余裕なので、特に問題ありません。

ただ転送量制限が30GB/月なんですよね…今日日1ヶ月30GBのレンタルサーバーなんてほとんどないです。大概10GB/日くらい。文字通り桁が違います。うちのサイト初期は15GB/月くらいだったので全然気にしていなかったのですが、最近なぜか転送量がうなぎ登りになり、ここ数ヶ月29~30日頃には転送量の上限に達してしまうことが増えました。最近月末になるとサイトが落ちていることがあったのはそのためです。

趣味のサイトなので別にいいといえばいいんですが、あいにく事務所のサイトも同じサーバーに置いているので、そちらが落ちてしまうのはまずい…しかも今月はまたも転送量が異常に多く、25日頃に上限に達してしまいました。

もちろんExpressWebでは転送量の上限を増やせますが、30GB/月増やすのに1ヶ月300円必要です。300円くらい払えよ!と思うかもしれませんけど、基本料金とあわせれば550円。550円出せば普通に転送量を気にしなくてもいいサーバへ旅立てます。そんなわけでいろいろ躊躇していたんですが、このままだと月末に開催されるTOF2014のレポートが上げられないということに気づき、急遽お金を払いました。

しかし一頃言いたいことが。レンタル前の公式サイトの情報では、

転送量画像はhttp://www.datajapan.ne.jp/expressweb/price/より引用

といかにも1ヶ月単位で追加出来るような書き方してるくせに、実際には3ヶ月単位でしか購入出来ないとかおかしくないですか?まぁサポートにメールしておきましたけど。

とりあえず4月に1年間契約を更新してしまったので、あと1年間はこちらでがんばろうと思います。

もし移転するなら、月額500円、容量100GB、転送量300GB/月のファイアバードかなぁ。とりあえずこちらのサイト様が参考になりました。


1 / 3123