*Y.A.S.*

現在ベルセリアのプレイ日記を更新中ですが、表紙のページは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が適応されていることが分かりますね。編集も直感的に行えるので便利ですよ。

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

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

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

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

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

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

更新情報の改訂

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

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

ブログカテゴリの整理

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

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

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

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

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

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

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

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

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

5/27追記：

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

使ってる人いたんだ。そりゃよかった。 http://t.co/OVsmBy1UWV

— 高橋文樹 (@takahashifumiki) 2015, 5月 21

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

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

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

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

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

うちのウェブサイトは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/月のファイアバードかなぁ。とりあえずこちらのサイト様が参考になりました。

• WordPressのレンタルサーバー比較おすすめ　2014年 　個人的な考察ランキング | eBook Brain
• WordPressでサイト運営するならこのレンタルサーバ 中級者編 | WordPressの使い方を覚えたい

最近始めた榊ガンパレの年表ですが、表が非常にでかく情報量も多いため、ひとまずExcelで作成し、それをHTMLに変換してWordpressで使用するという形を取っています。

Excelには元々、表をHTMLに変換する機能が備わっていますが、かなり使い勝手が悪いため、こちらのサイトを参考にさせていただき、プラグインで処理しています。結構見た目きれいでしょ？

参考サイト：Excelで作成した表組みをWordPressに取り込む | よもやま雑記帳

いくつか自分に合うように修正を加えている部分もあるので、そのことを備忘のために記載しておきます。

• Excelアドインのセットアップについて（Vistaの場合）

上記サイトではXPが例に挙げられていますが、Vistaの場合やや仕様が異なります。
ダウンロードしてきたプラグインを解凍したら、フォルダごと適当な場所に保存しましょう。別にどこでもいいのですが、どうやらデフォルトの保存場所は

C:Users[UserName]AppDataRoamingMicrosoftAddIns

のようなのでそこに放り込んでおくと管理しやすいでしょう。

• アドインの有効化について

Excel2007の場合です。

まず左上のメニューから、「Excelのオプション＞アドイン＞設定」と選択します。

次に「参照」を選ぶと、先ほど保存したAddInsフォルダが開くので、先ほど保存したアドイン「XLS2HTMLTable.xla」を探してダブルクリックします。

すると先ほどの画面に戻り、「有効なアドイン」に「Xls2Htmltable」という表示が増えているので、チェックボックスにチェックを入れ、「OK」をクリックします。これでアドインが有効になりました。

※アドインが有効な間、アドインのフォルダを移動させたり削除したりする事は出来ません。アドインが邪魔になった場合は、まず先ほどのチェックボックスからチェックを外し、アドインを無効化しましょう。

• 表の作成について

アドインの仕様上、「（垂直方向の）セル内の配置」（上寄せ、下寄せなど）、「フォントの装飾」「フォントの大きさ」などは反映されません（セル内の配置は垂直方向は中央寄せがデフォルト）。

解決する方法は幾つかあると思いますが、僕はこうしています（HTML的に正しいかどうかは僕にはわかりません。あくまで見た目と手間を重視しています）。

• tableタグとtrタグの間にtbodyタグを挟み、そこでセル内の配置についてのスタイルを指定する。例：上寄せにするのであれば、

<tbody style="vertical-align: top;">

• フォントサイズについては、tableタグで直接指定する。例：全体を8ptのフォントにするのであれば

<table class="excel" style="width: 100%; font-size: 8pt;" border="0">

• フォントの装飾については、Excelのセル内に直接装飾するタグを記入するのがよいでしょう。例：赤色で強調文字にしたい場合は、Excelのセル内の文字を直接装飾するのではなく、以下のように直接タグをセル内に記載しておきます。

<span style="color: #ff0000;"><strong>文字</strong></span>

• アドインが吐いたHTMLソースを貼り付ける際に、tableタグから下の部分を貼り付けるのではなく、trタグから下の部分を貼り付けるようにすれば、表を更新してもtableタグ、tbodyタグはそのまま残るので、いちいち更新の度にソースをいじる必要はなくなります。

• 表の設定について

こんなところでしょうか。ご参考までに。

本日は簡易更新です。

