WordPress Twenty Sixteen カスタマイズ 7-3「罫線」編オマケソースコードまとめ

ごけたです。
「Wordpress 罫線」で検索すると「表」関連の記事が多いようです。

はじめに
その7からその7-2までのソースコードをまとめて表示
さいごに

はじめに

WordPress Twenty Sixteen カスタマイズその6-3
今回は「罫線」編の続きです。
「その7」シリーズのまとめとして、「その7-2」までに
「style.css」ファイルに入力したソースコードを表示してみました。

ページ構成
画像、ソースコード、その下に説明文の構成になっています。
画像はクリックすると拡大されて表示されます。
リンクは予告なく削除される場合がございます。
OSはWindows、ブラウザーはchrome、
レンタルサーバーはエックスサーバーです。

その7からその7-2までのソースコードをまとめて表示

Theme Name: Twenty Sixteen Child
Template: twentysixteen

1 2	Theme Name: Twenty Sixteen Child Template: twentysixteen

はじめは「子テーマ用」ソースコードから。

ここから「その7」の設定です。

/* 投稿記事を罫線で囲む */
.entry-content,
.entry-summary {
    border: 5px solid #0b6617;
}

/* 投稿記事を罫線で囲む */
.entry-content,
.entry-summary {
       border: 5px solid #0b6617;
　　　　padding: 10px 20px 30px 40px;  /* 記事と罫線の余白調整を追加 */
}

/* 投稿記事を罫線で囲む */

.entry-content,

.entry-summary {

border: 5px solid #0b6617;

}

/* 投稿記事を罫線で囲む */

.entry-content,

.entry-summary {

border: 5px solid #0b6617;

　　　　padding: 10px 20px 30px 40px; /* 記事と罫線の余白調整を追加 */

}

ここからは「/* 投稿記事を罫線で囲む */」内の設定で変更や追加です。

/* 投稿記事を罫線で囲む */
.entry-content,
.entry-summary {
border: thick dotted #0b6617;
padding: 20px 50px 90px 70px; /* 角の丸い罫線-4つの半径で囲む */
border-radius: 20px 50px 90px 70px; /* 角の丸い罫線-4つの半径で囲む */
box-shadow: -10px -15px 5px #aaaaaa; /* 丸い罫線のぼかし-左横方向、左縦上方向 */
}

/* 投稿記事を罫線で囲む */

.entry-content,

.entry-summary {

border: thick dotted #0b6617;

padding: 20px 50px 90px 70px; /* 角の丸い罫線-4つの半径で囲む */

border-radius: 20px 50px 90px 70px; /* 角の丸い罫線-4つの半径で囲む */

box-shadow: -10px -15px 5px #aaaaaa; /* 丸い罫線のぼかし-左横方向、左縦上方向 */

}

こちらが「/* 投稿記事を罫線で囲む */」の最終形態。

/* 投稿欄を罫線で囲む */
.site-main &gt; article {
    margin-bottom: 7.0em;
    border: thick dotted #0b6617; /* 罫線の太さ、種類、色指定 */
    padding: 20px 50px 90px 70px;  /* 角の丸い罫線-4つの半径で囲む */
    border-radius: 20px 50px 90px 70px;  /* 角の丸い罫線-4つの半径で囲む */
    box-shadow: -10px -15px 5px #aaaaaa; /* 丸い罫線のぼかし-左横方向、左縦上方向 */
}

/* 投稿欄を罫線で囲む・スマホ画面の調整*/
.site-main &gt; article {
        margin: 0 1.0em 3.5em 1.0em;  /* 2-6-1:スマホ画面用-左右余白追加調整 */
        position: relative;
}

/* 投稿欄を罫線で囲む */

.site-main > article {

margin-bottom: 7.0em;

border: thick dotted #0b6617; /* 罫線の太さ、種類、色指定 */

padding: 20px 50px 90px 70px; /* 角の丸い罫線-4つの半径で囲む */

border-radius: 20px 50px 90px 70px; /* 角の丸い罫線-4つの半径で囲む */

box-shadow: -10px -15px 5px #aaaaaa; /* 丸い罫線のぼかし-左横方向、左縦上方向 */

}

/* 投稿欄を罫線で囲む・スマホ画面の調整*/

.site-main > article {

margin: 0 1.0em 3.5em 1.0em; /* 2-6-1:スマホ画面用-左右余白追加調整 */

position: relative;

}

「/* 投稿記事を罫線で囲む */」をこの「/* 投稿欄を罫線で囲む */」で囲む設定。
最後は「/* 投稿記事を罫線で囲む */」を削除して
「/* 投稿欄を罫線で囲む */」だけの設定に変更しました。

