2009年10月の記事一覧

WordPress用のプラグインをこの数カ月、色々な種類を毎日使ってみたのですが、
本当に役立つ、若しくは便利と思ったプラグインを紹介します。

現時点で、私が感じたプラグインの総括です。

Custom Field GUI Utility

カスタムフィールドを、もっと便利に使いやすくするために絶対必要！
意外とこのプラグインを導入されてない方多いようです。
Custom Field GUIをベースに改良していることでも有名。

日本語表示で確認できますし、画像確認も可能なので、本当に使いやすいです。
これは絶対に導入するべき。カスタムフィールドを使用する方にとっては必需品です。
というか、入れない理由が見つからないほど秀逸なプラグイン。

WPtouch: Mobile Plugin + Theme for WordPress ↔ BraveNewCode Inc.

iPhoneユーザーが増えてきている昨今。導入したほうが良い。
知人でiPhoneを持っている人が多いので、導入しようと思って使ったプラグイン。
現状を見る限り、一番使いやすいiPhone対応のプラグインだと思います。

OraTransplant » Ultimate Google Analytics plugin for WordPress

グーグルアナリティクスを、WordPress上に簡単に導入できるプラグイン。
通常ならば、個々のページ全てにセッティングする必要がありますが、
このプラグインを利用すれば、一括でセットできます。
詳しい説明は、過去記事を参照。
Ultimate Google Analyticsインストール設定方法

Stop Comment Spam and Trackback Spam « Akismet

コメントスパム対策に、絶大な威力を発揮するプラグインです。
当方のサイトにも海外からのスパムが頻繁にあるのですが、見事にキャッチして
くれてます。WordPress最新版には、既にデフォルトの状態でインストール済みになっています。
使い方については、こちらの記事を参照してください。
Akismetの設定

Contact Form 7 (日本語)

日本語によるメールフォームプラグインです。
メールフォームを細かくカスタマイズ(スタイル)を変更することも
可能です。デフォルトの状態でも使えますが、
カスタマイズするともっと使える。これも絶対導入するべきプラグイン。

All in One SEO Pack

定番中の定番。
タイトル表記、discriptionの設定、keywords設定
を記事ごとに可能にするプラグイン。
重複したdiscription、keywordsを避けるためにも必要。
こちらも詳しい説明は、当サイト内で書いてます。
All in One SEO Pack使い方設定方法

Google (XML) Sitemaps Generator for WordPress

sitemap.xmlを生成してくれるプラグイン。必須です。

WordPress Database Backup – Il Filosofo

データベースのバックアップ支援プラグイン。
定期バックアップの設定を利用して、自分のEメールアドレスを
登録しておくと非常に便利。

以前バックアップしてなくて、全てのデータが消滅したこと
があり、それ以来必ずバックアップをとる癖をつけてます。
消滅したときのショックははかりしれません。

僕みたいに、精神的なダメージをうけないためにも必ず導入しましょう。

Wordpress Plugin – My Category Order | Geeky Weekly

カテゴリーの並び順を、自分の思うように並べ替えることが可能。
サイトの規模が大きくなると必須のプラグイン。

Ktai Style

日本の携帯に対応したプラグイン。
かなり有名なプラグインですね。
過去に書いた記事がありますので、そちらを参照してみてください。
Ktai Style導入方法

Rick’s HideOut – Twitter for WordPress

自サイトサイドバーに、自分のTwitter上でのコメントを簡単に表示させることの
できるプラグイン。他にも便利な機能を網羅。
Twitterを頻繁に利用する方にとっては、連動させることができるので非常に便利。

Maintenance Mode Plugin — Software Guide

メンテナンス作業時のために、導入しておくと便利なプラグイン。

Breadcrumb NavXT | Mtekk’s Crib

パンくずリストを表示するために必要。

Lightbox 2 Wordpress Plugin

写真などに高級感を与えるプラグインとして有名。
当サイトでも以前導入したときのことを、まとめてます。
タグの使い方も解説してますので、興味のある方は見てみるといいかも。
Lightboxプラグインの設定

Download the Photo Dropper Flickr Wordpress Plugin

