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

OneDriveユーザーは今日中にチェック!

Microsoftが提供しているクラウドサービス「OneDrive」。Office関係のデータのデフォルトの保存場所になっていることもあり、使っている方も多いのではないでしょうか。

ご存じの通り無料で15GBまで使用でき、カメラロールのバックアップ先にしているするとさらに15GB使用できるのですが、実は近日中に、これが5GBまで減らされてしまうようです。マジデスカ…

が、事前に申請をしておくことで、減少後も引き続き15(または30)GBを無償で使用できるようになります。詳しくはこちらのサイトにまとめられています。

OneDriveユーザーは今すぐポチッとしてこう!今後も15GBの無料ストレージ容量が使用継続可能になるよ! – enjoypclife.net

大事なのは、この申請が2016/1/31、つまり今日までしかできないという事です(多分米国時間なので多少猶予はありそうですが…)

え…あと数分しかないし、リンク先読んでる暇ないんだけど…という方のために、一応申請用のリンクを貼っておきます。

OneDriveBonus

こんな感じのサイトに飛ばされるので、最下部の Keep your free storage をクリックしてください。


それはさておき、これを機にOffice365を購入してみました。これはこれまでのOfficeのようなパッケージ版とは違い、年間12000円程度を支払って使用するタイプのソフトです。パッケージ版は24000円くらいですから、2年でとんとんになるのですが、①常に最新のOfficeが使用できること、②OneDriveの容量に1TB追加されることなどを考えるとまあいいかな、と。

特に1TB追加は大きいです。僕のバックアップしたいデータは500GBくらいなので、1TBあればフルバックアップが可能なんですよね。これでパソコンのクラッシュにおびえずに済みます。外付けHDDでもバックアップは取っていますが、結構面倒くさくてなかなかやらないですからね…これなら常時バックアップしてくれるので安心です。


2016-01-11

Window10へアップグレードしました アップグレード促すポップアップうっとうしかったし…

今日は時間がありましたので、PC周りをいろいろと整理しました。

  • Windows10へのアップグレード

タブレットの方を試験的にWindows10にしていたのですが、あまり不具合もなかったので、メインマシンの方もアップグレードしました。一応念のためにデータのバックアップを取り、デフラグもしてからアップグレードを始めたのですが、1時間くらいで無事終了しました(バックアップやデフラグを含めると数時間かかってます)。

    • マルチモニタの壁紙

マルチモニターでそれぞれのモニタに別々の壁紙を設定するのが面倒になってるんですよね…。設定へたどり着くには、エクスプローラーのアドレスバーに、

control /name Microsoft.Personalization /page pageWallpaper

と入力して下さい。

    • アプリケーションの文字がにじむ

Windows10に対応していないアプリの場合、アプリの文字がにじむことがあります。特定のアプリだけにその問題が生じている場合、アプリケーションのアイコン上で【右クリック→プロパティ】を開き、

設定1

【高DPI設定では画面のスケーリングを無効にする】にチェック。

その下の【すべてのユーザの設定を変更】をクリックし、

設定2

【高DPI設定では画面のスケーリングを無効にする】にチェック。

これで大丈夫です。

  • サイト内検索の変更

これまでこのサイトでは、サイト内検索用にWordpress標準の検索を設置していたのですが、死ぬほどダサくて使いづらかったので、Googleカスタム検索に頼ることにしました。

検索フォーム ←こんな感じになりました

詳しい方法はこちらを参考にしました。

Googleカスタム検索導入手順と導入する時につまづいたこと。 | 極楽ひだまり保育園

僕は検索フォームのデザインをいじるために、コードをJavaScriptではなくHTMLで取得していますが(コード取得時に「高度な機能を使用する場合は、代わりに V1 コードを取得します。」を選択する)、あとはほとんどかわりません。

これでPHPではなくHTMLで作成されたページ(星界事典など)も検索の対象になっています。

  • 私本管理Plus 6.0.0にアップデート

蔵書管理に使用している私本管理PlusがWindows10に対応していたので、アップグレードしました。ナイスタイミング。

EKAKIN

あとは年賀状などの郵便物を整理したり、確定申告の準備をしたり、ワールドトリガーのビデオ(全60話)を見て、12話で力尽きたりしてました。充実してますね!


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-11-25

コレガのスイッチングハブ 購入してみました

