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


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-05-21

WP-Yomiganaがついに使えるようになったー 超朗報

WordPressが長年ルビに対応しておらず、それを対応させるためのプラグイン「WP-Yomigana」もどういうわけかうちのPCと相性が悪くて使えなかったんですが、先日のアップデートでついに正常に作動するようになりましたー!開発者の高橋様、ありがとうございます!

WordPressのルビ振りプラグインをFirefox向けにアップデート | 高橋文樹.com

TinyMCEはもちろん、TinyMCE Advancedでも問題なく使えます。(プラグインを有効化したあと、設定>ルビ設定でボタンを表示する設定にしておくこと)

星界サイト運営していて、ルビが使えないとかどうしようもないですからね。これで

王女殿下フィア・ラルトネル

パリューニュ子爵殿下フィア・ベル・パリュン

とか、殿下フィアのことを自由にお呼びできるのですね!

また、Firefoxでもルビに対応したので、もうアドオン「HTML Ruby」を入れなくても正常に表示されているはずです。これはあれか、久々に星界事典を更新しろということか。

5/27追記:

作者の方に気づいていただけたようです。Twitterはしてないので直接お礼をお届け出来ませんので、失礼ながらこの場で。


2015-01-09

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

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

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

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

maintenance2

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

maintenance

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


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 / 212