►▪◄ブログ改造応援団►▪◄

メイン

Sun, 26 Aug 2012 11:18:54 +0900

フォントの変え方

Tue, 03 Apr 2012 13:36:51 +0900

４月２日（火）

CSS欄の最初か最後にはってください。▼

/* ---------- font : 文字サイズ・装飾---------- */
body{
color:#000000;
font-size:12px;
font-family: '＊文字のフォント＊','＊文字フォント＊',serif;
}
#ameblo,
#comment_module p.list,
.entry .theme,
.entry .foot,
.list{
font-size:10px;
}
#header h1 a{
color:#FFFFFF;
font-size:25px;
font-weight:bold;
line-height:1.15;
}
#header h2{
color:#FFFFFF;
font-size:11px;
font-weight:normal;
line-height:1.15;
}

フォントは下記を参考にしてください。

sans-serif … ゴシック体系のフォント

serif … 明朝体系のフォント

cursive … 筆記体系のフォント

fantasy … 装飾系のフォント

monospace … 等幅系のフォント

ブログ改造の仕方

Tue, 03 Apr 2012 13:16:36 +0900

４月２日（火）

ブログ改造の仕方は、ブログを改造したい

人におすすめですッッ

これからも、たくさんタグをのせていくのでよろしくお願いしますッッ

フォントの変え方

素材屋風改造のタグ

アイフレ＆横メニューつき素材屋風改造のタグ

ブログ（記事）やプロフィールに音楽（動画）を流す方法

トプ画の変え方

素材屋風改造のタグ

Thu, 22 Mar 2012 21:43:35 +0900

３月２２日（木）

ブログタイトルとブログ説明を消すタグ▼

.skinTitle,
.skinDescription{
display:none !important;
}

次に、スキン設置▼

.skinFrame2{
position:relative;
width:●px !important;/*スキンの横幅*/
height:●px;/*スキンの縦幅*/
margin:auto;
margin-top:●px;/*上の広告との間の隙間*/
background-image:url(☆);/*スキンの画像URL*/
border:●px ▲ #★;/*スキンの周りの枠の太さ種類色*/
}

スキンの周りに枠はいりませんッッ
って人は、ピンクの部分を消してくださいッッ

次に、▼のタグもコピペ

.skinMainArea{
width:●px !important;/*記事部分の横幅*/
height:●px;/*記事部分の縦幅*/
overflow:auto;
position:absolute;
left:●px;/*左からの位置*/
top:●px;/*上からの位置*/
overflow-x:hidden;
}
.skinArticle{
background-color:transparent;
border:0;
}

これで記事はスキンの記事枠の中に
収まりますねッッ

次は-サイドバーが大変なことになってるので
そこを直しますッッ

まずは広告が入ってるほうのサイドバー。
▼のタグをまたその下にコピペ。

.skinSubA{
width:●px !important;/*横幅*/
height:●px;/*縦幅*/
overflow:auto;
border:●px ▲ #★;/*周りの枠の太さ種類色*/
background-color:#★;/*背景色*/
position:absolute;
left:●px;/*左からの位置*/
top:●px;/*上からの位置*/
}

枠はいりませんと思う人は、

さっきと同じくピンクを
消してください。

サイドバーも絶対配置で置いちゃいます。
そのほうが楽だと思うのでッッ

好きなとこに置いてくださいッッ
今回のデザインは、別に1番上に
サイド広告がなくてもいいみたいですッッ

次に、広告が入ってないほうのサイドバーですッッ

▼をコピペ。

.skinSubB{
width:●px !important;/*横幅*/
height:●px;/*縦幅*/
overflow:auto;
border:●px ▲ #★;/*スキンの周りの枠の太さ種類色*/
background-color:#★;/*背景色*/
position:absolute;
left:●px;/*左からの位置*/
top:●px;/*上からの位置*/
}

枠はいりませんと思う人は、

さっきと同じくピンクを
消してくださいッッ
っ
広告の入ってるサイドバーと同じですね。

ここまでやったらもう配置は完璧ですが･･

なぜかブログ全体の横幅が
長くなってて横スクロールバーが
出ちゃってます。

なので、横幅を狭めるタグです。▼

.skinContentsArea{
width:200px;
}

これで終わりです。

アイフレ＆横メニューつき素材屋風改造のタグ

Thu, 22 Mar 2012 21:27:04 +0900

まず、サイドバーの配置で
フリースペースとフリープラグインを
左側のサイドバーに移して、
それ以外の移動できる機能を全部
使用しない機能に移してください。

そのあとに、↓をコピペ。

