カテゴリ:ブログ TIPS( 32 )

画像に動きがあるロールオーバー効果(マウスオーバー効果)をつける方法

※この記事はブログカスタマイズの中級以上の方向け(HTML/CSSの基本を理解している方向け)です。

ブログやホームページで、リンクが設定されている画像にマウスを合わせると、画像が明るくなったりして注意を引くことがあります。その結果、画像をクリックしてもらいやすくなります。

この動きを ロールオーバー効果 とか マウスオーバー効果 などと呼んでいます。(以下、ロールオーバー効果)

CSS3 で追加された transform というプロパティを使うと、画像のロールオーバー効果に動きを持たせることがかんたんにできます。

例えば、以下のスタイルを使うと、画像が1.1倍に拡大されて時計回りに2度回転するロールオーバー効果になります。
a img:hover {
transform: scale(1.1) rotate(2deg);
}


これだけだと画像が瞬時に切り替わってしまって趣がないので、transition プロパティを使ってじわ~っと切り替えるといいかんじになります。
a img {
transition: transform 0.6s;
}

a img:hover {
transform: scale(1.1) rotate(2deg);
}
上の例では、0.6秒かけて画像を切り替えています。

このブログでは、以前に こちらの記事 で紹介した opacity プロパティも使って、さらに画像を明るくする効果も持たせてみました。

スタイルは以下のようになっています。
a img {
transition: opacity 0.6s, transform 0.6s;
}

a img:hover {
transform: scale(1.1) rotate(2deg);
opacity: 0.5;
}

d0015124_18313482.jpg


スタイルに数行を付け加えるだけで、こういった「おっ!!」と感じさせる動きを実現できるんです。

パソコン教室くりっくでは、ホームページのスタイルを基本からじっくりと勉強したい方向けのマンツーマン講習を行っています。興味がある方はお気軽にお問い合わせください。

【問い合わせ電話番号】 025-779-2843
[PR]

by pc_klik | 2016-11-28 19:00 | ブログ TIPS

エキサイトブログでLightbox(Thickbox)のように写真を拡大表示するには Part.2

以前に
エキサイトブログでLightbox(Thickbox)のように写真を拡大表示するには
という記事を書きました。

この記事では、エキサイトブログの記事に載っている写真をクリックしたときにかっこよく写真を拡大表示するための方法を紹介しました。もう4年も前になりますね。

4年前の記事に書いた方法だと、投稿したすべての写真についてピクセルサイズを手作業で書き換えなければいけませんので、いつもこのように写真を投稿したい人にとっては毎回の書き換えの手間がめんどくさく感じることでしょう。

その場合、スタイルシート(CSS)に手を加えて記事内の写真の長辺を最大400ピクセルにしてやれば、毎回のピクセルサイズの書き換え作業が不要になります。

具体的には、以下の設定をCSSに追加します。
img.IMAGE_MID, img.IMAGE_RIGHT, img.IMAGE_LEFT {
max-width: 400px;
max-height: 400px;
width: auto;
height: auto;
}


特定の記事について設定したい場合には4年前の記事の方法を、すべての記事で写真をそのように動作させたい場合には今回の記事の方法を使い分ければよいです。
[PR]

by pc_klik | 2016-01-11 17:50 | ブログ TIPS

エキサイトブログでスムーズスクロールを使うには

[ページの先頭へ] というリンクをクリックすると、パッと瞬時にページの先頭に切り替わらずにスムーズにスクロールして移動するホームページをけっこう見かけます。

この動きには以下の2つのメリットがあります。
  • どこからどこに移動したわかりやすい。
  • かっこいい。

スムーズスクロールは JavaScript を使いますので、JavaScript 使用禁止のエキサイトブログでは実現不可能だと思っていたのですが、やり方を見つけました。

コメント欄をスクロールさせるためにエキサイトブログ側で組み込んでいる JavaScript があって、それを利用したらスムーズスクロールっぽいことができました。

このブログの各記事の右下にある [ページの先頭へ] というボタンをクリックすると、ページの先頭にスクロールして移動します。


以下のHTMLソースが基本形です。
<div class="COMMENT">
<div class="COMMENT_INPUT">スクロールしてここに来る</div>

<a class="scroll_comment_form" data-ex-id="scroll-to-comment-form" href="#">ここをクリックすると・・・</a>


</div>

このままではレイアウトがくずれたり、見た目が悪かったりするかもしれません。その場合は、スタイル(CSS)に手を加えてやる必要があります。

