この記事を書いたきっかけ ブログのデザインを自分でアレンジするために、HTMLの勉強をしている。 で、サイドバーの幅を変えようとスタイルシートをいじってみたが、なかなか上手くいかなかった。 そこで、このデザイン(hatena2-white)が、どのようにしてサイドバーを設置しているかを調べてみて、結果わかったことについて書く。 (追記:2011年現在、このブログは一から自分で作ったCSSを使用している。) エントリ部分とサイドバーのクラス名 まず、タイトルの部分はH1要素になっている。それより下の部分は、.mainと.sidebarというクラス名がついていて、.mainがエントリなどの本体部分(メイン部)、.sidebarがサイドバー部分(サイドバー部)を構成している。 「hatena2」のスタイルシート それぞれのクラスは、CSSで下のように指定されている。 .main { backgr
日記のサイドバーに、なにか(かんたんデザイン設定にあるもの以外)を入れる方法です。サイドバーの作り方はいろいろありますが、ここでは「かんたんデザイン設定」で作ることにします。「かんたんデザイン設定」でないテーマで今サイドバーが無い方は、補足を見てください。 サイドバーが日記に表示されていますか?そこに、なにか他のものを入れるには、『管理ツール > デザイン > 詳細デザイン設定』の下の方、『ページのフッタ』欄を使います。 <div class="sidebar">と </div>の間に入っているものが、日記のサイドバーに表示される仕組みです(これが基本)。文字を書いてみれば、そのまま表示されます。
CSSリファレンス トップ > CSSリファレンス [ABC順] 概要 CSS入門 リンク サンプル 表記について CSS3関連規約 セレクタ * { ... } E { ... } ns|E { ... } E, F { ... } E.class E#id E F { ... } E > F { ... } E + F { ... } E ~ F { ... } E || F { ... } [attr] [ns|attr] [attr="val"] [attr~="val"] [attr|="val"] [attr^="val"] [attr$="val"] [attr*="val"] :any-link :link :visited :local-link :target :target-within :scope :hover :active :focus :focus-visi
視覚的に表したものを先日作成したのでよろしかったら参考にしてください。 視覚的、はてなダイアリー文書構造サンプルHTML CSS Tips for はてなダイアリー はてなダイアリーガイド「CSSセレクタ」 はてなダイアリーガイド「CSSセレクタ - 日記1日分」 はてなダイアリーガイド「CSSセレクタ - photoモジュール」 はてなダイアリーガイド「CSSセレクタ - adsenseモジュール」 はてなダイアリーガイド「CSSセレクタ - calendar2photoモジュール」 はてなダイアリーガイド「CSSセレクタ - ヘッダテーブル」 はてなダイアリーガイド「CSSセレクタ - アンテナ型モジュール」 また、全てのクラス名はこちらでまとめられています。 id:smoking186:20030218#1045504830 はてなダイアリー兼tDiary用cssのテンプレート ht
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く