はじめに
今回はこのブログのサイドメニューでも使っている、オンマウスで文字が大きくなる方法です。
ブログのデザインによっては文字を大きくするとバランスが悪くなったり、その他の諸事情？などで小さいサイズの文字にしたい場合もあると思います。
しかし、ここは「何処へのリンク？」「小さくて見づらい・・」などの不満もオンマウスで拡大するので安心です。
また、あんまり使われてない？表現なので「(ﾉﾟοﾟ)ﾉ ｵｵｫｫｫ-」となるかも？しれません（笑）
今回は簡単にCSSで表現してみましょう。
画像の赤枠の箇所です。
オンマウスで文字を拡大させる手順
手順はコピペでCSS編集画面にて「CSSの追記」だけの①手順です。①下記CSSをCSS編集画面にて最下部の
「 (4) その他、拡張・/* その他、拡張があれば記述 */」の下にコピペ。
※青字の説明、赤字の説明を参考に変更して下さい。
※元の設定している文字の大きさが「１００％」と基準となります。
/* ▼▼サイドカラムリスト拡大ここから▼▼ */
/*最新の記事*/
.recentEntriesMenu li a:hover{
font-size:160%; /*拡大時の文字大きさ*/
font-weight:bold; /*文字太字*/
}
/*コメント*/
.recentCommentMenu li a:hover{
font-size:160%; /*拡大時の文字大きさ*/
font-weight:bold; /*文字太字*/
}
/*テーマ*/
.themeMenu li a:hover{
font-size:160%; /*拡大時の文字大きさ*/
font-weight:bold; /*文字太字*/
}
/*月別*/
.archiveMenu li a:hover{
font-size:160%; /*拡大時の文字大きさ*/
font-weight:bold; /*文字太字*/
}
/*ブログ読者*/
.readerMenu li a:hover{
font-size:160%; /*拡大時の文字大きさ*/
font-weight:bold; /*文字太字*/
}
/*お気に入りブログ*/
.favoriteMenu li a:hover{
font-size:160%; /*拡大時の文字大きさ*/
font-weight:bold; /*文字太字*/
}
/*ブックマーク*/
.bookmarkMenu li a:hover{
font-size:160%; /*拡大時の文字大きさ*/
font-weight:bold; /*文字太字*/
}
/* ▲▲サイドカラムリスト拡大ここまで▲▲ */
/*最新の記事*/
.recentEntriesMenu li a:hover{
font-size:160%; /*拡大時の文字大きさ*/
font-weight:bold; /*文字太字*/
}
/*コメント*/
.recentCommentMenu li a:hover{
font-size:160%; /*拡大時の文字大きさ*/
font-weight:bold; /*文字太字*/
}
/*テーマ*/
.themeMenu li a:hover{
font-size:160%; /*拡大時の文字大きさ*/
font-weight:bold; /*文字太字*/
}
/*月別*/
.archiveMenu li a:hover{
font-size:160%; /*拡大時の文字大きさ*/
font-weight:bold; /*文字太字*/
}
/*ブログ読者*/
.readerMenu li a:hover{
font-size:160%; /*拡大時の文字大きさ*/
font-weight:bold; /*文字太字*/
}
/*お気に入りブログ*/
.favoriteMenu li a:hover{
font-size:160%; /*拡大時の文字大きさ*/
font-weight:bold; /*文字太字*/
}
/*ブックマーク*/
.bookmarkMenu li a:hover{
font-size:160%; /*拡大時の文字大きさ*/
font-weight:bold; /*文字太字*/
}
/* ▲▲サイドカラムリスト拡大ここまで▲▲ */