ブログの写真を大きく表示させる方法 No.2

さぁいよいよスタイルシートを弄ります。
説明の通り進めれば簡単にできますが
おかしくなっても責任は持てませんので(^_^;)
自己責任でお願いします。

No.1の説明が一部間違っていたので修正しておきました(^_^;)




先ず設定前にブログに載せた写真を大きくしておきます。
画像のように大きくしても設定前は右側が
切れてしまいます





上の画像はスタイルシートを選択した時に最初に表示される画面ですが
現在のスタイルがカスタムになってますよね
この状態でないとスタイルシートを変更できないので

カスタムスタイルの適用ボタンをクリックして
簡易編集から背景画像やヘッダー画像を登録してオリジナルのページに仕上げてください
スタイルシートを弄ってもページのデザインを変えるだけなので、今までのブログなどは消えません
失敗してもスタイル選択でカスタム以外には普通の状態に戻るので挑戦してみては？
元々カスタムでデザインされてる方は、スタイルの操作からパソコンでバックアップを取っておきましょう(^o^)/

これから他にも幾つか紹介するアクセスカウンターなどの設置もカスタムになってる必要があります。





①まずみんカラのマイページを開いてみましょう

②画像の中の1(スタイルシート)をクリック
この時点でカスタムになってるかどうか確認してください。
なってない場合はスタイルシートのプログラムは記述されてません
オリジナルのページを作って保存してから次に進んでください。

③画像の中の2(詳細編集)をクリック
この時点で画面に「本文・サイドメニューの位置」の項目が右側であることを確認します。
左側なら右側に変更して画面一番下の保存をクリック
次へ進みます。
左側にメニューがある場合のプログラムの変更は色々試しましたが私には無理でした。

④画像の中の3(共通コンテンツ)をクリック
すると画像と同じ表示になるので

⑤コンテンツ領域の四角枠内の赤矢印の「 overflow:hidden; 」を「 overflow:visible; 」に変えます。

⑥書き換えたら一番下にスクロールして保存をクリックして保存します。

これで右側が切れなくなりますが、今度はサイドメニューの下に潜り込んで見えません
次は写真をサイドメニューの上に重ねる設定になります。




⑦⑥から続けて設定する場合は3のブログをクリックします。
すると上の画面になります

⑧赤枠内を下のプログラムに書き換えます

margin:5px;
position:relative;
z-index:4;

z-index:4; ←これを0にすると又一番下に潜り込みます。2でも不十分なので4で

上の記述だと写真の左側は空いてしまいます

⚫︎画面左側もいっぱいに載せたい時は
(まずブログの写真を載せる時に画像を980pxにしておけばiPadの画面いっぱいに表示します
これ以上大きくしてもヘッダー画像などがどんどん小さくなるだけで意味がありません。パソコンで見るとどんどん数値を増やせば大きくなりますが全てのユーザーに快適に見てもらうには980以上は避けた方が良いでしょう。)

ではスタイルシートの
margin:5px; この部分を

margin:0px 0px 0px -45px;

に変更します。
これが一般的なスタイルだと思います
(私の場合は
margin:0px 0px 0px -25px;
でした。)


⚫︎私のようにヘッダー画像と横のサイズを揃えたい時は
(まずブログの写真を載せる時に画像を930pxにしておきます。ヘッダー画像の左右の隙間が25pxなので980-25-25=930となります)

スタイルによって違いますが

margin:0px 0px 0px -20px;

の場合が多いと思います。
(私の場合は
margin:0px 0px 0px 0px;
でした)

揃わない場合は各自微調整してください

⑨書き換えたら一番下にスクロールしてプレビューをクリックして
前のブログの方法で626px以上にした写真を確認してみてください。
サイドメニューの上になって写真が見えるようになってたら成功です。

⑩成功したら愛車紹介の右上に出てる「プレビュー解除」ボタンをクリック、保存をクリックして保存します。
保存して変更した画面になるまでに数十秒かかる場所があります。何度かリロードしてみて下さい。

以上で626px以上に設定した写真がサイドメニューの上に表示されます。
スタイルシートの他の場所を変更されてる方がみえますが、必要最低限の変更のみ載せてみました。




ハイ(^o^)/こんな感じになります