プレコレ blog

勉強や旅行について

【はてなブログ】簡単に枠の作成と編集方法『コピペ可』

今回は『はてなブログ』で使えるカスタマイズの第4弾です。はてなブログは枠のデザインによっては、投稿したらデザインが思っていたのと違うと感じる事もあるのではないでしょうか(・・?

 

私は『はてなブログ』のデザインを変えると、枠が変になってしまうことがありました(^^; 

 

ここでは、私がよく使う枠の紹介をしたいと思います。見て頂ければ『コピペ』で枠の作成と、簡単なデザイン変更方法を知ることができます!

目次

【はてなブログ】簡単に枠の作成と編集方法『コピペ可』

はてなブログ】簡単に枠の作成と編集方法『コピペ可』

 

タイトル付きの枠の作成と編集

 下の様なデザインの枠の作成について話していきます。

タイトル

〇〇〇〇

△△△△

 

 ・下記内容をHTML編集にコピペをする。

<fieldset style="padding: 10px; border: 4px solid #0106b2; border-radius: 10px;"><legend><span style="color: #333333;">

<span style="font-size: 19.2px;"><strong>タイトル</strong></span></span></legend>

<p>〇〇〇〇</p>
<p>△△△△</p>
</fieldset>

 

・デザインの編集

border: 4px ←数字が枠の太さ

solid ←solidは実線で、dashedに変えると点線

#0106b2 ←数字は枠の色

border-radius: 10px ←数字は枠の丸み

color: #333333 ←タイトルの文字の色

 

この枠は下記の様なブログで書いています。

【話題に困ってる人必見】ドライブ中のおすすめゲーム5選 - プレコレ blog

 

 

 

シンプルな枠の作成と編集 

次は下の様なシンプルな枠の作成と編集です。

〇〇〇〇

△△△△

 

・下記内容をHTML編集にコピペします。

<fieldset style="padding: 5px; border: 2px solid #e8e8e8; border-radius: 5px; background-color: #f5f5f5;">
<p>〇〇〇〇</p>
<p>△△△△</p>
</fieldset>

 

・デザインの編集

border: 2px ←数字は枠の太さ

solid ←solidは実線で、dashedに変えると点線

#e8e8e8 ←数字は枠の色

border-radius: 5px ←数字は枠の丸み

background-color: #f5f5f5 ←枠の中の背景色

 

この枠は下記の様なブログで書いています。

【想像力UP!】子供へのプレゼントにおすすめなレゴTOP3 - プレコレ blog

 

 

 

◆◇◆◇

他にもいろいろ書いているので、見て行って下さい(^^♪

【はてなブログ】簡単に文字の背景色を変更する方法 - プレコレ blog

【はてなブログ】簡単にできる行の背景色の変更方法 - プレコレ blog

【はてなブログ】簡単に見出しを編集する方法 - プレコレ blog

最後まで読んでいただきありがとうございます。

説明に不足があったり、誤字等があれば教えて頂けると助かります。