CSSでエントリータイトルに画像を表示する
以下カスタマイズ方法です。なお、リスト形式（ul - li）で画像を表示する場合はリストマークの画像のずれを修正するを参照ください。 |
エントリータイトルの先頭に画像に表示する方法を紹介します。ここでは公開テンプレート（Movable Type）を用いた説明になりますが、HTMLとCSSの設定による一般的なテクニックですので、どのようなテンプレート（あるいはHTML）でも利用可能です。１．テンプレートの修正
Movable Type の公開テンプレートではエントリータイトルを下記のように設定しています（分かりやすくするために一部省略しています）。
<h3 class="entry-header">●<$MTEntryTitle$></h3><$MTEntryTitle$> が実際にはエントリータイトルに変換されます。「●」は私が勝手につけたもので、エントリータイトルの先頭に付与されます。
この「●」を削除して、
<h3 class="entry-header"><$MTEntryTitle$></h3>としてください。テンプレートの修正はこれだけです。他のテンプレートをお使いの方は、エントリータイトルを囲むタグに
class="entry-header"が設定されていればOKです。
この entry-header を利用して次項でスタイルを設定しますが、補足しておくと entry-header という class 属性は不要で、
<h3><$MTEntryTitle$></h3>として、hx（ここでは h3）タグに直接スタイルを設定することも可能です。ここでは h3 を h2 や h1 に変更する時の利便性を考慮してこのような設定にしていますが、hx タグにスタイルを設定する手法が本来的と思われます（同じ hx に異なるスタイルを設定する場合は class 属性を与えます）。
２．CSSの修正
スタイルシートで、エントリータイトル部分のスタイルを指定する entry-header に青色のプロパティを追加します。公開テンプレートを誤使用でない方も、青色部分のプロパティ設定は同じです。
/* エントリータイトル */
.entry-header {
margin: 15px 0 0;
color: #444444;
font-size: 12px;
font-weight: bold;
padding-left: 17px;
background: url(http://hogehoge/images/image.gif) no-repeat 0px 0.2em;
}padding-left プロパティはテキストタイトルの左側に余白を作り、そこに画像を表示させるために設定します。
background プロパティで画像を表示させます。後続の設定の意味は下記の通りです。
- url(?)
- 表示させたい画像のURL（background-image）
- no-repeat
- 画像を繰り返さない（指定しないと繰り返し表示されます）（background-repeat）
- 0px
- 画像の左端からの表示位置（background-position）
*単に"0"でもOKですが値を設定する場合を考慮して単位を付与しています - 0.2em
- 画像の上端からの表示位置（background-position）
カッコ内はプロパティを別々に設定した時に対応する名称です。
テキストタイトルのパディングと画像の表示位置は画像サイズによって変動するため、適宜調整してください。"17px" および "0.2em" という値を変えることで微調整できます。
またここでは説明を割愛しますが、画像をエントリーのテキスト全体に背景として表示させることも可能です。
３．非推奨
画像を表示する場合、img タグをテンプレートに設定して
<h3 class="entry-header"><img src="http://hogehoge/images/image.gif"><$MTEntryTitle$></h3>とする手もありますが、ウェブスタンダード的には
- 文書構造とデザインの混在
- 転送バイト数の増加
の点からお勧めではありません。
具体的には、画像を他の画像に変更したい場合、HTMLに img タグを直接記述していると文書構造を表すHTMLを変更しなければなりません。また、エントリータイトルが同一ページに複数存在する場合、img タグがエントリー数分必要となるため転送バイト数が増加し、僅かですが表示速度のパフォーマンスに影響します。
CSS+JavaScript によるカラムレイアウト切り替え（cookieによる状態保持）
CSS+JavaScript によるカラムレイアウト切り替えでは基本的な切り替え方法を紹介しましたが、このエントリーでは cookie を用いてスタイルを保持する方法を紹介します。
前述の通り、前回までのカスタマイズではブラウザ上でページ遷移やリロードをするとスタイルが元に戻ってしまうという欠点があります。例えば配色や文字サイズを切り替えたらそのままのデザインで他のページも閲覧したいケースは少なくないと思いますので、このカスタマイズを併用されるとユーザビリティが向上するでしょう。
サンプルを用意しましたのでリロードを実施してみてください。
注：IEのリキッドレイアウト表示に不具合があるようですので、サンプルは固定レイアウトのみに限定させて頂いてます。
CSS+JavaScript によるカラムレイアウト切り替えのカスタマイズが終わっていることを前提にカスタマイズを説明します。
１．cookie 保持スクリプトの追加
状態を保持したいテンプレートの <head>～</head> へ下記を追加します。外部ファイルにしても構いません。
<script type="text/javascript">
<!--
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
//-->
</script>このスクリプトは QuirksMode：Cookies からの抜粋です。
２．スタイル切り替えスクリプトに cookie 保持起動の追加
CSS+JavaScript によるカラムレイアウト切り替えの１項のスクリプトに下記の青色部分 *1 を追加します。
<script type="text/javascript">
<!--
function changeColumn(id) {
var elements = document.getElementsByTagName('body');
document.getElementById('links-right-box').style.display = 'block';
document.getElementById('links-left-box').style.display = 'block';
if(id == '3'){
：
（中略）
：
}
createCookie('style', id, 365);
}
//-->
</script>createCookie の引数には、cookie名・値（ここではカラムレイアウト）・有効期限（ここでは日単位）の順に設定します。有効期限が「365」であれば1年有効であることを示します。
３．ページ読み出し時の cookie 取得処理追加
状態保持をしたいテンプレートの最後の方（</html> の前）に下記を追加します。
<script type="text/javascript">
<!--
var id = readCookie('style');
if(id){
changeColumn(id);
}
//-->
</script>*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。
CSS+JavaScript によるカラムレイアウト切り替え
公開テンプレート（Movable Type/Serene Bach/sb/ FC2ブログ/Seesaaブログ）でカラムレイアウトをリアルタイムに切り替えるカスタマイズです。ここでは公開テンプレートをサンプルに説明していますが、同様の構造であればどのようなテンプレートでも実現可能です。
とりあえず、どのような動作になるかをサンプルでお試しください（中央上部のプルダウンメニューで操作できます）。
以前、類似の記事でスタイルシート切替や3カラム可変と3カラム固定を切り替えるをエントリーしていますが、これらはいずれもスタイルシートを新たに追加する必要がありました。つまり「スタイルシートを切り替える」というカスタマイズでした。
今回のカスタマイズでは、スタイルシートの追加や切り替えなしにレイアウトを切り替えることができます。
その理由は、現在公開しているテンプレートでは1つのスタイルシートに
- 3カラムリキッドレイアウト
- 3カラム固定レイアウト
- 2カラムリキッドレイアウト（右サイドバー）
- 2カラム固定レイアウト（右サイドバー）
- 2カラムリキッドレイアウト（左サイドバー）
- 2カラム固定レイアウト（左サイドバー）
- 1カラムリキッドレイアウト
- 1カラム固定レイアウト
の8種類のレイアウトをまとめて記述しています。各レイアウトは body 要素の class 属性に割り当てているので、この class 属性値（青色 *1）を書き換えることでレイアウトが切り替わります。
<body class="layout-three-column">CSSには class 属性に対応するクラスセレクタが記述されています。例えば .layout-three-column では下記のような設定になっています（抜粋）。
body.layout-three-column {
margin-bottom: 20px;
}
.layout-three-column #box {
width: 850px;
}
.layout-three-column #content {
float: left;
width: 478px;
}
.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
float: left;
width: 185px;
}
.layout-three-column #links-left,
.layout-three-column #links-right {
padding: 15px 15px 0 15px;
}公開テンプレートでは、同様の設定を8種類全てのレイアウトについて記述しています。目新しいテクニックではありませんが、ページデザインを切り替えるには非常に有効な手法です。
つまり JavaScript で class 属性値を書き換えれば簡単にレイアウトを切り替えることが可能、という訳です。具体的には、HTML（テンプレート）に切替用のスクリプトとプルダウンメニューまたはリンクを書き加えるだけで済みます。
以下、このエントリーでは全レイアウトを表示するカスタマイズ方法を説明します。組み合わせによってはサイドバーを非表示にするような効果を出すこともできますので、それらについては追ってご紹介したいと思います。
１．スクリプトの追加
切り替えを実施したいテンプレートの <head>～</head> へ下記を追加します。外部ファイルにしても構いません。
<script type="text/javascript">
<!--
function changeColumn(id) {
var elements = document.getElementsByTagName('body');
document.getElementById('links-right-box').style.display = 'block';
document.getElementById('links-left-box').style.display = 'block';
if(id == '3'){
elements[0].setAttribute('class','layout-three-column');
elements[0].setAttribute('className','layout-three-column');
} else if(id == '3l') {
elements[0].setAttribute('class','layout-three-column-liquid');
elements[0].setAttribute('className','layout-three-column-liquid');
} else if(id == '2l') {
elements[0].setAttribute('class','layout-two-column-left');
elements[0].setAttribute('className','layout-two-column-left');
document.getElementById('links-right-box').style.display = 'none';
} else if(id == '2ll') {
elements[0].setAttribute('class','layout-two-column-liquid-left');
elements[0].setAttribute('className','layout-two-column-liquid-left');
document.getElementById('links-right-box').style.display = 'none';
} else if(id == '2r') {
elements[0].setAttribute('class','layout-two-column-right');
elements[0].setAttribute('className','layout-two-column-right');
document.getElementById('links-left-box').style.display = 'none';
} else if(id == '2rl') {
elements[0].setAttribute('class','layout-two-column-liquid-right');
elements[0].setAttribute('className','layout-two-column-liquid-right');
document.getElementById('links-left-box').style.display = 'none';
} else if(id == '1') {
elements[0].setAttribute('class','layout-one-column');
elements[0].setAttribute('className','layout-one-column');
document.getElementById('links-left-box').style.display = 'none';
document.getElementById('links-right-box').style.display = 'none';
} else if(id == '1l') {
elements[0].setAttribute('class','layout-one-column-liquid');
elements[0].setAttribute('className','layout-one-column-liquid');
document.getElementById('links-left-box').style.display = 'none';
document.getElementById('links-right-box').style.display = 'none';
}
}
//-->
</script>２．切り替え用プルダウンメニューの追加
１項と同様、切り替えを実施したいテンプレートに下記のプルダウンメニュー（青色）を追加します。ここではカラム切り替えで非表示にならないよう、中央カラム上部に設定しています。
：
<!-- 中央カラム開始 -->
<div id="content">
<form id="cc">
<select name="select" onchange="changeColumn(this.form.select.value);">
<option value="3">3カラム</option>
<option value="3l">3カラムリキッド</option>
<option value="2l">2カラム(左)</option>
<option value="2ll">2カラム(左)リキッド</option>
<option value="2r">2カラム(右)</option>
<option value="2rl">2カラム(右)リキッド</option>
<option value="1">1カラム</option>
<option value="1l">1カラムリキッド</option>
</select>
</form>
<div class="blog">
：リンクにする場合は下記のようになります（どこに配置するかは自己解決してください）
<ul>
<li><a href="javascript:void(0);" onclick="changeColumn('3')">3カラム</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('3l')">3カラムリキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2l')">2カラム(左)</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2ll')">2カラム(左)リキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2r')">2カラム(右)</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2rl')">2カラム(右)リキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('1')">1カラム</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('1l')">1カラムリキッド</a></li>
</ul>３．スタイルの追加
２項で一応完成ですが、プルダウンメニューの位置を整えるために下記のCSSを追加します。
#cc {
text-align:center;
padding-top: 15px;
}*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。
