CSSコードサンプル

サイトの紹介と使い方動画


created: 2021/07/31 modified: 2021/09/14

初めに

WordPressで使用していますが、他のホームページにも流用可能です。
WordPressの場合>ファイル:(Cocoon child の) Style.css

記事管理(リスト用)

CSS 分類コード:01xx

パンくずリスト

/*<--- 0101 */
my-bread-crumb{
  padding:			0rem;
  margin:			0rem;
}

.my-bread-crumb li{
  display:          inline;
  list-style:       none;
  font-size:        1.5rem;
  font-weight:      bold;
}

.my-bread-crumb li:after{
  content:          ">";
  padding:     		0.3rem;
}

.my-bread-crumb li:last-child:after{
  content:          "";
}

.my-bread-crumb li a {
  text-decoration: none;
  color:           #52b5ee;
}

.my-bread-crumb li a:hover {
  text-decoration: underline;
}
/* 0101 --->*/

Menuリスト

/*<--- 0102 */
my-menu-list{
  padding:     0rem;
  margin:      0rem;
}

.my-menu-list li{
  display:          inline;
  list-style:       square-button;
  border-style:		solid;
  border-radius:	1rem;
  font-size:        1.5rem;
  font-weight:      bold;
  padding:			0.3rem;
}

.my-menu-list li a {
  text-decoration: none;
}

.my-menu-list li a:hover {
  text-decoration: underline;
}
/* 0102 --->*/

記事一覧

/*<--- 0103 */
my-link-list{
  padding:     0rem;
  margin:      0rem;
}

.my-link-list li{
  display:          block;
  list-style:       none;
  font-size:        1.5rem;
  font-weight:      bold;
  padding:			0.3rem;
}

.my-link-list li a {
  text-decoration: none;
}

.my-link-list li a:hover {
  text-decoration: underline;
}
/* 0103--->*/

エディタブロック

CSS分類コード:05xx
WordPressのエディタ ブロックをカスタマイズします。

コードブロック

/*<--- 0501 */
.my_code_block{
  border:			3px solid #006400;
  padding:			1rem;
}
/* 0501 --->*/

画像ブロック

/*<--- 0502 */
.my_img_block{
  border:			2px solid #000000;
  padding:			1rem;
}
/* 0502 --->*/

メールアドレス:

お問合せ・御要望

  • お問合せ
  • トップへ戻る
    タイトルとURLをコピーしました