paper bag

カスタマイズはCSS（スタイルシート）をいじるだけという初心者のために、HTMLの<div>の使い方を説明しようと思います。

まず基本中の基本なことを簡単に説明しておきますが、HTMLには「ここにこれを置きますよ」というタグを書き、CSSにはその部分の見栄に関する記述をします。その際、HTMLに記述されるのが<div class="xxx"></div>というもので、<div>〜</div>で囲まれたものが「ひと固まり」です。classはそのひと固まりになった部分の名前なので、スタイルシートから「HTMLのxxxという固まりはこのような見栄にします」と命令する仕組みになっています。

<div>〜</div>で囲んだひと固まりは「１つの箱」だと思ってください。
テンプレートのHTMLを見れば分かるように、テンプレートはたくさんの箱で出来ているようなものです。
レイアウトという箱の中に、ヘッダーという箱、メニューという箱、メインという箱などがあり、メニュー、メインの箱の中にまたいくつもの箱があるというイメージです。

「この部分だけを個別に設定したい」という箇所は<div>〜</div>という箱の中に入れ、その箱に名前をつけ、CSSで見栄を設定することができます。

pb_aprilが思いのほか好評で嬉しいです。
ダウンロードしていただいた方、ありがとうございます。

今更なんですが、BlogPetとカウンターをつけてみました。フリーエリアにこれらを設置しているユーザーが多いので、私のブログにもなるべくそういった需要の多いものを取り入れるべきだと思いました。

というわけで、今までのテンプレートだと、BlogPetやカウンターは左上に詰まっちゃってたことに気付きました…。
pb_aprilとpb_springだけは修正して再登録したんですが、そのうち他のテンプレートも直して行こうと思っています。と言ってもほんの気持ち右に動かす程度で、センター寄せには出来ませんが。

気になる方は、プラグインの中身を<div class="blogpet">〜</div>で囲むなどしてクラス名を付け、CSSに以下を書き込むと良いと思います。（直接<center>〜</center>で囲んでしまっても良いでしょうが）。

こんな感じ。
.blogpet {
text-align:center;
}

以下、BlogPetによる書き込みだそうです。この機能は外します…。

pb_aprilより、記事ステータスに「edit」を追加しました。ダイレクトで記事の編集画面が開きます。（一部のテンプレートは再登録済みです。）

以前から自分のブログには付けていて非常に便利だったのですが、ユーザーのサーバーURLとブログIDを必要とするタグでしたので、共有テンプレートからは外していました。個人で追加されていた方も多いのではないかと思います。

今回変数一覧を覗いたら、新たにサーバー変数とブログID変数が追加されていたので、これを使ってみました。

ご自身で編集される場合は以下のタグをHTMLに追加してください。
（改行は削除してください。）

<!--/deny_tb--> |
<a href="<%server_url><%blog_id>/admin.php?
mode=editentry&no=<%topentry_no>" >edit</a> |
<a href="#pagetop">page top↑</a>

珍しくカスタマイズについて書きます。

FC2ブログでは複数のカテゴリを選択できない代わりにタグの指定ができるようになりました（随分前のお話ですが…）。

pbテンプレートには装備されていませんが、記事の最後にその記事に指定したタグを表示させることができます。私のメインブログでは上の画像のようにこれを取り入れていますのでご参考までに。

ちなみにタグについてですが、上の画像ではカテゴリは「映画（観たもの）」となっていますが、更に「映画」、「写真」、「HOLGA（カメラ機種）」の３つのタグを指定した場合、それぞれのタグをクリックすれば、同じ単語をタグに指定してある記事がズラズラっと出てきます。カテゴリとは別に、より細かく分類されたブログ内の「タグ検索」が可能となります。

これは１つの記事に様々な話題が出てくる日記形式のブログに便利だと思います。
もっとも、過去の記事にタグを指定する際は手作業になりますので、ちょっと手間暇はかかってしまいますが…。

MacのSafariではヒラギノフォントが反映されないことに気付きました。
今まで、Mac用フォントは「ヒラギノ角ゴ」と「Osaka」の２つを入れてたんですが、私はメインにFirefoxを使っているので、その違いに気付いてなかったんですね。Firefoxではヒラギノ、SafariではOsakaで表示されていたようです。
今回、「ヒラギノ丸ゴ」を入れてみて、あれれ？Safariでは出てこないぞと思って、色々調べたらSafariはヒラギノフォントを読み込まないような報告がたくさんされていました。

それで、更に色々と調べてみると、「Hiragino Maru Gothic Pro W4」ではなく、「Hiragino Maru Gothic Pro」と入れれば良いと書いてあったんですが、これだと今度はFirefoxやOperaで丸ゴが出てきません。

そんなわけで、色々と試してみた結果、

font-family:"ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro W4", "Hiragino Maru Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "Arial", "Verdana","sans-serif",;

こんな風に入れれば良いようです。
要するに、Firefox、Opera用とSafari用の両方を入れる必要があるみたいです。
それから、Win用の「MS Pゴシック」を後に入れるのは、Mac OSでもWordなどのOfficeを入れているとMS Pゴシックで表示されてしまうからだそうです。これを避けるために、「MS Pゴシック」よりも前にMac用フォントを置きます。

ちなみにMacのヒラギノ丸ゴというのは、こんなフォントです。
かわいいですよね。