文章を四角枠でかこんで見やすくする【ブログカスタマイズ】

スポンサーリンク

はじめに

どうも、サーロインです。

他の方のブログを見ていると、文章を四角で囲って見やすく表示している人をよく見かけます。

こんな感じのやつです↓↓ f:id:tkhstol-929:20181106231453p:plain

ずっとやりたいなあと思いながら調べるのを後回しにしていましたが、先日ようやく重い腰を上げて調べました。
備忘録として残しておきます。

HTMLでブログ記事を書く

とはいっても、ググって出てきたサイトの真似をしただけです(笑)↓↓

saruwakakun.com

枠線パターンが30通りも載っていてとても便利なサイトでした。
私は↑の27番のデザインを使わせてもらっています。

枠線で囲むためにはhtmlのdivspanなどのタグを使わないといけません。
はてなブログでHTML記述をする場合、見たまま記法ならば編集画面の上部に「HTML編集」というタブがあるのでそこをクリックすればOKです。

f:id:tkhstol-929:20181106232251p:plain

Markdown記法の場合は、そのまま記事中に直にHTMLソースを書いて問題ありません。
はてな記法は使ったこと無いのでわかりません。すみません。

実際のhtmlとCSSの記述例

冒頭の画像のようにしたい場合は以下のようにHTMLを記述します。

<div class="conclusion"><span class="conclusion-title">まとめ</span>
<p>技術記事は自分の備忘録になるし、人の助けになることもある。</p>
<p>文に起こすことであやふやな部分をなくすこともできる。</p>
<p>しかし誹謗中傷のリスクや、PVが少ない点に注意しないといけない。</p>
</div>




CSSはこんな感じ↓↓

.entry-content .conclusion {
  position: relative;
  margin: 2em 0;
  border: solid 3px #62c1ce;
  padding-top: 1em;
  padding-right: 1em;
  padding-left: 1em;
  padding-bottom: 0.5em;
}
.entry-content .conclusion .conclusion-title {
  position: absolute;
  display: inline-block;
  top: -27px;
  left: -3px;
  padding: 0 9px;
  height: 25px;
  line-height: 25px;
  vertical-align: middle;
  font-size: 17px;
  background: #62c1ce;
  color: #ffffff;
  font-weight: bold;
  border-radius: 5px 5px 0 0;
}

以上

にほんブログ村 IT技術ブログへ
にほんブログ村