トップの画像を変えてみよう

  1. テンプレート
テンプレートを編集して自分だけのオリジナルブログにカスタマイズする事ができます。ここでは基本的な事項についてだけ触れますが、もっと深く細かいところまでカスタマイズするには、HTMLやCSSの知識が必要となります。公式テンプレートや共有テンプレートを見本にしてお好みの画像を入れてみましょう。
------------------------------------------------------------------------------------------------------------------------
プラグインテンプレートをカスタマイズしてみよう
プラグインテンプレートのカスタマイズについては「テンプレートカスタマイズ」の章をご覧下さい。
------------------------------------------------------------------------------------------------------------------------

「general_buroguma」の左上の画像を変更してみましょう


画像トップ画像2





左メニュー、デザイン変更内の「テンプレート設定」をクリックします


[general_buroguma]を選んで「修正」します

画像トップ画像3


[general_buroguma]を選んで「修正」リンクをクリックして下さい


HTMLコード内で該当する画像コードを見つけましょう

画像トップ画像4


[general_buroguma]の場合、下記が該当する画像ファイルのコードです。

http://1.dtiblog.com/template/genral_buroguma/image/rotennburo.gif

↑の画像コードをアップロードした画像に差し替えてみましょう
※ショートカットCtrl+Fの検索機能で検索すると簡単に見つけられます。



利用したい画像をアップロードします


トップ画像5




サムネイルをクリックして画像URLをコピーしましょう


トップ画像6





画像URLを書き換えます (サイズもあわせましょう)

トップ画像7

元の画像URL
http://1.dtiblog.com/template/genral_buroguma/image/rotennburo.gif

差し替え画像URL
http://1.dtiblog.com/b/blacky1/file/back.jpg"

画像のサイズも指定します
width"800" height="200"

画像は変更されましたが、タイトルが画像の横になってしまっています

トップ画像7-2





タイトルと説明文の位置を左側に変更してみましょう

トップ画像8



1.タイトル部分をコピーする

下記のコードがタイトルとその説明箇所です。ここをコピーします。 
<td><a href="<%url>"><%blog_name></a><div class="site_intro"><%introduction></div></td>


2.トップ画像の上の位置にタイトル部分のコードをペーストします。


3.コピー元を削除します。




タイトルと説明文を左に移動しました

トップ画像9




<<  記事欄表示位置の変更  |  もくじへ  |  共有テンプレートの追加  >>
|
ブログ | 総合ポータル | ニュース | テンプレート
利用規約 | ||通報|| | Report Abuse