カテゴリ「ブログのこと・あれこれ」の記事

スタイルシートを使って、このブログの記事に載せてある写真に自動的にぼかした影をつけて立体感を出すようにしました。

通常、画像編集ソフトでこのような影をつけるためには、ドロップシャドウなどと呼ばれる加工をしますが、そういった加工をせずにスタイルシートによって自動的に写真に影をつけてみよう・・・ということです。

影を表示するためにスタイルシートに追加したのは以下の行です。

box-shadow: 5px 5px 5px -3px #999

指定内容の説明は以下の通りです。

• 1番目の 5px ：右方向(x方向)にどれだけ影をずらすか
• 2番目の 5px ：下方向(y方向)にどれだけ影をずらすか
• 3番目の 5px： 影をどれだけぼかすか
• -3px： 影をどれだけ拡大・縮小するか (マイナスを指定すると縮小になる)
• #999 ： 影の色

4月28日の記事に書いたブログタイトルに枠を表示する方法と同じ box-shadow を使っていて、Internet Explorer 8 までだと影は表示されません。

Internet Explorer 9 や他のブラウザで見ると写真にぼかした影が表示されます。

新潟県南魚沼市はすっかり春になり桜の開花がどんどん進んでいますが、このブログのヘッダー画像は駒ケ岳の雪景色のままでしたので、春らしく桜のヘッダー画像に差し替えてみました。

また、今までは画像編集ソフトを使ってブログタイトルが表示される位置に枠を合成したものをヘッダー画像として使用していましたが、ヘッダーの差し替えのたびに枠を合成するのは手間がかかるので、今回からスタイルシートを使って枠を表示するやり方に変更しました。

枠を表示するためにスタイルシートに追加したのは以下の行です。

box-shadow: 0px 0px 10px #999;

指定内容の説明は以下の通りです。

• 1番目の 0px ：右方向(x方向)にどれだけ影をずらすか
• 2番目の 0px ：下方向(y方向)にどれだけ影をずらすか
• 10px ： 影をどれだけぼかすか
• #999 ： 影の色

ちなみに、Internet Explorer 8 までだと box-shadow による影は表示されません。

Internet Explorer 9 や他のブラウザで見ると、以下のような枠が表示されます。

このブログのサイドバーに ツイッターのプロフィールウィジェット を表示していますが、レイアウトが以下のようにくずれてしまっていました。

上記のレイアウトの問題点は以下の3つです。

1. 名前「魚沼情報サービス 対馬」の位置が下にずれている
2. その名前の下によけいなボーダーが表示されている
3. その名前のフォントが小さい

そのうちに直さなければ・・・と気にしつつも、とりあえずこのままでも問題ないし・・・とそのままにしてあったのですが、今日時間がとれたので、レイアウトの修正作業を行って以下のようになりました。

調べたところ、この名前部分は <h3> タグで囲まれていることが分かりました。
ちなみに、その下の pc_klik の部分は <h4> です。

このブログで <h3> のスタイルを設定してあるのですが、そのスタイルがプロフィールウィジェットに反映されてしまったことがレイアウトがくずれた原因でした。

今回行った修正作業は以下の通りです。

まず最初に、プロフィールウィジェットのソースコードを貼り付けた部分を以下のように <div> タグ(赤字の部分)で囲みます。

<div id=”side_twitter”>

プロフィールウィジェットのソースコード

</div>

そして、スタイルシートに以下の行を追加しました。

div#side_twitter h3 {
 clear: none;
 border: none;
 font-size: 12px !important;
}

フォントサイズについては、ツイッター側でも設定しているみたいで(たぶん・・・未確認ですが)、!important をつけてやらないといけませんでした。

ようやくきれいにレイアウトされて、気分すっきりですゎ。

もっと詳しく調べていけば、プロフィールウィジェットをオリジナルデザインにカスタマイズできそうですので、そのうちにやってみたいと思います。

このブログに Auto ThickBox Plus という、WordPress 用のプラグインをインストールしてみました。

このプラグインを利用すると、記事内の写真をクリックしたときに拡大表示ができるようになります。

↓ の らら の写真をクリックしてみてください。

こういう動きをするページってけっこう多いですよね。

この写真を拡大表示する動きは ThickBox *1 という仕組みを使って実現していますが、Auto ThickBox Plus プラグインをインストールすると、自動的にこういう動きをするようにできるんです。

*1 ThickBox はひとつの例で、ThickBox 以外にもこのような動きを実現できる仕組みがあります。

これからしばらくは大きめ(800ピクセル)の写真をアップロードして試験的にこのプラグインを使い続けて、設定やスタイルシートやスクリプトなどをいろいろといじってみようと思っていますが、そのうちに気が変わって(または、プラグインによる不具合が生じて)このプラグインをアンインストールするかもしれません。

当社でお手伝いさせていただいているお客様のサイトで、ページの編集画面を開くのに時間がかかるようになったという問題があり、原因を調査しました。

そのサイトは WordPress により運用しているのですが、特にトップページの編集画面を開くのにやたらと時間がかかることがあります。

遅くなった原因は WordPress のページリビジョンという機能にあることが分かりました。

