忍者ブログ
抱えた借金400万。

忍者ブログのテンプレートをちょこっと改変　備忘録

2013年からこの借金ブログを始めました。

9年も経つと、世の中いろいろ変わっていきますよね。

今やブログの主流はWordpressだし、スマホの普及でモバイルファーストやレスポンシブは当たり前の装備になりました。

無料で使える古（いにしえ）のブログという感じで私は好きなのですが、パソコンで更新しているので、記事スペースの幅が少し狭い気がするなあとうすうす感じていました。



私自身はスマホでネットサーフィンしたりブログを読むことは少ないのですが、記事スペースを広げるついでにこのブログもレスポンシブにしてみようと思い立ち、この本を片手に、さらにネット検索も駆使しながら取り掛かりました。


[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

HTML＆CSSの基本がゼロから身につく! Webデザイン見るだけノート [ 服部 雄樹 ]
価格：2178円（税込、送料無料) (2022/11/17時点)

楽天で購入


たまにパソコンで見ているのにスマホ用のデザインが適用されているのか、画面いっぱいにページが表示されているサイトがありますが、あれはかなり圧があるし見にくいですね（汗）



・レスポンシブの設定


忍者ブログのテンプレート作成/編集ページで作業します。

スマホのように小さな画面で見たときには2カラムではなく1カラムになるようにviewportというものをHTML編集欄で設定します。
本に書いてある通り、
<meta name="viewport"～(max-width"600px)">
という部分までを記述します。
（私は600pxにしましたが、設定したい数字でいいと思います。）






・記事スペースの幅変更


まずは使わせてもらっているテンプレートのサイズを確認します。
この作業はCSS編集欄で行います。
横幅なので　width　という部分を見ます。ブログ全体の幅が930pxだったので、1030pxに広げました。

このとき、デザインにずれが生じてしまうので、＃MainBlockだけでなくこのコードの少し上のほうにある#HeaderBase の部分のwidthも変更しました。（Homeと書いてある青いバーのところの幅が変わります）




記事が投稿されているブロックと、右横にあるプロフィールなどが載っているブロックの2つでMainBlockという設定になっているので、さらに記事ブロック部分の幅も広げます。

それがどこかというと、上で変更したMainBlockのコードの下にある、EntryTextBoxです。

ここのwidthが580pxだったので、620pxに変更しました。





これでやりたかったことはひとまず完了です。


自分でいじる前のページをスクショし忘れてどれくらい変わったのかよく分かりません。でも地味な差ですが、少し広がって窮屈さがなくなったような気がしています。

ゼロから自分で作ったわけではない、お借りしているテンプレートなので、いろいろなところをやみくもにいじってしまうと原型がとどまらなくなって修正ができなくなるので、ほんの少しだけ、変更しました。

あとは、画面の右下に「上に戻る」ボタンを付けました。これはネットで検索したらコピペOK！と心優しい人が公開してくれていたのを使わせていただきました。

このボタン、何気に便利ですよね。マウスでのスクロールは人差し指の腱鞘炎に注意です。


一度やってしまえばそのあとずっと続くというのがなんだか固定費の節約に通じるものがあるなあとか思いながらやっていました。
PR
PR
↑