ここから「その7-1」の設定です。

/* ウィジェットの罫線の太さ、種類、色指定 */
.widget {
        border-top: thick dotted #0b6617;  7-1:/* 太さ、種類、色指定を変更 */
}

/* ウィジェットの罫線の太さ、種類、色指定 */
.widget {
        border-top: none;  /*7-1:罫線を非表示する */
}



/* 前のページ、次のページの「上下」に付く罫線の色指定 */
.post-navigation {
    border-top: thick dotted #0b6617;  /* 7-1:太い、点線、緑系に変更 */
    border-bottom: thick dotted #0b6617;  /* 7-1:太い、点線、緑系に変更 */
}

/* 前のページ、次のページの「上下」に付く罫線の色指定 */
.post-navigation {
    border-top: 0px;  /*罫線を非表示する */
    border-bottom: 0px;  /*罫線を非表示する */
}



/* コメントを残すの上に付く罫線の色指定 */
.comments-title,
.comment-reply-title {
    border-top: thick dotted #0b6617;  /* 7-1:太い、点線、緑系に変更 */
}

/* コメントを残すの上に付く罫線の色指定 */
.comments-title,
.comment-reply-title {
        border-top: 0px;  /*罫線を非表示する */
}



/* メニューからカテゴリーを選択した時に記事タイトルの上の罫線の変更 */
.page-header {
    border-top: thick dotted #0b6617; /*7-1:太い、点線、緑系に変更 */
}

/* メニューからカテゴリーを選択した時に記事タイトルの上の罫線の変更 */
.page-header {
    border-top: 0px;  /*罫線を非表示する */
}

/* ウィジェットの罫線の太さ、種類、色指定 */

.widget {

border-top: thick dotted #0b6617; 7-1:/* 太さ、種類、色指定を変更 */

}

/* ウィジェットの罫線の太さ、種類、色指定 */

.widget {

border-top: none; /*7-1:罫線を非表示する */

}

/* 前のページ、次のページの「上下」に付く罫線の色指定 */

.post-navigation {

border-top: thick dotted #0b6617; /* 7-1:太い、点線、緑系に変更 */

border-bottom: thick dotted #0b6617; /* 7-1:太い、点線、緑系に変更 */

}

/* 前のページ、次のページの「上下」に付く罫線の色指定 */

.post-navigation {

border-top: 0px; /*罫線を非表示する */

border-bottom: 0px; /*罫線を非表示する */

}

/* コメントを残すの上に付く罫線の色指定 */

.comments-title,

.comment-reply-title {

border-top: thick dotted #0b6617; /* 7-1:太い、点線、緑系に変更 */

}

/* コメントを残すの上に付く罫線の色指定 */

.comments-title,

.comment-reply-title {

border-top: 0px; /*罫線を非表示する */

}

/* メニューからカテゴリーを選択した時に記事タイトルの上の罫線の変更 */

.page-header {

border-top: thick dotted #0b6617; /*7-1:太い、点線、緑系に変更 */

}

/* メニューからカテゴリーを選択した時に記事タイトルの上の罫線の変更 */

.page-header {

border-top: 0px; /*罫線を非表示する */

}

表示場所は違っていますが、「罫線の太さ、種類、色指定」の設定。
設定した後に非表示の方法も設定。

ここから「その7-2」の設定です。

/* スマホ、タブレット画面メニュー「outset」 */
.menu-toggle {
    background-color: transparent;
    border: 5px outset #d1d1d1; /* 7-2:solidをoutsetに変更 */
    color: #1a1a1a;
}


/* メニューをタップした時に罫線「inset」 */
.menu-toggle.toggled-on,
.menu-toggle.toggled-on:hover,
.menu-toggle.toggled-on:focus {
    background-color: #fff;  /* 7-2:背景色を変更 */
    border-color: #1a1a1a;  
    color: #1a1a1a;  /* 文字色を変更 */
    border: 5px inset #0b6617;  /* その7-2:罫線「5px、inset」を追加設定 */
}


/* メニューボタンをタップして、タイトル一覧を閉じた時に罫線「inset」 */
.menu-toggle:hover,
.menu-toggle:focus {
    background-color: #fff;  /* 7-2:背景色を変更 */
    border-color: #007acc;
    color: #1a1a1a;  /* 7-2:文字色を変更 */
    border: 5px inset #0b6617;  /* その7-2:罫線「5px、inset」を追加設定 */  
}