TopCSS > 2005年10月
2005年10月20日

本文に引用をつける

October 20,2005 11:59 PM
Tag:[, , ]
Permalink

他のブログ記事や情報を引用する場合に、

これは引用文です

という囲い枠を使っているのを頻繁に見かけると思います。これは「引用」という手法で、当サイトのカスタマイズ記事ではリストを表示する時によく使用しています。

実はブログを始めた当初、この引用の設定方法がわからず(CSSもよく分かっていなかった)、調べるのに結構苦労した記憶があります。この表示方法を何という単語で検索して良いのかさえ分かりませんでした。

ということで、このエントリーでは引用の設定方法について説明します。

1.引用文を blockquote 要素で囲む

HTMLでは引用を明示する意味的なタグとして blockquote 要素が用意されています。
上記の例では本文中に

<blockquote><p>これは引用です。</p></blockquote>

という指定を行うだけです。blockquote 要素の子要素として p 要素等のブロック要素が構造上必要ですが、表示についてはブラウザ依存と思われます。

blockquote のデフォルトスタイルは上下左右にインデントが付与されますので、CSSの設定を行わなくてもそれなりの表示になります。余談ですが、短い引用(テキストの両端に「"」をつける)の場合は q 要素を使って、

<q>これは引用です。</q>

とします。

Movable Type 3.1x 以降の編集画面であれば、編集画面右上にある

引用

というリンクアイコンを使うと便利です。使い方は、引用したいテキストをマウス等で選択状態にしてからこのアイコンをクリックすると、選択状態のテキストの両端に blockquote タグが付与されます。

2.スタイルを設定する

blockquote に任意のスタイル(枠線・背景等)を与えるために、CSS(styles-site.css)に下記のように blockquote のタイプセレクタを作ります。

blockquote {
}

この中に「プロパティ」と呼ばれるものを設定して、フォントや背景・枠線等の装飾を行います。下記に設定のサンプルを示します。各プロパティの意味は右側のコメント(/* */ の部分)を参考にしてください。
これは当サイトの blockquote に近い設定内容になっています。

blockquote {
    margin: 15px; /* 枠線を表示する上下左右の空白 */
    padding: 10px; /* 枠線から文字までの上下左右の空白 */
    background: #fffff6; /* 背景色 */
    border: 1px solid #999999; /* 文字色 */
    font-size: 10px; /* フォントサイズ */
    line-height: 150%; /* 改行幅 */
}

枠線(border)については、以前書いた枠線(border)の指定が参考になれば幸いです。

Comments [6] | Trackbacks [6]
2005年10月15日

スタイルシート切り替え(プルダウンメニュー版)

スタイルシート切り替え(プルダウンメニュー)スタイルシート切り替えをプルダウンメニューで行う方法です。画像のようにプルダウンメニューに表示されたスタイルを選択すると、選択した時点でスタイルが切り替わります。

以前よりご紹介しているスタイルシート切り替えのメニュー部分のみの変更ですので、その他の、

1.スタイルシート作成
2.テンプレート修正
3.styleswitcher.js のダウンロード・アップロード
4.テンプレートに styleswitcher.js インクルードの設定

につきましてはスタイルシート切り替えの1?4項を参照ください。
ということで、ここでは5項のみ掲載します。

5.切り替えメニューの追加

各テンプレートのサイドバーに以下のタグを追加します。JavaScript によるプルダウンメニューの状態保持を行わない場合と、状態保持を行なう場合の2種類のリストを掲載します。「プルダウンメニューの状態保持」とは、ブラウザの更新や新しくブラウザを開いた時に、それまでに選択されていたプルダウンメニューと同じメニューを表示することを意味します。状態保持を行わない場合は常に一番上のメニュー(ここでは "default")が表示されます。

状態保持を行うとユーザビリティが向上するので、当サイトでは後者(5.2項)を推奨します。

5.1 切り替えメニュー(プルダウンメニューの状態保持を行わない)

下記のリストをサイドバーの任意の位置に追加します。リストはデフォルトテンプレートの場合です。

<div class="module-style module">
<h2 class="module-header">Stylesheet</h2>
<div class="module-content">
<form>
<select name="select" onchange="setActiveStyleSheet(this.form.select.value);">
<option value="Default">default</option>
<option value="Large">Large</option>
<option value="Netscape">Netscape</option>
</select> 
</form>
</div>
</div>

option 要素は元エントリーのサンプルに合わせてますので value 属性や値(青色部分)は適宜変更してください。
公開テンプレートの場合は、上記リストを下記のように、赤色部分を削除して青色部分を追加してください。

<div class="module-style module">
<h2 class="module-header">Stylesheet</h2>
<div class="module-content">
<div class="sidetitle">Stylesheet</div>
<div class="side">
<form>
   :
</form>
</div>
</div>

5.2 切り替えメニュー(プルダウンメニューの状態保持を行う)

下記のリストをサイドバーの任意の位置に追加します。リストはデフォルトテンプレートの場合です。5.1との差分を青色で示しています。差分は form 要素への id 属性および、状態保持を行う JavaScript です。

<div class="module-style module">
<h2 class="module-header">Stylesheet</h2>
<div class="module-content">
<form id="stylesheet">
<select name="select" onchange="setActiveStyleSheet(this.form.select.value);">
<option value="Default">default</option>
<option value="Large">Large</option>
<option value="Netscape">Netscape</option>
</select> 
</form>
</div>
</div>
 
<script type="text/javascript">
<!--
var style = readCookie('style');
var nodes = document.getElementById('stylesheet').getElementsByTagName("option");
for (var i = 0; i < nodes.length; i++) {
    if(nodes[i].value == style){
        nodes[i].selected = true;
    }
}
//-->
</script>

スタイルシート名(ここでは "Large"や "Netscapte")は5.1項と同様に任意の名称に変更してください。なおこれらを変更しても JavaScript 部分を変更する必要はありません。

公開テンプレートの場合は、上記リストを下記のように、赤色部分を削除して青色部分を追加してください(5.1と同じ)。

<div class="module-style module">
<h2 class="module-header">Stylesheet</h2>
<div class="module-content">
<div class="sidetitle">Stylesheet</div>
<div class="side">
<form id="stylesheet">
   :
</form>
</div>
</div>
 
<script type="text/javascript">
    :
Comments [2] | Trackbacks [1]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3