オリジナルスキンCSSの編集 記事枠（画像）4
再度、違う画像をお借りして説明です
オリジナルスキンCSSの編集 記事枠（画像）3
を読まれてない場合は先に3の方からお願いします
文字の色までは変更していませんが実際は文字色も頭において作成してください
素材の横幅が合いません・・・・・
リサイズ（縮小や拡大）する必要から一度画像を組み合わせてからリサイズして
そこから3枚の画像を作ります
※画像を修正する部分がある場合はリサイズ前に修正してください
前回同様に素材のサイトで希望の画像の上で右クリック → コピー → JTrimに貼り付け
同様に中の画像をコピーしてJTrimで上の画像の下に連結貼り付けします
※もし中の画像が縦の長さが短い場合は何回か連結してある程度の長さにしておくと後の作業が楽です
続けて下の画像も連結して一枚の画像にします
なお、修正する部分がある場合はこの時点で修正下さい
念のため保存しておくことを薦めます
記事枠に合わせて縮小します
縮小ができたらやはり保存しておくといいかも・・・
そしたら上の画像を作ります
上の画像の範囲を指定して切り取り → 保存（上の画像）
保存したら元の戻しちゃいます・・・・
元に戻ったら
次は加工の必要のない下の画像を作ります
やはり下の画像の範囲を指定して切り取り
切り取ったら保存します（下の画像）
下の画像を保存したら
再度、元に戻します
今回の画像はつなぎ目は関係ありませんから中の画像を適当に切り取ります・・・・注
切り取りましたら中の画像を伸ばすために下の名のもない部分をコピー
そして中の画像の下に連結します
縦の長さを確認しながら十分な長さになるまで連結を繰り返します
出来ましたら保存（中の画像）
※今回も中の画像は1枚の場合で説明しましたが・・・・・
注で切り取った画像をそのまま中の画像とし背景を繰り返しで設定しても可能です
ＣＳＳの編集で下の部分を探して
赤字部分を削除するか
青字部分 /* と */ を加えてこの部分のＣＳＳを無効にします
説明はスタンダードのグレイ・ピーチ・グリーン・ブルーのスキンの場合です
/* ---------- entry : 各記事枠 ---------------- */
/*
.entry{
width:99%;
margin-bottom:20px;
}
.entry .date{
width:99%;
background-color:#F5F5F5;
padding:5px 0 2px 5px;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
display:block;
color:#000000;
}
.entry .name{
margin-top:5px;
display:block;
}
.entry .theme{
margin-bottom:10px;
display:block;
}
.title{
margin-top:10px;
margin-bottom:10px;
}
.entry .contents{
margin-top:15px;
margin-bottom:15px;
}
.entry .foot{
text-align:right;
padding:5px 20px 5px 0;
border-top:1px dashed #000000;
}
*/
/* ---------- page : ページリンク ------------- */
削除あるいは無効としてから
前の記事の説明画像を参考にＣＳＳをコピペします
.entry{
width: 100%;
margin-bottom: 20px;
background: url(画像のURL);
background-repeat: no-repeat;
background-position: center top;
}
.entry .entry_head{
padding:0;
}
.entry .date{
display: block;
padding: 15px 0 0 50px;
color: #6F706E;
}
.entry .title{
padding:70px 50px 0px 50px;
}
.entry .theme{
display: block;
padding:0px 0px 10px 50px;
}
.entry .contents{
margin: 0;
padding:10px 50px 0 50px;
background: url(画像のURL) ;
background-repeat: no-repeat;
background-position: center top ;
}
.entry .foot{
width: 100%;
text-align: center;
border-top:none;
padding: 55px 0 0;
background-image: url(画像のURL);
background-repeat: no-repeat;
background-position: center bottom;
}
.entry .contents の中の画像の設定は
今回は丸の柄の部分が上だけですので
background-position: center top ;
と、上から下へ表示するように設定します
また、注で説明したように短い中の画像を繰り返して使う場合は
.entry .contents{
margin: 0;
padding:10px 50px 0 50px;
background: url(画像のURL) ;
background-repeat: repeat-y;
background-position: center top ;
}
※投稿者の表示を表示しない場合で説明しています
投稿者の表示をしている場合は.entry .nameの設定が必要となります
ポカポカ色 さまの画像をお借りして説明しています
再配布禁止ですので当ブログよりのお持ち帰りはご遠慮ください
注意・・・・
素材サイトの中には加工を禁止している場合があります
そのサイトの利用規約をよく読んだ上で利用してください
おもしろ名刺ジェネレーター
おもしろ名刺ジェネレーター あなた何様
https://secure6.brother.co.jp/Mymio/meishi/index.html
名前を入力するだけで名刺ができます
ダウンロードすると画像が荒いのが・・・・・・
ブラザーでやっていますから本当は印刷するといいんでしょうけどね
縮小とかの加工なしのオリジナルがこれではブログでは使えませんね・・・・
オリジナルスキンCSSの編集 プロフィール3 & 記事下もっと
先日からルームで動画等がなくなって 相談 プレゼント が表示されるようになっていました・・・
ブログのプロフィールは変更ないのかな？って思っていましたら・・・・
変更されたようです
プレゼントなんて使いません！いりません！！
・・・・リクエスチョンっていつから相談になったんですか？
ｃｓｓの最後にコピペしてください
/* ルームをプロフから消す */
#profile ul #ameNaviArea .linkforroom{
display:none;
}
/* フォトをプロフから消す */
#profile ul #ameNaviArea .linkforphoto{
display:none;
}
/* 相談をプロフから消す */
#profile ul #ameNaviArea .linkforrequestion{
display:none;
}
/* プレゼントをプロフから消す */
#profile ul #ameNaviArea .lastItem{
display:none;
}
/* メッセージを送る を消す */
#amemberProfArea li.menuMsg{
display:none;
}
/* アメンバーになる を消す */
#amemberProfArea li#amemberProf3{
display:none;
}
/* プレゼントを贈る を消す */
#amemberProfArea li.menuPresent{
display:none;
}
Death Scythe - サレナ さまに教えていただきました
/*記事下もっと！ を消す*/
.entry .foot a.menuMore{
display:none;
}
こちらも参考にしてください