パソコン教室くりっくのマンツーマン講習ではこういった内容の実習も行っています。興味がある方はお気軽にお問い合わせください。

【2016.9.26 追記】 data-ex-id=... の指定が必要になっていました


[ページの先頭へ] ボタンがスムーズスクロールの動きをしなくなっていたので、調べてみたところ、JavaScript の仕様が変わったようです。

以下の指定を追加したらスムーズスクロールをするようになりました。
data-ex-id="scroll-to-comment-form"

[PR]

by pc_klik | 2015-07-06 22:00 | ブログ TIPS

画像にロールオーバー効果(マウスオーバー効果)をつけるかんたんな方法

ブログやホームページでリンクが設定されている画像にマウスを合わせると、画像が明るくなったり別の画像に切り替わったりすることがあります。

このことを ロールオーバー効果 とか マウスオーバー効果 などと呼んでいます。(以下、ロールオーバー効果)

ロールオーバー効果をつけておくと、そこにリンクが設定されていることが分かりやすく、クリックしてもらいやすくなります。

ロールオーバー効果をつける方法はいくつかあります。

マウスを合わせたときの画像を別に用意しておいて、JavaScriptスタイルシートで切り替えるやり方が従来は一般的でした。

しかし、設定対象の画像がたくさんある場合、例えばブログの記事に載せた写真をクリックして拡大表示して見てもらう場合には、別画像を用意する手間がわずらわしく、上記のやり方は現実的ではありません。

CSS3 によるロールオーバー効果

そのような場合は、CSS3 で追加された opacity というプロパティが手軽でけっこう役に立ちます。

スタイルシートに以下の行を追加するだけで、リンクが設定された画像にマウスを合わせたときに画像が明るくなります。
a img:hover {
opacity: 0.7;
}

さらに、CSS3transition プロパティを使うと画像がじわぁ~っと切り替わるようにできます。
a img {
transition: all 0.3s ease-in-out 0s;
}
a img:hover {
opacity: 0.7;
}


opacity と transition を使う上での注意点

opacity と transition はブラウザの種類やバージョンによっては動作しません。

例えば、WindowsXP で使われている Internet Explorer 8 以下のブラウザでは動作しませんし、Firefox だとじわぁ~っと切り替わりません。

より多くのブラウザ環境で期待した通りの動きをさせるためには上記に加えてさらに何行か書かないといけませんが、ブログに載せた写真に設定する場合のように
動かないブラウザがあってもあまり気にしない

というときには使えそうです。

ということで、このブログのスタイルシートに上記の設定を追加しました。
[PR]

by pc_klik | 2014-08-31 13:50 | ブログ TIPS

エキサイトブログにドロップダウンメニューを設置する方法

エキサイトブログに階層化したメニューボタンを設置する方法を 2月17日の記事 に載せましたが、同じようなことができる別の方法があります。

CSS でスタイルを調整しづらくなってしまいますが、select タグを使うともっと手軽にできます。

こんなかんじです。






HTML は以下の通りです。(CSS は使っていません)
<select onchange="location.href = this.options[this.selectedIndex].value">
<option value="#">年月を選択</option>
<option value="http://klik.exblog.jp/m2014-01-01/">2014年1月</option>
<option value="http://klik.exblog.jp/m2013-12-01/">2013年12月</option>
<option value="http://klik.exblog.jp/m2013-11-01/">2013年11月</option>
</select>

<select onchange="location.href = this.options[this.selectedIndex].value">
<option value="#">カテゴリを選択</option>
<option value="http://klik.exblog.jp/i29/">パソコン教室のご案内</option>
<option value="http://klik.exblog.jp/i8/">犬・猫・etc</option>
<option value="http://klik.exblog.jp/i39/">新潟県南魚沼市の風景</option>
</select>

<select onchange="location.href = this.options[this.selectedIndex].value">
<option value="#">会社概要はこちら</option>
<option value="http://klik.exblog.jp/6346325/">会社概要</option>
<option value="http://klik.exblog.jp/6346509/">所在地地図</option>
<option value="http://klik.exblog.jp/6346691/">お問合せ</option>
</select>


エキサイトブログで使う場合のポイントは以下のように書くことです。
onchange="location.href =...


エキサイトブログでは JavaScript の使用に制限がありますので、
onchange="window.open(...
と書くことができません。
[PR]

by pc_klik | 2014-02-20 14:00 | ブログ TIPS

エキサイトブログに階層化したメニューボタンを設置する方法






上記のような階層化したメニューボタンをホームページやブログに設置したい場合、JavaScript を使う方法があります。

