「テンプレートのカスタマイズ」 ~その4(最終回)~

「テンプレートのカスタマイズ」 ~その4(最終回)~

【配置や大きさを変えてみよう♪】

っという事で、ダラダラと今回が最終回ですがw、私もちょっと飽きてきたので(をぃ!w^^;
これもかなり大雑把に見て行きたいと思います。w

これも、スタイルシート編集で行えるので、直接数値を変えてみて、下のプレビューで
どんな風に変化したか直接確認してもいいかもしれません。^^
但し、バックアップも取って、これで決定と言う時以外は絶対に「更新」は押さないで下さい。
注)実際に変更する際は必ず複製を作るか、テキストにバックアップしてから行って下さい。


スタイルシートの中身を見て行きましょう♪^^
(/* Layoutと/* Headerの中だけですが。w)

(上の方は端折ってます。)

/* Layout
------------------------------------------------------------ */

#wrapper {
width: 950px;
margin:0px auto;
text-align: center;
}

#container {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
padding:0px;
background-image:url(http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_bg.jpg);
background-position:center 800px;
background-position-y: 800px;
}

#header {
width: 100%;
overflow: hidden;
padding:0px;
background-image:url(http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_header_bg.jpg);
background-position:center;
background-repeat:no-repeat;
height:800px; ←ヘッダー部自身の縦幅
margin-top:-10px;
position:relative;
}
#header_inner {
width:950px; ←ヘッダー部のブログタイトルの横幅
margin:0px auto;
}

#main {
float: right; ←ブログ本文の左右位置(right,left,center)
width: 660px !important;
width /* for IE5.5 */: 680px;
padding: 0px 0px 20px 0px;
overflow: hidden;
margin-top:-400px; ←ブログ本文の開始位置(高さ)
position:relative;
}

#sidemenu {
float: left; ←サイドメニューの左右位置、但し、ブログ本文の左右位置に影響(right,left,center)
width: 270px;            
padding-bottom: 20px;
margin-top:-400px; ←サイドメニューの開始位置(高さ)
position:relative;
overflow:hidden;
}

#footer {
clear: both;
padding: 10px 0px;
width: 100%;
font-size: 85% !important; /* for Modern browser */
font-size: 90%; /* for IE6 */
}



/* Header
------------------------------------------------------------ */
.btn {
float:right; ←「いますぐPLAY」ボタンの左右位置(right,left,center)
margin:10px 20px 135px 0px;
}
#header h1 {
text-align: center; ←ブログタイトルの左右位置(right,left,center)
padding-bottom: 5px;
clear:both;
}
#header h1 a:link {
color:#FFF;
text-decoration:none;
}
#header h1 a:visited {
color:#FFF;
}

(ここから下も端折ってます。)


元の状態はこれです。
kaisetu001.jpg


数値を変えるとこんな感じや
kaisetu002.jpg
上にスペースが出来ましたね。


こんな感じになります。
kaisetu003.jpg
デミの頭が切れちゃった!><



これを使うと、例えばヘッダー部にもっと縦幅の短い画像を使ったり、
サイドメニューとブログ本文の位置を入れ替えたりすることもできます。^^

どう変化するかは、実際に数値を入れ替えてみてプレビューで見るのが
一番わかりやすいかなと思います。^^
(とりあえず、やっつけだけど何とかまとめれたか??w^^;)

さて、次回からはまともにドラネスブログかコマ漫画を載せようと
思います。www^^;(あくまで予定は未定よ!w)



ドラゴンネスト・攻略ブログ ←ドラネス関連の人気ブログが見れるよ!良かったら押してね♪
スポンサーサイト

「テンプレートのカスタマイズ」 ~その3~

「テンプレートのカスタマイズ」 ~その3~

【画像ファイルのアップロード】

差し替えたい画像ファイルが用意できたところで、設定ファイルを触って行こうかと思いますが、
その前に、作ったファイルをアップロードしておきましょう。^^

「管理画面」の左のメニューの中、一番上の「ホーム」グループの中に「ファイルアップロード」が
あるので、これをポチッと押すとファイルのアップロード画面が出るので差し替える画像を
アップロードしておきましょう。 正常にアップロードできると下に表示されます。^^

