ブログデザインを変更
以前から、このブログのデザインをいい加減変更したいと考えていたのだが、なかなか着手できていない。
とはいえ、一気に全部変更すると大変だし、途中で挫折する可能性もあるので、少しずつデザイン変更をしていくことにした。
ということで、今日はタイトル周りと、ボックスのレイアウトを少し変更。少しすっきりしてみやすくなったかな？（気のせい？）
まぁ、ゆっくりと少しずつデザインを変更していきますかね～。
ブログ記事に対するつぶやき数を表示
最近いろいろなブログで、記事に対するつぶやき（Tweet）が何件あるか、そして、その記事から直接Retweetできる機能がついているものを見かける。自分のブログの記事に対するTweetが数多くあるとは思えないが、せっかくなのでこの機能を自分のブログに設置してみようと思って調べてみた。
このような機能を提供しているのが、TOPSYというサイト。このサイトは、Twitterによるつぶやきの検索エンジン。ここでは、気になる言葉やサイトにかかわるつぶやきを検索することができる。
このTOPSYの機能を使って、ブログにつぶやき数を表示するWordPressのプラグインがある。それが、
というプラグインである。
インストールは簡単。プラグインのページからダウンロードして解凍後、フォルダごと自分のWordPressがインストールされているサーバーのPluginフォルダにアップロードする。
あとは、WordPressのプラグイン管理で有効にして設定するだけ。テーマに関数を埋め込む必要もなく、ただプラグインの設定で記事のどこに表示するか設定するだけでブログに反映される。その設定自体も簡単でわかりやすいのでここではその方法については記載しない。
といことで、思ったよりも簡単に設置することができた。
PageNaviのスタイルシート
いろいろとデザインをいじっていると、他にも気になるところがちらほらと。
で、一番気になっていたところは、ページの一番下に表示されているページナビの書式。
というのも、このページナビで表示される書式が、どこかのスタイルシートを参照しているはずなのですが、自分で設定した記憶がない。
デフォルトでもそんなにこのページのイメージとそんなに違わないので、そのまま利用してきただけでした。
ということで調べてみると、PageNaviのプラグインディレクトリの下にある、pagenavi-css.cssというファイルがこのページナビの書式を設定しているスタイルシートだと云うことが判明。つまり、ページナビの書式を変更するためにはこのファイルを編集すれば良いということになる。
しかし、ここで問題が発生。もし、これを編集すると、今後のバージョンアップでこのファイルが上書きされ、せっかく設定した内容が消されてしまう可能性がある。もしそうだとすると、編集する意味がない・・・。
まさか、そんな不便な作りはしていないだろうということで、さらに調査してみると、どうやらこのpagenavi-css.cssというファイルを、自分のテンプレートフォルダにコピーすると、PageNaviのプラグインディレクトリにあるファイルではなくテンプレートフォルダにコピーされたファイルの設定が優先されると云うことが判明。
ということで、pagenavi-css.cssをテンプレートフォルダにコピーして編集することにしました。
せっかくなので、単にスタイルシートの設定を変えるだけでなく、コメントも追加してみました。
the_date関数
このブログのデザインをまた少しいじりました。
大きな変更点としては、エントリを日付ごとに区切りを入れるようにした点。
エントリごとに日付を表示させるためにはthe_time関数を使っていますが、今回使う関数はthe_date関数。
the_time関数は、同じ日に複数の記事があっても関係なく日付が表示されるが、the_date関数は、『同じ日に複数の記事がある場合は、最初の記事とともに一度だけ出力される』ものである。
つまり、この関数を使えば、日付ごとに区切りを入れることができるようになるわけです。
そこで、挿入したコードは次の通り。
<!-- the_date関数 -->
<?php the_date('jS M, Y', '<div class="entryDate">', '</div>'); ?>
<!-- ここまで -->
この関数の引数は3つあり、一つ目が日付フォーマットで、二つ目が日付の直前に出力するコードやテキスト、三つ目が日付の直後に出力するコードやテキストとなります。
今回は、イギリス表記の日付フォーマット（エントリの投稿日時と同じ）で、日付の表示をスタイルシート設定するentryDateというボックスを設定しました。
あとは、ちょこちょことデザインを変更してみました。
このデザイン、一から作って結構長い間使ってきてますが、初期の頃に比べてかなり改善されてきた感じ。
長い時間をかけて、ちょっとずつ洗練（？）されてきてます。
ここまで来ると、新しいデザインに作り替えるのが面倒になってきてるのも事実（笑）
WordPress 2.9にバージョンアップ
遅ればせながらWordPressを2.9にバージョンアップしました。
で、問題が発生。投稿した記事に関連する記事をSimple Tagsの機能で表示させていたのですが、このバージョンではSimple Tagsが対応していないとのこと。
ダッシュボードを開くと、画像にあるようなアラートが表示されます。
ただ表示されないだけならいいのですが、表示用の関数を入れたところ以降のhtmlがすべて消えてしまっている。
つまり、サイドバーとかが消えて、エントリーの詳細ページを見るとコメントも入力できない状態になっていました。
とりあえず、「single.php」の中から関連記事を表示するための関数を削除してみたらコメント欄やサイドバーの表示がされるようになりました。
Simple Tagsのソースをいじれば、もっと本質的な解決ができるのかもしれないけど、今回はSimple Tagsのバージョンアップを待つことにします。
ちなみに、削除した関数は下記の関数。
<?php st_related_posts('title=<h6>関連する記事</h6>'); ?>
CSS Beauty | CSS Design, News, Jobs, Community, Web Standards:
CSS Beauty | CSS Design, News, Jobs, Community, Web Standards:
このサイトでは、優れたCSSのサイトを紹介しています。ここで紹介されているCSSのサイトは秀逸なものばかりで、Web系の雑誌等で話題になったサイトはここに載っていたりします。
また、サイトの紹介だけでなく、Webデザインに関する各サイトのニュースを載せています。ある意味、Webデザインのポータルとしても使うことができそうです。要チェックのサイトですね。
Web Designer Wall – Design Trends and Tutorials
Web Designer Wall – Design Trends and Tutorials
カナダのフリーランスデザイナー、Nick La氏のブログ。ブログのデザイン自体のきれいさも然る事ながら、Webデザインに関する様々なTipsが盛りだくさんです。
フォントから画像、そしてボックスのバランスまで、細部まで凝っている、本当にお手本のようなサイトです。
Webのデザインに迷ったら、このサイトを見てると参考になるかもしれませんね。
なお、Nick La氏のWebサイトもあります。そのサイトから同氏に関する詳細な情報を見ることができる、とのことですが、現在は作成中のようです。
WordPressへSearch formを追加する方法
たいした話では無いのですが、このブログテンプレート、ブログ内の検索フォームをつけていませんでした。
意図的にやったわけではなく、ただ抜けていただけです。気づいてはいたのですが、面倒くさくて今まで放置してきていました。
で、ちょっとブログデザインを変更しようかと思っていたので、まずは検索フォームの追加から行うことにしました。なので、備忘録も兼ねて方法を書いておきます。
WordPressでの検索フォームの追加で一番簡単な方法は、ウィジェットの追加でサイドバー等にウィジェットとして追加してしまうことです。
しかしながら、これはあくまでもウィジェットがおける範囲にしか置くことができません。つまりヘッダー内や、ウィジェットを置く場所と指定していない場所への設置ができないと云うことになります。
もし、ウィジェットとして設置するところ以外に設置したいと云うことになると、その関数を追加する必要があります。その関数は次のget_search_formという関数であり、これを自分の検索フォームを設置したい場所に記入します。
<!-- 検索開始 --> <?php get_search_form(); ?> <!-- 検索終了 -->
久しぶりにMT4のデザイン
すごく久しぶりに、MOVABLE TYPEのテンプレートデザインに着手。
最近は主にWordPressが中心だったので、また１から勉強し直しという感じ。
この秋にはMOVABLE TYPE 5がリリースされるみたいですが、またデザインの仕方が変わるのかなぁ？
MOVABLE TYPEは、テンプレートのデザインに慣れてきた頃に新しい仕組みになって、デザインするの苦労すんだよなぁ。
まぁ、とりあえずはMOVABLE TYPE 4をがんばってみることにします。
欧文フォントのフリーダウンロードサイト
久々にTシャツのデザインでもしようかと思ってフリーのフォントを探していたところ、行き着きました。
デザインフォントやイラストフォントも多数あります。
これだけのフォントを無料でダウンロードできるのはうれしいですね。
おすすめのサイトです。
