CSSの編集が出来ないスキンでCSSを使う 5
他にもスキンは満足しているのですが
これでコメント欄を可愛くしたい
で、Thickboxも使いたいし、管理人とゲストさんのコメントも背景を変えてすぐにわかるようにしたい
Thickboxが使えるんなら
ThickBoxを ”もっと” 可愛らしく・・・ も使って可愛くしたい・・・
そのためにはＣＳＳが使えないと出来ません・・・・・
だいぶハデになってしまいましたが・・・・・
まずはフリープラグインに
自分のコメントをわかりやすく を参考にjavascriptを貼り付けます
ＣＳＳ用のブログにログインしなおして ＣＳＳの編集に
/*
-----------------------------------------------------
http://ameblo.jp/csscss/
-----------------------------------------------------
*/
/*コメント欄*/
#comment_module .each_comment{/*コメント背景画像上*/
margin: 0;
padding:0 0 30px 0;
background: url(画像のURL) ;
background-repeat : no-repeat;
}
#comment_module .comment_body{/*コメント背景画像中*/
margin: 0;
padding:10px 20px 10px;/*コメント分の左右の余裕*/
background: url(画像のURL) ;
background-repeat : repeat-y;
}
#comment_module .comment_footer{/*コメント背景画像下*/
margin:0 !important;
padding: 15px 0 25px !important;/*画像の高さが目安*/
background: url(画像のURL) ;
background-repeat : no-repeat;
}
#comment_module .label{/*コメントタイトル*/
font-weight: bold;
font-size:12px;
padding:35px 0 5px 40px;/*タイトルの位置*/
}
.comment_footer span.comment_author{/*吹出し部分に合わせるため名前を右に*/
padding-left:40px;
}
.comment_footer span.comment_date{/*名前と日付の間隔*/
padding-left:20px;
}
#comment_module .comment_footer{/*点線消す*/
border-top:none;
}
.comment_gotoform{
display:none;
}
/* Thickbox背景色 */
#TB_overlay,
* html #TB_overlay{
background-image:url(画像のURL) !important;
filter:alpha(opacity=60) !important;
-moz-opacity: 0.6 !important;
opacity: 0.6 !important;
}
#TB_window {
background-image:url(画像のURL) !important; /*枠の背景画像*/
color:#ff00ff !important;/*タイトルの色*/
}
#TB_Counter{
color:#ff00ff !important;/*ページカウンターの色*/
}
!important ・・・ このスキンの場合はコレがないと言うことをきいてくれません
・・・・で、上のように出来ます
使いすぎには注意して、デザイナーさんのデザインを崩すような使い方は控えてください
CSSの編集が出来ないスキンでCSSを使う 4
できましたか・・・？
まだ、ブログになんの変化もないはずです
今使われているブログのどこを直したいのはっきりします
・・・てか、不満があるからこの記事を読まれているわけですからすでにはっきりしていると思いますが
あっ、べつに後からでもドンドン変更、追加・削除は出来ますので大丈夫です
↓今、使っているスキンがコレだとします
・・・・タイトルが白字でちっちゃいし、バックの柄にかぶって見にくい
・・・・カレンダーの記事を書いた日付がわかりにくい
・・・・・コメントがくっついているので読みにくい
などなど、不満が色々あると思います
ここのブログや他にもＣＳＳを教えてくれていろサイトがありますので
それらを参考に直したい部分のＣＳＳをメモ帳とかに書きます
↓タイトルを下げて
#header h1 {/*タイトル*/
padding-top: 40px;/*タイトルを上から40px*/
}
↓タイトルの文字色とサイズを変更
#header h1 a,
#header h1{/*タイトル*/
color: #000033;/*文字色*/
font-size: 25px;/*文字サイズ*/
}
↓概要の文字色とサイズを変更
#header h2{/*概要*/
color:#ffffff;/*文字色*/
font-size:14px;/*文字サイズ*/
}
↓カレンダーの文字色と太さを変更
#calendar td a {/*カレンダー記事のある日*/
color:#ff6600;/*文字色*/
font-weight:bold;/*太文字*/
}
↓各コメントの上にスキマを空けてコメントとコメントの間に白い破線
.each_comment{/*コメントタイトル*/
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed #ffffff;
}
できましたら ＣＳＳ用に作ったブログにログイン
デザインの変更 → スキンＣＳＳの編集
CSSの編集で先ほど作ったＣＳＳを貼り付けます → 保存（ここでプレビューしても意味がありません）
新しい画面でいつも使っているブログを見てください
※普段使っているブログにログインするわけではありません見るだけです
ＣＳＳ用のブログはログアウトしません
直したかった部分が直っているか確認します
もし表示がおかしかったり、もう少し右、とか色が合わなかったらまた上のＣＳＳを変更して保存
普段使っているブログをリロードして確認
思った通りになるまで繰り返します
出来上がりましたらＣＳＳ用ブログはログアウト
・・・いつも使うわけではありませんのでIDとパスワードは忘れないようにしてください
↑こんな感じで出来ました
健康のためＣＳＳの使いすぎには注意しましょう
・・・・私のように寝不足になりますよ
※デザインをされた方を尊重してあくまでも補助として使うようにしてください
CSSの編集が出来ないスキンでCSSを使う 3
新しいブログが出来ましたか・・・？
そうしましたら、新しいブログの登場です
↑こんな感じのブログでスタンダードのベーシックスキンになっていると思います
※ＣＳＳの編集が出来れば何でもかまいません・・・・ 何を選んでもブログとしては使えませんから
で、ＣＳＳの編集です
↑ズラズラ～っとＣＳＳが書かれていますね・・・・・ 全部削除します・・・・！！
わくの中で右クリック → すべてを選択
削除 ・・・・・ あ～全部なくなっちゃった・・・・
このままだと保存できませんので適当に入れておきます
/*
-----------------------------------
ココへURLを記入
-----------------------------------
*/
↑こんなんでもコピーして貼り付けておいてください
※私もやったのですがＣＳＳのためだけのブログですからＩＤとパスを忘れてしまって・・・・
パスは普段使っているブログと同じパスなので関係ありませんが
ＣＳＳを直そうと思ってログインしようとしたらＩＤを忘れて・・・・
ここに書いておけば忘れることはありません URLの最後がＩＤです
ソースを見れば誰でもこれを見ることが出来ます
くれぐれもパスワードは書かないようにしてください
↓ＣＳＳが全部なくなるとこうなります・・・・・
なんとなくＣＳＳの役割がわかったような気がしませんか？
↑あ～ぁ・・・こんなんなっちゃいました・・・・ でも、関係ない！！
変なブログの上で右クリック → ソースの表示
するとメモ帳が立ち上がり・・・こんな暗号が・・・・・
上から10何行目に 数字.CSS があります
見つけたら その1行をコピーします（メモ帳とかのサイズによっては2行になっている場合もあります）
<link rel="stylesheet" media="screen,print" type="text/css"href="http://ameblo.jp/skin/templates/d2/3c/100012345.css " charset="UTF-8" />
新しくブログを作ったのは このたった1行が欲しかったからです・・・・
メモ帳とかに貼り付けておいてください
できましたら 新しく作ったブログはログアウト
いつも使っているブログにログインします
サイドバーの設定 → プラグインの追加 → フリープラグインの設定
↑先ほどコピーした1行を貼り付けて → 設定 サイドバーの配置 使う方にドラッグ（場所はどこでもOK）
すでにフリープラグインを使っている方は一番上に貼り付けてください
これで完了・・・・・
・・・・・どこも変わっていませんが・・・・？？
いいんです・・・・・
それはこれからやるんです・・・・