カスタマイズ

2007年07月04日

カスタマイズ：パーツ設置　ぱつぱつ！

おつかれさまですこんにちは！
ひさしぶりに自宅でFlashを使いました！

ブログパーツがとても気になっているのです。
最近サイドバーがものたりなく感じてきたのですが
せっかくだからブログパーツもつくっちゃえ！ということでちょっと試してみました。

今回つくったのはflashのアナログ時計です。
とは言え、今ほとんど表示されません。どうやらサーバをきちんと用意しないといかんらしいのだ。
時計が見られた方は非常に運が良いと思います！なにか贈りたい気分です！

環境が整ったら、フローティング系パーツとアバターとミニゲームをつくるぞー！
なにかおもしろいパーツがあったらぜひ一緒につくりましょー！

* * *

前置きが長くなってしまいましたが、
今日はパーツ設置方法についての説明をさせていただきます。

最初に、よくあるブログパーツのタイプについてなのですが、
---------------------------------------------------------------
1.｢<script～｣というようなコードのみで使用できるタイプ。
(必ず｢<script～｣という形ではありません。他の書式でもっと長いコードを使用することもあります。)
2.パーツを一度ダウンロードし、自分で任意のサーバにアップしたものを読み込ませるタイプ。
---------------------------------------------------------------
設置手順の面で言うと、この2つが多いかと思います。
今回は1.のタイプで説明させていただきます。

また、パーツの横幅がサイドバーより大きい場合はレイアウトが崩れます。。
これに関してはまた別の機会に改めてテンプレートカスタマイズ方法をご紹介します。

* * *

■パーツ設置方法(パーツの登録)

まず、使用したいブログパーツの配布元で、設置に必要なコードを探してください。
ブログパーツのサンプル付近や、設置方法説明ページなどにあるかと思います。
例)<script type="text/javascript" src="http://reverb.torablog.net/hoge.js"></script>

続いてトラブログ管理ページにログインし、【パーツ管理】ページ(図：矢印1)の『新規作成』ボタン(図：矢印2)を押します。

サンプル1

すると次のような画面になりますので、それぞれ記入をしてください。

サンプル2

種類：任意でつけます。どんなブログパーツか書いておく部分です。
タイトル(必須)：ブログパーツにわかりやく短い名前をつけてください。
説明：任意でつけます。どんなブログパーツか詳細を書くことができます。
ソース(必須)：ここに使用したいブログパーツの設置コードを入力します。

サンプルではタイトルに｢パーツテスト｣とつけました。

[小技]
コードを<div align="center">コード</div>という形で囲むと、サイドバーの中央寄せで表示されます。
[小技]
コードを<div align="center" style="margin:10px 0;">コード</div>という形で囲むと、中央寄せ+上下10px余白で表示されます。

※余談ですが、本来こういう形でalign="center"を使うのは正しくないのです。
　ブラウザカバーもできませんが、特にそういう部分でこだわらない方のみご使用ください。
　こだわりたい方がいたら語り合いましょう！webの今後について！熱く！
※余白をつけないと他のパーツとくっついてしまうかもしれません。
　このあたりも公式に配布しているcss等を改良する必要がありますね。。すみません。

記入ができたら、『登録する』ボタン(フォーム下：緑色のボタン)を押し、次へ進みます。
すると、下の図の画面になります。
これで登録は完了しましたので、いよいよ設置にはいります！

サンプル3

* * *

■パーツ設置方法(パーツの設置)

管理ページ左ナビから【レイアウト変更設定】ページへ行きます。
下部『使用しないパーツ』の中から、先程登録したパーツをドラッグ＆ドロップで表示させたい位置へ移動します。

サンプル4

これを

↓

ドラッグ＆ドロップ

位置が決定したら『設定する』ボタン(ページ下部：緑色のボタン)を押すと次の画面に移動しますので
ページ下部の『更新する』ボタンを押します。
※私はよくこの作業を忘れて失敗するのです…。

さて、いよいよ最後の手順です。
そうです。いつものアレです。

バルス！！！

ではなくて、再構築！
今回も｢再構築する範囲：すべて｣を選択して実行してください。

以上でパーツの設置は完了です。
おつかれさまでした！

* * *

さて、今回も非常に長い記事になってしまい恐縮なのです。
最後までお付き合い頂き(途中を読みとばしてここを読んでくださっている方も)ありがとうございました！
もし上記の手順でうまく設置ができなかった場合、お手数ですがご連絡頂けますと幸いです。

今月はもうあんまりブログの更新ができないと思いますが、
ラピュタ崩壊の呪文を唱えてしまったせいかもしれません。
みなさま、くれぐれもお気をつけくださいませ。

ではまたそのうち！

sue 01:24 | コメント(3) | トラックバック(0) | カスタマイズ

2007年07月01日

カスタマイズ2　～帰ってきたテンプレート～

前回のテンプレートカスタマイズ記事、今見直すと非常にわかりにくい説明だったのですが、ありがたいご意見をたくさんいただけてとてもうれしいです。

要望をいただいたもので、手順の多いものは公式に詳細ページをつくった方が見やすそうですね。
あとはCSSの説明とかテンプレートの構造などの情報をもっと増やさなくては！
また、こんなデザインのテンプレートが欲しい！つくりたい！というイメージがありましたら、ぜひ教えてください。

* * *

