MovableType・テンプレート・ブログカスタマイズの小粋なテクニック満載！

 


2006年04月03日

» 投稿画像・イメージ画像に簡単に枠を付ける（MT共通）

ミスティプルーム看板娘あゆむちゃん

上のような、イメージ画像に枠が付いている状態にする
方法を紹介します。

画像に枠をつけるには、<head>～</head>に
以下のソースを追加します。

<style type="text/css">
<!--
img {
background: #ffffff;
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #666666;
border-right: 1px solid #666666;
padding: 5px;
}
-->
</style>

この方法を使えば、画像の横・縦幅が小さくても大きくても
簡単に枠をつけることができます。

ただし、この場合imgタグ全てにこのCSSが適用されてしまいますので
意図的に枠を消したいときは、以下のようにimgタグに「style="border:none;"」を
適宜追加して下さい。

（例） <img src="../***.jpg" alt="" style="border:none;">

「小粋空間」のMT3.2用テンプレートを利用している方は
"続きを読む"をクリックして下さい。

» 続きを読む "投稿画像・イメージ画像に簡単に枠を付ける（MT共通）"

★ この記事が参考になりましたら投票お願いします。
秋月 錬 at 21:55 | MovableType, CSS | comments [0] | trackbacks [0]



» マウスカーソルの変更

画面上のマウスカーソルを変更する方法です。
ＣＳＳに以下のソースを貼り付ければ簡単に変更できます。

◆通常のカーソル変更

<style type="text/css">
<!--
body{
cursor:カーソルのプロパティ;
}
-->
</style>

＜カーソルのプロパティ＞
auto　crosshair　default　hand　help　move　text　wait
n-resize　ne-resize　nw-resize　s-resize　se-resize　sw-resize
e-resize　w-resize 　all-scroll　col-resize　no-drop　not-allowed
pointer　progress　row-resize　vertical-text

◆カーソルに画像を使う方法

<style type="text/css">
<!--
body{
cursor:url("カーソルのアドレス.cur");
}
-->
</style>

カーソル画像はあらかじめ用意しておく必要があります。
カーソルの作成は、http://www.vector.co.jpにフリーのソフトが
あると思います。


★ この記事が参考になりましたら投票お願いします。
秋月 錬 at 19:44 | CSS | comments [1] | trackbacks [0]


2006年04月02日

» リンクをマウスオン時に斜めにずらす

文字や画像のリンクにマウスをポイントすると
表示が斜めにずれるという方法を紹介します。

スタイルシートで該当するリンクタグ、a:hoverの中に

position:relative; top:1px; left:1px;

を入れればOKです。
上記ソースでは、右下になってますが、左下にずらす場合は
position:relative; top:1px; right:1px; を入れればＯＫです。

また、1pxの数値を大きくすると、ずらすときの距離
（ずれの大きさ）を多くすることが出来ます。
これを利用して、マウスオン時にリンク文字を
右に移動させたり、左に移動させたりできます。

例）position:relative; left:10px;（右に10px移動させる）


★ この記事が参考になりましたら投票お願いします。
秋月 錬 at 23:12 | CSS | comments [0] | trackbacks [0]


» 枠線（border）を変更する

Tableタグやimgタグなどの枠線（border）を
点線や破線に変更する方法を紹介します。

◆borderプロパティ

border: width style color;（全ての枠線）
border-top: width style color;（上の枠線）
border-right: width style color;（右の枠線）
border-bottom: width style color;（下の枠線）
border-left: width style color;（左の枠線）

「border:～」は全ての枠線を一括指定、
「border-xxx:～」は上下左右の枠線を個別指定します。
一括指定か個別指定のいずれかを使用します。
斜体の部分に枠線の詳細を指定します。
それぞれの意味は

width：枠線の幅
style：枠線のスタイル
color：枠線の色

となっています。
枠線のスタイルは下記の通りになります。
それぞれどのように表示されるかはお試しになって下さい。