.skinTitle,
.skinDescription{
display:none !important;
}
.skinFrame2{
position:relative;
width:●px !important;/*スキンの横幅*/
height:●px;/*スキンの縦幅*/
margin:auto;
margin-top:●px;/*上の広告との間の隙間*/
background-image:url(☆);/*スキンの画像URL*/
border:●px ▲ #★;/*スキンの周りの枠の太さ種類色*/
}
.skinMainArea{
width:●px !important;/*記事部分の横幅*/
height:●px;/*記事部分の縦幅*/
overflow:auto;
position:absolute;
left:●px;/*記事の左からの位置*/
top:●px;/*記事の上からの位置*/
overflow-x:hidden;
}
.skinArticle{
background-color:transparent;
border:0;
}
.skinSubA{
width:●px !important;/*広告サイドバーの横幅*/
height:●px;/*広告サイドバーの縦幅*/
overflow:auto;
border:●px ▲ #★;/*広告サイドバーの枠の太さ種類色*/
background-color:#★;/*背景色*/
position:absolute;
left:●px;/*広告サイドバーの左からの位置*/
top:●px;/*広告サイドバーの上からの位置*/
}
.skinSubB{
width:0 !important;
}
.skinContentsArea{
width:200px;
}
.pagingArea{
width:99%;
margin:●px auto ●px auto;/*ページナビの上との隙間&下との隙間*/
}

スキンの周りと広告つきサイドバーの周りに
枠なんかいらないって人は
ピンクの部分を消してください。

画像を好きなところに置くタグ

Thu, 22 Mar 2012 21:24:37 +0900

３月２２日（木）

まず、フリースペースに▼のタグをコピペ

リンクあり画像の場合のタグ▼

リンクなし画像の場合のタグ

★には好きな半角英数字を入れてください。
それがCSSタグで使うIDみたいなものになります。
■には飛び先URL、◆には画像URLを入れてください。

次に、CSS欄の最後に↓のタグをコピペです。
固定なしの場合↓

アイフレ＆横メニューつき素材屋風改造のタグを貼っている人は、

ピンクの部分は消してください。

.skinFrame2{
position:relative;
margin:auto;
width:1000px;
}
#★{
position:absolute;
top:●px;/*上からの位置*/
left:●px;/*左からの位置*/
}

固定ありの場合↓

#★{
position:fixed;
top:●px;/*上からの位置*/
left:●px;/*左からの位置*/
}

★には、フリースペースに貼ったタグの★と
同じ半角英数字を入れてください。
同じじゃないと反応しないので注意。

青い部分は、
right:●px;/*右からの位置*/
に変えてもおkです。

右クリック禁止タグ

Mon, 19 Mar 2012 06:28:38 +0900

3月19日（月）

タグはフリープラグインに貼ってください。▼

ここに文字っていうところに、メッセージを、いれてくださぃ。

初級編・中級編・上級編

Sun, 11 Mar 2012 21:51:20 +0900

●初級編・中級編

①まずは、カスタム可能デザインで、デザインを選びましょう。

おすすめは、ベーシック　○○です。

②ブログデザインの表示確認・レイアウト変更をしましょう。

わたしは、ベーシック　ピンクで、3カラム・右ワイドメニューに

してみました。

そしたら、「適用する」をクリックしてください。

③デザインをカスタマイズしてみよう。

用意する画像

○ヘッダー

○背景画像

です。

いろいろ自己流にかえてみましょう。

フリープラグインなどもつかうとブログがもっとかわいく

なりますよ。

●上級編

①まずは、カスタム可能デザインで、デザインを選びましょう。

CSS編集用デザインをつかってください。

②ブログデザインの表示確認・レイアウト変更をしましょう。

わたしは、CSS編集用デザインで、3カラム・右ワイドメニューに

③CSS編集してみよう。

たくさん、タグをはりつけてください。

スタッフのブログのブログも参考にしてみてください。

いろいろ自己流にかえてみましょう。

フリープラグインなどもつかうとブログがもっとかわいく

なりますよ。

横メニューのタグ

Sun, 11 Mar 2012 20:10:42 +0900

３月１１日（日）

①フリプラにタグをコピペ

追加する場合は、の前に

項目の文字

を足したい分だけ付け足してください。

②CSS欄にタグをコピペ

.skinFrame2{
position:relative;
margin:auto;
width:1000px;
}
#topmenu {
width:●px;/*横メニュー全体の横幅*/
line-height:1;
display: block;
position:absolute;
top:●px;/*横メニューの上からの位置*/
left:●px;/*横メニューの左からの位置*/
z-index:999;
}
#topmenu ul{
margin:0;
padding:0;
}
#topmenu li {
width:●px;/*1つの項目の横幅*/
text-align:center;
display:inline;
list-style:none;
float:left;
}
#topmenu li a {
color:#■;/*項目の文字色*/
font-size:●px;/*項目の文字サイズ*/
border:●px ▲ #■;/*項目の枠の太さ種類色*/
background-color:#■;/*項目の背景色*/
padding:●px;/*文字と上下の隙間の大きさ*/
margin:0;
text-decoration: none;
display: block;
}
#topmenu li a:hover {
color:#■;/*カーソル乗せたときの文字色*/
border:●px ▲ #■;/*カーソル乗せたときの枠の太さ種類色*/
background-color:#■;/*カーソル乗せたときの背景色*/
}

/*横メニュー全体の横幅*/ゎ、
1つの項目の文字× 項目数 = 横メニュー全体の横幅
で計算してください。

ウェブからのメッセージをだすタグ

Sun, 11 Mar 2012 13:28:50 +0900

３月１１日（日）

CSS欄にコピペ▼

です。改行する場合は、

改行する文字のあとに￥ｎと

うってください。