livedoor ナレッジ

ブログのテキスト表示の配置や構成（2列にするとか）を変えることはできますか？

ブログ初心者です。

サイトの画面に、テキストのタイトルと最初の数行を、できるだけ多く表示したいと考えています。

現在は、デザインが2カラム、［続きを読む］によって、なるたけ詰めるようにしています。（サイトは、 です。今の状態で説明すると、4月21日分と4月20日分、4月19日の日付のみが表示されています。）

このデザインというか配置を変更して、タイトルと最初の一文（4月20日分くらいの大きさ）からなる記事を、数多く並べることはできるでしょうか？例えば、サイドバーをもっと左によせて、テキストを縦2列にするとか、テキストの表示自体をもっと細くして縦2列にするとか。

もっともいずれの場合でも、［続きを読む］をクリックすると、従来どおり、その記事が真ん中に来るようにも、したいのです。

長々すいません。トップの画面に、それぞれの日記へのリンクが数多く貼られているような、そういう形にしたいのですが、そういうことは可能でしょうか？また可能だとして、かなり難しいことなのでしょうか？

よろしく御指導お願いします。

デザインsolid_state_diaryの、トップページのHTMLをバックアップします。


トップページのHTMLの<!-- Loop Start -->から<!-- Loop End -->までの中身を下記に書き換えてみて下さい。



<!-- Loop Start -->

<br />
<IndexArticlesLoop>
<table width="90%" bgcolor="#ffffff" border="1" cellpadding=15>
</tr><td><div class="main">
<$TrackBackAutoDiscovery$>
<IfDateChanged><div align="right"><h2><$ArticleDate$></h2></div></IfDateChanged>
<div align="right"><IfArticleCategory1><a href="<$ArticleCategory1Url$>"><$ArticleCategory1$></a></IfArticleCategory1><IfArticleCategory2>&nbsp;|&nbsp;<a href="<$ArticleCategory2Url$>"><$ArticleCategory2$></a></IfArticleCategory2></div><br />
<h3><a href="<$ArticlePermalink$>"><$ArticleTitle ESCAPE$></a><IfArticleRating><$ArticleRatingIcon$></IfArticleRating></h3><br /><$ArticleBody$><IfArticleBodyMore><a href="<$ArticlePermalink$>" class="continues">続きを読む</a></IfArticleBodyMore><br clear="all">
<br />
<IfArticleAllowComment><a href="<$ArticlePermalink$>#comments">Comments(<$ArticleCommentCount$>)</a></IfArticleAllowComment><IfArticleAllowPing>&nbsp;|&nbsp;<a href="<$ArticlePermalink$>#trackback">TrackBack(<$ArticlePingCount$>)</a></IfArticleAllowPing><br />
<div align="right"><$ArticleAuthor$>&nbsp;at&nbsp;<$ArticleTime$><br />
</div></td></tr>
<IfFirstArticle><tr><td bgcolor="#ff0000"><center><div id="ad"><div id="adbody"><$Advertise$></div></div></center></td></tr></IfFirstArticle>
</table><br />
</IndexArticlesLoop>

<!-- Loop End -->


書き換えたら、トップページのHTMLを保存してトップページを再構築。

イメージとあわなかったらバックアップで元に戻してください。

どうされたいのか、イメージが伝わりきれない部分もありますが、とりあえずトップページに目次を作ったら良いような気がします。

管理画面→カスタマイズ/管理→デザインの設定→カスタマイズ→トップページのHTMLを編集する画面と進みます。

まず、Ctrl＋Aでこの文字列を全文選択しCtrl＋Cでコピーしてワードパットにペーストし保存しておきます。これでトップページのHTMLのバックアップとなります。


文字列のどこかに、こういう部分があります。

<!-- Loop Start -->

この上に書いたHTMLは並んで表示される記事の上に来ます。

ここに下記のものを貼って下さい。

<!--ここから-->

<table witdh="90%" cellpadding=10>
<tr>
<td valign="top" align="left">
<a href="記事１のURL">記事１のタイトル</a><br/>
<a href="記事２のURL">記事２のタイトル</a><br/>
<a href="記事３のURL">記事３のタイトル</a><br/>
<a href="記事４のURL">記事４のタイトル</a><br/>
<a href="記事５のURL">記事５のタイトル</a><br/>
</td>
<td valign="top" align="left">
<a href="記事６のURL">記事６のタイトル</a><br/>
<a href="記事７のURL">記事７のタイトル</a><br/>
<a href="記事８のURL">記事８のタイトル</a><br/>
<a href="記事９のURL">記事９のタイトル</a><br/>
<a href="記事１０のURL">記事１０のタイトル</a><br/>
</td>
</tr>
</table>

<!--ここまで-->


witdh="90%"はピクセル単位で指定もできますが、あんまり大きくするとサイドバーが落ちたりします。


字が大きい場合には、下記を参考にされて下さい。
http://knowledge.livedoor.com/5031


適当に説明文も書いてみて下さい。
改行には<br />を入れて下さい。

<font size="4">文章</font>

size="4"の数字を変えることで大きさが変わります。
2～3くらいが普通の字の大きさです。

color="red"とかを追加すれば色も変えられます。
redの代わりに#FF0000と指定してもかまいません。
http://www.htmq.com/color/index.shtml
↑こちらもご参考にされて下さい。

－－－－－例－－－－－
<font size="2">小さい字</font>
<font size="4">大きい文字</font>
<font size="6" color="red">かなり大きくて赤い文字</font>


イメージにあうと良いのですが（＾＾；

<!-- Loop Start -->
<br />
<IndexArticlesLoop>
<$TrackBackAutoDiscovery$>
<center><table width="98%" bgcolor="#ffffff" border="1" cellpadding=5>
<tr>
<td width="80%" align="left" valign="top">
<font size="3" color="black"><a href="<$ArticlePermalink$>"><b><$ArticleTitle ESCAPE$></b></a><IfArticleRating><$ArticleRatingIcon$></IfArticleRating></font><br />
<font size="2" color="black"><$ArticleBody$><IfArticleBodyMore><a href="<$ArticlePermalink$>" class="continues">続きを読む</a></IfArticleBodyMore></font><br clear="all">
</td>

<td with="20%" align="right" valign="top">
<font size="3" color="red"><IfDateChanged><b><$ArticleDate$></b></IfDateChanged></font><br />
<font size="2" color="black"><IfArticleCategory1><a href="<$ArticleCategory1Url$>"><$ArticleCategory1$></a></IfArticleCategory1><IfArticleCategory2>&nbsp;|&nbsp;<a href="<$ArticleCategory2Url$>"><$ArticleCategory2$></a></IfArticleCategory2><br />
<IfArticleAllowComment><a href="<$ArticlePermalink$>#comments">Comments(<$ArticleCommentCount$>)</a></IfArticleAllowComment><IfArticleAllowPing>&nbsp;|&nbsp;<a href="<$ArticlePermalink$>#trackback">TrackBack(<$ArticlePingCount$>)</a></IfArticleAllowPing><br />
posted&nbsp;at&nbsp;<$ArticleTime$></font>
</font></td>

</tr>
<IfFirstArticle>
<tr>
<td colspan="2" bgcolor="#ff0000">
<center><div id="ad"><div id="adbody"><$Advertise$></div></div></center></td></tr></IfFirstArticle>
</table></center><br />
</IndexArticlesLoop>
<!-- Loop End -->