TopCSS > 2004年9月
2004年9月29日

CSSでリンクをマウスオン(マウスオーバー)時にずらす

September 29,2004 12:15 AM
Tag:[]
Permalink

CSSでリンクをマウスオン(マウスオーバー)時にずらすカスタマイズを紹介します。

1.概要

通常、リンクにマウスをポイントすると、テキストリンクの場合はアンダーラインを表示したり、リンクの色を変更することでユーザビリティを確保しますが、本エントリーで紹介するテクニックは、テキストや画像表示が右下に少しだけずらすことでマウスのポイントを示します。

サンプルを作りましたので、動作はそちらでご確認ください。

サンプル
サンプル

当ブログではサイドバーのタイトル部分や右下のクレジットバナーに適用させています。

2.カスタマイズ

マウスオン(マウスオーバー)時にずらしたい要素の「:hover」に、positionプロパティ、topプロパティ、leftプロパティを追加します。

a:hover {
    position: relative;
    top: 1px;
    left: 1px;
}

topまたはleftプロパティの値を変更すれば、ずらし方を好きなように変えることができますが、ずらしすぎず、適度な範囲にとどめることを推奨します。

2012.09.19
本文を見直しました。

Comments [8] | Trackbacks [11]
2004年9月 7日

スタイルシート切り替え

September 7,2004 12:02 AM
Tag:[]
Permalink

メイン各ページのスタイルシートを右上のリンクで切り替えられるようにしました。スタイルシートを切り替えるとページ全体のデザインをダイナミックに変更できます。ここでの目的はフォントサイズを変更できるようにするために用いています。とりあえず「Default」「Large」「Netscape」の3種類を用意しました。「Default」は現在のスタイル。「Large」は本文のフォントを大きくします。「Netscape」はNetscape利用者用にサイドバーのフォントを1px大きくしたものです。
注:現在は異なる設定にしています。

この機能はGoing My Wayさんのスタイルシート切り替えスクリプトを参考にカスタマイズしました(こちらのサイト右上のカラーボタンをクリックするとスタイルシートが切り替わります)。オリジナルはStyleswitching JavaScriptです。cookieを利用しているのでブラウザでcookieが利用できる設定になっていれば、最後に利用したスタイルシートが次回ブラウザ起動時に自動的に選択されるようになります。また各テンプレートに設定しておけば状態が引き継がれます。例えば個別アーカイブがマルチカラムでない場合は後述する手順の2・4だけを行えばうまく引き継ぐことができます。
以下、スタイルシート切り替えの手順です。

1.新しいスタイルシートの作成
元のスタイルシートをコピー等して新しいスタイルシートを作成します。ちなみに私の場合はMovable Typeの管理画面上で新しいスタイルシートを作るという作業はしていません。単なるコピーです。ここではStyles-site.cssをコピーしてLarge.cssと、Netscape.cssを作りました(名称は任意で結構です)。
作成したスタイルシートはStyles-site.cssと同じディレクトリに配置します。

まず Large.css 用のテンプレートを作ります。管理画面のテンプレートの「インデックステンプレート」右上にある「新しいテンプレートを作る」をクリックします。次のページで下記を設定します。

テンプレートの名前:スタイル(Large)
出力ファイル名:Large.css
このテンプレートにリンクするファイル:空白のまま
再構築オプション:チェックを外す

テンプレートの中身はスタイルシート(styles-site.css)の内容を丸ごとコピーします。
コピーしたスタイルシートの内容を修正します。Large.css はフォントを大きくするためのものなので、font-size と書かれた部分を大き目のフォントサイズ(赤字から青字)、

.blogbody {
    font-size: 12px;
    font-size: 14px;
}

に書き換えます。もちろんフォント以外のスタイルも自由に変更して構いません。
修正が終わったら、保存・再構築します。

Netscape.css についても「新しいテンプレートを作る」をクリックし、

テンプレートの名前:スタイル(Netscape)
出力ファイル名:Netscape.css
このテンプレートにリンクするファイル:空白のまま
再構築オプション:チェックを外す