このページリビジョン機能は、ページの変更履歴を記録しておいて過去のある時点の状態に戻すことができるというものなのですが、WordPress の初期設定では過去の更新履歴をすべて記録するようになっているんです。

SEO対策を考慮するとトップページは特にこまめに更新することが望ましく、そのお客さんの WordPress サイトでもトップページを頻繁に更新されていました。

このように数年間運用された結果、トップページの編集画面を開くたびに過去の膨大な更新履歴を読み込んでしまい、時間がかかるようになったんです。

対策は wp-config.php に設定を1行追加

この問題の対策として、WordPress のページリビジョン機能を無効にしました。

具体的には、wp-config.php に以下の行を追加します。

define (‘WP_POST_REVISIONS’, false);

追加する場所は wp-settings.php を読み込む前にする必要があるようです。(下図参照)

これにより、編集画面がすんなりと開くようになりました。

【2011-10-10 (月) 追記】さらにページの更新に時間がかかる問題の対策も行いました

編集画面はすぐに開くようになったのですが、ページの更新を行うとけっこう待たされるという問題がまだ残っていました。

この遅さの原因は膨大なページの変更履歴によるものでした。

Better Delete Revision というプラグインをインストールして過去の変更履歴をすべて削除したところ、ページの更新もすぐに終わるようになり、以前のように快適に更新作業を行えるようになりました。

メデタシ、メデタシ・・・。

私がホームページ制作やブログ更新に使用している WordPress のダッシュボード(管理者画面)で記事を投稿するとき、

もう少し記事の入力欄の幅が広くなるといいなぁ・・・

と感じることがありました。

特にノートパソコンのような小さい画面で使うときにそう思います。

それができることを、ちょっとした操作ミスがきっかけで先ほど見つけることができました。

画面上でクリックする場所を間違えたら、左側に表示されているメニューのテキスト部分が非表示になって、記事の入力欄がぐ～んと広くなりました。

下の画像に表示されている位置をクリックすると・・・

こんなかんじで ↓ 、左側のメニューのテキストが非表示になり、画面が広くなります。

左側のメニューって、ふだんはほとんど使わないので、これからはこの状態で WordPress を使うことにします。

朝からちょっと得した気分です。

我が家のちゃむの写真を加工して、このブログのヘッダー画像にしてみました。

このヘッダー画像は、フリーソフトの JTrim を使って作りました。

このように写真に枠や影をつけたり文字入れしたりするために、いちばん使いやすいと私が思っているのは、ホームページ作成ソフトの ホームページビルダー に付属している ウェブアートデザイナー というソフトです。

ウェブアートデザイナーを使うためには、10,000円くらいかけてホームページビルダーを買わないといけないので、ブログのヘッダー画像を作るための出費としてはもったいないんですね。

そこで調べてみたところ、JTrim でも同じようなことができるのが分かりましたので、パソコン教室くりっく のブログ実習で皆さんに使っていただこうと思います。

パソコン教室くりっくの実習で使うことが多いエキサイトブログでヘッダー画像の作成例を載せてみました。
　» エキサイトブログを楽しもう!! http://klik2.exblog.jp/

昨日、WordPress 3.0 日本語版 がリリースされたので、さっそく このブログ を 2.9.2 から 3.0 にバージョンアップしました。

バージョン 3.0 の新機能の マルチサイト を有効にしたところ、ダッシュボードに 特権管理者 というメニューが加わりました。

先週、3.0 の英語版でちょっと苦労してセットアップしてあったので、今回はとてもスムーズにいきました。

新機能がいくつかあるようなので、また時間のあるときにいろいろといじってみたいと思います。

今まで 魚沼情報サービス（パソコン教室くりっく）のブログ を エキサイトブログ で運営してきましたが、今日からこちらの WordPress のブログに切り替えることにしました。

今までのブログもとりあえず残しておきますが、そのうちにすべての記事をこちらの新しいブログに移行するかもしれません。

けっこう前から、いつかは WordPress に乗り換えようと思いつつも、今まで使ってきたエキサイトブログの軽さとシンプルさがわりと気に入っていて、パソコン教室くりっく の実習でも使用していますし、無料ブログにしては目立つ広告がないこともあり、なかなか踏ん切りがつかずにいたんですが・・・

昨日、エキサイトブログにログインしてみてビックリ・・・

6月18日のエキサイトブログからのお知らせによると、エキサイトブログは7月になったら、有料(アドバンス)会員以外は全面的に記事内広告が表示されるとのことです。
　» 7月からの記事内広告表示に関するお知らせ http://staff.exblog.jp/10831592/

無料ブログの中ではエキサイトブログは目立つ広告がなく、そのことが私がエキサイトブログを選んで使い続けてきた大きな理由だったのですが、ついに広告表示が避けられない状況になってしまいました。

このお知らせを見て、WordPress のブログに乗り換えることにしました。

複数ブログの管理・運営ができる WordPress 3.0 日本語版 が近々公開されますので、3.0 にバージョンアップしてからデザインなどをいじっていきたいと思いますが、とりあえずはこちらでブログを開始します。

今回の全面広告表示、ちょうどよいタイミングだったのかもしれません。