さて、次のスキン作成に取り掛かります。
今度はこのスキンをベースに改造していこうかと目論んでいるのですが、headerをいじったらそれで済んでしまいそうです(´・ω・｀)まぁそれでもいっか。とりあえずはheader画像を作っていこうと思います。
お楽しみに♪
今度はこのスキンをベースに改造していこうかと目論んでいるのですが、headerをいじったらそれで済んでしまいそうです(´・ω・｀)まぁそれでもいっか。とりあえずはheader画像を作っていこうと思います。
お楽しみに♪
- 前ページ
- 次ページ
眠たい･･･。
今日は朝から福岡へ新幹線で遊びに行く日。
みんながこれ読むのいつになるんだろ。
朝は得意と言っても、４時半起きはさすがにきつい･･･。
外真っ暗だし。
そんなスーパー↓テンションな状態なんだけど、準備完了しちゃった。
ちょっと早すぎた。暇。
あ、もう５時か。
そろそろ出ようかな。
んじゃ、行ってきますヽ(((( ´ω`)ノﾈﾑｰ
今日は朝から福岡へ新幹線で遊びに行く日。
みんながこれ読むのいつになるんだろ。
朝は得意と言っても、４時半起きはさすがにきつい･･･。
外真っ暗だし。
そんなスーパー↓テンションな状態なんだけど、準備完了しちゃった。
ちょっと早すぎた。暇。
あ、もう５時か。
そろそろ出ようかな。
んじゃ、行ってきますヽ(((( ´ω`)ノﾈﾑｰ
前にborderの話をしましたが、追記です。
以前のやり方だと、記事内に広告をのせてる場合、そこにも囲いがついてしまいます。しかも変な感じに。というわけで修正版です。border文を追加する場所を変えます。
/* -- each menu background -- */
という部分があると思います。ずらーっと各メニューの背景画像が指定してあるところです。そこのひとつひとつにborderの設定文を書き込めば、ひとつひとつ別々に囲えることができます。
この方法だと、当然記事内の広告には囲い線は出ないのでベターです。しかし文章部分と、囲い線の下部の余白があまりないので、
/* -- menu_element_basis -- */
という部分に、
.menu_frame {
margin-top: 1px;
padding-top: 20px;
padding-bottom: 5px;
}
赤字部分を追記します。
「padding」とは「フレームから文章部分までの余白」です。borderによる囲い線はフレームの最下部に引かれるので、これにより囲い線と文章部分の間に5pxの余白が出来ます。
以前のやり方だと、記事内に広告をのせてる場合、そこにも囲いがついてしまいます。しかも変な感じに。というわけで修正版です。border文を追加する場所を変えます。
/* -- each menu background -- */
という部分があると思います。ずらーっと各メニューの背景画像が指定してあるところです。そこのひとつひとつにborderの設定文を書き込めば、ひとつひとつ別々に囲えることができます。
この方法だと、当然記事内の広告には囲い線は出ないのでベターです。しかし文章部分と、囲い線の下部の余白があまりないので、
/* -- menu_element_basis -- */
という部分に、
.menu_frame {
margin-top: 1px;
padding-top: 20px;
padding-bottom: 5px;
}
赤字部分を追記します。
「padding」とは「フレームから文章部分までの余白」です。borderによる囲い線はフレームの最下部に引かれるので、これにより囲い線と文章部分の間に5pxの余白が出来ます。
このアメーバブログのCSSをいじったりしてわかったこと。
「読者になる」「ブログを作る」などのリンクバナーはいじることが出来ないということ。当然「広告スペース」もいじることは出来ない。色すら変えることもできない。つまり、スキンそれぞれによってこの部分は固定なのだ。一見不便だが、これを逆に利用する。
CSSは、「advertising」と「adJavaScript」部分を削れば、CSS編集可であればどのスキンに対してもまったくおなじCSSが流用できる。
現に今のこのブログのスキンは、スキン「tone」の改造版を、スキン「comfort」に流用している。なので上でも言ったように、「読者になる」や「ブログを作る」のリンクバナー部分だけがスキン「comfort」のままだ。
要は、「固定の部分は不可変なので、逆にその色あいや形に合うスキンを自分で作ればいい」ということ。
黒を基調としたスキンを作りたい場合、既存のブラックベースのスキンで、かつCSS編集可能なものを探し出し、それを「ベース」とする。後は実際にスキンを作りさえすれば、固定である「読者になる」や「ブログを作る」などのリンクバナー部分が違和感なく溶け込んでくれる。
「読者になる」「ブログを作る」などのリンクバナーはいじることが出来ないということ。当然「広告スペース」もいじることは出来ない。色すら変えることもできない。つまり、スキンそれぞれによってこの部分は固定なのだ。一見不便だが、これを逆に利用する。
CSSは、「advertising」と「adJavaScript」部分を削れば、CSS編集可であればどのスキンに対してもまったくおなじCSSが流用できる。
現に今のこのブログのスキンは、スキン「tone」の改造版を、スキン「comfort」に流用している。なので上でも言ったように、「読者になる」や「ブログを作る」のリンクバナー部分だけがスキン「comfort」のままだ。
要は、「固定の部分は不可変なので、逆にその色あいや形に合うスキンを自分で作ればいい」ということ。
黒を基調としたスキンを作りたい場合、既存のブラックベースのスキンで、かつCSS編集可能なものを探し出し、それを「ベース」とする。後は実際にスキンを作りさえすれば、固定である「読者になる」や「ブログを作る」などのリンクバナー部分が違和感なく溶け込んでくれる。
今回は「囲い」についてです。
このブログは両脇にあるプロフィールや記事履歴などが四角い枠で囲まれているのがわかると思います。ではどうやっているかと言うと、いたって簡単です。
CSS文中に
/* -- menu_element_basis -- */
.mainMenu {
margin-bottom: 14px;
padding-bottom: 8px;
}
こういう部分があると思います。ここに、
/* -- menu_element_basis -- */
.mainMenu {
margin-bottom: 14px;
padding-bottom: 8px;
border: 1px solid #b4cdb4;
}
赤字の分を書き込みます。これだけで自動的に各フレームが囲われます。ちなみにこの文章は、
「border」…囲いの設定。
「1px」…囲う線の太さ。
「solid」…線のスタイル。これはただの線という意。
「#b4cdb4」…色。
こんな内容となっています。色についてですが、CSSはこのように＃(シャープ)から始まる６桁の１６進数で色を表します。白は#FFFFFF。黒は#000000となります。
このブログは両脇にあるプロフィールや記事履歴などが四角い枠で囲まれているのがわかると思います。ではどうやっているかと言うと、いたって簡単です。
CSS文中に
/* -- menu_element_basis -- */
.mainMenu {
margin-bottom: 14px;
padding-bottom: 8px;
}
こういう部分があると思います。ここに、
/* -- menu_element_basis -- */
.mainMenu {
margin-bottom: 14px;
padding-bottom: 8px;
border: 1px solid #b4cdb4;
}
赤字の分を書き込みます。これだけで自動的に各フレームが囲われます。ちなみにこの文章は、
「border」…囲いの設定。
「1px」…囲う線の太さ。
「solid」…線のスタイル。これはただの線という意。
「#b4cdb4」…色。
こんな内容となっています。色についてですが、CSSはこのように＃(シャープ)から始まる６桁の１６進数で色を表します。白は#FFFFFF。黒は#000000となります。
CSSにおいて、背景画像の設定は以下のように行われています。
background-img url(リソースURL);
background-repeat: くり返し設定;
background-position: 位置設定;
リソースURLとはその画像があるアドレスのことです。「http://」からはじまるやつのことです。
次にくり返し設定についてですが、これは「no-repeat」「repeat-x」「repeat-y」の３種あります。それぞれ「くり返しなし」「X軸方向にくり返し」「Y軸方向にくり返し」という意味です。アメブロはよく、背景画像をただの横線一本にしておき、それをY軸方向にくり返すことによって背景としている手法が多いようです。
ちなみに、上に変な線が２本見えると思いますが、これがこのブログの背景画像の実体です。これをＹ軸方向にくり返すことで、結果的に真ん中にベージュの帯、その両脇に黒い帯が出来ているのです。
次に位置設定ですが、これはいっぱいあります。基本はcenter、top、bottom、left、rightの５つです。設定なしの場合は、自動的に左上になりますが、細かく位置を設定したい場合は、「10px 15px」のように具体的な数値を使ってもOKです。それぞれ「初期位置からX軸方向へ10px」、「初期位置からY軸方向へ15px」ということを表しています。
また、これを省略した書き方もあります。具体的には以下のようになります。
background url(http://lkajd;flkajds;fklj;ajklf) no-repeat 5px 10px;
このように空白をひとつあけて続けて書いてもOKです。ちゃんと認識してくれます。
＜余白＞
margin…フレームの余白。
padding…フレームから文字までの余白。
line-height…行間距離。
＜境界＞
border-color…境界線の色。
boder-style…境界線のスタイル。
border-width…境界線の太さ。
＜テキスト＞
text-align…テキストの位置揃え。
text-indent…テキストの字下げの指定。
text-decoration…文字の装飾。
font-size…文字サイズの指定。
font-weight…文字の太さの指定。
color…色の指定。
＜背景＞
background-attachment…背景スクロールの設定。
background-color…背景色の指定。
background-image…背景画像の指定。
background-repeat…背景のくり返し設定。
width…横幅。
position…位置。
float…回り込み。
clear…回り込み解除。
z-index…重ね合わせの順序。
overflow…切り抜きに関する設定。
＜リンク＞
a:link…未訪問リンク。
a:visited…訪問済みリンク。
a:hover…リンクにマウスポインタを重ねた時の変化。
a:active…マウスでクリックしたときの変化。
＜表＞
table-layout…表のレイアウト。
border-collapse…表の線。
border-style:dotted;dashed…枠線を点線に。
margin…フレームの余白。
padding…フレームから文字までの余白。
line-height…行間距離。
＜境界＞
border-color…境界線の色。
boder-style…境界線のスタイル。
border-width…境界線の太さ。
＜テキスト＞
text-align…テキストの位置揃え。
text-indent…テキストの字下げの指定。
text-decoration…文字の装飾。
font-size…文字サイズの指定。
font-weight…文字の太さの指定。
color…色の指定。
＜背景＞
background-attachment…背景スクロールの設定。
background-color…背景色の指定。
background-image…背景画像の指定。
background-repeat…背景のくり返し設定。
width…横幅。
position…位置。
float…回り込み。
clear…回り込み解除。
z-index…重ね合わせの順序。
overflow…切り抜きに関する設定。
＜リンク＞
a:link…未訪問リンク。
a:visited…訪問済みリンク。
a:hover…リンクにマウスポインタを重ねた時の変化。
a:active…マウスでクリックしたときの変化。
＜表＞
table-layout…表のレイアウト。
border-collapse…表の線。
border-style:dotted;dashed…枠線を点線に。
新たにブログ立ち上げました。
このブログの存在理由は、CSSの実験台と画像保管です。
CSS編集用としていますが、実際はメモ程度になると思います。あと、画像フォルダは２０Mまでなので、それがいっぱいになったらこっちを使う予定です。
余談ですが、ブログに掲載する画像は、そのリソースURL（画像があるネット上の場所）さえわかれば使用可能です。わざわざ画像フォルダにアップする必要はないです。けどこっちの方がボタンひとつで出来るので簡単なんですけどね。
つまり、「Ａというブログの画像フォルダに入ってる画像を、Ｂというブログでも使用可能」というわけです。これによって、画像フォルダがいっぱいになっても、複数ブログを持てば大丈夫、ということになります。けどこんな調子で増えていっても困るので、こっちもいっぱいになったらメインの方の画像は消そうかな。
このブログの存在理由は、CSSの実験台と画像保管です。
CSS編集用としていますが、実際はメモ程度になると思います。あと、画像フォルダは２０Mまでなので、それがいっぱいになったらこっちを使う予定です。
余談ですが、ブログに掲載する画像は、そのリソースURL（画像があるネット上の場所）さえわかれば使用可能です。わざわざ画像フォルダにアップする必要はないです。けどこっちの方がボタンひとつで出来るので簡単なんですけどね。
つまり、「Ａというブログの画像フォルダに入ってる画像を、Ｂというブログでも使用可能」というわけです。これによって、画像フォルダがいっぱいになっても、複数ブログを持てば大丈夫、ということになります。けどこんな調子で増えていっても困るので、こっちもいっぱいになったらメインの方の画像は消そうかな。