ブログ関連 ブログのテンプレート
お正月のオリジナルテンプレート
今日は、元日ですね~(⌒-⌒)ニコニコ...
皆さん、明けましておめでとうございます。
今年も、宜しく、お願い致しま~す。
この日、子供たちが、楽しみにしているのは・・・やっぱり、お年玉!(⌒-⌒)ニコニコ...
大人たちは、出費が大変ですが・・・気を取り直して、私は、
お正月のオリジナルテンプレートを作成しました~!?w( ̄o ̄)w オオー!
今回は、下記の
てぃーだブログテンプレートの
『シンプルフォトログ(ホワイト)[fl-10]』を
ベースにして、カスタマイズしました。
【Before】
【After】
実は、今朝、ジャスコ那覇店で、ゲットしたばかりの
干支の置物(うさぎ)を利用して作成しました!(⌒-⌒)ニコニコ...
でも、思ったより、簡単なんですよ~!
皆さんも、チャレンジしてみては、いかがでしょうか!?
テスト表示用ブログの
『ブログをカスタマイズ!「ブログスタイル」』を
ご覧、下さいね!(⌒-⌒)ニコニコ...
では、ちょっとカスタマイズ(改造)方法を紹介したいと思います!
今回は、スタイルシートのみのカスタマイズ(改造)です。
【スタイルシート】:改造前
/*サイトのタイトル・サブタイトル・概要が入るところ*/
#banner,#subbanner{
background:#fff url() left;
padding:0px 0px 0px 0px;
height:60px;
}
/* ブログタイトルの概要 */
.blogtitle{
font-size:130%;
font-weight:bold;
padding:10px 0px 3px 10px;
text-align:left;
letter-spacing:0px;
}
.description{
color:#000;
font-size:12px;
padding:4px 20px 0px 15px;
text-align:left;
letter-spacing:2px;
}
まず、下記サイズのイメージ画像を用意します。
画像サイズ(幅900px x 高さ300px)の写真やイラストなども、できますよ!
【ヘッダー画像】:幅900px x 高さ300px
【スタイルシート】:改造後
/*サイトのタイトル・サブタイトル・概要が入るところ*/
#banner,#subbanner{
background:#fff url(//img01.ti-da.net/usr/blogstyle/rabbit_900x300a.jpg) no-repeat 0px 0px;
padding:0px 0px 0px 0px;
height:300px;
}
/* ブログタイトルの概要 */
.blogtitle{
font-size:130%;
font-weight:bold;
padding:10px 0px 3px 200px;
text-align:left;
letter-spacing:0px;
}
.description{
color:#000;
font-size:12px;
padding:4px 20px 0px 215px;
text-align:left;
letter-spacing:2px;
}
上記の赤字が変更(改造)部分です。
1番目の部分が、ヘッダー画像を指定し、
(ヘッダー画像は、画像一覧で、ファイルのアップロードをして下さい。)
2番目の部分が、ブログタイトルの位置調整で、
3番目の部分も、ブログ説明文の位置調整となります。
これだけで、カスタマイズ(改造)完了です!(⌒-⌒)ニコニコ...
皆さんも、テンプレートのカスタマイズ(改造)に挑戦してみてはいかがでしょうか?
【免責事項について】
このソースコードの使用に関しては、限られたテスト環境での動作確認などは行なっていますが、すべての環境に対応したものではありませんので、恐れ入りますが、使用に関しては自己責任でお願い致します。
↓ 只今、ランキング参加中なので、クリックをお願いしま~す!(⌒-⌒)ニコニコ...
[PR]
minne(ミンネ)はハンドメイド作品のオンラインマーケットです。
手作り作品のネット販売が、月額利用料「0円」で行えます。
お金のやりとりはminneが代行するので、初めての方でも安心です♪
パソコン、スマホどちらからでも
すぐにあなたの作品を販売できるminne(ミンネ)はこちらから。