ぐ-すか･ぶ-すか中国大冒険！ -66ページ目
AmebaAmeba 20th Anniv.ホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

ブログ画像一覧を見る

このブログをフォローする

<< 前のページへ最新 | 62 | 63 | 64 | 65 | 66

コメントの文字を変えよう！　ＣＳＳ入門－５

コメントの文字を変えるにはＣＳＳのだいぶ下のほうの、

/*comment_module*/


のコメントに関する設定を変更します

/*comment_module*/
#comment_module{　　　
padding-top: 5px;
border-top: 1px solid #999999;
}
#comment_module each_comment {←ここがコメントの文字の設定。
margin-bottom: 10px;←
}←


さて、ここでコメントの文字色、サイズ等を変更するんですが、文字色、サイズの文が入っていませんね。
そんなときは、「ないのなら自分で書く！」というわけで、今まで設定のと同じ用意、色の設定の文、サイズの設定の文を追加しちゃいましょう。

#comment_module .each_comment {
margin-bottom: 10px;
font-size: 15px;←文字サイズの設定
color: #FF3300;

←

文字色の設定
line-height: 200%;←文字間の隔設定
}


上のように3行追加してみます。
そうすると、文字サイズ、文字色、文字間隔を設定することができますね。
必ず３行追加する必要はありません。サイズだけを変更したい場合は、「font-size: 15px;」だけを書いてください。
プレビューで確認しながら、好みの色、文字サイズ、文字間隔になればできあがりです。

/*comment_module*/


の中には、設定がたくさんありますが、役に立ちそうなものをご紹介します。設定したい部分があれば、数値を変更したり、文を追加したりして変更します。

☆　各コメントの投稿者、時間の文字設定
#comment_module .comment_footer {
margin-top: 5px;※　サイズ設定の文がないので、サイズを変更する場合は、文を追加してください。 （色設定も書いてないかもしれません。）
※　リンクされている名前の色は変わりません！
padding-top: 5px;
border-top: 1px dashed #000000;
color: #000000;
}
☆　コメントフォーム脇の文字の設定。
#comment_module label{※　名前、ＵＲＬ、タイトル、コメントの文字を変更できます。
display: block;
float: left;
width: 70px;※　色もサイズも設定の文がないので、変更する場合は追記しましょう。
text-align: right;
}
☆　コメントフォームの体裁の設定
#f_name,#f_url,#f_title,#f_com{
display:inline;
width: 250px;←幅を調節できます。
margin-bottom: 3px;
margin-left: 6px;
}

入門１　記事の文字を変えてみよう

入門２　「タイトル」「サブタイトル」を変えてみよう

入門３　「文字のフォント」を変えよう！

入門４　タイトルに好きな「画像」を入れよう！

入門６　「リンクの色」を変えてみよう！

入門７　スクロールバーの設定

リンクの色を変えよう！　ＣＳＳ入門－６

今回はリンクの色の設定をしてみましょう。
リンクの設定は、

/* ----------------- common ----------------- */


の下のほうにあると思います。

/* ----------------- common ----------------- */
　　　　　　　　　・
　　　　　　　　　・
a {←ここがリンク色の設定
color: #990000;←
}←
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:hover {text-decoration: underline}


上のような感じです。
下のように、リンク色の設定が何もされていない場合もあるので、そのときは「color: #990000;」のような文を追記してください。

a {
}
→a {color:
#990000;
}		※　数字は色によって自由に変えてください

 

これでリンクの色の設定はおわり！
カラーコードを変えて、好きな色にしてみてください。
馴れてきた方には、簡単でしたね。 じゃぁ、もう少しいじってみましょうか？



上の設定では、リンクの色を一色にしか設定していませんが、「未訪問リンクの色」、「訪問済みリンクの色」、「リンクにマウスを重ねた時の色」も設定できます。

設定場所は上と同じです。

/* ----------------- common ----------------- */
　　　　　　　　　・
　　　　　　　　　・
a {
color: #990000;
}
a:link {text-decoration: none}←未訪問リンクの色
a:visited {text-decoration: none}←訪問済みリンクの色
a:hover {text-decoration: underline}←マウスを重ねた時の色

上の三つにそれぞれ色指定の文「color: #990000;」を追加しなければならないんですが、ちょっと注意してください。

まずは、「未訪問リンクの色」を変更してみます。

a:link {text-decoration: none}a:link {この中を変更}
　　　 ↓
a:link {text-decoration: none;←文末に「;」をつける
color: #FF0000;←

追加（数値は自由）

}←消さないように注意

「;」が抜けても、最後の「}」が抜けても設定が反映されないので、ちょっとしたことですが、注意してください。

 


この要領で他の２つの色も変えてみます。

