ブログの外観を少し修正してみた

Word Pressの勉強を始めてやっと2か月ってところでしょうか。途中で、ストップしちゃったこともありましたが、なんとか続いてます。これも、恐ろしくどうにもならない見習いを暖かく見守ってくれた職場の方々や、ソシムの「WordPressレッスンブック」さまのおかげですぅ。ひらにー。

とはいうものの、毎日じろじろ自分のブログを見ていると、なんか、幅狭くない？ちょっとレイアウト詰まってない？と少しずつ欲が出てきます。希望はありつつも、テキストの内容は、右から左へ通り抜ける、ザルな脳みそもつサルなので、どうやったら、ちょっとでも思い通りのレイアウトになるのか、すっかりハテナです。

ということで、手探りでやってみまぁ～す。（←あとで泣いても知らないよ～と自分に茶々入れるひと）

とりあえず何とかしたいのは

  1. 全体の幅をもうちょっと広くしたい
  2. サイドバーのカテゴリー別のリンクや月別の投稿に、投稿数を出したい。
  3. サイドバーのリンクがHoverしたときにもっとリンクだと分かるように目立たせたい

です。

まず、全体の幅をちょっと広くしたい

最初にまず、全体の幅はどこで決まっているのかなぁと思ったので、ブラウザでブログを表示し、ソース表示をします。すると全体を覆っているのはdiv#containerだということが分かりました。で管理画面からstyle.cssを見ると、div#containerのwidthが760pxだったので、これを180px増やして940pxにしました。ということで、style.cssの該当部分に変更を加えました。この増えた部分は、サイドバーじゃなくて、本文部分のエリアで増やしたいので、どこかなーとブラウザで見ると、これはdiv#contentです。style.cssでみると、515pxなので、180px足して695pxにしました。これでブラウザで見てみると、幅が増えた分、本文中の端っこが詰まって見えます。記事を囲っているDIVの.postにパディングを当ててあげます。現在は15pxですが、横は35pxにします。と、ところが記事の見出しのh2の背景イメージまで、パディングに影響を受けて縮んでしまいました。おぉ。これはネガティブマージンの出番です。div.post h2にmargin0: 0 -20pxを追加です。-20pxとした理由は、.postのパディングを20px増やしたから、その分です。ところが、固定ページでサイドバーを入れないページでは、H2の背景画像がリピートしてしまい、変に途中で縦線が入ってしまいました。最初に設計したとき、まさか幅を940pxまで広げるとは考えていなかったので、横幅を十分に準備してませんでした。ということで、1000pxの横幅を持つ画像を準備しました。

ここで、新しいh2の背景画像のファイル名をstyle.cssで指定してるものと同じ名前で保存しておきます。そしてFTPソフトでWord Pressのディレクトリにアクセスし、既存の背景画像のファイル名を変更します。最後に_back.jpgなどとつけておきます。FTPソフトを使って、FTPサーバ上でファイル名を変えてしまいます。そして新しい背景画像をアップロードすると、style.cssなどを書き換える必要がありません。万一、前のファイルに戻したくなったら、新しいほうのファイル名を変えて_back2.jpgなどとして、古いほうの最後から_backの部分を取り去ってやるだけで、あっという間に元通り。

これでOKと思いきや、各ページのトップイメージが小さいままです。こりゃまずいと、幅940pxの大きいサイズのを準備して、管理画面の「外観」→「ヘッダー」から「画像をアップロード」しようとしたのですが、画像の大きさが変更できないです。こりゃどっかで設定したかなと思い、header.phpを見てみると、

<p id="image"><img src="<?php header_image(); ?>"

 alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" 

height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>

とあって、ここが怪しい。function.phpを見てみると、

define('HEADER_IMAGE_WIDTH',700);

define('HEADER_IMAGE_HEIGHT',200);

ははぁん、ここだなと、この700と200を新しいサイズ940と198に治して、ファイルを更新すると…。「外観」のヘッダーのところの画像をアップロードで、画像の大きさが940×198ピクセルとなってるー。新しいファイルをアップロードして、変更を保存して、晴れてできあがりですぅ。

サイドバーに投稿数を出して、Hoverのとき、目立たせたい

サイドバーに投稿数を出すのは、ワンタッチでした。（←いつの表現やら）

ウィジェットのカテゴリーや最近の投稿など、投稿数を出したいウィジェットを展開し、「投稿数を表示」にチェックを入れ、保存するだけ。でも、ブラウザで見てみると、リンク部分は白い文字なのに、投稿数は黒い！ソースを表示してみると、投稿数はリンクにはなっておらず、カテゴリー名や投稿の題名はAタグ内なのに、投稿数はそのAタグから外に出ています。だから、この部分、他の部分はAタグへの文字色指定なので、色が同じになってませんでした。ということで、現在#sidebarのaに指定している文字色を、#sidebarに指定してあげます。すると、同じ色に！

あとはサイドバーのhover状態のときの変化をつけるだけです。現在は、サイドバー部分にはa:hoverが未指定です。hover状態の目立たせ方としては、文字色を変える、アンダーラインや背景をつけるなどがよくありますが、文字のサイズをちょびっとだけ大きくするというのもあります。文字を大きくすると、レイアウトが崩れてしまうことがあったりして、賛否があるかなぁと、自分でも思いますが、でも、オンマウスで、ぴょこぴょこ文字の大きさが変わると、とくに背景色が設定してあるときとか、コミカルな動きで、ちょっとカワイイと思うのです。

それって、美的センスに問題があるよといわれそうな気がしてきたので、そそくさと逃げ出す見習いです…。

2011年11月15日12:49 AM| カテゴリー： 見習い奮闘記| コメント (0)