サンプルの使い方

はじめに

記事を書くときによく使う定型文をまとめました。
すぐに使えるようにスタイルごとに用意しています。

使い方

各記事内にhtmlとcssを用意しています。
使い方としては以下を想定しています。

  • html: 定型文として登録
  • css: デザイン設定cssに記載

html/cssのサンプル

See the Pen フリーボックス(背景色・角丸なし) by kzwmk (@kzwmk) on CodePen.

トラブルシューティング

スタイルがうまく反映されない時

メディアによっては本ブログに記載されているコードをそのまま使っても反映されない部分があるかもしれません。 その場合は、cssの指定方法を変えてみてください。

.freebox-wrapper {
    border: 1px solid #4682b4;
    margin-bottom: 1em;
    padding: 20px;
}

cssの指定の最初に .page-entry .entry-content を追加します。

.page-entry .entry-content .freebox-wrapper {
    border: 1px solid #4682b4;
    margin-bottom: 1em;
    padding: 20px;
}

カラーコード参考

色に迷ったらここ。原色・和色・洋色など様々なカテゴリーから選べます。 www.colordic.org

ご注意
  • 本サンプルページは、コーディングの知識をお持ちの方を対象としています。
    技術的なサポートや、具体的なコーディング方法はご案内しておりません。
  • 記述内容によっては、ブログが正しく表示されない等の表示不具合を引き起こす可能性があります
  • 将来のはてなブログの仕様変更によって、記述した内容が予告なく正常に動作しなくなることがあります
  • 本保管庫への記載内容をベースとした細かな個別デザイン修正についてはてなにての対応をご希望の場合は、基本的に有償でのご対応となります。営業担当もしくは問い合わせフォームよりお問い合わせください。
  • ご利用中のブログのカスタマイズ状態によっては、サンプル画像の通りに再現されない場合があります。
    • 他の要素ですでに同じ名前のクラスを使用していないか(class="xxxx" 部分)をご確認いただき、
      使用されている場合は本ページより追加いただく要素のクラス名を変更してください。
    • ブログのレイアウト崩れを防ぐため、今まで使われていた要素に付与されているクラス名の変更は行わないようお願いします。
    • HTML側のクラス名を変更した際は、CSS側のクラス(.xxxx 部分)も同じように変更してください。