WordPress カスタマイズ -2


背景に画像　横方向へリピート
style="margin: 0px;
background: url(画像が置かれている場所/画像名);
background-repeat: x;
color: #000000;
フィルターをかけて文字を置く　　padding:15px; background: rgba(255, 255, 255, 0.6); font-size:16px;




　背景をリピートせず置く位置を指定
　background: url(画像が置かれている場所/画像名) no-repeat center top;
　画像と文字が重なる場合、文字の色に注意
　wordpressでは、レズポンシブのため、背景画像も移動するので、文字の重なりに注意






　背景を画面（ディスプレイのことで、画像を固定の設定）いっぱいに・・・ヘッダーに使うことが多い
　background: url(画像が置かれている場所/画像名) center top / cover no-repeat fixed;
　color:#ffffff;
　font-size:16px





　　　
　ボーダー無し
　　img {
　　　　border: none;
　　}
　基本のimg設定は border: none;
　固定ページや投稿ページで使う画像に装飾をかけるることもある
　ページナビ用のアイコンが丸い場合は、ボーダー解除の設定する
　style="border: none; box-shadow: none; text-align: center;"
　style="border:none; box-shadow: 0 5px 6px -6px transparent !important;"

　　　

　画像に枠 ／ 背景が黒など濃い場合は、枠の色を明るめにする
　　img {
　　　　border:1px solid #999999;
　　}

　　　

　画像の周り 5px 離れたところに枠（余白幅と色選択）
　　img {
　　　　background-color:#ffffff;
　　　　padding:5px;
　　　　border:1px solid #cccccc;
　　}

　　　

　画像に枠を付けて影を下へ ／ 影の方向で立体感が変わる
　　img {
　　　　padding:0;
　　　　margin:0;
　　　　border:1px solid #cccccc;
　　　　box-shadow: 0 8px 6px -6px #555555;
　　}

　　　

　枠あり・影付き・画像の角を丸める
　影の色の表記が、上の#555555 と rgba(0, 0, 0, 0.2)　があり、rgba は柔らかい感じになる
　　img {
　　　　border-radius: 3px;
　　　　border: 1px solid #ccc;
　　　　box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
　　}

　　　

　　選択した画像を丸にする　　border-radius: 50%;
　　長方形を　border-radius: 50% 0;　にした場合
　　どちらも部分的に使うので、画像に style を追加してもいいし、複数使う場合は　class を作る

　　　



　　画像をクリックして別ウィンドウを開く　今は ほとんど使わない

　　<a href="http://www.share-gaki.com/images/test2.jpg" onclick="window.open('http://www.share-gaki.com/test2.jpg', '_blank', 'width=250,height=390');return false;">
　　<img src="http://www.share-gaki.com/images/test1.jpg" alt = "">



プラグイン　インストール

MetaSlider　／　WP Lightbox 2
wp_1 　wp_2 　wp_3 　wp_4 　wp_5