CSSでタイトルバナーに画像を表示する
ブログの上部タイトル部分の背景に画像を表示するカスタマイズです。CSS のbackground プロパティを利用することで、スクリーンショットのように画像を表示することができます（季節に合わない画像ですいません）。 なお画像は Link Style 様より利用させて頂きました。ありがとうございました。 １．基本的な設定方法 バナー部分のHTMLと画像を表示するCSSの基本的な構造は次の通りです。 HTML HTMLは h1 タグと a タグでブログのタイトルをリンク表示しているだけです。 <h1><a href="http://～/">タイトル</a></h1> CSS この h1 タグに対し、下記のような CSS を設定すれば背景画像（リストの「画像ファイル名」）が表示されます。リストは画像以外のプロパティを省略しています。 h1 { background-image: url("画像フ
moblogテンプレート修正 - lucky bag
久しぶりにValidationチェックしてみたら、not Validateでした。確認してみると、moblogの画像にaltが無いのでエラーが出た模様。すでに投稿してしまったものは、エントリーから修正し、今後の事を考えて、moblog.uva.ne.jpのテンプレートを修正する事にした。また、CSSで写真に枠を作り、floatで回り込みの指定を行いました。 まずtemplateの修正から行う。（MTのテンプレではなく、moblog.uva.ne.jpのテンプレ） <div class=\"caption\">%(caption)s</div>\n<div class=\"photo\">%(imagecontent)s</div> となっていたのを、キャプションが写真の下に来るよう様に修正し、キャプションを段落に設定。 <div class=\"photo\">%(imagecontent
CSSでエントリータイトルに画像を表示する
エントリータイトルの先頭に画像に表示する方法を紹介します。ここでは公開テンプレート（Movable Type）を用いた説明になりますが、HTMLとCSSの設定による一般的なテクニックですので、どのようなテンプレート（あるいはHTML）でも利用可能です。 本カスタマイズを行うことで、スクリーンショットのようにタイトル左に画像が表示されます。 以下カスタマイズ方法です。なお、リスト形式（ul - li）で画像を表示する場合はリストマークの画像のずれを修正するを参照ください。 １．テンプレートの修正 Movable Type の公開テンプレートではエントリータイトルを下記のように設定しています（分かりやすくするために一部省略しています）。 <h3 class="entry-header">●<$MTEntryTitle$></h3> <$MTEntryTitle$> が実際にはエントリータイトル
小粋空間: ナビゲーションバー・シンプルタイプ（その1：基本スタイル）
最近ご近所のサイトでカレンダーやメニューの横配置が増えてきましたので、改めてナビゲーションバー（メニューバー）を作ってみました。まずは div タグと a タグを用いたシンプルなタイプです。これは今日の覚え書きさんのオサレなメニューバーを作ろう経由の Accessify.com：list o matic をベースにしています。このナビゲーションバーを使って3回に分けてカスタマイズ方法をお送りしたいと思います。 １．テンプレートの設定 まずメニューとなる下記のHTMLタグ（青色）をバナーの下に設定します。 <div id="banner"> <h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1> <h2><$MTBlogDescription$></h2> </div> <div id
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