サイト内で、画像を頻繁に利用する方には便利なプラグイン。
画像をあまり使わない方には必要ないと思います。
CCライセンスのイメージ検索を行い、使いたい場合出典先を自動で明記してくれます。
このプラグインを利用すると、フリーの写真を自ら必死に探す必要がなくなるでしょう。
かなり便利。

便利なプラグインがまた見つかりましたら、随時このページに追加していこうと思います。

改行を広く、連続でとりたいなぁと思うことがよくあるのですが、
WordPressは連続改行はできないようです。基幹的な問題で、WordPressは、
デフォルトの状態で連続改行はできないようになっているようです。

複数改行できるプラグインがあるようですが、WordPressの基幹部分に影響がでない
とも言いきれないので、今回はプラグインの解説はしません。というか、皆さん知ってますからね。
改行プラグインの使い方については、よそのブログでも参考にしてください。

僕が今回試してみたのは、
CSSを利用して、padding-topを調整する方法です。

複数改行したい場所の文字列を、上記の＜p styleから始まるタグで囲みます。

emの部分は、お好みに合わせて、その都度ご自分で調整してみてください。
広くとりたいならば、値を大きくしてください。微調整できますから。
marginでも可能。僕はとりあえず、paddingを使ってみました。

実際に使ってみると、こんなふうになります。

綺麗に複数改行されたように見えると思います。
実際は【BRタグ】を挿入しているわけではないので、複数改行とは言えないですが、
より自然に見えると思います。結構使えるテクニックなので、覚えておくといいかも。

それと、もうひとつネタ。
ビジュアルエディタを使用する場合、Enterは、改行ではな＜P＞タグで括られる。
これを回避する方法としては、Shiftキー＋Enterで改行が入る。
＜BR＞タグですね。ビジュアルエディタを多用する人には、当り前の知識かも知れませんけどね。

皆さんの参考になれば幸いです。
失礼します。

WordPress
オープンソースで開発されており、GPLによる使用条件で定められている
ブログソフトの一種。
豊富なプラグインやthemeが用意されています。当サイトもWordPressを使用してます。
データベースはMySQL。言語はPHP。Wordpressを利用して、サイトを構築しようと思って
いる方は、こちらのドメインポリシーのページに目を通してください。

WordPressドメインポリシー

トップレベルドメインに、wordpressというドメイン名を使わないでくれということです。

RSSリーダ

一番分かりにくい概念ですが、実際に使ってみたほうが理解が早いと
思います。Googleリーダーが一番初心者にも扱いやすいと思います。
これを利用することにより、あなたのお気に入りのブログの最新情報
を素早く確認することができます。

わざわざ、サイト上まで行く必要もなく、時間の節約に繋がるわけです。
僕も、お気に入りのサイトがいくつかあるのですが、頻繁にサイトを確認して
回るわけにもいかないので、Googleリーダーで確認します。

RSS【RDF Site Summary】
簡単に申しますと、サイトの情報、記事の要約文などが含まれたデータの
ことです。上記のRSSリーダはこの情報を受信しているわけです。
２つセットで理解するとより分かりやすいと思います。

Ping
端的に申しますと、あなたのブログ更新情報を知らせるメッセージの一種です。
ちなみに、更新情報のことを別名フィードとも言います。
ブログ用検索サイトに更新情報を伝えることが可能です。

トラックバック【track back】
自分のブログに、他の方が書いた記事を引用して書く場合、引用された
相手側に、引用しましたよ！と伝える様式。

パーマリンク【permalink】
ブログ記事一つ一つにつけられる、URLのことです。
WordPressで言う、新規投稿ですね。

CSS【Cascading Style Sheets】
Webサイトのデザインの決めてにもなる、非常に重要なファイル。
WordPressで言いますと、皆さんお使いのthemeの中に、CSSが含まれています。
CSSを扱うには、独自の文法を学ぶ必要があると言えます。
HTMLを学ぶときに一緒に学ぶと、より理解が深まると思います。

PHP【Hypertext Preprocessor】
WordPressは、全てPHPを用いて書かれています。
CGIプログラムを書くための、プログラム言語の一種です。
簡易的な言語とは言われていますが、初学者が簡単に使えるようなものでも
ない気がします。私も目下勉強中です。

