dandelion-hill

タンポポの綿毛に息を吹きかけて　誰かに届けと書いてます

トップ > PC関連 > ウェブリブログで画像に影を付ける

ウェブリブログで画像に影を付ける

PC関連 パソコン・インターネット
ウェブリブログで画像に影を付ける方法。 これは基本的に自分への覚え書き、備忘録です。 好きに活用していただいて構いません。 むしろ役に立てれば嬉しいことですから。 質問はできればやめてほしいです。 答えられるスキルがありません。(^^;

CSSの編集

まずはCSSの設定をする。 ログイン後のページから 「設定」→「オプション」→「CSS編集(上級者向け)」の 「設定画面へ」のボタンをクリック。 CSS編集ページが開くのでテキストフォーム内に、 以下のコードをコピーして貼り付ける。 わたしは一番下に貼り付けました。
/* 追加　画像シャドー設定 */ .shadow { margin-top: 5px; /* 画像の上の余白*/ display: inline-block; box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.5); /*横方向　下方向　ぼかし　広がり　色 */ }
貼り付けたら下の「設定」ボタンをクリック。 なお念の為、編集前のものを全てコピーして、 どこかに保存しておけば、元に戻すときに役に立ちます。

imgタグ内にクラス（class）を指定する

次に画像を貼り付けたimgタグ内にclassを指定する。 「新規作成」または「編集」から、 本文編集フォームを表示し、 画像を貼り付ける。 以下のようなimgタグが生成される。
<img src="画像のURL" class="up-image">
imgタグ内の img の後に class="shadow" を挿入。
<img class="shadow" src="画像のURL" class="up-image">
これで完了。 上の画像が影なし、下が影あり。 画像
画像
CSS編集で貼り付けるコードの数字部分を色々と変えながら自分好みにカスタマイズする。
ページトップへ戻る jQuery
PAGE TOP