うちのサイトのサイドバーに、「最新のエントリ」という欄があります。これはプラグイン「Newpost Catch」を使用して表示しているのですが、直接PHPをいじっているため、バージョンアップの度に設定をいじる必要があります。先日もバージョンアップが久々にあったのですが、どうやっていじっていたかを思い出すのにずいぶん時間がかかったので、備忘のために記録しておきます。

ちなみに、デザインを変更したい場合は、プラグイン編集で、class.phpの

/**▼ create widget ▼**/

以下をいじれば可能です。

デフォルトでは、記事のタイトル→記事の日付の順に表示されることになっていますが、ボクは日付→タイトルの順に表示したいので、

<span class="title"><a href="<?php esc_attr( the_permalink() ); ?>" title="<?php esc_attr( the_title() ); ?>"><?php esc_html( the_title() ); ?>
</a></span>
<?php if ( $instance['date']['active'] == true ) { ?>
<span class="date"><?php esc_html( the_time( get_option('date_format') ) ); ?></span>
<?php } ?>

とあるのを、

<?php if ( $instance['date']['active'] == true ) { ?>
<span class="date" style="font-size:100%;"><?php esc_html( the_time( get_option('date_format') ) ); ?></span><br />
<?php } ?>
<span class="title"><a href="<?php esc_attr( the_permalink() ); ?>" title="<?php esc_attr( the_title() ); ?>"><?php esc_html( the_title() ); ?>
</a></span>

と入れ替えた上で、2行目を若干修正して、日付のフォントサイズを下げ、日付とタイトルの間に改行を挟んでいます。

先日のバージョンアップで、かなりカスタマイズの幅も広がったそうです。お使いの方は公式サイトをのぞいてみられてはいかがでしょうか。

【「カテゴリ別に表示できる」などいろいろ機能追加しました】WordPressプラグイン「Newpost Catch」バージョンアップしました | 今村だけがよくわかるブログ

見ての通りなのですが、ブログのトップページに更新情報を掲載するようにしました。

これまで「ゲーム一言日記」みたいな形で更新情報を載せていたのですが、あれ結構書くのを忘れるんですよね…というわけで自動化してみました。

いくつかのサイトで得た情報をまとめて成形したので、備忘のために覚え書き。

• とろテク – WordPress:新着記事と更新記事を一覧表で表示する
  基本のソースコードはこちら。ただこれをこのままindex.phpに挿入すると、index.phpに、更新した固定ページまでも表示されるようになってしまうので(これはこれで別の使い道がありそうですが)、
• 【wordpressで特定のカテゴリーの最新記事を表示する】WP_Queryを使えば簡単ですね | 今村だけがよくわかるブログ
  こちらでその解決方法(コードの終わりにクエリ情報をリセットする)を教えてもらいました。(24行目)
• WordPressでNew!を表示するパターン別４つの方法 | WordPress（ワードプレス）コミュニティ
  「New!」表示についてはこちらで。僕は最終更新日から28時間の間New!を表示するように設定しています。(7～15行目)28時間なのは、大体の人は毎日同じ頃にウェブブラウジングをしているような気がするので、24時間+誤差4時間の意味です。

最終的なコードはこんな感じ。

<!-- 新着情報 -->
    <div class="update-header">新着情報</div>
    <div class="update">
    <?php query_posts('showposts=10&post_type=any&orderby=modified&exclude=1'); ?>
    <?php if (have_posts()):while(have_posts()):the_post(); ?>
    [<?php the_modified_date('Y-m-d'); ?>] &nbsp;
    <?php
    $hours = 28; //Newを表示させたい期間の時間
    $today = date_i18n('U');
    $entry = get_the_modified_time('U');
    $kiji = date('U',($today - $entry)) / 3600 ;
    if( $hours > $kiji ){
    echo '<span style="color: #ff0033; ">New!</span>'; //spanタグの中身はテキストではなく画像も可能
    }
    ?>
    <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title_attribute(); ?></a>
    <?php if (get_post_time() == get_post_modified_time() ){
    echo "を追加しました。";
    }else{
    echo "を更新しました。";
    }
    ?>
    <br />
    <?php endwhile; endif; wp_reset_query();?>
    </div>
<!-- 新着情報 -->

あと、先日ご紹介したパンくずリストについてですが、いまいち使いこなせていなかったので疑問点を作者の方にお聞きしたところ、とても親切な回答を頂きましたので、再度リンクを貼らせていただきます(詳細はリンク先にて)。

パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるかもしれない（コード 付き）