CGI【Common Gateway Interface】
サーバーと外部プログラムが会話する仕組みの一種。
WordPressの根幹となる仕組み。

FTP【File Transfer Protocol】
WordPressのファイルなどを、サーバー上に転送する通信手段の一種。
フリーのソフトで、何を使えば良いか分からない方は、FFFTPというソフトが
ありますのでそちらをお使いください。フリーのソフトです。

mysql
データベースシステム。WordPressを利用するには、必要不可欠。

SEO【Search Engine Optimization】
検索エンジンで、上位表示を獲得するために行う様々な対策の呼称。
SEOに絶対的なものは存在しません。全て相対的なものだと私は思っています。
Web上でも様々な情報が錯綜してますが、結局は良いコンテンツを作ることに重点をおくことが重要。

炎上
コメント欄に大量の書き込みがあり、運が悪いとサイト閉鎖にまで発展して
しまう非常に恐ろしい現象の一種。
炎上してしまわないように、ブログ管理者は常に最新の注意を払い、記事を書く
必要があるとも言えます。

HTML文書の文法チェックが可能な、Another HTML-lint gatewayのご紹介です。
既に有名なサイトではありますが、WordPressを利用してサイト構築されている
方にとって、エラーチェックもできる有益なサイトと言えます。

このサイトの良いところは、チェックをしたいURLを直接はりつけて、その場で
すぐに調べることができます。非常に簡単に使うことが可能です。

目視で、レイアウトの不自然さが確認できればよいのですが、意外と
見落としています。なんとなく、違和感があるなぁと思うときは、
Another HTML-lint gateway
でサイトチェックをしてみましょう。

Another HTML-lint gatewayと検索すれば、現れますので調べてみてください。
以下使い方です。

URLの部分に、自サイトを入力してチェック。

するとなにやら、総合得点やら、エラー表示を指摘してくれます。
エラーを指摘してくれますので、ウィザードに沿って直していけばOKです。
僕は基本的に、三カ月に一度ぐらいのペースでエラーチェックしています。

意外とエラーが多くて吃驚することあるんですよね。
目視で見ると、違和感に感じているレイアウトの部分が、エラーチェックに沿って
直していくと、レイアウト全体が整っていく様は、非常に気持ちいいもんですよ。

サイト制作をしていて、簡単に見出しを綺麗にすることって意外と
難しいですよね。headerに使用する画像ならば、多少時間はかかっても
良いのですが、見出しの画像まで作っていると非常に手間がかかります。

【今回、CSSを用いて簡単に、シンプルではありますが、どんなサイト
デザインにも合いそうなものを紹介します。】既に既出の部分もあるでしょうが、備忘録と言うことで。

全て画像は用いていません。CSSでコントロールしてますので、シンプルにまとまっています。逆にシンプルだからこそ新鮮にうつります。

baseとなる、CSSはこちらになります。お使いのスタイルシートにでも張りつけて、ご自分のお好みに
合わせて細かく調整してみてください。

h2{
margin: 0 0 1.7em 0;
padding: 0.1em 10px;
border-top: 0px solid #000;
border-right: 0px solid #000;
border-bottom: 1px solid#000;
border-left: 2px solid #000;
background: #fff;
font-size: 1.4em;
font-weight: bold;
line-height: 1.4em;
color: #000;
}

簡単な説明だけしておきます。
borderの部分は、枠のことです。値を大きくすれば太くなります。

font-size　文字の大きさ
line-height　高さ

一度全部の値を変更してみて、ご自分で確認してみると分かりやすいと思います。

破線や、点線で表現しようと思えば、borderの部分を変更すれば可能。

dashed(破線)
dotted(点線)

backgroundの部分に、好きな色を指定すれば、下記のようにも変更できます。
若干青みをかけてます。

アイデア次第では、他にも色々面白そうな見出しが作れると思いますので、是非挑戦してみてください。

見出し関連記事一覧

タイトル・見出しに使えるデザインまとめ | DesignWalker
見出しをCSSでシンプルに装飾するtips – EC studio デザインブログ