オリジナルスキンCSSの編集 プロフィール
プロフィール欄で使っていない余計なものは消してスッキリしましょう・・・
いつものようにCSSの最後にコピペ
全部必要ない場合
#profile ul #ameNaviArea,
#profile .link_genre,
#profile .link_blog,
#profile .link_info{
display:none;
}
ルーム|フォト|動画|リクエスチョン --- #profile ul #ameNaviArea
ルームはプロフィール画像をクリックでリンクしています
#profile ul #ameNaviArea{
display:none;
}
１部分だけ消したい場合 --- ルーム フォト 動画 ( | は、なくなります )
/* ルームをプロフから消す */
#profile ul #ameNaviArea .linkforroom{
display:none;
}
/* フォトをプロフから消す */
#profile ul #ameNaviArea .linkforphoto{
display:none;
}
/* 動画をプロフから消す */
#profile ul #ameNaviArea .linkforvision{
display:none;
}
/* リクエスチョンをプロフから消す */
#profile ul #ameNaviArea .lastItem{
display:none;
}
#profile #ameNaviArea li {
border:none;
}
ブログジャンル : [ジャンル］ ------- #profile .link_genre
#profile .link_genre{
display:none;
}
[記事作成・編集] ------- #profile .link_blog
自分のページになくてもログインしていれば
他の方のブログで[記事作成・編集] をクリックしても自分の記事編集に入れます
または左上のamebaトップへをクリックで自分の管理ページへ入れますのでなくても・・・
#profile .link_blog{
display:none;
}
二人っきりの相談室 ------- #profile .link_info
#profile .link_info{
display:none;
}
プロフィール画像が小さくて左に寄っている場合は
#profile .image{
text-align:center;
}
で、中央になります
*********************************************
ペタを残す
チェックリストに追加
アメンバーになる を消すには
オリジナルスキンCSSの編集 プロフィール3 & 記事下もっと
オリジナルスキンCSSの編集 配置
記事を見やすく読みやすくしたい方の参考にどうぞ
ついでにちょっとしたこだわりも・・・・
はじめは・・・
■記事が周りの枠にくっつきすぎていますので余白をつけます
.entry{
padding:10px;
}
で、記事全体に余白をつけてしまうと
せっかくの日付部分の位置までずれてしまいます
ので、動かしたい部分だけで設定します
.entry .title{/*タイトルの位置*/
padding:10px 10px 0;/*上に10px、左右に10px、下は0 の余裕*/
}
.entry span.theme,
.entry .contents{/*テーマ・記事の位置*/
padding:0 10px;/*上下は0、左右は10pxの余裕*/
}
■>テーマがなんか、タイトルの横にあればいいのに ・・・リクエストにお答えして
.entry .title{/*タイトルの位置*/
padding:10px 10px 0;
}
.entry span.theme{/*テーマの位置*/
position:relative; top:-25px; left:280px;/*上に25px、左から280pxの位置に配置*/
}
.entry .contents{/*記事の位置*/
padding:0 10px;
}
※この場合は長いタイトルを使えません・・・テーマと重なってしまいます
■タイトルが長くなってもいいようにもっと動かして今度は日付の横です
テーマにリンクがありますので文字色を変えないとわかりにくくなっています
・・・で、
.entry .title{
padding:10px 10px 0;
}
.entry span.theme{
color:#ffffff;
position:relative; top:-57px; left:280px
}
.entry span.theme a:link,
.entry span.theme a:visited,
.entry span.theme a:hover{/*リンクの文字色*/
color:#ffffff;
}
.entry .contents{
padding:0 10px;
}
※文字数が1番多いテーマで位置を調整してください
■この際・・・もっと動かしてみました・・・
ここまではする必要もないと思いますが・・・
1つ1つをposition:relative;で位置を決めていけば表示の順番を逆にもできます
今回、ご協力いただいたのはさまです
ありがとうございました
ＣＳＳ 検索窓をかわいく ・・・ ボタン
2008/6/19 アメブロ検索の変更にともない
#search .searchbtn を #search .searchButton に変更下さい
下のＣＳＳは訂正済みです
再度変更で元に戻りました ・・・ 下のCSSは訂正してあります
前回 の続きです
今度はボタン部分をCSSで変更します
※ボーダーが二重線になっているのは 3px double と、幅3px の二重線で指定しているからです
borderの位置関係は上の図を参照してください
窓部分は前回 を参考に変更してください
ＣＳＳの最後にコピペしてください
#search .searchbtn {
height :20px;
color: #cc00ff;
border-top:3px double #ff66ff;
border-left:3px double #ff66ff;
border-right:3px double #ff33ff;
border-bottom:3px double #ff33ff;
background-color: #ff99ff;
text-align: center;
}
#search .searchbtn {
height :20px;
color: #cc00ff;
border:3px outset #ffccff;
background-color: #ff99ff;
text-align: center;
}
※検索の文字サイズを小さくする場合は#search .searchbtn{ } 内に
font-size :0.8em; /*80%のサイズ*/ とか、 font-size: 8px;
のどちらかを、好みの大きさを指定して加えてください
※画像を使う場合は
#search .searchbtn {
width: ***px;/*画像の幅*/
height: 20px;/*画像の縦*/
text-indent: -9000px;
background: url(画像のURL) no-repeat;
}