IT the Best
- カラーボックス - 背景色,枠線,アイコン付き
- 文字の強調表示 1 - 下線,マーカー
- 文字の強調表示 2 - 囲い
- ブログカードのヘッドアイコン
- 記事ページ,一覧ページのカテゴリーリンク
- BorderRadius
- Border
- 背景色
- 影
- バッジ
はてなブログの記事用デザインのパーツを備忘録ついでにツール的な感じでまとめました。CSSを生成するツールになっているため、クラス名・スタイルの変更が可能です。(ブラウザによっては正常に動作しないかも...)
スマホからでも簡単に、カスタマイズから実装までができるようにスタイルの編集、ボタンでコードのコピーができるようになっています。
コピペOKです。
コピー用テキストエリア(ページ下部)を設置したので、使用したいデザイン(スタイル)をまとめてコピーすることが可能です。
- コピー用テキストエリアにスタイルを追加する場合は、「追加」ボタンを押してください。
補足
アイコンはFontAwesomeを使用しています。
カラーボックス - 背景色,枠線,アイコン付き
p
.color-box
.cb-large .cb-orange .cb-yellow .cb-blue .cb-red .cb-green .cb-gray .cb-border .cb-bb .cb-bl .cbb-orange .cbb-pink .cbb-red .cbb-skyblue .cbb-blue .cbb-green
.cb-deep
.cb-border .cbd-yellow .cbd-orange .cbd-blue .cbd-navy .cbd-red .cbd-green .cbd-gray
.cb-title
.cb-orange .cb-blue
.cb-icon .cb-icon:before
.cbi-information:before .cb-orange::before .cb-blue::before .cb-green::before
タイトルhtmlcssjs
レスポンシブデザイン
@media screen and (max-width: 500px) {
.color-box.cb-icon {
padding: 0 20px 20px;
}
.color-box.cb-icon:before {
font-size: 30px;
line-height: 30px;
padding: 10px 0 5px;
text-align: center;
display: block;
position: unset;
border-bottom: 1px solid;
border-right: 0;
}
}
文字の強調表示 1 - 下線,マーカー
span
.under
.u-blue .u-green .u-yellow .u-red .u-orange
.marker
.m-blue .m-red .m-green .m-yellow .m-orange .m-gray .m-pink
タイトルhtmlcssjs
文字の強調表示 2 - 囲い
span
.highlight
.h-blue .h-green .h-red
タイトルhtmlcssjs
ブログカードのヘッドアイコン
p>iframe
.blog-card
.bc-icon .bc-icon::before
.bci-reference::before .bci-google::before .bci-border::before .bci-bb::before .bcib-red::before .bcib-blue::before .bcib-green::before
.bci-under .bci-under::before
.bciu-red::before .bciu-green::before .bciu-blue::before
.bci-slice .bci-slice::before
.bcis-blue::before .bci-sgreen::before
タイトルhtmlcssjs
記事ページ,一覧ページのカテゴリーリンク
はてなブログの初期テーマのCSS
.categories a {
display: inline-block;
background: #e9f0f2;
margin: 0 .3em 0 0;
padding: 0 10px;
font-size: 12px;
}a
.entry-category-link .archive-category-link
タイトルhtmlcssjs
BorderRadius
div
.br-02em .br-05em .br-2em .br-4em .br-5em .btr-02em .btr-05em .btr-2em .btr-4em .btr-5em .bbr-02em .bbr-05em .bbr-2em .bbr-4em .bbr-5em
タイトルhtmlcssjs
Border
div
.b1-light .b1-med .b1-dark
タイトルhtmlcssjs
背景色
div
.bg-light .bg-gray
タイトルhtmlcssjs
影
div
.bs-light .bs-med .bs-large
タイトルhtmlcssjs
バッジ
全パターン
p
.badge
.badge-x-small .badge-small .badge-medium .badge-large .badge-x-large .badge-lightwhite .badge-white .badge-darkwhite .badge-lightblack .badge-black .badge-lightgray .badge-gray .badge-darkgray .badge-lightred .badge-red .badge-darkred .badge-lightblue .badge-blue .badge-darkblue .badge-navy .badge-lightgreen .badge-green .badge-darkgreen .badge-lightorange .badge-orange .badge-darkorange .badge-lightyellow .badge-yellow .badge-darkyellow
タイトルhtmlcssjs
<style>
</style>
