2013-07-24

Excelで作成した表をWordPressで使用する

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

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

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

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

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

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

C:Users[UserName]AppDataRoamingMicrosoftAddIns

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

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

Excel2007の場合です。

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

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

手順2すると先ほどの画面に戻り、「有効なアドイン」に「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タグはそのまま残るので、いちいち更新の度にソースをいじる必要はなくなります。

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


2013-05-22

Newpost Catchでウィジェット部分のデザインをカスタマイズする

本日は簡易更新です。

うちのサイトのサイドバーに、「最新のエントリ」という欄があります。これはプラグイン「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」バージョンアップしました | 今村だけがよくわかるブログ


2013-04-28

テイルズ オブ シリーズ カットイン集作りました

長期休暇なので、サイトに新しいコンテンツを追加しました。

テイルズ オブ シリーズ カットイン集

とりあえず既存のTOX2に加え、TOI-Rのカットインも追加しました。TOH-Rも準備は進めているので、そのうち公開できそうです。

あと著作権について今後の備忘のために書いておきますが、SCEJにメールで問い合わせたところによると、

ゲームアーカイブスのスクリーンショットに関するルールは当社製品で作成されたスクリーンショットであれば全てに共通した内容

で、ゲームアーカイブスのスクリーンショットに関するルールによると、

スクリーンショット機能を使用して撮影した画像は、ご自身のblogへの掲載や他のPSP®へのアドホック通信での画像送信、PSP®の壁紙に設定するなど、ご自由にお楽しみください。
ただし、画像について以下の行為を行うことは禁止させていただきます。
・著作権表示を削除または加工して、配布または配布可能な状態にすること
・画像の同一性を害するような加工を加えて配布または配布可能な状態にすること
・第三者の権利を害するような形態での利用
・営利目的での利用
・アダルトコンテンツにおける利用およびアダルトコンテンツを含んだサイトにおける利用
・PlayStation®Network利用規約において禁止される行為およびそれらを含むサイトにおける利用など、当社が不適切と判断する形態での利用

とのことなので、問題ないと思います。というか、ここらへんFAQにでもはっきり書いておいてほしいのだが。


2013-03-02

ナディアな人々 更新(おまけ劇場その9)

ナディアな人々を更新しました。正式なスペースルックってなんじゃい。

ナディアな人々:ナディアおまけ劇場 その9 失われた時を求めて…―の巻

スタッフも言ってましたけど、これ1本で30分のアニメ作れますよね。

100000hitあと私事で恐縮ですが、本日当サイトは10万アクセスを達成しました。これからも皆様に楽しんでいただいたり、役に立てていただける情報を提供できるようがんばりますのでよろしくお願いします。

星界情報も期待してください!


2013-01-04

WordPressのindexページに更新情報を表示する+更新から一定時間「New!」と表示する

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

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

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

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

<!-- 新着情報 -->
    <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 でのサイト構築のコツがつかめるかもしれない(コード 付き)


2012-12-24

パンくずリストを付けてみました

久々の連休ということで、例によってサイトをちょこちょこいじっていました。

今回はパンくずリストを追加してみました。パンくずリストというのは、ページ上部に設置するナビゲーションで、大抵

HOME > 親カテゴリ > 子カテゴリ > 記事のタイトル

