解決済
（ブログ初心者です！！）「Natural Diary」記事右横のコメントやカテゴリー表示を記事下に表示したい
公式テンプレート「Natural Diary」を使用しています。記事横のコメントやカテゴリー表示を記事下に表示し、
記事本文の横幅を広げ、大きい写真をアップしたいです。
ＨＴＭＬの知識がないのですが、どなたか丁寧に教えていただければ大変ありがたいです。
ブログは
です。
よろしくお願いいたします。
回答(2)
1.
デザインのカスタマイズ
ＣＳＳ（スタイルシート）
で
.posted{
の中身の
width:85px; float:right;の２行を削除するか
/* width:85px; */ /* float:right; */のようにコメントアウトする。
同じく
.blogtext{
margin-right:105px;
}
のmargin-right の行を削除（あるいはコメントアウト）する設定を保存して、再構築ページでＣＳＳの再構築をする
これで、とりあえず、記事右から記事上に移動して、記事幅が拡がる。
同じく、カスタマイズ管理から
トップページや個別記事のテンプレートで
<div class="posted">
～
</div>
対応する（ペアになるdiv）までを記事下（<div class="blogtext">のペアになる</div>の下）に移動する。
設定を保存して、
再構築ページで
トップページの場合トップページ
個別記事ページの場合個別記事の再構築を行う。
また、スタイルシート読込の設定がダブっているようです。
おそらく、以前に書いていたモノと共通ヘッダによるモノがダブっているのだと思われます。
（余計な負荷になるので）共通ヘッダだけでよいかと思います。
全部解決しました！！
本当にご丁寧に教えていただき、初心者の私でも納得いくカスタマイズができました。
本当にありがとうございました☆
2.
<div class="blogtext">
<div class="blogtextbody">
<div class="titlebody"><h3 class="title"><a href="<$ArticlePermalink$>"><$ArticleTitle ESCAPE$></a><IfArticleRating><$ArticleRatingIcon$></IfArticleRating></h3>
</div>
<div class="main"><$ArticleBody$><IfArticleBodyMore><a href="<$ArticlePermalink$>" class="continues">続きを読む</a></IfArticleBodyMore><br><br clear="all">
</div>
<IfHasArticleTags>
<div class="article_tags">タグ:
<ArticleTagsLoop><a href="<$ArticleTagAggregateUrl$>" rel="tag"><$ArticleTag ESCAPE$></a></ArticleTagsLoop>
</div>
</IfHasArticleTags>
<IfFirstArticle>
<div id="ad"><$Advertise$></div>
</IfFirstArticle>
</div:blogtextbody>
</div:blogtext>
</div:blogbody> <div class="blogbodybottom"></div> </div:fullbody> <IfDateFooter><div class="dateend"></div></IfDateFooter>
コメント(11)
元に戻せるように、デザインの保存をしてから作業下さい。
BLUEPIXYさま
早速に丁寧なご回答ありがとうございます！
スタイルシートの変更まではうまくいきました。
トップページの内容を下記のように変更しましたが、
プレビューで見ると、まだコメントが本文上に表示されます。
これはどうすればよろしいですか？
<div class="blogtext">
<div class="blogtextbody">
<div class="titlebody"><h3 class="title"><a href="<$ArticlePermalink$>"><$ArticleTitle ESCAPE$></a><IfArticleRating><$ArticleRatingIcon$></IfArticleRating></h3></div>
<div class="posted">
<div class="inposted">
<div class="posturl"><a href="<$ArticlePermalink$>">Permalink</a></div>
また、スタイルシートの読み込みのダブりとは
実際どのように共通ヘッダだけにすればよろしいでしょうか。
#2>これはどうすればよろしいですか？
#2だと、<div class=titlebody>の対応する</div>の下になっています。
<div class=blogtext> の対応する</div>の下に移動下さい。
#2>どのように共通ヘッダだけにすればよろしいでしょうか。
現在
<head> 自分で書いたヘッダ部分 <title><$BlogTitle ESCAPE$></title> <$HeadSectionCommon$> </head>の様になっていると思いますが
<head> <$HeadSectionCommon$> <title><$BlogTitle ESCAPE$></title> </head>で良いです。
<$HeadSectionCommon$> がどのように展開されているかは、ブラウザでトップページを表示して、メニューの表示～ソースの表示で確認できます。
BLUEPIXYさま
何度もすみません。
＞<div class=blogtext> の対応する</div>の下に移動下さい。
<div class=blogtext> の対応する</div>がわかりません。
これ以降の</div>全ての後に移動してみたのですが、変化なしでした。
参考に<div class=blogtext>以下のトップページの状態を次のコメントに書きます。
<div class="blogtext"> <div class="blogtextbody">
<div class="titlebody"><h3 class="title"><a href="<$ArticlePermalink$>"><$ArticleTitle ESCAPE$></a><IfArticleRating><$ArticleRatingIcon$></IfArticleRating></h3></div>
<div class="main"><$ArticleBody$><IfArticleBodyMore><a href="<$ArticlePermalink$>" class="continues">続きを読む</a></IfArticleBodyMore><br><br clear="all"></div>
<IfHasArticleTags><div class="article_tags">タグ:
<ArticleTagsLoop><a href="<$ArticleTagAggregateUrl$>" rel="tag"><$ArticleTag ESCAPE$></a>
</ArticleTagsLoop></div></IfHasArticleTags>
<IfFirstArticle><div id="ad"><$Advertise$></div></IfFirstArticle>
</div>
</div>
</div>
<div class="blogbodybottom"></div>
</div>
<IfDateFooter><div class="dateend"></div></IfDateFooter>
回答２より、<div class="blogtext">に対応する<div>は、
<IfFirstArticle>
<div id="ad"><$Advertise$></div>
</IfFirstArticle>
の二つ下の<div>と解釈しましたが、あっていますか？
そこに移動してみましたが変化ありません。
今の状況はこちらです。
http://blog.livedoor.jp/miquojp/
基本的な事が全くわからず、お手間かけてしまい申し訳ありません。
具体的に「ここにこれを入れる！」と教えていただけると大変ありがたいです。
#7>そこに移動してみましたが変化ありません。
移動する場所は合っていますが、
<div class=posted>のdiv が一部(Permalinkの部分、画面からもそれは変わっているのが確認できます)しか移動しておりません。
同じように、<div class=posted> に対応する</div>までを移動下さい。
ありがとうございます！！
本文下部に移動できました。
最後にもうひとつだけよろしいでしょうか。
移動したコメント、カテゴリー類ですが
縦並びではなく、横並びにしたいのです。
以前の回答で「div」を「span」にかえると
横になると書かれていましたが、
実際にどこのdivをspanに変更すればよいですか？
#9>実際にどこのdivをspanに変更すればよいですか？
<div class=inposted>の配下のdiv を変えればいいけど
簡単には、 スタイルシートで
.posturl,.postcomment,.posttb,.postclip,.postcategory1,.postcategory2{
display:inline;
のようにdisplay:inline;
の一行を追加すればいいと思います。
うまくいってよかったです。