はてなブログのCSSで画像を相対的に中央寄せにするのでR

はてなブログにはカスタムCSSの機能があるのでR。

それで、CSSをいじれるのでR。

ただし、

テーマによってはCSSをいじってもうまくいかないことがあるのでR。

例えば、画像の中央寄せは、

「ダッシュボード」→「デザイン」→「カスタマイズ」→「カスタムcss」に、概要の要素に関してそこで、この方の記事を参考にして

text-align: center;

と挿入しても機能しないことがあったのでR。

そこで、次の手段として

margin: 0 auto;

を挿入しても、これも機能しなかったのでR。

さらに、

display: inline-block;

を導入してもこれもうまく機能しなかったのでR。

ただし、

margin-left:15px;

のように、左側のスキマを開けるべくpx指定ならうまくいくのでR。

ただし、

これでは、絶対的な値なので、画面サイズに合う形にはならないのでR。

そこで、これを相対的にするために、ここの方の記事を参考にcalc()を導入して、

margin-left: calc(50% - 100px);
background-position: 50% 50%;

としたらうまくいったのでR。

ちなみに、background-positionは、50%という値を、topとleftで設定して、Background Imageを中心に位置させるものでR。さらに、画像のwidthが200pxなら、その半分を中心に100pxとしてcalc()で配置させるとに画像が相対的に中心にきたのでR。

background-positionに関しては、この方の記事を参考にしたのでR。

はてなブログのカスタマイズも含めて、はてなブログには下の本はとても分かりやすい本なのでR。




月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』
年間920円(税抜)からの格安ドメイン取得サービス─ムームードメイン─




この記事をシェアできます。