fc2ブログ

タグ: CSS

投稿日
2008-02-17
カテゴリー
WebDesign
タグ
(X)HTML
CSS
変数

FC2ブログの新管理画面統合のアナウンス(今度こそ延期しないよね)も出たわけだし、いい加減そろそろテンプレを共有登録申請したいところです。もうひと息という感じではあるんですが、しかしFC2ブログにはすでに膨大な数の共有テンプレが存在しているため、今さら下手な作品を登録したところで、それはテンプレ探しの邪魔にしかならないんじゃないかと思うんです。それでだいぶ慎重になっています。

とりあえず申請予定のテンプレの特徴を簡単に整理しておきます。

文章を書くのが面倒でリストにしてしまいました。しかも全然整理できてない。まあいいか。

投稿日
2007-12-15
カテゴリー
FC2BLOG
タグ
(X)HTML
CSS
変数

前のエントリーでちらっと書いたんですが、他に同じことをしている例が見つからなかったので、一応ちゃんと紹介しておくことにします(ずーっと以前に雲の上のDanielさんがこれに近いことをされていたようですが、それとはまた違う方法)。

FC2ブログの独自変数のひとつに、<%comment_url+str>というものがあります。これは<!--comment-->~<!--/comment-->内で使用でき、コメント投稿者がURLを入力していた場合に「URL」という文字列にリンクが張られる、というもの。そして、URLが入力されていなかった場合でも空のリンクは生成されない、というのがこの変数の便利なところなんですが、しかしその場合でも「URL」という文字列だけは表示されてしまいます。以下はこの文字列を非表示(不可視と言ったほうが正しいかも)にする方法です。

HTMLの編集で、<%comment_url+str>の部分を以下のように書き換えます。

<span class="commenturl"><%comment_url+str></span>

そして、CSSに以下のコードを追加します。

.commenturl {
        visibility: hidden; 
}

.commenturl a {
        visibility: visible; 
}

以上で完了ですが、注意点があります。visibility: hidden;は、display: none;とは違って、ボックスを生成させなくするのではなく、生成されるボックスを不可視化するものです。すなわちボックス自体は生成され、その部分はレイアウトに影響を与えます。なので、<%comment_url+str>の直後に何か(たとえばコメントの投稿時間)を記述すると、「URL」という文字列が表示されるはずであった部分に空白ができてしまいます。というわけで、この小技を使う際は、<%comment_url+str>が行の末尾(右寄せの場合は、先頭)にくるように工夫してください(よく考えると微妙な技だな)。

ところで何故display: none;を使用しないのかというと、実はこのdisplay: none;が指定してあると、子孫要素のdisplayに他の値を指定していても、その値が上書きされないからです。……という基本的なことを理解せずに、当初はdisplayを使って悪戦苦闘しておりました。まだまだ勉強不足です。

投稿日
2007-11-29
カテゴリー
FC2BLOG
タグ
(X)HTML
CSS

あちこちでよく見かけるようになったタグクラウド。FC2ブログユーザーにも、サイドバー等に設置している人が結構います。しかしそのほとんどが、JavaScriptで動くタイプの共有プラグインみたいです。

なんというかタグクラウドは、機能性云々よりは飾りとしての意味が大きいんじゃないかと勝手に思ってます。まあそれでもサイトナビゲーションのひとつなわけだから、できれば環境に左右されずに機能したほうがいいんじゃないかなとも思います。というわけでスクリプト不使用、CSSで実現するFC2ブログ用のタグクラウドを作ってみました。すでに同じようなことをやってる人がいると思いますが。

せっかくなので、3ping.orgで紹介されていた素敵すぎるTag CloudのCSSをFC2ブログで使えるように移植してみました。今回はリンク先のTag Cloud1というスタイルを選びましたが、他のでも同様にできるはずです。

まずはHTMLの部分。ここでは<!--stag-->~<!--/stag-->を使って並び順をランダムにしてます。もちろんrtag(最近追加された順)やctag(件数順)にしてもOK。まぁ件数順だと全然クラウドっぽくなくなるけど……。

<ul class="tagcloud">
        <!--stag-->
        <li class="tcmax tc<%stag_count>">
                <a href="<%stag_url>" title=" タグ「<%stag_name>」の付いた記事:<%stag_count>件 "><%stag_name></a>
        </li>
        <!--/stag-->
