スポンサーサイト このエントリーを含むはてなブックマーク

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

テンプレートのカスタマイズについて このエントリーを含むはてなブックマーク

ある程度簡単にできるカスタマイズ方法を解説したいと思います。
ご自由に素敵に飾ってみてください。うまくできたら是非見せてくださいね。私も勉強したいのです。

ブログ全体の背景を変更する


body {
background-image:url();/*背景画像のurlを()内*/
color: #3A322F;
background-color:#ccc4ab;
font-size : 100%;
font-family: verdana, 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','MS Pゴシック',Osaka,sans-serif;
margin:0; padding : 0;
line-height : 150%;
}


テンプレートの編集からCSSを編集します。テンプレート編集画面の構成は上がHTML。下がCSS。簡易的なカスタマイズはCSSをいじることがほとんどです。

では背景を変えてみましょう。

背景の色を変える

background-color:#ccc4ab;


この部分が背景色のCSSです。ccc4abを変えることで色が変わります。16進数で表示されます。
色を探す場合は、このようなサイトを参照すると良いでしょう。もちろんこのほかにも色々あるので・・・

http://www.finitojapan.com/cltable.html


背景に画像を使う
デフォルトでは背景は色指定されていますが、画像を使うことも可能です。

background-image:url();/*背景画像のurlを()内*/


このカッコ内に画像が置いてあるURLを入力します。fc2の場合はファイルのアップロードから写真や画像を簡単にサーバー上におけるのでそれを利用すると便利だと思います。

何かお望みどおりに行かなくて困ったら以下も使うと良いです。

background-repeat:no-repeat; /* 画像の繰り返しはしない */
background-repeat:repeat-x; /* 横方向のみ繰り返し */
background-repeat:repeat-y; /* 縦方向のみ繰り返し */


フォントを変更する


body {
background-image:url();/*背景画像のurlを()内*/
color: #3A322F;
background-color:#ccc4ab;
font-size : 100%;
font-family: verdana, 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','MS Pゴシック',Osaka,sans-serif;
margin:0; padding : 0;
line-height : 150%;
}


フォントの種類やサイズや色も簡単に変えられます。

color: #3A322F;
font-size : 100%;
font-family: verdana, 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','MS Pゴシック',Osaka,sans-serif;


colorでリンクを除くフォントの色を変更できます。記事部分の背景は白なので、濃い色が見やすいんだと思います。
font-sizeでフォントの大きさを変更できます。でもすみません、body以外でもfont-sizeを使っているので、あちこち修正しないといけないと思います。cssからfont-sizeで検索してみてください。

font-familyがフォントの種類を変更できます。私はフォント家族と覚えています。よく分かりませんけど。
どうも先に書いてあるフォントが優先されるようでデフォルトでは見やすいと評判の"Verdana"フォントを採用しています。手前味噌ながら、結構見やすいフォントを使っているつもりなので、あまり変えないほうがいいと思います。

使うとすれば、たとえばブログタイトルだけフォントを変えたいとか、そのような感じになると思います。font-familyを多用していいのかどうかは分かりませんが、技術的には可能でブラウザでも反映されるので問題ないのだと思います。

右上の画像を変更したい


/* freearea(右上)
----------------------------------------------------------- */
.freearea{
display:block;
width :280px;
height:220px;
background-image:url(http://blog-imgs-45.fc2.com/y/u/k/yukinolab/labo.png);
background-repeat:no-repeat;/* 繰り返し表示設定 */
background-position:50% 50%;/* 表示位置の調整 */
overflow:hidden;
}


background-image:url(http://blog-imgs-45.fc2.com/y/u/k/yukinolab/labo.png);

url(ここに画像ファイルのURLを入れる) 透過させた画像をオススメします。

Tipsとして、画像ではなく、このスペースを使ってTwitterやRSSやFACEBOOKへの画像リンクを並べることが可能です。
この場合はCSS側の画像表示を無くして、HTML画面から画像などのリンクを編集するのが簡単です。
以下に例を書いておきます。
<div class="freearea">
<a href="#"><img src="http://blog-imgs-45.fc2.com/y/u/k/yukinolab/phone.png"></a>
<a href="#"><img src="http://blog-imgs-45.fc2.com/y/u/k/yukinolab/phone.png"></a>
<a href="#"><img src="http://blog-imgs-45.fc2.com/y/u/k/yukinolab/phone.png"></a>
</div>


このときの画像の位置調整は以下のようにpositionタグをCSSに記述すれば調整ができます。
topとleftの数字を微調整してしっくり来る位置を探してみてください。

.freearea img, .freearea a img{border:0px;
position:relative; top:50%; left:10%;
}

COMMENT
COMMENT FORM
  • URL:
  • comment:
  • password:
  • secret: 管理者にだけ表示を許可する
TRACK BACK
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。