急性リンパ性白血病とサヨナラしたい‼

PH陽性ALL白血病サバイバー。子供3人の主婦のブログ

MENU

はてなブログで囲み枠の幅を調整する魔法レベルの【display:inline-block;】

f:id:gonengomogenki:20200503165700j:plain

 

他の方のブログで記事本文を囲むカスタマイズを素敵だなと思い、調べてみたらコピペで🆗なデザインがたくさんあったのですが、幅の調整はどうするのかな?と疑問が…

スポンサーリンク

 

 

囲み枠でブログをカスタマイズ

「ブログ 囲み枠」で検索するとおしゃれで可愛い囲み枠がたくさんありました。

miiko315.net

ponnkichi.hatenablog.com

 

いろいろトライしてみました👇

f:id:gonengomogenki:20200503173843j:plain

 

カラーやデザインを変えると無限にカスタマイズできます✨ 

 

 

だけど文字数が少ない時は何だか格好がつかないなーと思いパソコンとにらめっこすること数時間(^^;)

凄い記事を発見🔍

 

囲み枠の幅を自動調整できるなんて!!

ameblo.jp

 

こちらの記事によると「"display:inline-block; 」というタグを入れるだけで幅が自動調整できると書かれています✏

アメブロの記事ですがはてなブログでも問題なくできました。

 

先ほどのコピペしたものを「html編集画面」に貼り付け、

「今日の献立・ご飯・豚の生姜焼き・温野菜サラダ・味噌汁」

を入力してみます。

 

「"display:inline-block;」を入れる前は...

f:id:gonengomogenki:20200503174549j:plain

 

このようにパソコンから見た場合、右側の余白が多いですよね。

 

続いて「"display:inline-block; 」を入れてみると...

f:id:gonengomogenki:20200503175916j:plain

 

おー('◇')ゞ

これはすごい!!

めっちゃ簡単に囲み枠の幅がテキストサイズに自動調整されました✨✨✨

 

スマホからの閲覧ならそんなに気になりませんが、パソコンで見るとピッタリサイズの方がいいかなと思います(*^^*)

スポンサーリンク

 

 

最後に

この方法で少しずつ囲み枠を使ってみようかなと思いました。

ただ、ブログ歴9ヶ月経ってもド素人感は抜け出せず、いつもと違う事をすると何時間もパソコンとにらめっこして疲れました(^-^;

 

あと、センスがないので囲み枠をどこで使ったらよいかわからないかも💦

せっかくなので無理やり使ってみました(笑)👇

【display:inline-block;】を入れるだけで囲み枠が伸縮自在!!

 

 最後までお読み頂きありがとうございました。

 

 

gonengomogenki.hatenablog.com

 

 

gonengomogenki.hatenablog.com

 

 

ブログ村白血病ランキングに参加しています。

ウサギのバナーをクリック頂けると嬉しいです👇

にほんブログ村 病気ブログ 白血病へ

 

PVアクセスランキング にほんブログ村

 

 

プライバシーポリシー・お問い合わせ