はてなブログにはカスタム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。
広告




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