しかし、エキサイトブログでは JavaScript が使えませんので、CSS を使ってこのような階層化したメニューを作ってみました。

HTML は以下の通りです。

<ul class="menu">
<li><a href="http://klik.exblog.jp/">以前の記事</a>
<ul>
<li><a href="http://klik.exblog.jp/m2014-01-01/">2014年1月</a></li>
<li><a href="http://klik.exblog.jp/m2013-12-01/">2013年12月</a></li>
<li><a href="http://klik.exblog.jp/m2013-11-01/">2013年11月</a></li>
</ul>
</li>
<li><a href="http://klik.exblog.jp/i00/">カテゴリ</a>
<ul>
<li><a href="http://klik.exblog.jp/i29/">パソコン教室のご案内</a></li>
<li><a href="http://klik.exblog.jp/i8/">犬・猫・etc</a></li>
<li><a href="http://klik.exblog.jp/i39/">新潟県南魚沼市の風景</a></li>
</ul>
</li>
<li><a href="http://klik.exblog.jp/6346509/">所在地地図</a></li>
<li><a href="http://klik.exblog.jp/6346691/">お問合せ</a></li>
</ul>


CSS は以下の通りです。

ul.menu {
list-style: none;
margin: 0;
padding: 0;
}

ul.menu li{
float: left;
position: relative;
}

ul.menu li a{
text-decoration:none;
display: block;
color:#fff;
font-size:12px;
margin-right:2px;
background:#aaa;
line-height:28px;
padding:0 10px;
}

ul.menu li a:hover {
background:#666;
}

/* 最初はサブメニューを非表示とする */
ul.menu li ul{
list-style: none;
display:none;
margin: 0;
padding: 0;
}

/* メインメニューのボタンにマウスをかざしたときにサブメニューを表示する */
ul.menu li:hover ul{
display: block;
position: absolute;
top:28px;
left:0px;
}

ul.menu li li{
margin-bottom:1px;
float: none;
width:160px;
}

ul.menu li li a {
color:#fff;
width:100%;
line-height:20px;
padding-left:10px;
background:#ccc;
}

[PR]

by pc_klik | 2014-02-17 14:30 | ブログ TIPS

ブログの記事タイトルの前後にアイコンを表示する方法

このエキサイトブログで記事タイトルの前後にアイコンを表示するようにスタイルシートを設定してみました。

使用したいアイコンをマイイメージアカウントにアップロードしてから、CSS編集に以下の行を追加します。

div.post h2:before,
div.post h2:after {
content: url("http://pds.exblog.jp/pds/1/201308/11/24/music3.gif");
}


content: 行の " で囲まれた部分がアイコンのURLです。

今回、私は音符のアニメーションGIF画像 アニメーションGIF画像を使用してみました。

【注】 Internet Explorer 8 以前のバージョンではアイコンが表示されません。
[PR]

by pc_klik | 2013-08-13 10:30 | ブログ TIPS

このブログの表示を軽くしました

最近、なんとなくこのブログの表示が重くなったように感じていました。

特に、あまり性能がよくない古いパソコンで表示したとき、そう感じます。

そこで、ブログを表示するときにブラウザが受信しているデータがどのくらいあるのかをチェックしてみました。

FirefoxFirebug という拡張機能を使って測定してみたところ、このブログを表示するときに受信するデータの合計が 2.7MB もありました。

これを大き過ぎるととるか、それほどでもないととるかは、判断基準によって変わってきますが、アナログのダイヤルアップ回線の時代からインターネットを使ってきている私としては「大き過ぎる」と感じてしまいますので、ブログの表示を軽くするように手を加えてみました。

受信したデータのサイズが大きい順に並べた Firebug の画面がこちらです。

d0015124_9494527.gif


上位にずら~っと並んでいる pds.exblog.jp ドメインのデータはブログの記事に載せてある写真です。

このブログの記事に載せてある写真は長辺800ピクセルになっていて、こちらの記事に書いてあるように長辺400ピクセルに見せていますが、表示している画像ファイルは長辺800ピクセルのままですので、表示が重くなる最大の要因になってしまっています。

Firebug の画面でいちばん上に表示されている gremz.com ドメインのデータはグリムスのブログパーツです。これもあまり重要ではないので削除することにしました。

3番目に大きい js.api.olp.yahooapis.jp ドメインのデータは記事内に地図を表示するためのものらしいですが、削除することはできません。

とりあえず、以下のように変更してどれくらい軽くなるかを調べてみました。
  • グリムスのブログパーツを削除
  • 800ピクセルの写真を400ピクセルに差し替え
  • メインページの記事数を 10 から 5 に変更

