マンゴスチンw風テンプレート

FC2BLOGシンプルテンプレート公開と更新と編集

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

画像の貼り付け

少しずつですが、テンプレートの編集サンプルを公開していけたらと思っています。
今回は、トップに画像を表示させる方法について考えてみました。




いろんなブログを拝見していると、トップ絵といわれる素敵な画像がたくさんあって感動します。

ちょっと真似をして簡単なものを作ってみました。
画像はクリックすると大きく表示されます。

top_2

大きさは 横780px 縦200px です。
以下のような表示になるので、画像を作られる際に大きさの目安にしてもらえればと思います。


テンプレート名:mango1_2rm_be, mango2_2lm_wg の場合

HTMLの最初に見える範囲の一番下

<div id="header">

と、少しだけスクロールすれば出てくる

<h1><a href="./"><%blog_name></a></h1> <!--ブログタイトル-->

の間に

<img src="画像URL" width="横サイズ" height="縦サイズ" alt="画像名" /> <!--画像用タグ-->

を入れると、こうなります。

<div id="header">
<img src="画像URL" width="横サイズ" height="縦サイズ" alt="画像名" />
<h1><a href="./"><%blog_name></a></h1>

top_3

画像URL、横サイズ、縦サイズ、画像名は、各自で書き込んでください。
画像URLは、管理ページ→ツール→ファイルアップロードでアップロードした際に表示される赤字のURLです。
アップロード済ファイルの場合は、ファイル種類の小さい画像をクリックすると原寸表示されるので、画像上で右クリック→プロパティーでURLが表示されます。
横サイズと縦サイズは、width="780" height="200" という具合に、単位のピクセル(px)は要りません。
画像名は、画像についてのわかりやすい簡単な説明などでも良いと思います。
例えば、上の画像では alt="トップ絵" と書いてあり、画像が表示されない場合などにテキスト表示されます。
何も書かない場合は、alt="" としておきます。


テンプレート名:mango3_1aa_eb の場合

上と同じく

<div id="header">

の下に

<img src="画像URL" width="横サイズ" height="縦サイズ" alt="画像名" /> <!--画像用タグ-->

を入れると

top_1

と、なります。

ブログタイトル部分の背景にトップ絵を使うとなると、スタイルシートに大幅な変更が必要となります。
いろいろいじってみたのですが、トップ絵をメインにしたテンプレートに作り直すほうが早いです。
現在作っているテンプレートが完成した後にでも、試しに作りなおしてみます。
それまでは応急処置として、ブログタイトルの下の、もうひとつ下

<h1><a href="./"><%blog_name></a></h1> <!--ブログタイトル-->
<div class="main_body">

の下に

<img src="画像URL" width="横サイズ" height="縦サイズ" alt="画像名" /> <!--画像用タグ-->

を入れてみてください。

top_1_1

 

マンゴスチンさん、いつもお世話になっております「おいやん日記」です。
今日、神戸のホテルに備え付けのパソコンで自分のブログを見ました。
すると、左のプラグインの表示が全て終わってから記事の表示が始まります。
どういう現象なのでしょうか?
コチラは、DELLのノート型のパソコンです。
画面は決して小さいものでは、ありません。
時間の、ある時にでも、考えてみてください。

トップページのタイトルの上部に写真の貼り付け!成功しました。
ありがとうございます。
非常に、満足しています。
これからも、よろしくお願いします。

Re: タイトルなし 

おいやんさん、こんばんは。

> 左のプラグインの表示が全て終わってから記事の表示が始まります。
> どういう現象なのでしょうか?

様々な環境で快適に使えることを目標としているので、こういった報告をいただけると本当にありがたいです。
これは、おそらく前から気になっている件だと思うんです。
ブラウザの幅を少し縮めると記事が下へ回りこんでしまうんですよね。

左記事右メニューだとここまで酷くはなくて、おいやんさんに使っていただいている左メニュー右記事だと早い段階で崩れますね。
現在、両テンプレートの横文字数を合わせているのですが、左メニュー右記事の場合は設定を変えるべきなのかもしれません。

とりあえず、スタイルシートを少し編集してみてください。
スクロールしながら探してくださいね。

#right{ /* 右メインメニュー */

の  margin: 20px 15px 0 0; を

margin: 20px 5px 0 0; に変更と、

#lmenu{ /* 左メニュー */

の margin: 20px 0 0 25px; を

margin: 20px 0 0 10px; に変更してください。

これでしばらく様子をみてください。


> トップページのタイトルの上部に写真の貼り付け!成功しました。

やっぱりあそこに画像を入れると、かなり雰囲気が変わりますよね。
またいい方法があれば随時更新していきますね。

コメント投稿

  • URL
  • コメント
  • パスワード
  • 管理者にだけ表示を許可する

トラックバックURL

http://mangosteen112.blog112.fc2.com/tb.php/23-fe826a2b
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。