公式テンプレートの改造
公式テンプレートの改造などでわからないことがありましたら
何でも書き込みOKです!
下の方に必要最低限な情報を記入できる
テンプレートを用意しましたのでご活用ください。
1.テンプレート名
2.何がしたいか
3.その他(必要に応じて)
2010年11月24日 18:00 by しず
あとはCSSの編集ですけど、
空白に下のコードをコピーしてそのまま貼り付けてあげてください。
そうすれば拡張できるかと思います。
.free_space{
/*フリースペースの幅設定*/
width:100%;/*横幅 1100pxか100%が好ましい*/
height:200px;/*縦幅 自由に変更OK*/
/*背景の設定*/
background-color:#;/*背景の色 初期設定はバグを利用して無色に*/
background-image:url("http://画像URL");/*背景の画像*/
/*フリースペース内側の余白*/
padding-top:0px;/*上*/
padding-bottom:0px;/*下*/
padding-left:0px;/*左*/
padding-right:0px;/*右*/
/*フリースペース外側の余白*/
margin-top:0px;/*上*/
margin-bottom:0px;/*下*/
margin-left:0px;/*左*/
margin-right:0px;/*右*/
/*スクロールバー*/
overflow-x:hidden;/*横スクロールバー 隠す*/
overflow-y:auto;/*縦スクロールバ 幅が足りない場合自動表示*/
}
大まかな設定はこれで出来るかと思いますけど、
実用レベルまではいかないかと思います。
特にカスタマイズすべき点は
背景の設定と余白の設定ではないかと思います。
背景は画像を用意すれば解決です。
余白の設定は外側と内側があってややこしいですけど、
まずは外側から試してその後に内側の余白設定に
チャレンジしてみるといいかもです。
cssは決まった形の文章が少しあるだけなので
括弧内の項目の変更だけなら簡単にできるかと思います。
http://www.tohoho-web.com/css/
↑のサイトはうちも良く愛用していたサイトなので
オススメできます。
わからない事があればいつでも聴いていいので
参考にしながら頑張ってください。
2010年12月18日 01:30 by しず
まずHTMLの編集画面で
</div><!-- /header -->
となっているところを見つけ出してあげてください。
見つかったらそこの空白に下のHTMLをコピぺしてあげてください。
▼▼▼下部のソースをコピー▼▼▼
<div class="free_space">
フリーエリアです。自由に書き込みが可能です。
</div>
▲▲▲上部のソースをコピー▲▲▲
これでHTMLの編集は終わりです。
2010年12月18日 01:30 by しず
お初カキコしますー。
これからもどーぞよろしくです。
テンプレ確かに頂きましたっ
いきなり質問なのですが、しずのさんとこみたいに
ブログ名と記事の間にフリーエリア入れたいのです。
各記事ページ等にも反映されるよーな形で。
プラグイン3かと思いましたが最下に表示されてしまい。。。
2010年12月17日 23:45 by 滉
縦幅なら変えても大丈夫ですけど、
横幅の変更はあまりオススメできません。
特に広げる場合は強く非推奨と言いたいところです。
まず1つはあまり広くし過ぎちゃうと、PC画面(解像度)が低い人が
ブログの閲覧しにくくなっちゃうからです…
多分画面などが小さい人だと
横のスクロールバーが入っちゃってブログが見づらくなってしまいます。
2つめは記事・プラグインの部分も今の広さに合わせて作っているからです。
タイトル部分の幅を変えるとタイトル部分の幅に合わせて
記事やプラグインの幅の作り直しをしないと行けないので
非常に大変だと思います。
2010年11月27日 21:50 by しず
↓連続してすみません・・・
ベーススキンは流血のやり方が違っていたようで、もう一回やったら普通に出来ました♪
ところで、トップ画象を変更する際に画象のスペースを広げたいのですが大丈夫でしょうか?
スタイルシートに(変更非推奨)って書いてあるので・・・
2010年11月27日 21:32 by ヲタ子&流血
画像を固定させる方法は、
背景画像を設定した場所の { }内に、
background-attachment: fixed; 付け加えてあげればOKです。
背景画像を固定させると文ですけど、
/* 背景画像を固定 */ ←上の文章の右隣に貼ってあげると
あとで改造するときにわかりやすいかも。
半透明の画像は半透明のpngを使って作っています。
添付したファイルの中にskinというファイルがあると思います。
その画像の中で気に入ったものがあればアップロードして、
その画像を設定してあげればOKです。
画像の差し替え場所はスタイルシート内の
ベーススキンという所です。
結構上の方に目立つように印をつけてあるので
すぐに変えられると思います。
2010年11月27日 20:40 by しず
テンプレ来ましたー!
そこで質問なのですが、しずのさんのブログは背景画象(今なら佐天さん)が固定って言うか、記事を読み進めていっても移動しな いじゃないですか?
アレはどうすればいいのですか?
あと、記事を書いている舞台というか、半透明のスペースがあるじゃないですか?(3カラムの中心部分)
アレの色を変更したいのですが、どうすればいいですか?
2010年11月27日 20:14 by ヲタ子&流血
ありがとうございます! タイトルの色変わりましたー!
あ、ちなみに管理人の流血という者です。ここで会うのは初めてですね♪
テンプレート期待してます≧ω≦
2010年11月26日 18:18 by ヲタ子&流血
追記&おまけ
ヘッダーの右上の紫色の付箋っぽいやつ。
じゃまでしたら、HTMLの編集画面で
<div class="header_point"><a href=" http://blog.fc2.com/">header_point</a></div >
を消してあげるか
CSSで紫色の付箋の画像を別の画像に差し替えればOKです。
#header .header_point{ のところに
ヘッダーや背景の時と同じように
背景画像を設定するやつがあると思うので
そこをちょっと書き換えてあげればOKです。
この書き込みは参考程度にΣd( ̄▽ ̄
2010年11月26日 16:31 by しず
おぉーヘッダーの方の差し替えできたみたいですね。
おめでとうございますです。
背景はそのまま変えるだけだと大体の場合は見えにくくなっちゃうので
そこは仕方がないですね…
うち自身、今FC2で改造しやすいテンプレートを公開するために
頑張っているのでしばしお待ちをw
■ブログ名
#header h1 a { の
color:ffffff;みたいな感じになっているので
ffffffの部分を書き換えればOKです。
色見本と色のコードを用意しましたので
そちらを参考に色を変えてみてください。
→http://css.rakugan.com/webcolor.html
■リンクにマウスカーソルを乗せたときの色
#header h1 a:focus, #header h1 a:hover, #header h1 a:active { の
colorの所を上の方法と同様にやってみてください。
■ブログの紹介文
#header p{ の所に
color:#・・・;を付け足してあげてください。
・・・の部分は上の色見本のリンクを参考にどうぞです。
2010年11月26日 16:22 by しず
Copyright(c)1999 FC2, Inc. All Rights Reserved.
@fc2infoさんをフォロー