テンプラトリセツ

トップブログテンプラテンプラミホンframie_frammy> エントリー部分を変える

エントリー部分を変える

エントリー部分を変更するには 「ログイン」→「ブログデザインの設定」→当テンプレの「修正」 をクリックしてください。 いじるのはcssファイル(下のほうに表示されるファイル)です。

変える部分は2箇所あります。 一つは「メニューボックス」のスクロールバー、 もう一つは「エントリーテーブル」です。

ちょっとしたサンプル

エントリー部分の色を変えたらどうなるのかを示すために 当サイトと同色のカラーを用いたサンプルを用意しました。 [ ]内がエントリーテーブルのカラーコードです。 画像は大きめですので表示に時間がかかるかもしれません。

blue [ #8ed4e7 ]
サンプル(別窓で開きます)
pink [ #ffb1c7 ]
サンプル(別窓で開きます)
green [ #92dc00 ]
サンプル(別窓で開きます)
yellow [ #ffc66b ]
サンプル(別窓で開きます)
gray [ #e9e9e9 ]
サンプル(別窓で開きます)

メニューボックスのスクロールバーの色を変える

メニューボックスのスクロールバーの矢印部分(▼のところ)の色も エントリーテーブルの色と同じにした方が見栄えが良いです。 まずcssの「メニューボックス・インデックス」を見てください。 わからない方はctrlキーとFキーを同時に押して「メニューボックス」 を検索してください。 ここに「.menu_box」の設定部分があります。 この部分の赤いところをお好きな色のコードに変えればOKです。

.menu_box{
width:210px; 
height:360px; 
padding: 0em;
background-color:#ffffff; 
overflow: auto;
scrollbar-3dlight-color:#ffffff;
scrollbar-arrow-color:#8ED4E7;
scrollbar-base-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ffffff;
}

エントリーテーブルの色を変える

次にエントリーテーブル(記事を囲っているブルーの部分)を変えましょう。 cssの「エントリーテーブル」部分を見てください。 わからない方はctrlキーとFキーを同時に押して「エントリーテーブル」 を検索してください。 この部分の赤いところをお好きな色のコードに変えればOKです。

/*↓エントリーテーブル↓
--------------------------------------*/

.entry_table{
width:520px;
margin:50px 0px 20px 0px;
padding: 15px;
background-color:#8ED4E7;
color:#000000;
}

/*↑エントリーテーブル↑
--------------------------------------*/

変えたら「更新」ボタンを押しましょう。 これで色の変更ができたはずです。 cssの知識がある方はもっといろんなカスタマイズをしてみてくださいね。


トップブログテンプラテンプラミホンframie_frammy> エントリー部分を変える