予定通り、「うたわれるもの PORTABLE」を購入しました。PSP用ソフトですが、VitaTVでもプレイ可能なのでPSNでダウンロード購入。2057円でした。

うたわれるもの PORTABLE AQUAPRICE2800 | ソフトウェアカタログ | プレイステーション® オフィシャルサイト

さすがにサイズの大きいソフトをDLするときは有線LANでネットにつないでます。とはいえ僕の部屋にはLANケーブルが1本しか引かれてないので、これまではPCに繋いでいるケーブルをわざわざVitaTVに繋ぎ直してました。しかし面倒ですし、先日の模様替えでVitaTVにケーブルが届かなくなってしまったので、思い切ってスイッチングハブ(LANケーブルの先を分岐させるための機器)を購入することにしました。

スイッチングハブは電源が必要なのですが、マルチタップはもういっぱいだったのと、これ以上電源コードを増やしたくなかったので、USB給電式のものを選択。それでいて1000Gbpsに対応している商品は…これ一択でした。しかもAmazonや家電量販店では売ってないので、メーカー直販で購入。

【楽天市場】★送料無料★コレガ(corega) 5ポート Giga USB給電 メタル筐体 ループ検知 スイッチングハブ(05P20Nov15) CG-SW05GTXU:コレガダイレクト楽天市場店

概観はこんな感じ(※画像は上記リンク先より引用)

w05gtxu_gallery2

↑見ての通り5ポートありますが、1ポートは入力に使うので、実質的には4股に分岐できます。PC、VitaTV、PS4につないでもまだ余るね!…PS3はもういいや。

合わせて短めのLANケーブルを2本購入し、とりあえずPCとVitaTVをつなぎました(電源はPCのUSBポートからとってます)。最近のLANケーブルは昔みたいに太くて堅いものだけでなく、薄くて柔らかいものもたくさんあるのでいいですよね。もちろん1Gbpsに対応しているものを購入。

通信速度が下がることもなく、PCでのネットもVitaTVのダウンロードも同時にサクサク出来て快適です。これで1980円は安い。


2015-11-03

変える前は20Mbpsくらいは出てたんですけどねぇ…

色々ネット環境が面倒くさいことになっています。

先日我が家のネット回線が、フレッツ光からドコモ光に変わったのですが、それ以来

  • 通信速度が極端に低下する(光なのに1Mって詐欺じゃん!)
  • 複数の機器(おおむね8台程度)を有線/無線でネットにつなげようとすると、それ以外の機器が繋がらなくなる

などの症状が出ていて困ってます。無線が繋がらないのはまだわかるけど有線まで繋がらないって…。ドコモ光に変わる前はそういう症状はなかったのですが、本日ドコモに問い合わせたら、「回線には問題ないからプロバイダが悪いのでは?」といわれ、プロバイダ(OCN)に問い合わせると「回線が混雑してるからだけど、ONUをリセットすれば直るよ」と言われ(直らなかった)、結局問題は解決せず。

だからネット回線を変えるのはいやなんだよ!こういう問題を診断して解決してくれる専門職って誰なんですかねぇ…


2015-10-25

部屋の模様替え完了 部屋もずいぶん広く感じます

ようやく模様替えが終わりました。そのせいでのどの調子がかなり悪いですが…今回は少し多めに予算を取り、思い切った模様替えをしてみました。

テレビ用ラック。3975円。

これまでパソコンデスク上にモニタ2台とプリンタを置いていたのですが、プリンタをモニタの向こうに置いていたせいで非常に使い勝手が悪く、しかもプリンタが結構でかく場所を取るのでデスク上の圧迫感が半端なかったです。

これを設置し、プリンタをその上に上げることで使い勝手も向上。ただし地震などによる落下が怖いので、100均で滑り止め用の柔らかシールみたいなのを購入し、プリンタの底に貼り付けてます。

3441340_LL1今回の目玉、サイドキャビネット。6998円。

これまでゲーム用のモニターを高さ100センチくらいのカラーボックスの上に置いていたんですが、高さ70センチのデスク上に置いてあるパソコンモニタとの高さのずれが気になっていました。またカラーボックスはそれぞれの棚の高さが低く、PS3なども横置きにするしかなく困ってました。

そこで「高さが70センチ」「PC本体、PS3、PS4が縦置きで並べられるだけの棚の高さと横幅」「排熱がこもらないよう背面が開いている」「安い」という条件で選び、これにしました。組み立ても30分ほどでさっくり完了。キャスター付きなので掃除も簡単です。