今回のカスタマイズは前回の補足のようなものです。
前回はサイドバーのアイコンが｢わんこの背中｣のままだったのですが、ここを変更したら｢わんこの背中｣と同じ画像が一切使われなくなりますので、カスタマイズ率がまたぐっとあがるのではないかなと思います。

サンプル1

これが

こうなります。

* * *

スタイルシートの　.parts_title　という記述の部分を変更すると、
サイドバー部分の見出しの装飾を変更することができます。
※{}の中の値はテンプレートによって異なります。下は｢わんこの背中｣テンプレートのものです。

-------------------------
.parts_title {
font-size:80%;
font-weight:bold;
padding:2px 3px 3px 10px;
letter-spacing:1px;
overflow:hidden;
word-break:break-all;
margin-bottom:3px;
background:url("http://www.torablog.net/design/animal_back02/images/ico_partstitle.gif") no-repeat 0% 45%;
}
-------------------------

■今回は画像の使用をやめて背景色(#990100)に変え、見出し文字を白(#FFFFFF)の中央寄せに変更します。

-------------------------
.parts_title {
font-size:80%;
font-weight:bold;
padding:3px;
letter-spacing:1px;
overflow:hidden;
word-break:break-all;
margin-bottom:3px;
background:#990100;
color:#FFFFFF;
text-align:center;
}
-------------------------

※paddingの値を変えることで余白が変わります。

padding:3px;

padding:6px;

* * *

なんだか今回もわかりにくい説明ですね…。
今度は他のテンプレートでもパパッと使えるようなサンプルを考えます～。

ではまた！

sue 21:30 | コメント(0) | トラックバック(0) | カスタマイズ

2007年06月26日

ちょちょいのカスタマイズ

今日は英語で電車の乗り換えを聞かれて四苦八苦でした！
なんとか通じてよかったよかった！

- - -

サクっとブログをカスタマイズしたいというご要望をいただきましたので
今日は既存テンプレートを利用して手軽にデザインを変更する方法を書いてみます。
説明下手ですみません。わかりにくいところがありましたら、こっそり教えてください…。

* * *

今回は｢わんこの背中｣テンプレートをカスタマイズしていきます。
用意するものは【お好みのヘッダー画像】のみ！

こんなかんじで変えていきます。

↓

サンプルブログ

blogの横幅が800pxなので、1枚画像をがつんと使いたい場合は横幅800px以上のものを用意してください。また、画像の上部25pxは上の白い帯(トラブログのロゴがある部分)に隠れてしまうのでご注意ください！

画像の準備ができたら管理画面の｢ファイル管理｣からアップロードしてください。
ページ下の｢ファイル一覧｣に情報がでたら、画像のタイトルをクリックすると画像とURLが確認できます。(このURLは次の手順で使用します。)

サンプルで用意したヘッダー画像(800×320px)はこちら。

* * *

次はスタイルシートを編集していきます。

まずは｢わんこの背中｣テンプレートに変更してください。
その後、管理画面｢デザイン管理｣→｢わんこの背中｣の欄にある｢編集｣(メモ帳アイコン)を押します。
ここから｢スタイルシートソース｣を変更していきます。
(編集する箇所が多い場合はバックアップをとりながら進めてください。)

変更するのは
1.ページの背景色→灰色にする
2.コンテンツ部分の背景色→白にする
3.ヘッダー画像を変える
です！

スタイルシートソースから下記の記述を探してください。いずれも上の方にあります。

1.
-------------------------
body{
font-size:80%;
color:#4D0000;
font-family:"ＭＳＰゴシック", Osaka, sans-serif;
background:url("http://www.torablog.net/design/animal_back02/images/bg_body.gif") repeat-y top center #F8F3ED;
}
-------------------------

2.
-------------------------
div.all_contents{
width:800px;
margin-left:auto;
margin-right:auto;
}
-------------------------

3.
-------------------------
.main_title{
height:295px;
padding:0 22px 0 22px;
text-align:right;
margin-bottom:15px;
background:url("http://www.torablog.net/design/animal_back02/images/bg_maintitle.jpg") no-repeat left bottom #FFFFFF;
}
-------------------------

■今回はスタイルシートの詳しい説明を省略しますが、それぞれ次のように変更してみてください。

1.
-------------------------
body{
font-size:80%;
color:#4D0000;
font-family:"ＭＳＰゴシック", Osaka, sans-serif;
background: #999999;
}
-------------------------

2.
-------------------------
div.all_contents{
width:800px;
margin-left:auto;
margin-right:auto;
background: #FFFFFF;
}
-------------------------

3.
-------------------------
.main_title{
height:295px;
padding:0 22px 0 22px;
text-align:right;
margin-bottom:15px;
background:url("アップロードした画像のURL") no-repeat left bottom #FFFFFF;
}
-------------------------

この変更ができたら、ページ下部｢すぐにスタイルシートの再構築を行う。｣にチェックを入れて、｢更新する｣ボタンを押して出来上がり！
3カラムデザインを使用されていた場合サイドバーがズレるので、ブログの再構築→｢すべて｣を行ってください。

【補足】
background　の　#～は背景色　no-repeatは繰り返し表示させない設定　left bottomは画像の表示位置です。
.main_title　の　height:295px;　はヘッダー画像を入れた部分の高さの設定なので
このあたりをカスタマイズすると、また違う雰囲気になるかと思います。

* * *

長くなってしまいましたが、お付き合いいただきありがとうございました！

よし！寝ます！
ではまた！

sue 00:47 | コメント(3) | トラックバック(0) | カスタマイズ