佐渡島の次平

テンプレートを少し改造するとオリジナル度がアップします。ヘッダーのイメージをオリジナル写真に変えるだけでもかな雰囲気が変わります。

今回は、クラシック・アナログ時計をFC2ブログのヘッダーに配置する方法を書いていきます。
他のブログでも基本は同じなので応用してください。

ただし、テンプレートの編集は自己責任です。
失敗したら元に戻せるので気楽に行きましょう。

時計を配置できるのは、ヘッダー部に時計が入るスペースがあることが前提です。文字だけのヘッダーで高さが狭いようなテンプレートでは、時計が隠れたり、他の部分に重なったりします。
また、以下の説明と一致しないテンプレートがあるかもしれません。そんなときはあきらめてください。

説明には超人気のテンプレート dhw_blueHouse を使います。こんな感じに配置します。

大まかな手順は以下の通りです。

1. 今使っているテーマを複写する
2. 複写したテーマを編集する
3. 複写したテーマを使用する

２番目が危険ですが、複写した方を編集するので、だめならオリジナルの方に戻せはいいだけです。

１．今使っているテーマを複写する

・【管理画面】>【環境設定】>【テンプレートの設定】 と進んでください。
・今使っているテンプレートには赤い旗が付いてるので、【複製】を押します。
・複製されたテーマの【編集】を押します。
・以下のように複製されたテンプレートの名前が出ていればOKです。

２．複写したテーマを編集する

まずHTMLを変更します。
<div id=“header”>　と書かれているところを探してください。

その下に、以下のソースを貼り付けてください。

<div style="top : 0px;left : 0px;position : absolute;z-index : 100;">
	<div style="width:150;height:150;overflow:hidden;">
		<script type="text/javascript" src="http://mog.sado-is.com/analog_classic3/analog_classic3.php"></script>
		<script type="text/javascript" src="http://mog.sado-is.com/analog_classic3/analog_classic3.js"></script>
		<script type="text/javascript">swfshow(0,0,0);</script>
		<div style="font-size:40%;position : relative;top : 0px;left : 999px;">
			<a href="https://sado-is.com/ " target="_blank" title="佐渡島の次平">佐渡島の次平</a>
		</div>
	</div>
</div>

以下のようになればOK.

ここでプレビューしてみましょう。以下のようになればOK。

このままではブラウザの幅を広げても左上に固定されたままになります。これでいい場合はこれで終了です。

ヘッダーのイメージの上に配置するには、スタイルシートを編集します。 #header を探してください

overflow: hidden;  の次の行に position : relative; を挿入します。

ここでプレビューしてみましょう。以下のようになればOK。

ブラウザの幅を変えても、ヘッダーのイメージに重なっているはずです。

ここからが位置決めです。
テンプレートに挿入したソースの１行目を以下のように変えます。

<div style=”top : 170px;left : 730px;position : absolute;z-index : 100;”>

プレビューしてみましょう。以下のようになればOK。

これでテンプレートの編集は終わりです。

更新した後に、テンプレートを適用してください。

top：上からの位置、left：左からの位置 を適当に調整してすきな位置に配置してください。

コメント / トラックバック 5 件 クラシック・アナログ時計(どこでも配置用) があります