IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

【コピペok】はてなブログ 記事デザインサンプル集 スマホも簡単にカスタマイズ可能! | はてなブログデザインカスタマイズ

f:id:Surprisedblog:20200613150941p:plain

 

 

はてなブログの記事用デザインのパーツを備忘録ついでにツール的な感じでまとめました。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;
}

 

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
 
 
 

 

styleタグ コメント
<style>
 
</style>