FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

記事を画像で囲む

記事を画像で囲む方法を紹介します。

HTMLの下記箇所に赤い太文字の部分を加えます。


<!--▼ エントリー(記事)▼-->
<!--topentry-->

<table class="a_tbl" border="0" cellpadding="0" cellspacing="0">
<tr><td colspan="3" class="a_top"></td></tr>
<tr> <td class="a_left"></td><td class="a_center">


<h3><a href="<%topentry_link>" name="entry<%topentry_no>" id="entry<%topentry_no>" title="記事を参照"><%topentry_title>&nbsp;</a></h3>



</div><!--/bottom_navi-->
</div><!--/article-->

</td><td class="a_right"></td></tr>
<tr><td colspan="3" class="a_bottom"></td></tr>
</table>


<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" ~



次にスタイルシートに下記記述を加えます。


/* - 記事全体 - */
.a_tbl {
width: 100%;
margin-bottom: 2em;
}

/* - 記事上部 - */
.a_top {
background-image: url(http://~);
height: 10px;
}

/* - 記事中央本文 - */
.a_center {
background-image: url(http://~);
}

/* - 記事右側 - */
.a_right {
background-image: url(http://~);
width: 10px;
}

/* - 記事左側 - */
.a_left {
background-image: url(http://~);
width: 10px;
}

/* - 記事下部 - */
.a_bottom {
background-image: url(http://~);
height: 10px;
}


http://~には画像のURLをいれてください。各width,heightの数値は画像にあわせて調整してください。

これで一応完成です。

投稿時間等がある記事文末下のスペースが空きすぎだと感じればスタイルシートの

.bottom_navi {
text-align: right;
margin-bottom: 3em;
}

赤い数値を減らすか、この行ごと削除してください。

またこの記事文末の罫線もいらなければHTMLの

<!--▼ エントリー(記事)▼-->

<%topentry_more><!--/more-->
<hr noshade size="1" />
<div class="bottom_navi">

<!--▲ エントリー(記事)▲-->


赤い部分の<hr noshade size="1" />を削除してください。

多少編集箇所があるので不安な方はバックアップをとって挑戦してくださいね。
関連記事
[ 429 ]
ありがとうございます!!
試してみます。
ご無理を言ってしまって申し訳ありません。
本当にありがとうございました。
[ 2006/06/18 21:27 ] [ 編集 ]
[ 430 ] ありがとうございました。
早速教えていただいてありがとうございます。
助かりました!
今後ともよろしくお願いいたします。
[ 2006/06/19 00:58 ] [ 編集 ]
[ 431 ] こんにちは!
ご無沙汰しておりますm(__)m
また今日もいたおさんのブログを読んであちこち手を加え、自分なりに満足しているところです!
先にお礼を・・・
「いつもありがとうございます」
今日は教えていただきたいことが2つあります。
●中央カラムのカテゴリ(左カラムのカテゴリをクリックすると次ページの上部に表示される)の月日は消せますか?

●そのカテゴリ表示を太字にすることはできますか?

急ぎませんので、またお時間あるときに教えて下さいm(__)m
[ 2006/06/19 13:23 ] [ 編集 ]
[ 432 ] こんばんは
>りんさん、EXPO'77さん
最近紹介するカスタマイズは少し複雑なものが多いです。挑戦するには少し敷居が高いかもしれませんが気が向いたときにでも参考にしてくださいね。

>mamamiさん
記事に掲載したのでこちらを参考にしてください。
http://10plate.blog44.fc2.com/blog-entry-66.html
カスタマイズ頑張ってくださいね。
[ 2006/06/19 23:50 ] [ 編集 ]
[ 433 ] おはようございます。
早速教えてくださって・・・感激です!
いたおさんの説明はとっても分かりやすくて、ずっと考えていたことが嘘のようにできちゃうので本当にありがたいですm(__)m
いたおさんもお忙しいと思いますけど、これからも頑張って下さいね!
ありがとうございました★
[ 2006/06/20 08:19 ] [ 編集 ]
[ 436 ] > mamamiさん
こんばんは、mamamiさん。
早速カスタマイズされたようですね。私は時間があるときは出来るだけ対応するようにしていますが、忙しいときはとことんブログを放置してしまいます。何か質問があれば気を長くして待ってくださいね^^;
[ 2006/06/22 01:34 ] [ 編集 ]
[ 3812 ] お帰りなさい~^^
いたおさん、お帰りなさい^^
ずっとここを参考にさせて頂いてブログやってます^^

で、またお願いなのですが(笑)
この 記事を画像で囲む を、lightframeでもやりたいと思い挑戦してるのですが
どうしても左のプラグインが落ちてしまいます。
いろいろ幅も変更してみたのですがダメで、、私の頭の限界なようです^^;;
lightframeのやり方も教えていただければ嬉しいです。
よろしくお願いいたします。
[ 2009/04/02 15:55 ] [ 編集 ]
[ 3813 ] ん~。
ごちゃごちゃやっていたらケアレスミスに気がつきました^^;
なんとか表示されました<(_ _*)>
[ 2009/04/02 17:21 ] [ 編集 ]
[ 3815 ] > sionさん
これはまた素晴らしい!しばらく自分のテンプレートであることに気が付きませんでした^^;

「記事を画像で囲む」方法は簡単ではありません。
sionさん凄いです^^
[ 2009/04/03 02:00 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
09 | 2023/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

09 | 2023/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
ユーザータグ


△ ページトップへ戻る