« 2019/10/5 自転車で行く夜景スポット+(其の24) | トップページ | ドラレコ 「azur DRX-315」 電池交換 »

「カスタムCSS(スタイルシート)」でブログ記事等の幅を変更

今回の記事は「ココログ」のユーザ限定、というか自分への覚書も兼ねてってことで。
2019/9/30でココログが提供する一部テンプレートの提供が終了しました。このお知らせをすっかり忘れていた私は10月に入り前の記事を書く時にやっと気が付いたという。(^_^;

早速提供されている中から似たようなテンプレートを選択、切り替えてみると・・・
全然反映されないじゃん!(^_^;
後から解ったことですが、これは反映に時間がかかっていただけの様。ブラウザにもよりますが、しばらく待つかブラウザのキャッシュをクリアすることで解決。(これでもダメな場合があるらしい)

ブログを開設して早8年、初めてタイトルバナーを設定したりと標準で提供されているカスタマイズ範囲でゴニョゴニョと。でもひとつだけどうしてもできなかったことが。それが記事欄の横幅設定。
私のブログはご覧のとおり両側にサイドバー、真ん中に記事欄というレイアウト。記事やサイドバー幅はカスタムテンプレートでも設定出来ますが、その設定範囲は最大500px迄なのです。
どうやら以前のレイアウト(記事幅)ではそれ以上の幅だった様で500pxでは表示上の改行位置が変わってしまい見苦しい見映えに。貼り付けている動画のサムネイルも以前の記事幅に合わせ520pxで統一していたのでこれも右側が20pxちょちょ切れています。これは辛抱なりません。

調べてみるとブログのデザイン変更機能から「カスタムCSS(スタイルシート)」を設定すれば変えられる模様。が、Web上で紹介されているCSSを色々試すもどうしても変えることが出来ず。
「ひょっとして2019/3月の大幅リニューアル前後で変わったのかも?」と思い現在のブログのソースを開き設定されているスタイルシートを表示、それらしい箇所をコピペして編集することでなんとか解決することが出来ました。詳しい方ならなんでもないことでしょうが、リニューアル後だとこれで結構悩まれている方も多いのではと。記事欄等の幅変更限定ですが参考になれば。

また前置きが長くなりました。(^_^;
難しいことはさておき(笑)設定方法をば。

ココログの管理ページにログイン、「ブログ一覧」から「デザイン」を選択。

_r

「デザイン」の中から「カスタムCSSを編集」を選択。

_r_20191013115401

「カスタムCSS」の入力ボックスにスタイルシートを入力。

Css_r_20191013122101

入力内容は下記をコピペするだけ。

#container {width: 960px;}
#left {width: 200px;}
#right {width: 200px;}
#center {width: 560px;}

内容は読んでもらえば大体解るかと。幅を変えるならこれだけです。(^_^;
「#container」が全体の幅なので記事欄、サイドバーをお好みの幅に変更したら合計が全体の幅になる様に設定してもらえば良いです。但し全体幅は1100px以上だと色々不都合があるとか。
前述したとおり反映に時間がかかる場合があるので待つのがイヤ(笑)ならとっととブラウザのキャッシュをクリアしてください。全体の幅が決まったらタイトルバナー横幅も合わせて頂ければと。

Web上に多々紹介されていた記事、参考例との違いを見てみると「#」の後の記述が違っていました。上記は読んで字の如く「左・右・真ん中」と非常に解りやすいですが、この記述はどこにも紹介されていませんでした。私が見つけられなかっただけかも知れませんが。(^_^;

今回はブログ記事の幅変更のみですが、このスタイルシートを上手く使うと自分好みに色々とカスタマイズ出来る様なので興味がある方は色々試してみてはいかがでしょうか。でもブログ開設8年間も何もしなかった私はたぶん凝ったカスタマイズはこの先もしないと思います。(^_^;

|

« 2019/10/5 自転車で行く夜景スポット+(其の24) | トップページ | ドラレコ 「azur DRX-315」 電池交換 »

ウェブログ・ココログ関連」カテゴリの記事

パソコン・インターネット」カテゴリの記事

日記・コラム・つぶやき」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




« 2019/10/5 自転車で行く夜景スポット+(其の24) | トップページ | ドラレコ 「azur DRX-315」 電池交換 »