a:link {text-decoration: none;
color: #FF0000;
}
a:visited {text-decoration: none;
color: #00FF00;
}
a:hover {text-decoration: underline;
color: #0000FF;
}

3色の設定ともそれぞれ、「;」を足し忘れたり、「}」を消してしまわないように注意してください。
また、同じ設定内の、
「text-decoration: none;」はリンクの下線無し
「text-decoration: underline;」は下線有りということなので、「none」を「underline」に、「underline」を「none」に変更したりして、リンクの下線の有無を設定してください。

a:link {text-decoration: none;
color: #FF0000;
}
a:visited {text-decoration: none;
color: #00FF00;
}
a:hover {text-decoration: underline;
color: #0000FF;
}

入門１　記事の文字を変えてみよう

入門２　「タイトル」「サブタイトル」を変えてみよう

入門３　「文字のフォント」を変えよう！

入門４　タイトルに好きな「画像」を入れよう！

入門５　コメントの文字を変えよう！

入門７　スクロールバーの設定

スクロールバーの設定　CSS入門－７

みなさんもご存知のように、CSSを編集することで、スクロールバーの色も変更できます。（IE5.5以降）
以下の部分に色設定を書き加えるだけです。

/* ----------------------- common ----------------------- */
* {
margin: 0;
padding: 0;
}


ここに下のように各パーツごとの色設定を書き加えます。

* {
margin: 0;
padding: 0;
scrollbar-face-color:#CC0033;
scrollbar-track-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-3dlight-color: #CC0033;
scrollbar-arrow-color: #FFFFFF;
scrollbar-darkshadow-color: #CC0033;
}


実際に色を変更するには以下のような文をCSSに書き込むだけでいいんですが、設定がちょっと多いので、どの文でどの部分の色が変わるのかがわかるようにしました。 参考にしてみてください。

















入門１　記事の文字を変えてみよう

入門２　「タイトル」「サブタイトル」を変えてみよう

入門３　「文字のフォント」を変えよう！

入門４　タイトルに好きな「画像」を入れよう！

入門５　コメントの文字を変えよう！

入門６　「リンクの色」を変えてみよう！

「Myclip」を使おう！

パンダ

リニューアルされて新たに使えるようになった機能「Myclip」。
その存在すらご存知じゃない方もたくさんいらっしゃるかと思います。
まだ使えない機能だと思っていたら、「SEOネタなブログ 」さんではもう使っていてびっくり！さっそく使ってみることにしました。

「Myclip」は簡単に言うと、ブログやホームページを見ていて、おもしろい記事、ニュースがあったときに、自分のブログのサイドバーへのリンクをつけてしまう、名前通りクリップする機能です。ちゃんと設定をして、操作さえ覚えてしまえば、本当に簡単で便利な機能です。

このブログ「ぐ-すか･ぶ-すか中国大冒険！」の右サイドバーの下のほうに、ニュースのタイトルがいくつか表示されていますが、それが「Myclip」です。このブログの場合は中国関連のニュースへリンクをはっています。

この機能を使うには「Myclip （http://clip.myblog.jp/ ）」へ行って、ユーザー登録をしなければなりません。「Myclip」に関する操作、設定などはそのページをよくご覧になってください。

ここからは、「Myclip」の設定、サイドバーへの表示方法をご説明します。

クリップを追加する

１．
 「Myclip」への登録が終わったら、ログインする。
２．
 「Myclip」のページ左の「Clip」の追加をクリック。
３．
 ここで「タイトル（任意）」、「URL（自分で選んだ記事のURL）」を記入。カテゴリを選択し、追加ボタンをクリック。
　
４．
　 　　		 アメブロ側の設定のために、スクリプトを取得する。「Myclip」メニュー内の、「コード生成」をクリック。作られたコードをコピーする。


これで追加は終わりです。実際に追加されたかどうかは、「Myclip」のメニューの「Clip一覧・編集」を見るとわかります。
追加は終わりましたが、ブログを見ても追加したクリップは表示されません。
ブログにクリップを表示するには、アメブロ側の設定をしなければいけません。

アメブロの設定をする

１．
 アメブロにログインして編集画面を開く。
２．
 「デザインと機能」のサイドバーの設定欄を開く。
３．
 ページ左上の「プラグインを追加」ボタンを押す。
４．
 ドロップダウンメニューから「Myclip」を選択し、下のテキストを記入するスペースに「Myclip」で取得したスクリプトを貼り付け、追加、保存。
　
５．
 アメブロ編集のメニューから「サイドバー配置」へ移動。
６．
 「使用しない機能」の中に、「Myclip」が出来ているので、好きな位置へ追加、保存。


以上の設定が全て終われば、サイドバーに「Myclip」で追加したクリップが表示されるようになります。

この機能を便利に使うには、「Myclip」の「便利なClip方法 」をよく読んでおくと効率よく使えます。

