アゴ乗せ日記

適当なポジティブ日記

スポンサーリンク

【はてなブログ】イケてる囲みを作りたくなった【CSS】

ハロー


今回はイケてる囲みを作りたくなった話。

私はいつも皆さんのブログを見て勉強させてもらっている。

特にYOUBLOGさんは私のサイトが駆け出しの頃からスターとかブックマークたくさんいただいて、ブロガーとしても人としてもリスペクト。

それでよく付箋みたいなのとか囲みを使われていてとても見やすくていいなと思っていた。

↓参考

www.you-blog.net

我がブログにも導入や!!

作るもの

こんな感じ。

f:id:agonosetaro:20200318112047p:plain

やり方

皆さんはどうやっているだろう。
私の場合は仕事でテキトーにプログラマやっているので「まぁこうやって実現できるな」という感じで作っていく。

アイコン準備

私の過去記事でもよく登場するが『fontawesome』を使用する。

設定>詳細設定>検索エンジン最適化>headに要素を追加に以下のコードを追加

<link href="https://use.fontawesome.com/releases/v5.10.2/css/all.css" rel="stylesheet"/>

今回は電球のアイコンを使う。

f:id:agonosetaro:20200318114114p:plain:h200

デザインCSSに追加

電球アイコンのUnicodeは『f0eb』なので::beforecontent部分に記載する。

.point {
    position: relative;
    margin: 2em 0;
    padding: 2.5em 2em;
    border: solid 3px #FFDEAD;
    border-radius: 8px;
    background: #FFFAF0;
}
.point::before {
    font-family: "Font Awesome 5 Free"; 
    content: "\f0eb  POINT";
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 5px 10px;
    line-height: 1;
    font-size: 19px;
    background: orange;
    color: #FFF;
    font-weight: bold;
    border-bottom: 1px double orange;
    border-radius: 5px;
    font-size: 1rem;
}

準備は以上。

使用方法

<div class="point">
    私のブログはテキトーなのである。
</div>
私のブログはテキトーなのである。

終わり

日々成長

以上!!

スポンサーリンク