ブログの簡単なカスタマイズを教えて下さい。

質問

ブログの簡単なカスタマイズを教えて下さい。

今、使っているテンプレートは3カラム方式（FC2ブログ）なのですが、
メインとなる真ん中の列の上の部分に常時表示されるボックス（フリースペース）を設けたいと
思います。

このような場合はどのようにすればよいのか
ご存知の方、教えて下さい。

テンプレートのカスタマイズであればどこをどうするのか
という部分を教えていただけると助かります。

またそれ以外の方法があればそれでもかまいません。

よろしくお願いします。

回答No.3

zeff · ベストアンサー

＞おかげさまで真ん中上部に設置はできたのですが、見出しの幅が非常に狭く、
＞少し見栄えが悪くなってしまいます。

こちらではキチンと見出しは記事と同じ幅になっていますが…。

HTMLしかいじっていませんし初期状態のテンプレートから

<!--真ん中のレイアウト-->
<div id="my_contents">
<div id="mymain">

<!--常時表示されるボックス-->
<!--plugin-->
<!--plugin_third-->
<div class="centernaka">
<h2 class="centerbox" style="text-align:<%plugin_third_talign>"><%plugin_third_title></h2>
<div class="centernakanaka">
<div class="centermozi" style="text-align:<%plugin_third_align>">
<p style="text-align:<%plugin_third_ialign>"><%plugin_third_description></p>
<%plugin_third_content>
<p style="text-align:<%plugin_third_ialign>"><%plugin_third_description2></p>
</div>
</div>
</div>
<!--/plugin_third-->
<!--/plugin-->

と変えただけですので、
スタイルシートの方を何か書き換えとかされたのではないでしょうか。
でもそれなら記事見出しの幅もおかしくなるはずですし。
上のをそのまんまコピーアンドペーストしてもダメでしょうか。

あるいはプラグイン３に入れたもののタイトルが未記入とかですか？
それなら見出しの中身が無いのでちょっと変な具合にはなります。
見出しのあるはずの所に横に細長い枠が出ます。
これは見出しの枠.centerboxのborderですね。

こちらで確認した限りでは何も不具合はありませんので、
どうしても直して欲しいという場合は、
アドレスを直接見に行かせていただくしかありません。

お礼

無事にできました！

本当に助かりました。

丁寧に教えていただき、心から感謝しています。

ありがとうございました。

回答No.2

zeff

#A.No1です。

補足ありがとうございます。

まずテンプレートの複製を行なってください。
SkyBlue_Cloud_1という名前になると思いますが、
こちらをカスタマイズします（名前は変えられます）。

ではまず、

<!--右のレイアウトプラグインサード-->
<!--plugin-->
<!--plugin_third-->
<dl class="right_p">
<dt style="text-align:<%plugin_third_talign>"><%plugin_third_title></dt>
<dd style="text-align:<%plugin_third_ialign>"><%plugin_third_description></dd>
<dd style="text-align:<%plugin_third_align>"><%plugin_third_content></dd>
<dd style="text-align:<%plugin_third_ialign>"><%plugin_third_description2></dd>
</dl>
<!--/plugin_third-->
<!--/plugin-->

これを、
<!--真ん中のレイアウト-->
<div id="my_contents">
<div id="mymain">
の下へ移動します。
プラグイン３に何か入れておくとプレビューで確認しやすいです。

ただ、
このままだとプラグインのデザインになっているので、
記事部分のデザインと同じにして統一感を出します。
変更後はこうなります（該当箇所のみ抜粋）。

<!--真ん中のレイアウト-->
<div id="my_contents">
<div id="mymain">

<!--常時表示されるボックス-->
<!--plugin-->
<!--plugin_third-->
<div class="centernaka">
<h2 class="centerbox" style="text-align:<%plugin_third_talign>"><%plugin_third_title></h2>
<div class="centernakanaka">
<div class="centermozi" style="text-align:<%plugin_third_align>">
<p style="text-align:<%plugin_third_ialign>"><%plugin_third_description></p>
<%plugin_third_content>
<p style="text-align:<%plugin_third_ialign>"><%plugin_third_description2></p>
</div>
</div>
</div>
<!--/plugin_third-->
<!--/plugin-->

プラグインの説明1と2
（<%plugin_third_description><%plugin_third_description2>）
は不要なら<p>～</p>を削除してください。
<%plugin_third_content>が本体です。

プレビューで確認して上手くいっていたら、
テンプレートの「更新」と「適用」を行なって終了です。
オリジナルはバックアップ用に取って置きましょう。
お疲れさまでした。

ここからは”ついで”です。

高さ（縦）を一定にしたい場合は、
<div class="centernaka" style="height:300px;overflow:auto;">
と追加してpx値を適宜調節してください。autoはscrollでも可。

<div class="centernaka scrollbox">
とでも適当にclass名をつけて、
スタイルシートに
.scrollbox{
height:300px;
overflow:auto;
}
と新規に追加してもOKです。2つのclassが適用されます。

また、
トップページだけ表示したい場合は、
<!--index_area-->
<!--常時表示されるボックス-->
<!--plugin-->
中略
<!--/plugin-->
<!--/index_area-->
と独自タグで挟みます。

補足

ありがとうございます。

おかげさまで真ん中上部に設置はできたのですが、見出しの幅が非常に狭く、
少し見栄えが悪くなってしまいます。

見出しの横幅を広げるやり方はありますでしょうか・・？

たびたびもうしわけございません。

回答No.1

zeff

たぶん左カラムにプラグイン１、
右カラムにプラグイン２があると思うので、
使われていないプラグイン3を持ってくる、という方法でやりましょう。

そしてフリーエリアを作成してそれをプラグイン3に置く。
修正・書き換えをする時にテンプレートをいじらなくて済みます。
そしてデザインを適宜調整する。
一定の高さに収めたい場合はoverflow:auto/scroll;を使う。

ただテンプレートによって構造がみんな違うので、
テンプレート名（公式か共有か含め)を補足願います。
調べてみたらお手伝いできるかもしれません。

例：公式「default」のプラグイン３

<!--plugin_third-->
<h3 style="text-align:<%plugin_third_talign>"><%plugin_third_title></h3>
<p style="text-align:<%plugin_third_ialign>">
<%plugin_third_description>
</p>
<%plugin_third_content>
<p style="text-align:<%plugin_third_ialign>">
<%plugin_third_description2>
</p>
<!--/plugin_third-->

補足

ありがとうございます。
FC2ブログで共有テンプレートの「SkyBlue_Cloud」というものを
使用しています。

お手数おかけしますが、よろしくお願いいたします。