TOP

サイト幅と同サイズの画像を取り付けしたい?

サイト幅いっぱいの画像を記事カラムに設定したいのですが?
という質問を拝見しまして追加の質問をお願いしたくメール致しました。
こちらの設定をシリウスでしたいのですがレスポンシブプレート
だとコードの変更はどのようにしたらよいでしょうか?

との質問内容です

ですがこれだけでは詳細不明
再度の詳細をお願いしました


1カラムのLPを作っています。

添付画像のような文章の区切り部分を
画像として記事のあいだあいだに貼り付けたいと思っています。

スマートフォンでも
パソコン画面と同じように表示させたいです。

いかがでしょうか?



ご返答

まず、スタイルシートでは、画像のみサイト幅に合わせるというのは

右端は合わせられたものの、左端がどうしても2ミリほど開いてしまいます

ノンデフォルトではできることでも、レスポンシブでは

レイアウトボックス メインボックス コンテンツ指定と

過剰な枠の構成がありそれが邪魔をしているようです

邪魔をしているコードを外すとレイアウトエラーになってしまいます

記事内にある画像だけをサイト幅にというのはできるような気がしますが
少々時間をいただかないと検証もあるのですぐの対応はご勘弁ください


で、解決策になるかどうかは、何とも言えませんが

ランディングPでしたら異なる方法があるのでそちらを説明します


HTMLテンプレート内に画像コードを置くという手法

記事内ではなく、直接HTML内に画像コードを置くので邪魔するものがない


記事内で画像を読み込む際、サイト幅同様にサイズ指定をしてください
以下例
<img src="<% pageDepth %>img/dscf0025.jpg" style="width:900px;" alt="" />



HTMLテンプレートを開いて、以下の個所に張り付け


<!-- ★コンテンツここから★ -->
<% freeSpace1 %>

<% textTitle1 %>
<% textBody1 %>

<img src="<% pageDepth %>img/dscf0025.jpg" style="width:900px;" alt="" />ここ

<% textTitle2 %>
<% textBody2 %>

<img src="<% pageDepth %>img/dscf0025.jpg" style="width:900px;" alt="" />ここ

<% textTitle3 %>
<% textBody3 %>


上記に画像コードを置きます


次にスタイルシートでもう一つのお仕事

画像をサイトの両端に隙間なく表示させるために
以下のコードに書き換えてください

padding: 0px 0px;に書き換えますと間違いなくサイト幅まで画像があわされます

スタイルシート
================================================
全体
==================================================
*/

/* レイアウト
==================================================
*/
#wrapper {
overflow: hidden;
text-align: center;
}
#contents {
margin: 0 auto;
padding: 30px 0 50px;
position: relative;
text-align: center;
width: 900px;
background-color: #FFF;
}
#layoutbox{
background-color: #FFF;
overflow: hidden;


   padding: 5px 10pxここを
   padding: 0px 0px;に書き換える

}



記事の書き方は、操作画面の右にある記事1が<% textTitle1 %><% textBody1 %>となります


記事一に対して一つの画像という手順
記事2に対して一つの画像という手順



先に記事を書いてその下に画像が現れる


二つめの記事は以下に書きます

<% textTitle2 %>
<% textBody2 %>



画像が上記事が下の場合は

<% textTitle1 %>
ここに画像コード入れます
<% textBody1 %>


あまりお役立ちできないご返事になりました

申し訳ございません

サイト幅いっぱいの画像を記事カラムに設定したい?
レスポンシブサイト専用のサポートまとめ
トップページ

関連ページ

テーブルランキングのレスポンシブ不具合エラー
テーブルランキングを導入以降、レスポンシブ作用後は、適合した比率で狭まらない、ある程度で作用が止まるという質問が寄せられました
ブログモードでサブ階層の更新履歴が表示されない
シリウスレスポンシブテンプレートのブログ仕様で3階層にした場合、2階層の関連ページが表示されない。対応策はこちらで....
サイドメニューを右配置にしたはずが、保存されない
右サイドメニューでテンプレートを選択したはずが、 CSS改行して保存すると元の左位置に戻ってしまう デフォルトに戻す、保存、いずれを指定しても結果は反映されない
H1テキスト、背景スペースともに非表示にしたい
h1 テキストおよび背景のスペースをPC,スマートフォンでも非表示したいが表示される部分の幅の調整(縮小)の方法がわかりません...という質問です...お答えはサポートで,,,
ipone横画面ではPC画面が表示されるがスマホ対応にできないか
シリウスのレスポンシブサイトをiponeの横画面で見ると正常反映なのですが、横にするとPC画面が表示されている。スマートフォン対応にできませんか?
巻末の更新履歴をサイドバーに移動した際のCSS不指示について
シリウスレスポンシブサイト専用のサポート、何かしらの事情で当サイトにお寄せられた質問に対してのサポート対応
記事巻末と更新履歴とのスペースが狭まらない?
シリウス記事画面で巻末の隙間を排除しているのですが、閲覧では、更新履歴とのスペースが空きすぎる空間が見られるのですが狭めることはできないのでしょうか?詳細はこちらでご覧ください..
ヘッダー画像のみワイド化できませんか?との質問です
レスポンシブテンプレートのイチカラム対応でヘッダー画像のみワイド化、拡張できませんか?との質問が寄せられました
ヘッダー画像をページごとに個別表示設定はしたが反映されない?
シリウスレスポンシブTPで、ヘッダー画像をトップ、カテゴリー、エントリーとも個別に表示したい..解説サイトを例にするとコードのみが表示されてしまうのです。解決策をお願いします....