2013年03月06日

star_gold

【簡単!】スタイルシートだけで画像をロールオーバーさせる方法【seesaa】

【カテゴリ:ブログカスタマイズ
ブログ記事もちゃくちゃくと増えて、現在150の記事になりました♪
といっても、中にはTwitterからの投稿もあったりするので、しっかりと書いた記事はもう少し少なくなります。

と、だんだん記事が増えると共にブログもオリジナリティーをだしたいと、デザインなどをいじっております。

そこで、自分なりに調べたり試行錯誤しながら覚えたことを書いていきたいとおもいます。

今回はタイトル通り、CSSだけでブログ中の画像をロールオーバー(マウスカーソルを画像の上にもってくると画像が変化します)する方法を紹介。

seesaaで設定する場合。
登録はこちらSeesaaブログ



スクリーンショット 2012-10-23 18.51.42.png

デザインを選択して、使用しているCSSデザインを選択するとCSSの編集画面がでるので、下のCSSをコピーアンドペーストします。
挿入位置は一番上にでも入れればわかりやすいと思います。

このCSSはこちらのブログ
雑貨はデザイン様を参考にさせて頂きました。


a:hover img{
opacity:0.50;
filter:alpha(opacity=50);
-ms-filter: "alpha( opacity=50 )";
-moz-opacity:0.50;
}


挿入後、ページ下部にある「保存」をクリック。
これで終了。


画像のロールオーバーは画像を2枚用意しなければいけなかったり、いろいろ面倒なのですが、このCSSを入れるだけで画像がロールオーバーされているようになるのでとても助かります。

seesaaブログはスタイルシートやhtmlのカスタマイズがわかりやすいので気に入っています。
スマートフォン用のデザインテンプレートの種類が増えたらもっといいのですが。



最後まで読んで頂き、ありがとうございました♪


2012-10-23 19:20の記事



皆様のクリックが記事更新の励みになります。
記事がお役にたちましたらポチッと押して頂けると幸いです。
posted by TakiOki at 20:39 | Comment(0) | TrackBack(0) | ブログカスタマイズ | このブログの読者になる | 更新情報をチェックする

2012年10月24日

star_gold

【seesaa】最近の記事一覧をスクロール出来るようにする方法。

【カテゴリ:ブログカスタマイズ

★★★★★★★★★★★★★★★★★★★

seesaaブログで最近の記事一覧をスクロールバーでスクロール出来るようにしてみました。
無料の登録はこちらSeesaaブログ


普通はサイドバーに表示するようにデザインされているのだと思いますが、自分は記事の上に設置してみました。

スクリーンショット 2012-10-23 23.35.02.png
こんな感じ。
表示件数も設定できます。


今回、参考にさせて頂いたブログはこちら。
パソコン・FXなどに関する日記様。
スクリーンショットを使ってとてもわかり易く書かれています。


『ブログの管理メニュー』から『デザイン』の『デザイン > PC > デザイン一覧』をクリック。
『コンテンツ』をクリックします。

『最近の記事』を選択。
    
右上の『コンテンツHTML編集』をクリックします。

スクリーンショット 2012-10-24 0.45.05.png
赤枠で囲った部分のタグを追加します。
【height:100px】の部分は表示範囲の高さの値なので、お好みで設定してください。


追加した部分のタグ

<div style="overflow:auto; height:400px;">

</div>


これだけでいいはず。

次回は、CSSを使って「最近の記事一覧」の文字サイズを小さくする方法を書きたいと思います。






最後まで読んで頂き、ありがとうございました♪





皆様のクリックが記事更新の励みになります。
記事がお役にたちましたらポチッと押して頂けると幸いです。
posted by TakiOki at 00:33 | Comment(0) | TrackBack(0) | ブログカスタマイズ | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。