②FC2ブログでフレームをUPする【ソースの作成編】 ( その他インターネット ) - JH1VDMのブログ

②FC2ブログでフレームをUPする【ソースの作成編】

※注意

サンプルの３つの素材を使ったフレームは、幅を固定したサイズになっています。fc2の記事エリアが幅560pxと同じか560px以内でご利用下さい。

固定サイズの場合、PCでは正常に見えても、スマホなど他のデバイスで見るとレイアウトが崩れて見える場合があります。

また、テンプレートを変更した場合はPCであっても、フレームより小さい記事エリアの場合等、レイアウトが崩れて表示される場合があります。

今回UPする素材の横幅はYahooサイズの560pxにしています。
フリーソフトGimpを使用すると縦横の比率を変えずに、
尚且つ、透過性を保ったまま素材自体のサイズ変更ができます。
ただし、拡大する場合は、多少の画像の劣化はあるかもしれません。

ソースは公開するので、適宜ご自分で素材やHTMLのサイズを変更してください。尚、HTMLの編集にはHTMLの知識が必要となります。

ソースの作成にはHTMLの知識が必要になりますが、最低限度、画像の縦・横のサイズの見方とURLの基本はご自分でNETを調べるなどして理解して頂けると助かります。

手順はFC２ブログでファイルのUPロード・URLの見方・ソースの記述箇所を参考にしてください。

※これ以上、注意点を多くしても読んでもらえず、

逆に解り辛いと思うので省きます。

不明点がありましたらコメントにお願いします。

コメントに書いていただいた場合、

返事が遅れる場合がありますがご了承ください。

素材のURLについて

※画像はサムネイルです。クリックで拡大画像が見れます。

※各画像には横サイズと縦サイズが括弧内に自動で書かれています。

次のソースに入れる時に参考になります。

ソースの作成

ソースは以下のようにあらかじめ用意しましたが、素材に合わせて各箇所のURLと素材のサイズが変わるので適宜変更してください。

ソース中の①～④やABCは付けずにソースを完成させて下さい。

≪ソースの説明≫

■全体の枠の大きさの設定内容

表で作成しています。縦に３つのセルがある状態の表です。

表全体を記事エリアの中央配置にしています。

はコメントです。公開後は表示されません。ソース内にはコメントも含めてコピペしてください。

表のサイズは横幅を560pxにしています。フレーム本体である元のサイズはこの①で横幅を変更します。

■topのHTMLの設定内容

画像は縦にも横にも繰り返しの設定にはしていません。つまり伸縮しません。そのため、文字が縦に何行も伸びたり、大きな画像を入れるとフレームが崩れる場合があります。

文字の配置は縦横中央に配置しています。

ソースの変更箇所は３つあります。
横サイズ②と縦サイズ③と画像のURLAです。

■centerのHTMLの設定内容

画像は縦のみ繰り返しの設定にしています。なので何行もある文章や縦に何枚も写真や画像を配置すると縦に延び、少ない行数の文章には行数に合うようにしています。

ソースの変更箇所は１か所だけで画像のURLBです。

■bottomのHTMLの設定内容

画像は縦にも横にも繰り返しの設定にはしていません。つまり伸縮しません。そのため、文字が縦に何行も伸びたり、大きな画像を入れるとフレームが崩れる場合があります。

文字の配置は縦横中央に配置しています。

ソースの変更箇所は２か所です。画像の縦のサイズ④と画像のURLCです。

※一つ一つのHTMLの単語の意味はご自分で調べて頂けると助かります。

　どうしても分からない場合はコメントに書いてください。

≪ソース ≫

<center>
<table border="0" cellpadding="0" cellspacing="0" width="①560">
   <tbody>

     <tr>
       <td style="background-repeat : no-repeat;background-position : center bottom;" align="center" width="②560" valign="middle" height="③300" background="Atop画像のURL">header部です。<br>
       テキストテキストテキストテキストテキストテキスト<br>
       テキストテキストテキストテキストテキストテキスト</td>
     </tr>


     <tr>
       <td style="background-repeat : repeat-y;background-position : center center;" align="center" background="Bcenter画像のURL">center部です。<br>
       テキストテキストテキストテキストテキストテキスト<br>
       テキストテキストテキストテキストテキストテキスト<br>
       テキストテキストテキストテキストテキストテキスト<br>
       テキストテキストテキストテキストテキストテキスト<br>
       テキストテキストテキストテキストテキストテキスト</td>
     </tr>


    <tr>
       <td style="background-repeat : no-repeat;background-position : center top;" align="center" valign="middle" height="④350" background="C画像のURL">footer部です。<br>
       テキストテキストテキストテキストテキスト<br>
       テキストテキストテキストテキストテキスト<br>
       </td>
     </tr>

   </tbody>
</table>
</center>