ブログ記事の横幅を意図的に拡げたいときのTips

総閲覧回数:896,877回 / 推薦評価:7個(内 論客5人) / ブログ拍手:899
アクセス記録[推移 / PV内訳(過去1日 / 過去1週間) / 外部アクセス元 (昨日 / 過去1週間) / ログイン論客足跡]
プロフィール私書(メール)
   /   /送済
評価(一覧   /)
投票   /共:   /
DB構築()
他己紹介
17/02/25
ブログ
[書く]
リンク集
My Play List
RSS購読
RSS
表示開始年月
分類
全て
1.作品DB初心者向け
2.作品DB関連
3.アニソン名曲紀行
4.着メロ情報
5.Archive
6.アニメとか。
7.舞台探訪
8.鉄道関連
9.Colopl
10.nijiasu
11.雑記、日常
12.他論客様 交流型
13.FLAT
14.Barnirun
コロニーな生活


第494912コロニー


↓ちょっと自作着メロなど晒してみる。
対応機種:au・SBフィーチャーフォン
Androidの方は着信音設定アプリより。

2019/08/30 UP!!
The Abyss 128和音版(岡崎体育)
http://j-ken.com/a.php?a=899122


Don't stop [FULL] MP3版
(ハンドシェイカー、Robert de Boron)
http://j-ken.com/a.php?a=893748


POP TEAM EPIC [TV size] 128和音版
(ポプテピピック、上坂すみれ)
http://j-ken.com/a.php?a=889326


最強○×計画 [TV size] 64和音版
(すもももももも 〜地上最強のヨメ〜、MOSAIC.WAV)
http://j-ken.com/a.php?a=629886


stardrops
(アステリズム -Astraythem-、霜月はるか) 128和音版
http://game-melody.com/?207681


Hop Step Jump!
(温泉むすめ ゆのはなこれくしょん、SPRiNGS) 128和音版
http://j-ken.com/a.php?a=897800


=>前の記事 【大阪】W'z (ウィズ) PV 舞台探訪レポ

1.
2019/02/24 (2019/12/01更新) 作品DB関連 > ブログ記事の横幅を意図的に拡げたいときのTips」
[この書込みのみ表示(記事URL紹介用) / 編集 / 削除 / トラバ送信 / 共有分類に追加(タグ付け)]
コメントする6個


ある時からブログページの横幅が制限(800ピクセルで固定)されてしまい、
https://sakuhindb.com/pj/Barnirun/20181013.html
のような記事で画像を横に2枚並べたい時にどうしても改行されてしまう現象を
別件で追加頂いたcssの設定で改善できたので、共有いたします。

(新規の日記ではかなりお久しぶりです、過去の舞台探訪記事なんかはちょくちょく更新しております)



【画像2枚重ねの例】

↓↓の改善手順を踏まないと、どうしても2段に分かれてしまう……




【実装手順①】

Myページの「自分のページの見た目/設定をカスタマイズ」より個人設定ページに入り、
一番下のCSS設定に以下のように入力。
(この例では1000・1500・2000・2500の4パターン作っていますが、実際の横幅はニーズにあわせて)

#b-1000 {
width: 1000px;
}
#b-1500 {
width: 1500px;
}
#b-2000 {
width: 2000px;
}
#b-2500 {
width: 2500px;
}



【実装手順②】

各記事側に、alltagタグで囲んだうえで以下のように記述。
常に広げた状態にしたくない場合は、netaタグで囲むことで
注意付隠し(ネタバレ警告)を開いている間だけサイズを広げることができます。

<ne ta><all tag><div id="b-1000">★★</div></all tag></ne ta>
1000ピクセル

<ne ta><all tag><div id="b-1500">★★</div></all tag></ne ta>
1500ピクセル

<ne ta><all tag><div id="b-2000">★★</div></all tag></ne ta>
2000ピクセル

<ne ta><all tag><div id="b-2500">★★</div></all tag></ne ta>
2500ピクセル



【実装結果】

※スマホでご覧の場合は、横幅が制限される前と同様に「PC版ページ」で表示しないと
横幅は広がっても画像は折り返されたままとなります。


[クリックすると読める部分(乱暴な言葉遣い/非難を隠す為に使わないで下さい)]
1000ピクセル


[クリックすると読める部分(乱暴な言葉遣い/非難を隠す為に使わないで下さい)]
1500ピクセル


[クリックすると読める部分(乱暴な言葉遣い/非難を隠す為に使わないで下さい)]
2000ピクセル


[クリックすると読める部分(乱暴な言葉遣い/非難を隠す為に使わないで下さい)]
2500ピクセル

★★

管理人さん、実装対応ありがとうございました。



コメントする6個


[他の記事も読む]
=>前の記事 【大阪】W'z (ウィズ) PV 舞台探訪レポ


大分類が「作品DB関連」の記事
この論客の記事全て
↑上へ