「Myclip」の見栄えを変更したい場合は、「Myclip」へ行って、メニューから「表示設定 」に入り、設定もできます。

追記：Myclipのタイトルを表示させる

Myclipを設置してサイドバーを見てみると、タイトルも表示されてなく、デザインも間の抜けたような感じで、なんとかタイトルを表示させようかと思っていたところに「ちょっと寄り道。。。 」のせいるさんがすでにタイトルを表示されていました。
タイトルを表示するには、Myclipの設定画面でコードを少し書き加える必要があります。
１．
 「Myclip」へログインする。
２．
 「Myclip」メニューから表示設定をクリック。
３．
 画面右上の方にある「設定方法をProにする」をクリック
４．
 以下の赤字コードを付け足す

<DIV class=mainMenu id=myclip>
<H4 class=menu_title>Myclip（ここは好きなタイトル名）</H4>
<DIV class=menu_frame>
<UL><div class=myclip-main align="left">
<CATEGORIES id=*>
<span class=myclip-category>{CATEGORY}</span><br />
<CLIPS max=20>
{DATE same=off} {TITLE popup=comment maxchar=50}{NEW second=172800 text=<font color="#0000FF">　new!　　　　　　　　　　　　　</font>}<br />
</CLIPS>
<br />
</CATEGORIES>
</div>
</UL></DIV></DIV>

上のように書き換えて変更ボタンをクリック。ブログを更新しても反映されないときは、一度プラグインを削除してもう一度作り直しみてください。

プラグインを作り直しても、何も表示されない人は、メニュータイトルが文字で表示されているのではなく、画像で表示するスキンを使っている人です。Myclipのタイトル画像は準備されていないようなので、自分で準備します。
その場合はCSSにも書き加えなければなりません。

#myclip {
background: url(タイトル画像) no-repeat left top;
}

上の文をCSSに書き加えれば、ようやくMyclipのタイトル用の画像が表示されるようになったはずです。 タイトル画像を表示するのにここまでしなければいけないとは・・・。お疲れ様でした。

☆CSS関連はこちら☆ 　　☆過去の記事一覧はこちら☆

カラーコード一覧

00FFFF
00FFCC
00FF99
00FF66
00FF33
00FF00
33FFFF
33FFCC
33FF99
33FF66
33FF33
33FF00
66FFFF
66FFCC
66FF99
66FF66
66FF33
66FF00
99FFFF
99FFCC
99FF99
99FF66
99FF33
99FF00
CCFFFF
CCFFCC
CCFF99
CCFF66
CCFF33
CCFF00
FFFFFF
FFFFCC
FFFF99
FFFF66
FFFF33
FFFF00
FFCCFF
FFCCCC
FFCC99
FFCC66
FFCC33
FFCC00
FF99FF
FF99CC
FF9999
FF9966
FF9933
FF9900
FF66FF
FF66CC
FF6699
FF6666
FF6633
FF6600
FF33FF
FF33CC
FF3399
FF3366
FF3333
FF3300
FF00FF
FF00CC
FF0099
FF0066
FF0033
FF0000
CC00FF
CC00CC
CC0099
CC0066
CC0033
CC0000
CC33FF
CC33CC
CC3399
CC3366
CC3333
CC3300
CC66FF
CC66CC
CC6699
CC6666
CC6633
CC6600
CC99FF
CC99CC
CC9999
CC9966
CC9933
CC9900
9966FF
9966CC
996699
996666
996633
996600
9933FF
9933CC
993399
993366
993333
993300
9900FF
9900CC
990099
990066
990033
990000
6633FF
6633CC
663399
663366
663333
663300
6600FF
6600CC
660099
660066
660033
660000
3300FF
3300CC
330099
330066
330033
330000
0000FF
0000CC
000099
000066
000033
000000
0033FF
0033CC
003399
003366
003333
003300
3333FF
3333CC
333399
333366
333333
333300
0066FF
0066CC
006699
006666
006633
006600
3366FF
3366CC
336699
336666
336633
336600
6666FF
6666CC
666699
666666
666633
666600
9999FF
9999CC
999999
999966
999933
999900
6699FF
6699CC
669999
669966
669933
669900
3399FF
3399CC
339999
339966
339933
339900
0099FF
0099CC
009999
009966
009933
009900
00CCFF
00CCCC
00CC99
00CC66
00CC33
00CC00
33CCFF
33CCCC
33CC99
33CC66
33CC33
33CC00
66CCFF
66CCCC
66CC99
66CC66
66CC33
66CC00
99CCFF
99CCCC
99CC99
99CC66
99CC33
99CC00
CCCCFF
CCCCCC
CCCC99
CCCC66
CCCC33
CCCC00
<< 前のページへ最新 | 62 | 63 | 64 | 65 | 66

ブログ画像一覧を見る

このブログをフォローする