</ul>

そして肝心なCSS。

ul.tagcloud{
        margin: 0;
        padding: 0.5em 10px;
        line-height: 1;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
}

ul.tagcloud li{
        margin: 0;
        padding: 0;
        display: inline;
        font-size: 100%;
}

ul.tagcloud li a{
        text-decoration: none;
}

li.tcmax a{
        /* カウント20以上のとき(最大) */
        font-size: 167%;
        font-weight: bold;
        color: #424242;
}

li.tc19 a, li.tc18 a, li.tc17 a, li.tc16 a, li.tc15 a{
        /* カウント19~15のとき */
        font-size: 136%;
        color: #5e5e5e;
}

li.tc14 a, li.tc13 a, li.tc12 a, li.tc11 a, li.tc10 a{
        /* カウント14~10のとき */
        font-size: 122%;
        color: #7a7a7a;
}

li.tc9 a, li.tc8 a, li.tc7 a, li.tc6 a, li.tc5 a{
        /* カウント9~5のとき */
        font-size: 114%;
        font-weight: normal;
        color: #979797;
}

li.tc4 a, li.tc3 a{
        /* カウント4・3のとき */
        font-size: 92%;
        font-weight: normal;
        color: #b3b3b3;
}

li.tc2 a, li.tc1 a{
        /* カウント2・1のとき(最小) */
        font-size: 77%;
        font-weight: normal;
        color: #cfcfcf;
}

ul.tagcloud li a:hover{
        color: #000;
}

簡単に解説すると、liにtcmaxとtc<%stag_count>という2つのclassを指定して、まずタグのカウント数にかかわらず前者が適用され、カウントが19以下になるとさらに後者が上書きされていく、という具合。カウントが小さくなるほどフォントサイズが小さくなり、明度が高くなっていき、さらに途中から太字が解除されるので、視覚的にわかりやすいかと思います。wuさんに感謝。

カウントの区切りはお好みで数字をいじれば変更可能。同様にしてTag Cloud10とかにも挑戦してみると面白いかも。

投稿日
2007-11-26
カテゴリー
FC2BLOG
タグ
(X)HTML
CSS

FC2ブログで使えるちょっとした小技を思いたのでメモ。もしかしたら同様のテクニックが既出かもしれません。

タイトルの通りなんですが、具体的にはエントリー数が0のカテゴリーに移動したときとか、記事を1つも書いていない月に移動したときとか、ブログ内検索で1件もヒットしなかったときとか、あるいは削除された記事にアクセスしたときとか、とにかく記事が存在しないって時に何かメッセージを表示する、というもの。JavaScriptは使用しません。

まずテンプレートのHTMLの欄に以下のソースを追加。エントリー本体の直後(<!--/topentry-->の直後)くらいが良さげかと思うけど、テンプレートによって全然違ってくるはず。

<div class="none block<!--topentry--><%topentry_no><!--/topentry-->">
        <!--permanent_area-->該当する記事はありません。<!--/permanent_area-->
        <!--category_area-->該当する記事はありません。<!--/category_area-->
        <!--date_area-->該当する記事はありません。<!--/date_area-->
        <!--search_area--><strong><%sub_title></strong> を含む記事は見つかりませんでした。<!--/search_area-->
</div>

そしてCSSの欄に以下のコードを追加。

.none{
        display: none;
}
.block{
        display: block;
}

ポイントは<!--topentry--><%topentry_no><!--/topentry-->の部分。"none"と"block"という2つのclassが指定されてますが、記事が1つでも存在すればblockの後ろに適当な数字が並んでclass名が変わり、後者の指定が無効になるというわけです。

メッセージをお好みで変えてみたり(上の例では検索結果以外同じにしてある)、CSSで表示位置等の微調整をしたりするとよりいい感じになるかと。ただ、記事が存在するページでも、表示されないというだけでソース上は存在してるので、その辺は注意が必要です。特にCSS無効の環境に配慮すると、あまりおすすめはできません。あと、新規記事作成時のプレビューでも表示されてしまうのがちょっと気になる。どうにかならんかな……

このブログのテンプレートでも早速やってみたので、ページ右上の検索バーに絶対ヒットしなさそうなキーワードを入れて検索してみると、実際どんな感じなのかわかるかと思います。

追記: 今はこのテンプレートには実装していないので、スクリーンショットを置いときます。

奥付