この結果、ブログのデータの大きさが 2.7MB から 1.0MB になりましたので、当面はこの設定で運用します。

できればもっと軽くしたいところですが、これ以上は無理みたいです。

7年前にエキサイトブログを使い始めた頃、エキサイトブログはめちゃくちゃ軽くて快適なブログだったのですが、かなり変わってしまいましたね。

写真を大きなサイズで楽しむのもいいですが、私にとってはブログの表示が軽いことの方が優先順位が高いですから、今後はブログに載せる写真のサイズを400ピクセルにして、大きな写真を使うのは限定的にします。
[PR]

by pc_klik | 2013-04-24 09:30 | ブログ TIPS

エキサイトブログに毎回ログインする手間を省く方法

エキサイトブログは毎回ログインしないといけないのでめんどくさい

Webサービスの多くはログイン状態を保持しておくかどうかを選択できるようになっています。

自分のパソコンでWebサービスを利用する場合、毎回ログインするのが面倒だからです。

しかし、エキサイトブログはブラウザを閉じると自動的にログアウトされてしまい、毎回ログインしなければならないようになっています。

慣れない初心者が利用する場合はこの方式が安全という考え方もありますが、できればユーザーが選べるようにしてほしいものですよね。

そんなエキサイトブログでログインする手間を省く方法をたまたま見つけました。

Chrome + FireMobileSimulator でエキサイトブログの毎回ログインが不要に

その方法とは、Google ChromeFireMobileSimulator をインストールするというものです。

FireMobileSimulator は、日本国内の主要キャリア DoCoMo / au / SoftBank の携帯電話、スマートフォン、タブレットのブラウザをシミュレーションして、それぞれのブラウザでどのように表示されるかを Google Chrome 上で確認することができる拡張機能です。

【下図】 FireMobileSimulator のメニュー
d0015124_1416666.gif


エキサイトブログの毎回ログインを不要にするためには、この拡張機能をインストールするだけではなく、Google Chrome の詳細設定で
Google Chrome を閉じた際にバックグラウンドアプリの処理を続行する
にチェックがついて有効になっている必要があります。

【下図】 Google Chrome の詳細設定画面
d0015124_14191840.gif


こうしておくことにより、Google Chrome を閉じてもエキサイトブログにログインしている状態が保持されているようです。

さらにありがたいことに、パソコンの電源を入れ直してもエキサイトブログにログインしている状態は保持されています。

FireMobileSimulator 以外の拡張機能でも、バックグラウンドで実行されるタイプのものであれば同じような効果が得られそうな気がします。

私が FireMobileSimulator をインストールした主目的は携帯端末のブラウザ向けのホームページ制作に役立てるためなのですが、思いがけず副次的効果があって得した気分です。

エキサイトブログへのログインの手間を省くためだけに使う手段としてはどうかと思いますが、ご参考まで。
[PR]

by pc_klik | 2013-04-20 14:30 | ブログ TIPS

写真に重ねた文字枠にスタイルシートを使って透明度を設定する方法

先日、パソコン教室くりっく のお客さんからエキサイトブログスキン編集に関するある質問を受けたとき、その場ではよい解決方法が見つからなかったので、あとから調べてみました。

そのお客さんがお使いのスキン(スタイルシート)では、以下のようなやり方で写真に重ねた文字枠に透明度を設定していました。
background: #fff;
filter: alpha(opacity=60); -moz-opacity:0.6; opacity:0.6;

この方法だと、透明度が子要素(文字)に継承されるために ↓ こんなふうに文字色までうすくなってしまいます。
我が家の ちゃむ です。

そこで、文字色に影響を与えない透明度の設定方法があるかどうか調べてみました。

ひとつ見つかったのは、以下のようにスタイルシートを設定する方法です。
background: #fff;
background: rgba(255, 255, 255, 0.6);

この方法だと、透明度が子要素(文字)に継承されませんので ↓ このように文字色を濃くすることができます。
我が家の ちゃむ です。

ただし、この方法の場合は Internet Explorer 8 以前のブラウザだと文字枠に透明度が設定されません。(Internet Explorer 以外の主要なブラウザでは透明度がうまく設定されます。)

どっちの方法も一長一短ですなぁ・・・。
[PR]

by pc_klik | 2012-07-25 16:30 | ブログ TIPS

魚沼情報サービスのホームページへ | パソコン教室くりっくのホームページへ | ブログトップ   昨日:   今日:   合計:
AX