という設定にして、後は Large.css と同じ作業を繰り返してください。

2.テンプレート修正
テンプレート上部にある既存のスタイルシートの設定を、赤色から青色に変更します。

<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" title="Default" />
<link rel="alternate stylesheet" href="<$MTBlogURL$>Large.css" type="text/css" title="Large" />
<link rel="alternate stylesheet" href="<$MTBlogURL$>Netscape.css" type="text/css" title="Netscape" />

一番上に書かれたスタイル

<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" title="Default" />

が起動時にデフォルトとして選択されるものです。その下に2つの新しいスタイルシート

<link rel="alternate stylesheet" href="<$MTBlogURL$>Large.css" type="text/css" title="Large" />
<link rel="alternate stylesheet" href="<$MTBlogURL$>Netscape.css" type="text/css" title="Netscape" />

をそれぞれ追加しており、以降で説明する切り替え用リンクをクリックすることでこれらのスタイルが選択されます。設定したタグの href 属性に、作成したスタイルシートのファイル名、title 属性に任意の名称を設定します。これが次項のスクリプトで起動される際のキー情報となります。

3.styleswitcher.js のダウンロード・アップロード
下記の公式サイトに styleswitcher.js があります。

A List ApartAlternative Style: Working With Alternate Style Sheets

記事の下の方に「download」または「Download styleswitcher.js」というリンクがありますので、クリックして styleswitcher.js をダウンロードしてください。そしてダウンロードした styleswitcher.js をそのままローカル・サイト・パス(index.html と同じディレクトリ)にアップロードします。

4.テンプレートに styleswitcher.js インクルードの設定
2項で修正した各テンプレートの <head>~</head> の間に下記を追加します。既にJavaScriptが存在すればそこに埋め込んでも構いません。この行だけ丸々独立させて埋め込んでも大丈夫です。

<script type="text/javascript" src="<$MTBlogURL$>styleswitcher.js"></script>

5.切り替えメニューの追加
各テンプレートのサイドバーに以下のタグを追加します。なおデザイン自体を変更するような使用方法であればタイトルバナー部分に切り替えメニューを設定しているサイトが多いようです。

<div class="sidetitle">
Stylesheet
</div>
 
<div class="side">
<a href="#" onclick="setActiveStyleSheet('Default'); return false;">Default</a><br />
<a href="#" onclick="setActiveStyleSheet('Large'); return false;">Large</a><br />
<a href="#" onclick="setActiveStyleSheet('Netscape'); return false;">Netscape</a>
</div>

"setActiveStyleSheet" の後ろにあるパラメータは、先に指定した title 属性の名称(Large や Netscape等)と一致するように設定します。

以上です。

6.FAQ
Q:スタイルが反映されませんが?
A:古いデータがキャッシュに残って変更が反映されない場合があるようですのでIEであれば更新ボタンをクリックするか、一時ファイルを削除してください。

Q:表示が崩れました。
A:全てのテンプレートに同じ設定がされていないとページを移動した瞬間やスタイルを切り替えた瞬間に表示が崩れる可能性があります。もし表示が崩れてしまったら、元のスタイルのリンクをクリックするか、きちんと表示できていたページに戻って、スタイルを切り替えれば元に戻ります。

2005.08.12
スタイルシートの作成方法について修正しました(テンプレート)として保存する方法に変更)。また他の内容についても全面的に見直しました。

Comments [26] | Trackbacks [17]
2004年9月 6日

リンクのアンダーライン一部削除

September 6,2004 1:38 AM
Tag:[]
Permalink

なんとなく表示が煩わしい感じがすると思ったらリンクのアンダーラインが全部出っ放しでした(早く気がつけって?)。で全部消したらすごい違和感があったので(笑)、

  • 本文
  • 投稿者欄
  • カレンダー

のアンダーラインだけ消してみました。言い換えるとサイドバーの各メニューだけアンダーラインを残してます。
ちなみにアンダーライン有無の指定はstyles-site.cssの各aタグ指定の

text-decoration: underline;

という部分を

text-decoration: none;

に変更すればOKです。

アンダーラインだけに、

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