みたいになっているものです(よく分からなければ、この記事のタイトルをクリックして、リンク先を見て下さい。多分

HOME > パソコン > ウェブサイト作成 > パンくずリストを付けてみました

となっていると思います。

WordPressの場合、パンくずリストは「アーカイブ」「固定ページ」「単一記事」、さらにこだわるなら「404テンプレート」「検索結果」などに別々のスクリプトを設置しなければいけないのですが(プラグインを使う方法もあるのですが、現時点ではあまりオススメできません)、その問題を解消するのにWebデザインレシピさんの以下の記事がとても役立ちました。

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

で、ひとまず試してみて、ちょっと気になったところに手を加えています。備忘のためにメモ。

  • コードをそのままfunction.phpに貼り付けると、エラーが出てサイトそのもの(ダッシュボード含む)にアクセスできなくなってしまった(バックアップのfunction.phpをFTPでアップロードして事なきを得た。バックアップしてなくてもFTPでfunction.phpをダウンロードし、それを→の通り書き直してアップロードすれば問題ないはず)。1行目と最終行を削除すると上手くいった。
  • デフォルトだとパンくずリストはリスト形式(縦一列表示)になってしまうので、スタイルシートでul/liを適切に設定する。うちの場合は
    /* breadcrumb */
    .pan {
     font-size: 75% ;
     width: auto;
     margin: 0;
     padding: 5px;
     border: 1px solid #009;
     line-height: 1.5;
     color: #009 ;
    }
    .pan ul{
     list-style: none ;
    }
    .pan li{
     float: left ;
     margin: 5px ;
    }
    

    とスタイルシートに記入して、各ページに

        <div class="pan">
          <?php breadcrumb(); ?>
        </div>
    

    と挿入。これで横一列に表示される。

アクセスできなくなった時は死ぬかと思いましたが、何とか解決してよかったです。
しかしこのサイトは非常に勉強になりますね…記事タイトルに違わぬ内容でした。

※ゲーム一言日記

  • サモンナイト4…第7話更新。機械人形三姉妹+弟がそろい踏み。
  • エクシリア2…Chapter14をちょっとだけ更新。いいイバルは消えたイバルだけ。

2012-08-16

YARPPをLinkWithin風にした上で、全ての記事にアイキャッチ画像を表示する

久しぶりにこのサイトのデザインをいじってみました。個別記事の末尾に、関連エントリを自動で表示するようにしています。(どういう意味か分かりにくければ、↑にあるこの記事のタイトル(「YARPPをLinkWithin風にした上で、全ての記事にアイキャッチ画像を表示する」)をクリックして個別記事のページに飛び、末尾をご覧下さい。

やり方については、以下の記事を参考にさせてもらいました。

WordPressプラグイン「YARPP」と「Auto Post Thumbnail」を使用して関連記事を表示するのにようやく成功した | OZPAの表4

…が、この方法だとうちのサイトでは問題が。

うちのサイトは個別記事のサムネイル(正式名称は「アイキャッチ画像」)を表示しないデザインになっているので、僕もいちいち全ての記事についてサムネイルを設定することはしていません。上の方法を使うと、サムネイルを設定していない記事は、関連エントリに表示されなくなってしまいます。そこで、次のようにソースを修正してみました(ハイライト部分を追加)。

<?php if(have_posts()):?>
     <p>こっちの記事も合わせてどうぞ</p>
     <div class="related-post">
     <?php while(have_posts()) : the_post(); ?>
          <?php if(has_post_thumbnail()):?>
               <div class="related-entry"><a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail("thumbnail"); ?><br clear="all"><?php the_title(); ?></a></div>
          <?php else: ?>
               <div class="related-entry"><a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>"><img src="[デフォルトで表示させる画像のパス]" width=150 height=150><br clear="all"><?php the_title(); ?></a></div>
          <?php endif; ?>
     <?php endwhile; ?>
     </div>
<?php else: ?>
     <p>関連記事はありません</p>
<?php endif; ?>

こうしておけば、サムネイルが設定されていない記事には、デフォルトで表示させる画像が一律に表示されるようになります。

ググってもこのことについて触れたサイトが見つからなかったので、備忘のために記事にしておきます。


2012-03-07

テキストサイトとかBBSとかポップアップ広告とか死語すぎるだろ

このサイトは移転前にあったCOOL ONLINEのサービスが5月20日で終了するようです。旧サイトはすでに跡地になっていてこのサイトへのリンクを残しているだけなのですが、最近はそこからやって来られるお客様もいらっしゃらないようなので、とりあえず無事引越が終わったと考えてもいいかな。

こういうサービスが次々なくなっていくっていうのも、ブログが主流になったという時代の変化なんでしょうね…。かくいう僕も流されているわけですが。でも最近、TOK2(個人サイトが流行り始めた頃に、無料でホームページを開設するスペースを提供してくれるということで一世を風靡したサービス。無料の代わりにポップアップ広告が出るという今では考えられない仕様)に置いてあったBBS(サイトを最初に設置したのはOCNで、CGIを設置することが出来なかったため)が今でも存在しているということを知って驚愕。これいつ閉鎖するんだろ。仮に閉鎖のお知らせが発送されても、メアド変わってるから届かないはずだけど。


2012-01-04

ウェブサイトを改修しました

長期休暇のお約束で、ウェブサイトを少々いじりました。備忘のために記録を残しておきます。

  • サイドバーから「最近の投稿」をなくしました。
    本文見れば最近10日分の投稿が表示されていて必要性が感じられなくなったので。
  • サイドバーの最上部に、「検索フォーム」「その他のコンテンツ」を移動しました
    最近テイルズのプレイ日記目当てのお客様が増えているように感じたので、思い切って最上部に移動しました。
    日記ログまとめ」も先日PHP化しています。
  • タグクラウドのフォントサイズを下げました
    タグの種類が増えて見づらくなってきたので。
    タグクラウドを管理するのであれば、Configurable Tag Cloudが使いやすいと思います。こちらのサイトを参考にさせていただきました。
    WordPressのタグクラウドを細かにカスタマイズできるプラグイン『Configurable Tag Cloud』|MONODEZ
  • サイドバーの下部に、外部リンクを設置しました
    旧リンクページは数年来更新をしていなかったので、閉鎖サイト等を整理し、新たなリンクを作りました。
  • サイドバーの幅を変更しました
    これまでのは幅が狭すぎて、カテゴリとかの表示が不格好だったので。
    ちなみに僕が使用しているのは、小粋空間様の配布しておられるテーマを改造したものですが、幅を変更するときは、style.cssの以下の部分を変更する必要があります(オリジナルのテーマも同様)。
    • form>#searchtext>width
    • 2カラムリキッド(左サイドバー) >.layout-two-column-liquid-left .blog>margin-left
    • リキッドレイアウト・サイドバー>.layout-two-column-liquid-left #links-left-box>width
  • 各投稿の末尾に、タグを表示することにしました
    「タグ: <?php the_tags(”, ‘,’); ?>」で設置出来ます(<>は半角にしてください)

 


2011-08-10

新規開設サイトは変動が激しいと言うし

ここ一週間ほど急にアクセス数が減少したなぁと思って原因を調べてみたのですが、どうやらGoogleでの検索順位が急激にダウンしているようです。

まあむしろこれまでの順位が分不相応に高すぎたのであるべき姿に戻っただけなのですが、Googleパワーの恐ろしさを思い知りました。うちのサイトは検索サイト経由の方がほぼ半分くらいなのですが、それがほとんど0になりましたからね…なんで急落したのかその原因が分からないから対策も立てようがないし。

一応SEOについての情報を載せているサイトを幾つか巡ってみたんですが、途中で「そもそもアフィリエイトに力を入れているわけでもなし、アクセス数はただの結果であって目的ではない」ということを思いだし、放っておくことに決めました。

そんでその反動で、事務所のウェブサイトの方はSEO対策に力を入れている検索サイトに登録してもらうことになりました。けっこう費用がかかるんですが、今回の経験を生かして検索順位の維持が難しいことをネチネチと指摘し、頑張って交渉を続けた結果、ほぼ単価を半分ほどにしてもらいました。これで少しは事務所のウェブサイトに人が来るといいな。