ファイル情報の欄には、ファイル名、容量(サイズ)、日付、ファイルが置いてあるURL、が表示
されています。「ファイルが置いてあるURL」は、後で設定ファイルを書き換える際に必要になるので
別のメモ帳か何かにコピーしておくと便利でしょう。^^


【設定ファイルの修正】

いよいよ設定ファイルの修正を始めましょう♪^^
画面左のメニューの中の設定グループの中に「テンプレートの設定」があるのでこれをポチッと♪

テンプレートの設定画面をゆっくり降りて行くと(下にスクロールさせていくと)、、、、

「PCテンプレート [dragonnest_2column] 適用中」(カッコの中は現在適用しているテンプレ名)
というのがあると思います。 そのすぐ下辺りに「適用」、「テンプレート名/プレビュー」、
「プラグイン対応」、「HTML CSS」、「複製」、「削除」という項目の表があると思いますが、
その表の中の「dragonnest_2column」の複製を作成し、その複製されたテンプレート名の左側の
ラジオボタンにチェックして「適用」を押してください。 適用されましたら「HTML CSS」の編集を
クリックしましょう。

画面を更に下がっていくと、「~のHTML編集」・・・そしてテキストボックスの中にわけの分からない
アルファベットがずらずら・・・、そしてその下に「~のスタイルシート編集」・・・そしてまたもや
テキストボックスの中にわけの分からないアルファベットがずらずら・・・ってあると思います。

今回は、「~のスタイルシート編集」の下のテキストボックスの中を修正していきます。^^
アルファベットだらけだけど、触る所は少しだけなので恐れる事はありません!www

テキストボックスの中を直接修正していってもいいんですが、とっても見にくいのでメモ帳にコピー
して大きくして見ましょう。^^

まずは、「スタート」-「すべてのプログラム」-「アクセサリ」の中から「メモ帳」を開きましょう。
FC2の画面に戻って「スタイルシート編集」の下のテキストボックスの中をどこでも良いのでクリックして
キーボードで「Ctrl+A」(全選択のショートカット)を押して下さい。 テキストボックスの中の文字が全て
青反転していると思います。この状態で「Ctrl+C」(コピー)でコピーして、メモ帳の中をどこかクリック
して「Ctrl+V」(貼り付け)メモ帳に貼り付けてください。

メモ帳の中は、訳の分からないアルファベットだらけになったと思います。www


※豆知識※
これがCSS(Cascading Style Sheets)といって、HTMLやXHTMLなどで作成されるウェブページ
のレイアウトや文字の色や形、大きさ、画像の表示範囲、画像のあり場所等々、まさしくスタイリ
ストみたいな役割をするファイルです。

メモ帳に貼り付けたのは、「広くて見易い」ってのもあるんですが、メモ帳には検索機能、
置換機能があるので、場所を探したり、置換をするのに便利です。^^


では、さっそくコピってきたメモ帳の中身を見て行きましょう♪^^
ざぁーと眺めてみると、↓のように色んなセクションが点線で区切られていることが解ります。

/* Reset ←これがセクション名ね^^
-------------------------------------------- */

とか

/* Image ←これもセクション名ね^^
-------------------------------------------- */

とか

/* Layout ←こんな風なやつね^^
-------------------------------------------- */

とか

/* Header ←点線の上に書いてあるのね^^
-------------------------------------------- */

こんな風な感じに点線で区切られて、その下に各々の設定が書かれています。

では、早速書き換えて行きましょう!
※注意※ 一言一句間違えないように書き換えて下さい。 極力、手で入力するのは避けて
 コピー&ペーストで書き換えるとミスは減ります。(但し、正確にコピペね。w^^)


◆◆ 全体背景 ◆◆
s-dn_bkg.jpg

