ブログのデザイン一部リフォームしました【格闘！WordPress】

みなさんこんばんわ。

本日の写真もエントリーとはまったく関係のない光の国、秋葉原です。

今回は食べ物ネタは少しお休みして、ウチのブログの話をしたいと思います。

何度か見ていただいている方はお気づきかもしれませんが、少しだけブログをいじりました。一種備忘録的なエントリーではありますが、何をどう変えたのか？僕と同じように、WordPressやプラグインwp.Vicuna Ext. Customを使っている方の役に立つかもしれませんので、ざっくりまとめてご紹介したいと思います。興味がある方は是非続きをどうぞ。

タイトルを大きくした。そしてサブタイトルを変えた。

ウチのサイトの名前は”CafeDawn”ですが、テキストで書かれた屋号が小さかったので、今回太く大きめに調整しました。画像のタイトルもつけているし、別にいじる必要もないかな？と思ったのですが気になったので念のため。

さらにブログのサブタイトルを”コーヒーと革と金属とPCが好きなひとのブログ”から”コーヒーやカレーなど茶色いものの食べ歩きと、メタルなガジェットが好きな人のブログ”に改めました。

革小物は好きですが、そんなに頻繁に書くこともないので～。

faviconを実装。

ウインドウの左側に表示されるアイコンのことです。これも細かな改修ですが、せっかくだから、いつもの豆アイコンをつけてみました。

通常faviconを実装するときにはfaviconファイルをサーバーにアップして、簡単なコードをＨＴＭＬのヘッダーに書けばいいのですが、wp.Vicuna Ext. Customを用いた環境でfaviconを表示するためには、それに対応した書き方でないとだめでした。

調べてみたところ、emuxx blogさんのエントリーで、wp.Vicuna Ext. Customでのファビコン設定方法が詳細に解説されており、とても参考になりました。

ありがとうございます。

それにしても、無いときは気になりませんでしたが、つけてみると自分のサイトって感じがしてきますね。モチベーションアップに最適です。

そして大量のタブを開いた状態でも自分のサイトがすぐわかるので、実は結構便利だということに気がつきました。

Googleサイトマップに対応。

ウチのサイトの場合他のサイトや検索エンジンから、直接エントリー単体に飛んでくる方がほとんどですが、サイト名で検索した際に検索結果にサイトマップが表示されるように設定しました。

次回クロールされた後には、検索結果に色々サブ項目が表示されるはず。

やり方はＸＭＬファイルを作ってアップして、グーグルウェブマスターツールでヒモ付ければＯＫ。

「続きを読む」を大きく見やすくした。

各エントリーのリード文から全文を表示させるためのボタン（いわゆる続きを読むボタン）は、これまで英語表記の「continue reading」でした。また、記述された文字も小さく、わかり辛かったので、リード文だけ読んで離脱される方も多いのでは？という懸念が・・・。

そこで今回、文言を日本語で「続きを読む」と修正し、大きく見やすい書式に変更しました。

こちらのやり方と設定すべきファイルに関しては、カメぞうのメモ書きさんのエントリーで詳細に解説が非常に丁寧で参考にさせていただきました。ありがとうございます。

ついでに写真も大きくした。

flickrもプロ登録したことですし、アクセス解析の結果を見る限りブロードバンド経由の方が多いので、容量的に問題なかろうということで、画像の基本サイズを大きくしました。多少重くなるけど、きれいに見えたほうが楽しいし情報が伝わると思いますので。

リンクカラーを判りやすく修正。

これまで文字色同様にグレーだったリンクテキストを、idea＊ideaさんの色指定を参考に水色に修正。リンクテキストが明示的になったと思います。見た目的にこれが今回一番の改良ポイントかもしれません。

ページ番号を判りやすく修正。

うちのサイトの一番下に表示されているページ番号。こちらも見た目をFlickrの表示を参考に修正しました。以前のものより、自分が今どのページにいるのかなど、見やすくなったはず。

Ｇｏｏｇｌｅ AdsenseとAmazonアソシエイトを表示。

これは改善とは違いますが、広告＆アフィリエイトを表示するようにしてみました。Ｗｅｂで広告に近いお仕事をしている身としては自分使って、どんなものなのか「理解」ではなく「実感」したいと思ったので。

（カレーとコーヒーとやる気の足しになればいいなっていう下心は沢山あります。）

Google Adsenseの設定には、AdSense-Deluxeというプラグインを用いました。

今回、テンプレートファイル内にコードを入れ込んで、すべてのページに広告が出るように設定したかったのですが、その際のコードの書き方が良くわからずハマってしまいました。

説明によると、テンプレートに記述する際には

<?php adsense_deluxe_ads(’Ad_Name’); ?>

と記述せよと書いてありますが、Ad_Nameの具体的な記述方法がいまいちわかりませんでしたが、正解は以下のとおり。

例えば、AdSense-Deluxeで広告につけた名前が、（<!–adsense#ad01–>）だった場合は以下の記述となります。

<?php adsense_deluxe_ads(’ad01′); ?>

この手のドキュメントはプログラムが出来る人を対象に書かれていて微妙に不親切。検証に時間がかかってしまいました。

上記のような記述を広告掲載対象のphpファイルに挿入するのですが、ただ入れただけだとレイアウトが崩れてしまうので、レイアウト調整のためのBOXを新規に設置しレイアウトを整えました。

AmazonアソシエイトはG-Tools というサービスを使ってリンクを生成し、ページに貼り付けています。こちらは割りとすんなり。

ＴｗｉｔＴｈｉｓプラグインをインストール

idea*ideaさんのエントリーでも取り上げられていたＷｏｒｄＰｒｅｓｓ用のＴｗｉｔｔｅｒプラグイン、ＴｗｉｔＴｈｉｓプラグインをインストールしました。

これをインストールすると、ブログのエントリーを見てくれたTwitterユーザーの方が、僕のブログに興味を持ってもらった時に、ボタンを押してそのまま内容をtwitしてもらえます。

ただし、こちらのプラグインは普通にインストールしたままだと、レイアウトが崩れまくってしまうので、twitthis.phpの122行目で微妙にレイアウトを調整しました。詳細は以下のとおり。（※”\”は”￥”です。）

$script .= “<div style=\”margin:20px 40px \”text-align:”.$align.”;\”>\n”;

まぁ微妙に上下にマージン足しただけですが、どこに記述したらよいか僕自身わかりづらかったので。備忘録です。

まとめ

全体的に、別にどうでもいいじゃないって感じの調整かもしれませんが、細部のディテールが人に与える印象ってのは馬鹿にできないですし、何より自分が一番気になっていたことが割とすっきりしたので大満足。

これでより一層、純粋に「書くこと」に専念できるというものです。

そんなこんなで、皆様これからもウチのサイトをよろしくお願いいたします。

教科書には載らないニッポンのインターネットの歴史教科書 ばるぼら by G-Tools