none 非表示（デフォルト）
hidden 非表示
solid 1本線
double 2本線
groove 窪んだ線
rigde 隆起した線
inset 全体が窪んだように表示
outset 全体が隆起したように表示
dashed 破線
dotted 点線

なお指定内容によってはブラウザによって表示が
異なる場合がありますのでご注意ください。


★ この記事が参考になりましたら投票お願いします。
秋月 錬 at 23:09 | CSS | comments [0] | trackbacks [0]


» 画像を透過する

画像を透過するには、画像ファイルそのものを
透過GIFや透過情報を含んだPNGファイルを使うのが
一般的ですが、ここではfilterタグを使って
画像を透過する方法を紹介します。

透過したいタグに
style="filter: Alpha(opacity=80);" を追加するだけです。

opacityの数値は透過する割合です。
数値が小さいほど透明になっていきます。
（"0"で透明、"100"で不透明です。）
ＣＳＳに追加する場合は filter: Alpha(opacity=80); を
追加すればＯＫです。


★ この記事が参考になりましたら投票お願いします。
秋月 錬 at 23:05 | CSS | comments [0] | trackbacks [0]


» 背景画像を固定する

背景画像を固定する場合は、CSSの body 要素に
背景画像を指定し、背景画像の指定に対して下記のように
プロパティ background-attachment プロパティを追加します。
このプロパティの値が fixed の場合、画像が固定表示されます。

◆背景画像固定ソース

<style type="text/css">
<!--
body {
background-image: url("画像のＵＲＬ");
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
}
--></style>

画像の配置位置は background-position プロパティで指定します。
上のリストでは「右下」を指定していますが、プロパティの値は

水平方向：left（左）／center（中央）／right（右）
垂直方向：top（上）／center（中央）／bottom（下）

のいずれかお好きなものを指定してください
（"%"指定等、他の設定方法についてはここでは割愛します）。

また上のサンプルでは background-repeat プロパティで
画像を繰り返し表示しない設定になっています。(no-repeat)
水平方向に繰り返し表示する場合は background-repeat プロパティに
repeat-x を、垂直方向に繰り返し表示する場合は repeat-y を
指定してください。


★ この記事が参考になりましたら投票お願いします。
秋月 錬 at 22:53 | CSS | comments [0] | trackbacks [0]


» 外部スタイルシートの適用のしかた

外部ＣＳＳファイル（.css）を使う場合の記述方法です。
<head>～</head>までに以下のソースを追加すれば、
外部ＣＳＳファイルのスタイルシートを使うことができます。

◆ソース記述方法

<link href="style.css（CSSファイルまでのURL）" rel="stylesheet" type="text/css">


★ この記事が参考になりましたら投票お願いします。
秋月 錬 at 22:12 | CSS | comments [0] | trackbacks [0]


» スクロールバーの色を変更する

以下をCSSに追加すれば、スクロールバーの色を
変更できます。

◆スクロールバー色変更ソース


<style type="text/css">
<!--
body{
scrollbar-3dlight-color : 任意の色（#******）;
scrollbar-arrow-color : 任意の色（#******）;
scrollbar-base-color : 任意の色（#******）;
scrollbar-darkshadow-color : 任意の色（#******）;
scrollbar-highlight-color : 任意の色（#******）;
scrollbar-shadow-color : 任意の色（#******）;
scrollbar-track-color : 任意の色（#******）;
}
--></style>

＜スクロールバープロパティ＞
scrollbar-3dlight-color ：スクロールバーの左端と上端の色
scrollbar-arrow-color ：スクロールバーの矢印の色
scrollbar-base-color ：スクロールバーのベースの色
scrollbar-darkshadow-color：スクロールバーの右端と下端の色
scrollbar-face-color ：スクロールバーの表面の色
scrollbar-highlight-color ：スクロールバーのハイライトの色
scrollbar-shadow-color ：スクロールバーの影の色
scrollbar-track-color ：スクロールバーの通路の色


★ この記事が参考になりましたら投票お願いします。
秋月 錬 at 21:49 | CSS | comments [0] | trackbacks [0]



Copyright (c) monologue.inc, All Rights reserved.