Posted by yamada on 2009/05/23 – 11:04
Filed under WordPress
Tagged as blog, WordPress, はてな
ブックマークボタン
ブックマークとか簡単に登録してもらうために、ボタンをつけようと思い立ちました。
ちょっと調べてみたところ最近では、各種ソーシャルブックマークサービスなどに簡単に登録できるように、いろいろなサービスをまとめるサービスがあるようです。
今回は、AddClipsというのをつけてみることにしました。

AddClips登録
このページで上から順に入力したら最後にWordPress用にHTMLタグが表示されます。
次にこのタグをWordPressのテンプレートに入れるのですが、その場所がちょっと悩みどころ。
デザインとの兼ね合いもあり、つまり、個人の好みの問題にもなってきますが、何となく本文を邪魔しない程度、且つ、分かりやすい位置、ということで右上に置くことにしました。
現在のデザインでは、右上にコメントボタンがあるので、その近くを探してみます。
WordPressの外観編集のページを開き、テンプレートの中から「メインインデックスのテンプレート(index.php)」というのを見つけます。この中に以下のようなコードの位置があるので、そこに挿入してみました。
<?php if ( comments_open() ) : ?>
<div class="entry-comments">
<?php comments_popup_link(__('0', 'sandbox'), __('1', 'sandbox'), __('%', 'sandbox')) ?>
</div>
<?php endif; ?>
<!-- ここにAddClipsのコードを挿入 -->
<div class="clear"><!-- --></div>
これで「ファイルを更新」ボタンを押して、再度ページをロードしてみると、無事、ブックマークボタンが追加されていることが分かります。
試しにクリックしてみると、ちゃんとエントリの内容に合ったタイトルとURLで登録されるようです。
調整
色を変えられるようなので、このブログのテーマにあった色に変えておきます。
AddClipsBcolor='#242323';
AddClipsNcolor='#808080';
AddClipsTcolor='#FFFFFF';
AddClips、便利なサービスですね!
Posted by yamada on 2009/05/22 – 10:12
Filed under WordPress
Tagged as CSS, WordPress
WordPress、特に本とかサイトとか見ていないのだけど、設定画面を眺めつつ、これはこういう意味かな?と思ってみていると何となくあれこれ出来るので、まぁ、良くできていると思います。
Black Hatテーマ
WordPressの見栄えを決めるのがテーマ設定。公式サイトにはフリーのテーマが800近くアップされており、その中から適当なものをダウンロードしてインストールすることが出来ます。
なるべくシンプルで見やすいテーマを、ということで探した“Black Hat”(Nicki Faulkさん作)というテーマを使っています。「2コラム」「なるべくモノクロ」「各エリアの区切りが分かりやすい」「変な癖がなさそう」ということを考え選びました。
しかしこのテーマでも微妙にいろいろなところが納得いかないので、少しずつ修正したいと思います。
CSSを編集する
CSSとかダウンロードしたりアップロードしたりとかしなくても、設定画面内で直接書き換えられるのが便利ですね。
外観メニュー内にある「編集」をクリックして開く画面があります。その状態で右側に「テンプレート」とかあり、その下の「スタイル」のところにテーマで使われているcssファイルが列挙されています。”Black Hat”テーマの場合、この中にある「スタイルシート (style.css)」というのがページの見栄えに関するメインCSSとなっているようですので、クリックして真ん中のウィンドウに表示されるCSSを編集します。

編集が終わったら、下部にある「ファイルを更新」というボタンをクリックしたら次に開いた画面から編集したCSSが適用されます。
サイドバーを調整してみる
サイドバーに表示している「最近の投稿」や「カテゴリー」の項目が、改行されたときに見にくくなってしまっている問題を解決してみます。

まず、このあたりのHTMLソースを見てみると、ul,liで入れ子状態になっていることが分かります。それらをsideba IDのCSSで設定している以下の3つの項目について修正しました。
[css]
#sidebar ul li ul, #sidebar ul li ul li ul {
margin:0;
padding:0.5em; /* #3 */
}
#sidebar ul li ul li {
margin:0;
margin-left: 1em; /* #2 */
padding:0;
list-style-type: square; /* #1 */
}
#sidebar ul li ul li a {
padding-left:1px; /* #4 */
line-height:22px;
display:block;
}
[/css]
- #1 .. まず、リストの行頭に四角マーカーを表示するよう設定
- #2 .. 次に、その分インデントを調整
- #3, #4 .. これら枠線の内側パディングを微調整
これで完了です。
以上のように設定したものは次のように表示されます。

Posted by yamada on 2009/05/21 – 11:23
「さくらのレンタルサーバ」にWordPressをインストールしてみました。WordPressのことは知っていたけど、自分でもちょっと触ってみたいなと思い、そのテストも兼ねています。
まぁ、本当に簡単だったので、インストールメモを書くほどのことでもない気もしますが、「楽だった」という情報もアリかな、と思いメモしておきます。

PHP, MySQLが必要
WordPressですが、PHPとMySQLを使うようなので、「さくらのレンタルサーバ」の場合、一番安価な「ライト」プランではPHP,MySQLが使用できないので、WordPressをインストールできません。
ということで、「スタンダード」プラン以上の契約が必要です。
ダウンロード
まず、下記のサイトからzipパッケージをダウンロードします。
展開したファイル群をそのままFTPで適当なディレクトリにアップします。
今回は簡単にパスを設定するために、http://www.example.com/index.php となるようにアップしました。同じディレクトリに、phpファイル群と、wp-admin, wp-content, wp-includesディレクトリもそのままアップします。
約7MByteのファイルサイズとなります。
ログイン
次に、データベースの設定を確認するために、さくらのサーバコントロールパネルにログインします。
左側のメニューから「データベースの設定」を選択します。
データベースバージョンが「標準[MySQL5.1](推奨)となっているのでそのまま、データベース接続用パスワードを設定します
データベースが設定されたので、設定情報が表示されると思います。この画面の中の「データベースサーバ」と書かれている項目をメモしておきます。
あとはウェブ上で設定
http://www.example.com/wp-admin/install.php に相当するURLにアクセスすると、wp-config.phpの生成ウィザードが始まるので、メモしておいたサーバ設定を次のように対応する項目に入力します。
- “データベース名” .. 【データベース名】
- “ユーザー名” .. 【データベースユーザ名】
- “パスワード” .. 【データベース接続用パスワード】
- “データベースのホスト名” .. 【データベースサーバ】
- “テーブル接頭辞” .. “wp_”のまま
最後に、ブログタイトルとメールアドレスを入力して完了。もちろんタイトルなどは後から変更できます。
以上
以上でインストールは終わりました。
自分の場合、全く滞りなく終わったので、ちょっと驚いたくらいでした。
次にやることはデザインを変えたくなることだと思うのですが、WordPressのテーマはいろいろ公開されているようなので、早速うれしい悩みの種が出てきます。
また、プラグインもいろいろあるようなので、これも折を見て調査してみたいと思います。
Posted by yamada on 2009/05/12 – 01:00
最初のテスト投稿です。
WordPressなら、はてなとかと違って自由にhtmlかけるのがうれしいですね。
ということで、去年(2008年)のクリスマスにWonderflにアップしたXm.asというネタを貼り付けてみます。