2012 09
14
Fri.
共有テンプレート・simplest03_3c
---確認環境---
Windows7
IE・Firefox:最新版
シンプルな3カラムテンプレート。
始めて質問するときは最初にこちらを読んで下さい。
利用規約はこちらです。
- パソコン用テンプレートの関連記事
-
- 共有テンプレート・photolog02_2c (2012/10/18)
- 共有テンプレート・simplest03_3c « «
- 共有テンプレート・meteor02_3c (2012/08/15)
コメント
サイド（プラグイン１・２）の幅変更について
はじめまして。
この3カラムのテンプレを使わせていただいております。
れん様が提供されている他のテンプレのコメントを読み、何とか自分でカスタマイズできるかと頑張ってみましたが、どうしてもわからず質問させていただきことになりました。
大変お忙しいところ申し訳ありませんが、教えていただければと存じます。
※現在、自分のブログはこのテンプレで設定しています。
【質問事項】
サイドの幅を広げるには、どの部分を変更すればいいでしょうか？
サイドを変更したことにより、全体幅・記事幅も変更しなければならない場合の変更箇所も教えていただければと存じます。
サイドの幅ですが、画像サイズwidth="210"が余裕で入ればと思います。
お手数掛けますがよろしくお願いいたします。
はるなさんへ
テンプレートをお使い頂きありがとうございます。
3カラムは構造が複雑なので以下の方法をお試しください。
両サイドカラムのサイズ変更ですが、スタイルシートの下記箇所を赤字のように変更してください。
なお中央カラムは同じサイズとしましたので全体的に拡がることになります。
------------------------------
#wrap {
width: 1040px;
margin: 0 auto;
padding: 10px 0;
}
#content {
margin: 0 250px;
padding: 0;
}
#left {
float: left;
width: 230px;
margin: 0 0 0 -100%;
}
#right {
float: left;
width: 230px;
margin: 0 0 0 -230px;
padding: 0;
}
------------------------------
これで（余裕をとって）220pxまで対応します。
れん様へ
早々のお返事ありがとうございました。
うまく設定することができました。
シンプルで使いやすいテンプレートを提供してくださったことに感謝いたします。
サイドの幅変更について（再質問です）
以前の質問の折には、早々のご回答ありがとうございました。
ありがたく使わせていただいております。
前回は画像サイズ220pxまでの対応可能な変更箇所を教えていただきました。
その割合比率の元、画像サイズ300pxをサイドに設定しようと下記のように割り出しました。
（※間違っていれば教えてください）
------------------------------
#wrap {
width: <span style="color:#FF0000">1200</span>px;
margin: 0 auto;
padding: 10px 0;
}
#content {
margin: 0 <span style="color:#FF0000">330</span>px;
padding: 0;
}
#left {
float: left;
width: <span style="color:#FF0000">310</span>px;
margin: 0 0 0 -100%;
}
#right {
float: left;
width: <span style="color:#FF0000">310</span>px;
margin: 0 0 0 <span style="color:#FF0000">-310</span>px;
padding: 0;
}
------------------------------
しかし、ブログ全体が間延びしたようになります。
【質問事項】
両サイド（プラグイン１・２）同じサイズではなく
左サイド220px画像、右サイド300px画像
または、その反対
左サイド300px画像、右サイド220px画像
このように、右と左で違うサイズは設定可能でしょうか？
大変お忙しいところ申し訳ございませんが、教えていただければと存じます。
はるなさんへ
ご質問の件ですが左カラムを220px、右カラムを300pxとすると以下のようになります。
------------------------------
#content {
margin: 0 320px 0 240px;
padding: 0;
}
#left {
float: left;
width: 220px;
margin: 0 0 0 -100%;
}
#right {
float: left;
width: 300px;
margin: 0 0 0 -300px;
padding: 0;
}
------------------------------
逆の場合は次のようにしてください。
------------------------------
#content {
margin: 0 240px 0 320px;
padding: 0;
}
#left {
float: left;
width: 300px;
margin: 0 0 0 -100%;
}
#right {
float: left;
width: 220px;
margin: 0 0 0 -220px;
padding: 0;
}
------------------------------
れん様へ
早々のお返事ありがとうございました。
細かな質問にご対応くださり感謝いたします。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
サイトマップ作成について
はじめまして。
テンプレを使わさせもらっています。
カテゴリ別サイトマップを作成したいのですが、未熟者ゆえ上手くできません。つきましては下記のようなサイトマップの作成方法が御座いましたら、ご教示ください。
http://10plate.blog44.fc2.com/archives.html#c8
できましたらＦＣ2ブログの公式プラグインにある「全記事表示リンク」を経由して表示できたら何よりです。
わいさんへ
テンプレートをお使い頂きありがとうございます。
サイトマップに関してですが、テンプレート工房さんの解説記事は参照されたでしょうか？
http://10plate.blog44.fc2.com/blog-entry-220.html
サイトマップは他の方が考えた方法で（私も詳しく知らないという事もありますが）当方のテンプレートに組み込む場合は細かい調整や検証などしなければなりませんが、現状ではそこまでは手が回りませんのであくまで参考程度にお願いします。
当方のテンプレートにも<!--titlelist_area--><!--/titlelist_area-->はあるので該当箇所のHTMLを下記のように編集します。
上記URLで示したテンプレート工房さんから必要なHTMLをコピー＆ペーストし、<!--titlelist_area--><!--/titlelist_area-->の前後を該当テンプレートの形式に合うよう変更します。
（長くなるので一部省略）
------------------------------
<!--▼サイトマップ▼-->
<!--titlelist_area-->
<div class="entrybody">
<h3 class="entrytitle">サイトマップ</h3>
<div id="sitemap">
～サイトマップ中身・省略～
<!--/category-->
</div>
</div>
<!--/titlelist_area-->
<!--▲サイトマップ▲-->
------------------------------
次に同じくテンプレート工房さんから、スタイルシートの末尾に下記を追加します。
------------------------------
/* ▼ サイトマップ ▼ */
#sitemap {
margin-top:5px; /* 上の余白 */
text-align:left;
}
#sitemap ul.sitemap_list {
margin-left:30px; /* 各記事リストの左余白 */
}
.display_no {
display:none;
}
/* カテゴリ一覧へ戻る */
.pgtop {
text-align:right; /* 右寄せ */
}
/* ▲ サイトマップ ▲ */
------------------------------
以上のようなカスタマイズになります。
ちなみに「全記事表示リンク」はAll archivesと同じだと思うのでプラグインの変更は必要ないと思います。
なおこれ以上のサイトマップカスタマイズに関してはテンプレート工房さんの方でお調べ下さい。
ありがとうございます
れん様
お忙しいなかご回答いただきありがとうございました。
なかなかうまく表示されませんが、試行錯誤しながら頑張ってみます。また何かありましたら質問させていただきたいと思います。その時はよろしくお願い致します。
はじめまして、しろとと申します＾＾
こちらのテンプレート使わせていただいております。
よろしければお教えいただきたいのですが、IE(バージョンは11.0.11)にてブログ全体の周りに2ピクセルほどのグレーのラインがありますが、これを消すことは可能でしょうか？
http://blog-imgs-68.fc2.com/m/a/n/manitei/test.png
ひとまずHTMLやCSSでsolidや2px、カラーがおそらく#CCCCCCもしくは#CCCだと思い、検索してみたもののヒットしないもしくはヒットしたところの記述を書き換えても変化ありませんでした。FireFox(バージョンは28.0)では表示されていません。
さすがにこれ以上は自分の方でもお手上げで、他に検討がつくところもありません、、、
以上、よろしくお願い致します。
しろとさんへ
ご質問の件ですが当方ではそのような設定はしていません。
公式や他作者の共有テンプレートでも同じように表示されるのでIEの仕様ではないでしょうか。
れん様へ
ご返答の方ありがとうございました。
おかげさまでヒントが得られました。
他のFC2ブログ様にて表示されてないところを元に総当り戦で調べました。
IEの互換モードに関するヘッダーを埋め込んでるかどうかでした。
こういうタグです。
↓
<meta http-equiv="X-UA-Compatible" content="*****" />
しろとさんへ
情報ありがとうございます。
今後の参考にさせて頂きます。