LOHACOという店で注文したんですけど、土曜の午後5時に注文した品が翌日午前10時に届くとは凄いな。結構大都市から離れているのですが。

HDMIセパレーター。2136円。

これまでゲーム用モニタには、「PS3」「VitaTV」の2台しか接続されてなかったので、2台用のセパレーターを使っていましたが、PS4が増えそうなので3台用を購入。小型ですし、自動的に通電している機器に切り替えてくれる(手動で切り替えることも可能)なので便利。これまでは手動ボタンで切り替えていましたが、あれ結構手間なんですよ。

フック穴付きタップを引っかけるためのフック(マグネット式)。283円。

これまでマルチタップを床に置いていたせいで、ほこりはたまるわ、コードを足に引っかけるわと良いことがなかったですが、これでキャビネットの側面に貼り付けられるようになりました。実はこれを購入する前、100均で購入した超強力マグネットをタップに両面テープで貼り付けてどうにかしようとしたんですが、磁力が重力に勝てなかったのでこちらを購入。

ケーブルを束ねるためのスパイラルチューブ。100均で2つ購入したので216円。

複数のケーブルにくるくる巻き付けて止めるタイプです。確かに仕上がりは綺麗なのですが、巻き付けるのが非常に手間なのと、あとからケーブルを追加したり分離したりしにくいのが欠点か。普通に結束テープの方がいいかもしれません。パソコン本体から伸びるケーブル群と、ゲーム機から伸びるケーブル群を分けるのに重宝してます。 ケーブルは全て少し余裕を持たせた長さに調節し、キャビネットを動かしても問題ないようにしています。

椅子の下に敷くチェアマット。7980円。これまで床にはカーペットを敷いていましたが、穴が開いてきたのと、清潔感に問題を感じたので購入。

ポリカーボネート製で、PVC製のものに比べると値が張りますが、椅子の滑りもよく、丈夫で床を傷つける恐れもなくなったため、安心感があります。予想に反して、床との間で滑ることは全くないです。

120cm*90cmの大きさは、机の下に椅子を入れない人にとっては問題ないでしょうが、机の下に椅子の足が入り込む人にとっては物足りないかも。複数組み合わせてもいいですが、値が張りますので、大事な部分のみこれを購入し、周囲はPVC製のものにするという手もあるかな(段差ができるかもですが)。

USBポート付きのデスクボード。3854円。

今パソコンのメインモニタを乗せているデスクボードは、ゲームモニタを乗せることになったので、その代わりに購入。これまで足下に置いていたPC本体をキャビネットに乗せた関係で、USBポートも遠くなってしまったので、抜き差しが億劫にならないようポート付きのを購入しました。USBメモリもUSB給電のガジェットとの相性もよさそう。

というわけで、25kほどかかりましたが、かなり満足のいく感じに仕上がりました。

このキャビネットをパソコンデスクの横に並べると、パソコンモニタとゲームモニタがちょうど真横に来るので、視線をあまり動かさずゲームが出来て快適です。
またキャビネットは確かにカラーボックスより占有スペースが大きいのですが、これまで足下に置いていたPC本体をキャビネットに収納したおかげで、デスク下から外に追い出されていた別のキャビネットをデスク下に戻すことが出来たので、空きスペースは少し増えました。またモニタの高さが下がったことで、少し部屋も広く見えるようになった気がします。(写真は作業中に撮影したので、一部完成していないところがありますが)

完成図

今気になっているのは、

  • PS3、VitaTVのコントローラーの上手い収納方法が思いつかない
  • PS3の縦置きスタンドがないのでブックエンドで代用しているがそれでいいのか
  • 棚の下段が低すぎてDVDを立てて置くことができないので、仕切板をもう1段上げたいが、面倒くさい
  • ステレオスピーカーが7年前に800円くらいで購入したやつで音が悪いので、買い換えたいがどれにすれば良いのかわからない
  • キャビネットの下にはマットを敷いてないので、フローリングが痛むかもしれない(掃除の時以外動かさないので大丈夫か?)

あたりでしょうか。もし良い知恵をお持ちの方がいたら教えて下さい。

本当はベッドの位置とかも変えて、完全な模様替えをしたかったのですが、人手が足りないのでそれは年末にでも。