「/* Layout」の中に「#container」って項目があると思います。その中の

background-image:url(http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_bg.jpg);

これの、「http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_bg.jpg」の部分を

ファイルアップロードの「ファイルが置いてあるURL」をコピーして書き換えましょう


こんな感じで、アップロードしたファイルのURLを置き換えて行きます。


◆◆ ヘッダー部の背景 ◆◆
s-header_bg.jpg


「/* Layout」の中の「#header」って項目の中の

background-image:url(http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_header_bg.jpg);の

「http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_header_bg.jpg」の部分。


◆◆ ブログ本文がある場所の背景 ◆◆
ここは、上部、真ん中、下部の3つがあります。 それから、コメントやトラックバックも同じ物を
使っているので、そこも修正します。

 ◇◇ 上部 ◇◇
s-ent_top.jpg


①「/* Main Contents」の中の「h2.entry_header」の中の

 background-image:url(http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_top.png);の

 「http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_top.png」の部分。

②「* Comment, Trackback, Entry list」の中の「.sub_header」の中の

 background-image:url(http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_top.png);の

 「http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_top.png」の部分。


 ◇◇ 真ん中 ◇◇
s-ent_body.jpg


①「/* Main Contents」の中の「.entry_body」の中の

 background-image:url(http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_body.png);の

 「http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_body.png」の部分。


②「* Comment, Trackback, Entry list」の中の「.list_body」の中の

 background-image:url(http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_body.png);の

 「http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_body.png」の部分。


 ◇◇ 真ん中(body2)連結用 ◇◇
s-ent_body2.jpg


①「* Comment, Trackback, Entry list」の中の「.sub_title」の中の

 background-image:url(http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_body2.png);の

 「http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_body2.png」の部分。

②「* Comment, Trackback, Entry list」の中の「.sub_body」の中の

 background-image:url(http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_body2.png);の

 「http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_body2.png」の部分。

③「* Comment, Trackback, Entry list」の中の「.sub_footer」の中の

 background-image:url(http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_body2.png);の

 「http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_body2.png」の部分。

④「* Comment, Trackback, Entry list」の中の「.form」の中の

 background-image:url(http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_body2.png);

 「http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_body2.png」の部分。


◇◇ 下部 ◇◇
s-ent_bottom.jpg


①「/* Main Contents」の中の「.entry_footer」の中の

 background-image:url(http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_bottom.png);の

 「http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_bottom.png」の部分。

②「* Comment, Trackback, Entry list」の中の「.list_foote」の中の

 background-image:url(http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_bottom.png);の

 「http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_bottom.png」


◆◆ サイドメニュー ◆◆
ここも、上部、真ん中、下部の3つがあります。

 ◇◇ サイドメニュー上部 ◇◇
s-side_top.jpg


 「/* Sidemenu (Plugin)」の中の「.sidemenu_body .plg_title」の中の

 background-image:url(http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_side_content_top.png);の

 「http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_side_content_top.png」の部分。

 ◇◇ サイドメニュー真ん中 ◇◇
s-side_body.jpg


①「/* Sidemenu (Plugin)」の中の「.sidemenu_body .plg_header」の中の

 background-image:url(http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_side_content_body.png);の

 「http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_side_content_body.png」の部分。

②「/* Sidemenu (Plugin)」の中の「.sidemenu_body .plg_body」の中の

 background-image:url(http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_side_content_body.png);の

 「http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_side_content_body.png」の部分。

③「/* Sidemenu (Plugin)」の中の「.sidemenu_body .plg_footer」の中の

 background-image:url(http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_side_content_body.png);の

 「http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_side_content_body.png」の部分。

 ◇◇ サイドメニュー下部 ◇◇
s-side_bottom.jpg


 「/* Sidemenu (Plugin)」の中の「.sidemenu_body .side_bottom」の中の

 background-image:url(http://blog-imgs-60.fc2.com/n/o/k/nokorigi/side_content_bottom.png);の

 「http://blog-imgs-60.fc2.com/n/o/k/nokorigi/side_content_bottom.png」の部分。


◆◆ ページトップへボタン ◆◆
s-tophe_btn.jpg


「/* Main Contents」の中の「.pagetop a」の中の

background-image:url(http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_top_btn.jpg);の

「http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_top_btn.jpg」の部分。



ずらずらと書きましたが、メモ帳の「置換」機能を使って、一気に置き換えてもOKです。^^

①ここまで書き換えたら、メモ帳の中で「Ctrl+A」(全選択)→「Ctrl+C」(コピー)します。
②テンプレートの管理画面で、書き換えるテンプレート名の横の「編集」という文字をクリック。
③スタイルシート編集の下のテキストボックスの中をどこでも良いのでクリック。
④「Ctrl+A」(全選択)→「Ctrl+V」(貼り付け) で全文書き換えます。
⑤テキストボックスの下に「プレビュー」ボタンがあるので、これをクリックして表示させてチェックして下さい。
⑥チェックしてOKなら「更新」ボタンを押して保存完了です。




これで、大まかには完成ですが、次回はオマケで「位置変更」を少し書いてみます。


ドラゴンネスト・攻略ブログ ←ドラネス関連の人気ブログが見れるよ!良かったら押してね♪

「テンプレートのカスタマイズ」 ~その2~

「テンプレートのカスタマイズ」 ~その2~

【背景画像を用意しよう♪】

「用意する背景」
・ヘッダー部の背景
・全体背景
・ブログ本文がある場所の背景
・サイドメニューの背景
・ページトップへボタン

背景画像を用意するのに注意する点が幾つかあります。
・画像サイズ(容量、縦横の大きさ)
・画像ファイルの種類
・色合い等

◇画像サイズ◇
各部の背景には、1枚の画像や複数の画像を組み合わせて1枚の画像にしている物があります。
容量は、「ファイルのアップロード」の制限で500kbまでとなっています。

▼△ ヘッダー部 ▼△

テンプレート[dragonnest_2column]のヘッダー部の画像は

http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_header_bg.jpg

にあります。 画像のサイズ(横×縦)は

1800(pix)×798(pix) と、かなり大きいです。

ここまで大きくなくてもよいと思うんですが、ヘッダー部の横幅が小さすぎると全体背景の
中に浮かんでいるようになってしまうので、それを避けるために大きなサイズになっていると
思います。 試しに画面表示を30%位にしてみるとこんな感じです。

zentai_2.jpg


▼△ 全体背景 ▼△

テンプレート[dragonnest_2column]の全体背景の画像は

http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_bg.jpg

にあります。 画像のサイズ(横×縦)は

1800(pix)×1584(pix)と、これもかなり大きいです。

ただこの背景画像は、(縦横)サイズが小さかったら繰り返しでタイル状に表示されるので、
模様やベタな色だけなら小さめの画像で十分かと思います。

※背景画像は壁紙みたいな物なので、この上にサイドメニューや本文、広告等がのっかる感じです。


▼△ ブログ本文がある場所の背景 ▼△

テンプレート[dragonnest_2column]のブログ本文がある場所の背景は、
上部(top)、真ん中(body)(真ん中2(body2)連結用)、下部(bottom)の3つの画像を
合体させて作られています。 そして、ファイルの種類はPNGという画像形式のファイルに
なっています。それぞれの画像は、

上部(top)   サイズ:660(pix)×800(pix)
http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_top.png

真ん中(body) サイズ:660(pix)×827(pix)
http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_body.png

真ん中2(body2)連結用 サイズ:660(pix)×21(pix)
http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_body2.png

下部(bottom) サイズ:660(pix)×80(pix)
http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_entry_bottom.png

にあります。 並べるとこんな感じですね。

entry.jpg


この画像はPNG形式の画像ファイルを使っています。
(透過色を使わなければJPGファイルやブラウザで表示できる他の形式のファイルでも可)


※PNG形式の画像ファイル
透過色の設定ありの画像ファイル形式。 透明色を使えるということで、背景が透けて
見えます。例えば50円玉の絵を書いた時、真ん中の穴が開いた部分と四隅の三角の部分は
透けて向こうが見えて欲しいですよね。そういう時に使います。

png_setumei.png


Win7のペイントで開くことはできますが、透過色の指定をすることはできません。><

※私は、上部(top)のダックをウルフに書き換えただけで、他はそのまま使っています。

※この上にブログの文章がのっかるので、あまりゴチャゴチャした感じだと読みにくくなるかもです。
 絵を載せるにしても背景色と同系色の薄い感じが良いかもです。^^


▼△ サイドメニューの背景変更 ▼△

サイドメニューも上部(side_top)、真ん中(side_body)、下部(side_bottom)の3つの画像を
合体させて作られています。 そしてこれもPNG形式の画像ファイルを使っています。
テンプレート[dragonnest_2column]のサイドメニューの背景は

上部(side_content_top) サイズ:183(pix)×39(pix)
http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_side_content_top.png

真ん中(side_content_body) サイズ:183(pix)×39(pix)
http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_side_content_body.png

下部(side_content_bottom) サイズ:183(pix)×39(pix)
http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_side_content_bottom.png

にあります。

※これもPNG形式の画像ファイルで真ん中(side_content_body)の左側に透過色が使われています。
 私は、下部(side_content_bottom)のデミを自分のキャラに置き換えただけで、他はそのまま
 使っています。


こんな感じです。^^

side_content_bottom.png



▼△ ページトップへボタン ▼△

テンプレート[dragonnest_2column]のページトップへボタンはここです。

ページトップへボタン(top_btn) サイズ:183(pix)×39(pix)
http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_top_btn.jpg

※あくまで画面TOPに飛ぶだけの機能なのでそんなに大きくなくて良いと思います。
 好きなマークやロゴとかでも良いと思います。^^


※画像のサイズですが、テンプレート[dragonnest_2column]の画像ファイルを一度PCに保存して
何かペイント(レタッチ)ソフトで開いて、その中で書き換えたりしていくと、大きさは
キープできるので良いかもです。^^ その辺りはやり易い方法でどうぞ♪^^



さて、画像が用意できたら、次回は設定ファイルの中身を触っていきます。



ドラゴンネスト・攻略ブログ ←ドラネス関連の人気ブログが見れるよ!良かったら押してね♪

「テンプレートのカスタマイズ」 ~その1~

「テンプレートのカスタマイズ」 ~その1~

いきなりドラネスと直接関連の無い内容ですが、私の覚書も兼ねて、テンプレートの
画像、位置の変更に関して少し書いてみようと思います。
良かったら(自己責任でw)参考にして頂ければと思います。^^

ベースになるテンプレートは、[dragonnest_2column]を使います。
(現在[dragonnest_2column]を使っている場合は、「複製」作成して元に戻せるように
 しておく事をお薦めします。)

【公式テンプレートの適用の方法】

「FC2ブログ」→「管理画面」の画面左のメニューの中の「設定」の中の「テンプレートの設定」
画面の上の方にある「テンプレート管理」の中のPC用で「公式テンプレート追加」をクリック。

下の方に「dragonnest_2column」ってテンプレートが出てるかもしれませんが、無ければ
名前インデックスで「D」をクリックして探してください。

「詳細」をクリックして「ダウンロード」をクリックして下さい。

ダウンロードできたら、画面左のメニューから「テンプレートの設定」をクリックして下さい。


「PCテンプレート[dragonnest_2column]適用中」になっていればOK♪
(なってなかったら、ラジオボタンにチェックを入れて「適用」ボタンをポチッ!)

これで「dragonnest_2column」のテンプレートが適用されているので、ブログを確認すると
デミの大きな画像があるブログページが現れるはずです。

このまま使ってもいいのですが、今回はこの[dragonnest_2column]をベースにして
少しだけ改造してみたいと思います。


【テンプレートの各部の説明】
1枚に見えるブログページも色んなパーツの寄せ集めでできていて、各部分部分で設定制御
されています。 ややこしそうですが、触るのは一部なのでまずはどんな部分分けがされているのか
見てみましょう。(ややこしくならないように、かなり大雑把に分けています。w^^;)

zentai.jpg


①ヘッダー部(header)
②ブログタイトル
③全体背景(container)
④ブログ本分のある場所(entry)
⑤サイドメニュー(sidemenu)
⑥トップへアイコン


からなっています。 今回、手を加えるのは

・ヘッダー部の背景の変更
・全体背景の変更
・ブログタイトルの位置変更
・ブログ本文がある場所の背景変更
・サイドメニューの背景変更
・トップへアイコンの変更

を行いたいと思います。(主に背景変更だけですね。w^^;)


以上を踏まえて、次は画像を用意してみましょう。^^



ドラゴンネスト・攻略ブログ ←ドラネス関連の人気ブログが見れるよ!良かったら押してね♪

ブログページ作成完了!

ブログページ作成完了!   ・・・とりあえず。w

というわけで、ポチポチと書いて行けたらと思います。^^


ドラゴンネスト・攻略ブログ ←ドラネス関連の人気ブログが見れるよ!良かったら押してね♪
カウンター
プロフィール

ノコリギ鳥

Author:ノコリギ鳥


ドラゴンネスト
主要キャラ

・スマッシャー(メイン)

・テンペスト(メイン)

・シューティンスター(サブ★★★)

・ダークサマナー(サブ★)

・クルセイダー(サブ★)

・リッパー

・アデプト


・レイヴン(サブ)





ドラゴンネスト・攻略ブログ
ブログランキングに参加しています。
良かったら押してね♪

最新記事
最新コメント
リンク
検索フォーム
カテゴリ
月別アーカイブ