アフィンガー・比較表の作り方メモ
完全なる自分用メモです。
■表の作り方（ぽんひろさん）474行目〜
/************************************
** 横長テーブル
************************************/
.p-sticky-table{
white-space: nowrap;
line-height:1.6;
}
.p-sticky-table table{
border:none;
border: 1px solid #dedede ;
border-bottom: none;
border-collapse: collapse;
word-break: break-all;
table-layout: fixed;
display:block;
overflow:scroll;
max-height: 80vh;
}
.p-sticky-table thead th:first-child {
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
z-index: 3;
}
.p-sticky-table thead th {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
text-align:center;
}
.p-sticky-table tbody th:first-child{
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 1;
border:none;
white-space: normal;
min-width: 130px;
}
.p-sticky-table th, .p-sticky-table td {
min-width: 50px;
text-align: left;
font-size: 16px !important;
position: relative;
padding: 13px !important;
color: #333 ;
border: none !important;
z-index: 0;
vertical-align:middle !important;
background:#fff;
}
.p-sticky-table th{
background:#f0f9ff !important;
letter-spacing: 1px;
font-weight: 500 !important;
color: #555 !important;
}
.p-sticky-table tr{
border-bottom:none !important;
}
.p-sticky-table img{
margin: 10px auto;
display: block;
padding: 0;
max-width: 80% !important;
}
.p-sticky-table table th::before, .p-sticky-table table td::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
border-right: 1px solid #dedede ;
border-bottom: 1px solid #dedede ;
z-index: -1;
}
/* スマホ */
@media screen and (max-width: 560px) {
.p-sticky-table table {
max-height: 60vh;
}
.p-sticky-table thead th:first-child, .p-sticky-table tbody th:first-child {
min-width: 25vw;
}
.p-sticky-table th, .p-sticky-table td {
font-size: 12px !important;
padding: 7px !important;
}
}
/* 中央寄せ */
.pst-center td {
text-align: center;
}
✔︎ 表スクロール（子テーマのfunction.phpに）259~286行目
function p_table_func() {
echo <<< EOM
<link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.1.10/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@1.1.10/js/scroll-hint.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function(){
new ScrollHint('.js-scrollable', {
remainingTime: 3000,
i18n: {
scrollable: 'スクロールできます'
}
});
});
</script>
EOM;
}
add_action( 'wp_footer', 'p_table_func' );
■比較表ぽんひろさん 266〜436
/************************************
** 比較表
************************************/
/* 比較表全体 */
.compare-box {
display:-webkit-box;/* 配置 */
display:-ms-flexbox;/* 配置 */
display:flex;/* 配置 */
max-width:600px;/* 横幅 */
margin: 0 auto 2rem;/* 余白 */
border-radius:4px;/* 角丸 */
box-shadow: 0 1px 3px rgba(0, 0, 0, .2); /* 影 */
background: #fef9ed ; /* 背景色 */
}
/* 左のボックス、右のボックス */
.compare-box .compare-left-wrap, .compare-box .compare-right-wrap{
width:50%;/* 横幅半分ずつ */
overflow:hidden;/* はみ出さないように*/
}
/* 左のタイトル、右のタイトル */
.compare-box .compare-left-head, .compare-box .compare-right-head{
background: #fdc44f ; /* 背景色 */
text-align: center;/* 中央寄せ */
color: #FFF ; /* 文字色 */
font-weight: bold;/* 文字太さ */
padding:0em 1em;/* 余白 */
font-size:15px;/* 文字大きさ */
line-height:1.5;/* 行間 */
height:65px;/* 縦幅 */
display:table-cell;/* 形式 */
vertical-align:middle;/* 高さ中央寄せ */
width:1000px;/* 横幅 */
}
/* 左のタイトル */
.compare-box .compare-left-head{
border-radius:4px 0 0 0;/* 角丸 */
}
/* 右のタイトル */
.compare-box .compare-right-head{
border-radius:0 4px 0 0;/* 角丸 */
}
/* 左のコンテンツ、右のコンテンツ */
.compare-box .compare-left, .compare-box .compare-right{
padding:1.5em;/* 余白 */
font-size:15px;/* 文字大きさ */
line-height:2;/* 行間 */
text-align: justify;/* 段落両端 */
text-justify: inter-ideograph;/* 段落両端 */
}
/* 文章 */
.compare-box p {
padding: 0;/* 余白 */
margin: 0 0 20px 0;/* 余白 */
}
/*スマホで見たとき*/
@media screen and (max-width: 480px){
/* 左のタイトル、右のタイトル */
.compare-box .compare-left-head, .compare-box .compare-right-head{
font-size:12px;/* 文字大きさ */
height:50px;/* 高さ */
}
/* 左のコンテンツ、右のコンテンツ */
.compare-box .compare-left, .compare-box .compare-right {
padding: 1.2em;/* 余白 */
font-size: 12px;/* 文字大きさ */
}
}
/************************************
** 比較表 箇条書き(記号)
************************************/
/* 箇条書き(記号) */
.compare-box .list{
list-style: none !important;/* 行頭記号リセット */
padding:0 !important;/* 余白リセット */
margin:0 !important;/* 余白リセット */
border:none !important;/* 線リセット */
}
/* 箇条書き 行 */
.compare-box .list li {
border-bottom:1px dashed #cdcdcd ;/* 線(太さ 種類 色) */
position: relative;/* 配置 */
margin:0.5em 0 !important;/* 余白 */
max-width:500px;/* 横幅 */
padding: 0 0 0.7em 1.4em !important;/* 余白 */
line-height:1.8;/* 行間 */
}
/* 箇条書き 行最後 */
.compare-box .list li:last-child{
border:none;
}
/* 箇条書き 行頭記号 */
.compare-box .list li:before {
background-color: #ffa952 ; /* 色 */
position: absolute;/* 配置 */
content: '';/* 空文字 */
top: 10px;/* 上からの距離 */
left: 7px;/* 下からの距離 */
width: 7px;/* 横幅 */
height: 7px;/* 縦幅 */
border-radius: 4px;/* 角丸 */
}
/*スマホで見たとき*/
@media screen and (max-width: 480px){
/* 箇条書き 行頭記号 */
.compare-box .list li:before {
top: 9px;/* 上からの距離 */
left: 3px;/* 下からの距離 */
width:5px;/* 横幅 */
height:5px;/* 縦幅 */
}
}
/************************************
** 比較表 箇条書き(番号)
************************************/
/* 箇条書き(番号) */
.compare-box .list-number{
counter-reset:number; /* 番号リセット */
list-style: none !important;/* 行頭番号削除) */
padding:0 !important;/* 余白リセット */
margin:0 !important;/* 余白リセット */
border:none !important;/* 線リセット */
}
/* 箇条書き(番号) 行 */
.compare-box .list-number li {
position: relative;/* 配置 */
margin:0.5em 0 !important;/* 余白 */
max-width:500px; /* 横幅 */
padding: 0 0 0.5em 1.8em !important;/* 余白 */
line-height:1.8;/* 行間 */
border-bottom:1px dashed #cdcdcd ;/* 線(太さ 種類 色) */
}
/* 箇条書き 行最後 */
.compare-box .list-number li:last-child{
border:none;
}
/* 箇条書き(番号) 行頭番号 */
.compare-box .list-number li:before {
counter-increment: number;/* 番号 */
content: counter(number);/* 番号 */
background-color: #fdc44f ; /* 背景色 */
color: #fff ; /* 番号色 */
position: absolute;/* 配置 */
font-weight:bold;/* 文字太さ */
font-size: 12px;/* 文字大きさ */
border-radius: 50%;/* 角丸 */
left: 0;/* 左からの距離 */
top:5px;/* 上からの距離 */
width: 18px;/* 横幅 */
height: 18px;/* 縦幅 */
line-height: 18px;/* 行間 */
text-align:center;/* 中央寄せ */
}
/* 箇条書き 行頭記号リセット */
.compare-box .list-number li:after{
content:'';
}
/*スマホで見た時*/
@media screen and (max-width: 480px){
/* 箇条書き(番号) 行 */
.compare-box .list-number li{
padding: 0 0 0.5em 1.8em !important;/* 余白 */
}
/* 箇条書き(番号) 行頭番号 */
.compare-box .list-number li:before {
font-size:10px;/* 文字大きさ */
width: 16px;/* 横幅 */
height: 16px;/* 縦幅 */
line-height: 16px;/* 行間 */
top:2px;/* 上からの距離 */
}
}
■メリット、デメリット追加CSS 437〜473
/************************************
** 比較表セパレート
************************************/
/* 全体左 */
.compare-box-separate .compare-left{
background:#FFFDE7 !important;
height:100%;
}
/* 全体右 */
.compare-box-separate .compare-right{
background:#f4fbff !important;
height:100%;
}
/* タイトル左 */
.compare-box-separate .compare-left-head{
background:#FFC107 !important;
}
/* タイトル右 */
.compare-box-separate .compare-right-head{
background:#337ab7 !important;
}
/* 箇条書き(記号) 行頭番号 左 */
.compare-box-separate .compare-left .list li:before {
background:#FFC107 !important;
}
/* 箇条書き(番号) 行頭番号 左 */
.compare-box-separate .list-number li:before {
background:#FFC107 !important;
}
/* 箇条書き(記号) 行頭番号 右 */
.compare-box-separate .compare-right .list li:before {
background:#337ab7 !important;
}
/* 箇条書き(番号) 行頭番号 右 */
.compare-box-separate .compare-right .list-number li:before {
background:#337ab7 !important;
}
■ビジュアルエディターのスタイルシート（こちらは部分修正）
/*--------------------------------
各フォント設定
---------------------------------*/
div,
p {
font-size: 16px;
line-height: 35px;
margin-bottom: 50px;
}
■子テーマのビジュアルエディタのスタイルシートに貼り付ける（こちらで全体修正をする）
* {
font-family:sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue","Hiragino Kaku Gothic ProN","メイリオ",meiryo,sans-serif;
margin: 0px;
padding: 0px;
}
/* Noto Sans Japanese */
.st-notosans,
.st-notosans * {
font-family: 'Noto Sans JP', sans-serif!important;
}
/* Rounded M+ 1c */
.st-m1c,
.st-m1c * {
font-family: 'Rounded Mplus 1c', sans-serif!important;
}
.EnlighterJSRAW {
margin-bottom:20px;
}
body.mceContentBody {
margin: 9px 10px;
background-color: #fff ;
counter-reset: stcnt;
}
div {
padding:10px;
border:1px #ccc dotted;
margin-bottom:10px;
}
.st-editor-margin {
margin-bottom:10px!important;
}
.st-animate::before {
content: '動';
color: #fff ;
font-size:80%;
background: #81D4FA ;
font-weight: normal;
padding:1px 3px;
}
.ephox-snooker-resizer-bar {
margin: 0;
padding: 0;
}
/* 挿入アイコン2 */
.hatenamark2:before {
content: "\f059";
font-family: FontAwesome;
margin-right:7px;
}
.attentionmark2:before {
content: "\f06a";
font-family: FontAwesome;
margin-right:7px;
}
.usermark2:before {
content: "\f2bd";
font-family: FontAwesome;
margin-right:7px;
}
.memomark2:before {
content: "\f044";
font-family: FontAwesome;
margin-right:7px;
}
.checkmark2:before {
content: "\f058";
font-family: FontAwesome;
margin-right:7px;
}
.bigginermark:before {
content: "\e904";
font-family: stsvg;
margin-right:7px;
}
.oukanmark:before {
content: "\e909";
font-family: stsvg;
margin-right:7px;
}
.fa-question-circle,
.fa-check-circle,
.fa-exclamation-triangle,
.fa-exclamation-circle,
.fa-pencil-square-o,
.fa-user,
.st-svg-biggner:before{
margin-right:7px;
}
/*カウント*/
.st-count {
counter-increment: stcnt;
}
.st-count::before {
content: counter(stcnt)". ";
font-size:150%;
}
.st-count-reset {
counter-reset: stcnt;
}
/* editor-style用初心者マークカラー */
.st-svg-biggner {
position:relative;
}
.st-svg-biggner:before {
margin-right:7px;
}
/* ガイドマップメニュー（ウィジェット） */
.widget_guidemap_widget.is-no-underline a {
text-decoration: none;
}
.widget_guidemap_widget.is-rounded .st-link-guide-menu > .menu-item > a {
border-radius: 8px;
}
/* ガイドマップメニュー */
.post .st-link-guide-menu:not(.toc_list):not(.st_toc_list) {
padding-left: 0;
padding-right: 0;
}
#side aside .st-link-guide li a:after,
.post .entry-content .st-link-guide ul li a:after,
.st-link-guide li a:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
border-top: 10px solid #ccc ;
}
#side aside .st-link-guide > ul li:last-child a:after,
.post .entry-content .st-link-guide > ul li:last-child a:after,
.st-link-guide > ul li:last-child a:after {
content: none;
}
#side aside .st-link-guide li,
.post .entry-content .st-link-guide ul li,
.st-link-guide li {
list-style: none;
}
#side aside .st-link-guide li a,
.post .entry-content .st-link-guide ul li a,
.st-link-guide li a {
position: relative;
background: #ccc ;
margin-bottom: 15px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
text-align: center;
list-style: none;
width:100%;
box-sizing:border-box;
display: block;
}
#side aside .st-link-guide li a,
.post .entry-content .st-link-guide ul li a,
.st-link-guide li a {
color: #000 ;
font-weight: bold;
}
.post .st-link-guide li a:last-child,
.post .entry-content .st-link-guide ul li a:last-child,
.post .st-link-guide li a:last-child {
padding-bottom:10px;
}
#side aside .st-link-guide li a:hover,
.post .entry-content .st-link-guide ul li a:hover,
.st-link-guide li a:hover {
opacity: 0.7;
}
/* ガイドマップサブメニュー */
.st-link-guide .sub-menu,
.post .st-link-guide .sub-menu:not(.toc_list):not(.st_toc_list),
#side aside .st-link-guide .sub-menu {
margin-bottom: 10px;
padding-top:0;
}
.st-link-guide .sub-menu:last-child,
.post .st-link-guide .sub-menu:not(.toc_list):not(.st_toc_list):last-child {
margin-bottom: 0;
}
#side aside .st-link-guide .sub-menu li a:after,
.post .entry-content .st-link-guide .sub-menu li a:after,
.st-link-guide .sub-menu li a:after {
content: none;
}
#side aside .st-link-guide .sub-menu li a,
.post .entry-content .st-link-guide .sub-menu li a,
.st-link-guide .sub-menu li a {
position: relative;
background-color: transparent;
padding: 5px;
border-bottom: none;
text-align: left;
list-style: none;
margin-bottom: 0;
}
#side aside .st-link-guide .sub-menu li a,
.post .entry-content .st-link-guide .sub-menu li a,
.st-link-guide .sub-menu li a {
color: #000 ;
font-weight: normal;
}
.post .st-link-guide .sub-menu li a:last-child,
.post .entry-content .st-link-guide .sub-menu li a:last-child,
.post .st-link-guide .sub-menu li a:last-child {
padding-bottom:0;
}
.post .st-link-guide-post ul:not(.toc_list):not(.st_toc_list),
.st-link-guide-post ul:not(.toc_list):not(.st_toc_list){
margin-bottom: 0;
}
.post .entry-content .st-link-guide ul li:last-child a,
.st-link-guide li:last-child a {
margin-bottom: 0;
}
/*スライドボックス*/
.st-slidebox-c {
padding: 10px 20px;
background: #f2f2f2 ;
margin-bottom:20px;
border-radius:5px;
}
.post .st-btn-open{
margin-bottom:10px;
}
.st-slidebox{
padding-top:10px;
}
.post .st-slidebox p:last-child{
margin-bottom:0;
}
/*メモボックス*/
.st-memobox2 {
position: relative;
margin: 20px 0;
padding: 20px 20px 0;
border: solid 1px #9E9E9E ;
border-radius: 0;
}
.st-memobox2 .fa {
margin-right: 5px;
}
.st-memobox2 .st-memobox-title {
position: absolute;
display: inline-block;
top: -8px;
left: 10px;
padding: 0 9px;
line-height: 1;
background: #FFF ;
color:#000;
font-weight:normal;
font-size:90%;
}
.st-memobox2 .st-memobox-title:before {
content: "\f0f6\00a0";
font-family: FontAwesome;
}
/*旧メモボックス*/
.st-memobox {
position: relative;
margin: 20px 0;
padding: 20px 20px 0;
border: solid 2px #9E9E9E ;
border-radius: 8px;
}
.st-memobox .fa {
margin-right: 5px;
}
.st-memobox .st-memobox-title {
position: absolute;
display: inline-block;
top: -8px;
left: 10px;
padding: 0 9px;
line-height: 1;
background: #FFF ;
color:#9E9E9E;
font-weight:bold;
}
/*参照リンク*/
.st-share {
background:#fafafa;
padding:5px;
border-radius:3px;
font-size:95%;
line-height:1.7;
}
.st-share:before {
content: "\00a0\00a0\f0c1\00a0\00a0\00a0";
font-family: FontAwesome;
color:#9E9E9E;
}
/* こんな方におすすめ */
.st-blackboard {
padding: 10px 20px 0px;
border: 3px solid #f3f3f3 ;
background: #fff ;
margin: 30px 0;
border-radius:0;
}
.st-blackboard-title-box {
text-align: center;
margin-bottom:10px;
}
.st-blackboard-title {
color:#424242;
display: inline-block;
border-bottom:2px solid #424242 ;
font-weight: bold;
text-align: center;
padding:10px 10px 5px;
background:#fff;
}
.st-blackboard-title:before {
content: "\f0f6\00a0\00a0";
font-family: FontAwesome;
}
.st-blackboard:not(.square-checkbox) ol.st-blackboard-list:not(.st-css-no){
padding-left: 20px;
}
.st-blackboard:not(.square-checkbox) ul.st-blackboard-list:not(.st-css-no) {
padding-left: 30px;
}
.st-blackboard:not(.square-checkbox) ul.st-blackboard-list:not(.st-css-no) li,
.post .st-blackboard:not(.square-checkbox) ul.st-blackboard-list:not(.st-css-no) li:last-child {
border-bottom:dotted 1px #ccc ;
line-height:1.3;
padding:10px 0;
margin:0;
list-style:none;
text-indent:-1.3em;
padding-left:1.3em;
}
.st-blackboard:not(.square-checkbox) ol.st-blackboard-list:not(.st-css-no) li,
.post .st-blackboard:not(.square-checkbox) ol.st-blackboard-list:not(.st-css-no) li:last-child {
border-bottom:dotted 1px #ccc ;
line-height:1.3;
padding:10px 0;
margin:0;
}
.st-blackboard:not(.square-checkbox) ul.st-blackboard-list:not(.st-css-no) li:before {
content: "\f058\00a0\00a0";
font-family: FontAwesome;
color:#ff0000;
}
.st-blackboard:not(.square-checkbox) ul.st-blackboard-list:not(.st-css-no).st-no-ck li,
.post .st-blackboard:not(.square-checkbox) ul.st-blackboard-list:not(.st-css-no).st-no-ck li:last-child {
text-indent:0;
padding-left:0;
}
.st-blackboard:not(.square-checkbox) ul.st-blackboard-list.st-no-ck li:before {
content: none;
}
/* こんな方におすすめ（チェックボックス） */
.st-blackboard.square-checkbox {
padding:30px 30px 15px;
box-sizing: border-box;
margin-bottom:20px;
}
#side aside .st-blackboard.square-checkbox ul li,
.st-blackboard.square-checkbox ul li {
position:relative;
display: block;
line-height: 1.5;
border-bottom: 1px dashed #ccc ;
margin-bottom: 0.5em;
padding-top: .25em;
padding-bottom: 0.75em;
padding-left: calc(1.5em + 15px);
}
.st-blackboard.square-checkbox ul:not(.toc_list):not(.st_toc_list):not(.children) {
display: block;
margin-bottom: 0;
padding:10px 0 0;
}
.st-blackboard.square-checkbox ul li:last-child {
margin-bottom: 15px;
padding-bottom: 0.75em;
}
.st-blackboard.square-checkbox ul.st-blackboard-list:not(.st-css-no) li:before {
position: absolute;
top: calc(50% - .95em);
left: 0;
content: "\e907";
font-family: stsvg;
color:#ff0000;
z-index:2;
margin-right:15px;
text-shadow: -1px -1px 0 rgba(255, 255, 255, 1),1px -1px 0 rgba(255, 255, 255, 1),-1px 1px 0 rgba(255, 255, 255, 1),1px 1px 0 rgba(255, 255, 255, 1);
font-size:150%;
line-height:1.5;
}
.st-blackboard.square-checkbox ul li:after {
content: "\e904";
font-family: stsvg;
color:#ccc;
position:absolute;
z-index:1;
left:0;
top: calc(50% - .9em);
font-size:150%;
line-height:1.5;
}
/* チェックボックス */
.st-square-checkbox:not(.st-square-checkbox-nobox) {
border: 3px solid #f3f3f3 ;
padding:30px 30px 15px;
box-sizing: border-box;
margin-bottom:20px;
}
#side aside .st-square-checkbox.st-square-checkbox-nobox ul li:last-child,
.post .st-square-checkbox.st-square-checkbox-nobox ul li:last-child,
.st-square-checkbox.st-square-checkbox-nobox ul li:last-child {
margin-bottom: 0;
}
.st-square-checkbox div {
margin: 0;
padding: 0;
border: 0;
font-size: inherit;
line-height: inherit;
}
.st-square-checkbox ul:not(.toc_list):not(.st_toc_list):not(.children) {
margin-bottom: 0;
padding:0;
}
.st-square-checkbox.st-bold ul li {
font-weight: bold;
}
#side aside .st-square-checkbox ul li,
.st-square-checkbox ul li {
position:relative;
display: block;
line-height: 1.5;
border-bottom: 1px dashed #ccc ;
margin-bottom: 0.5em;
padding-top: .25em;
padding-bottom: 0.75em;
padding-left: calc(1.5em + 15px);
}
.st-square-checkbox ul li:last-child {
margin-bottom: 15px;
padding-bottom: 0.5em;
}
.st-square-checkbox ul li:before {
position: absolute;
top: calc(50% - .95em);
left: 0;
content: "\e907";
font-family: stsvg;
color:#ff0000;
z-index:2;
margin-right:15px;
text-shadow: -1px -1px 0 rgba(255, 255, 255, 1),1px -1px 0 rgba(255, 255, 255, 1),-1px 1px 0 rgba(255, 255, 255, 1),1px 1px 0 rgba(255, 255, 255, 1);
font-size:150%;
line-height:1.5;
}
.st-square-checkbox ul li:after {
content: "\e904";
font-family: stsvg;
color:#ccc;
position:absolute;
z-index:1;
left:0;
top: calc(50% - .9em);
font-size:150%;
line-height:1.5;
}
/* 目次（カスタム） */
#st_toc_container {
border: 1px solid #fafafa ;
box-sizing: border-box;
margin: 0 auto 20px;
padding: 10px 20px;
text-align: center;
border-radius: 5px;
}
#st_toc_container .st_toc_title {
text-align:center;
padding: 5px;
font-weight:bold;
position:relative;
display: inline-block;
vertical-align: middle;
border-bottom: 2px solid #333 ;
margin-bottom: 5px;
}
#st_toc_container .st_toc_title:before {
content: "\f0f6\00a0";
font-family: FontAwesome;
}
.post #st_toc_container .st-original-toc li {
text-align:left;
font-weight: normal;
padding: 5px;
text-indent: 0;
border-bottom: 1px dotted #ccc ;
}
.post #st_toc_container ol.st-original-toc > li {
list-style: decimal;
}
#st_toc_container .st-original-toc li a:before {
content: none;
}
.post #st_toc_container .st-original-toc li a {
text-decoration: none;
color: #000 ;
}
.post #st_toc_container .st-original-toc li a:hover {
opacity: 0.5;
}
/*マイボックスメモ*/
.st-mybox {
position: relative;
margin: 20px 0;
padding: 0 20px;
border: solid 2px #9E9E9E ;
border-radius: 8px;
}
.st-in-mybox {
padding: 20px 0;
}
.st-in-mybox p {
margin-bottom: 0;
}
.st-mybox .fa {
margin-right: 5px;
}
.st-mybox .st-mybox-title {
position: absolute;
display: inline-block;
top: -8px;
left: 10px;
padding: 0 10px;
line-height: 1;
color:#9E9E9E;
font-weight:bold;
margin-bottom:10px;
}
/*見出し付ボックス*/
.freebox {
border-top:solid 1px #FEB20A ;
padding:10px 0;
background:#f3f3f3;
font-size: 15px;
line-height: 25px;
margin-bottom: 20px;
position:relative;
}
.ad .freebox {
margin-bottom: 0px;
}
.p-free {
padding:0;
}
.p-free:after {
content: "";
display:block;
margin-bottom:30px;
}
.p-entry-f {
padding:3px 20px;
margin:0;
font-size:15px;
font-weight:bold;
background:#FEB20A;
color:#fff;
position:absolute;
top:0;
left:0;
max-width:80%;
}
.p-entry-f .fa {
margin-right: 5px;
}
.free-inbox {
padding:10px 15px 10px;
text-align:left;
}
.free-inbox p {
margin-bottom: 0;
}
/*クリップメモ*/
.clip-memobox {
display:table;
background:#f3f3f3;
border-radius:3px;
margin-bottom:20px;
padding: 10px;
}
.clip-fonticon,
.clip-memotext{
display:table-cell;
vertical-align:middle;
}
.clip-fonticon{
padding: 0 15px 0 10px;
text-align:center;
}
.clip-memotext p{
margin-bottom:0;
}
.clip-memotext {
padding-left:15px;
border-left:1px solid #E0E0E0 ;
width:100%;
box-sizing:border-box;
}
.clip-memotext * {
font-size:95%;
line-height:1.7;
}
/*参照リンク*/
.st-share {
background:#fafafa;
padding:5px;
border-radius:3px;
font-size:95%;
line-height:1.7;
}
.st-share:before {
content: "\00a0\00a0\f0c1\00a0\00a0\00a0";
font-family: FontAwesome;
color:#9E9E9E;
}
/* 記事タイトル */
.entry-title, .post .entry-title {
font-family: Helvetica , "游ゴシック" , "Yu Gothic" , sans-serif;
margin-bottom: 10px;
font-weight:bold;
}
/*自動アイコン目印*/
.hatenamark,.checkmark,.attentionmark,.memomark,.usermark {
background-color: rgba(135,206,250,0.5);
}
/* clearfix */
.clearfix {
zoom: 1;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.clear {
clear: both;
}
.center {
text-align: center;
}
/* リンクの色 */
a {
color: #4682b4 ;
}
/* リンクにマウスオーバーした時の色 */
a:hover {
color: #b22222 ;
}
/*画像にボーダー*/
.photoline img{
border: solid 1px #ccc ;
}
img, video, object {
max-width: 100%;
height: auto;
border: none;
vertical-align: bottom;
}
.inline-img img {
display: inline!important;
}
iframe {
max-width: 100%;
}
.st-code,
code {
padding:2px;
background:#f3f3f3;
margin:2px;
border-radius:2px;
}
/* iframeのレスポンシブ */
.youtube-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.youtube-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*レスポンシブ用PC左右コンテンツ*/
.responbox, .responbox30,.responbox40, .responbox50, .responbox60, .responbox70,.responboxfree {
padding:10px;
background:#f3f3f3;
margin-bottom:20px;
}
.responbox .lbox img {
width:100%!important;
box-sizing:border-box;
margin-bottom:10px;
}
/*--------------------------------
各フォント設定
---------------------------------*/
/* 基本の文字 */
div,
p {
font-size: 16px;
line-height: 25px;
margin-bottom: 20px;
}
/* 中見出し */
.h2modoki,
h2 {
position: relative;
background: #f3f3f3 ;
color: #1a1a1a ;
font-size: 27px;
line-height: 27px;
margin-bottom: 20px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
.h2modoki:after,
h2:after {
content: '';
position: absolute;
border-top: 10px solid #f3f3f3 ;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -10px;
left: 30px;
border-radius: 2px;
}
.h2modoki:before,
h2:before {
content: '';
position: absolute;
border-top: 10px solid #f3f3f3 ;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -10px;
left: 30px;
}
/*小見出し*/
.h3modoki,
.post h3 {
font-size: 24px;
margin-bottom: 20px;
margin-top: 10px;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
color: #1a1a1a ;
line-height: 27px;
background-repeat: no-repeat;
background-position: left center;
margin-left: 0px;
border-bottom: 1px #999999 dotted;
}
.h3modoki a,
h3 a {
color: #333 ;
text-decoration: none;
}
.h4modoki,
.post h4 {
padding: 10px 15px;
margin-bottom: 20px;
background-color: #f3f3f3 ;
line-height: 24px;
}
.h5modoki,
.h6modoki,
.post h5, /* H5 */
.post h6 /* H6 */
{
margin-bottom: 20px;
font-size: 16px;
}
.h6modoki,
.post h6 /* H6 */
{
font-weight:bold;
color:#424242;
}
.h2modoki,
.h3modoki,
.h4modoki,
.h5modoki,
.h6modoki
{
font-weight:bold;
}
/* 引用 */
.post blockquote {
background-color: #f3f3f3 ;
background-image: url(images/quote.png);
background-repeat: no-repeat;
background-position: left top;
padding-top: 50px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 20px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #CCC ;
}
/* オリジナルスタイルsmartphone */
.huto {
font-weight:bold;
}
.hutoaka {
font-weight:bold;
color:#ff3333;
}
.st-aka {
color:#ff3333;
}
.maru {
border-radius:5px;
}
.noborder {
border: none;
}
.oomozi {
font-size: 150%;
line-height: 1.4;
font-weight: bold;
}
.komozi {
font-size: 80%;
}
.ymarker,
.ymarker-s,
.gmarker,
.gmarker-s,
.rmarker,
.rmarker-s,
.bmarker,
.bmarker-s
{
font-weight:bold;
}
.ymarker {
background:#FFF9C4;
}
.ymarker-s {
background:linear-gradient(transparent 70%,#FFF9C4 0%);
}
.gmarker {
background:#EEEEEE;
}
.gmarker-s {
background:linear-gradient(transparent 70%,#EEEEEE 0%);
}
.rmarker {
background:#ffcdd2;
}
.rmarker-s {
background:linear-gradient(transparent 70%,#ffcdd2 0%);
}
.bmarker {
background:#E1F5FE;
}
.bmarker-s {
background:linear-gradient(transparent 70%,#E1F5FE 0%);
}
.yellowbox {
padding:20px;
background-color:#ffffe0;
margin-bottom:20px;
}
.yellowbox:not(.noborder) {
border:solid 1px #fffacd ;
}
.redbox {
margin-bottom: 20px;
padding: 20px;
background-color: #ffebee ;
}
.redbox:not(.noborder) {
border: solid 1px #ef5350 ;
}
.graybox {
margin-bottom: 20px;
padding: 20px;
background-color: #f3f3f3 ;
}
.graybox:not(.noborder) {
border: solid 1px #ccc ;
}
.post .yellowbox p:last-child,
.post .yellowbox ol:last-child,
.post .yellowbox ul:last-child {
margin-bottom:0;
padding-bottom:0;
}
.post .graybox p:last-child,
.post .graybox ol:last-child,
.post .graybox ul:last-child {
margin-bottom:0;
padding-bottom:0;
}
.post .redbox p:last-child,
.post .redbox ol:last-child,
.post .redbox ul:last-child {
margin-bottom:0;
padding-bottom:0;
}
.h2fuu {
position: relative;
background: #f3f3f3 ;
color: #1a1a1a ;
font-size: 20px;
line-height: 27px;
margin-bottom: 20px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
font-weight:bold;
}
.h2fuu:after {
content: '';
position: absolute;
border-top: 10px solid #f3f3f3 ;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -10px;
left: 30px;
border-radius: 2px;
}
.h2fuu:before {
content: '';
position: absolute;
border-top: 10px solid #f3f3f3 ;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -10px;
left: 30px;
}
.inyoumodoki {
background-color: #f3f3f3 ;
background-image: url(images/quote.png);
background-repeat: no-repeat;
background-position: left top;
padding-top: 50px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 20px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #CCC ;
}
.post .inyoumodoki p:last-child,
.post .inyoumodoki ol:last-child,
.post .inyoumodoki ul:last-child {
margin-bottom:0;
padding-bottom:0;
}
.sankou {
font-size:70%;
background-color:#F57C00;
color:#fff;
padding:3px 4px;
margin:0 5px;
white-space: nowrap;
}
.sankou.green {
background-color:#4CAF50;
}
.sankou.blue {
background-color:#2196F3;
}
.st-hisu {
font-size:70%;
background-color:#FF0000;
color:#fff;
padding:3px 4px;
margin:0 5px;
white-space: nowrap;
}
/*ドット線*/
.dotline {
border-bottom:1px dotted #212121 ;
}
.dotliner {
border-bottom:1px dotted #ff0000 ;
}
.dotline-s {
border-bottom:1px solid #212121 ;
}
.dotline-sr {
border-bottom:1px solid #ff0000 ;
}
/*--------------------------------
エディタ用
---------------------------------*/
/*均等横並び */
.post .kintou ul {
display:table;
table-layout: fixed;
width:100%;
padding:0;
margin:0 -5px 20px;
}
.post .kintou ul li {
display:table-cell;
vertical-align:middle;
text-align:center;
padding:0 5px;
}
.post .kintou ul li {
background:#E1F5FE;
border:1px solid #29B6F6 ;
}
/*テーブル */
.post table {
box-sizing: border-box;
border-top: 1px #999 solid;
border-right: 1px #999 solid;
margin-bottom: 20px;
width: 100%;
}
/*For IE*/
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.post table {
table-layout: fixed;
}
}
table tr td {
padding: 5px;
border-bottom-width: 1px;
border-left-width: 1px;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #999 ;
border-left-color: #999 ;
font-size: 13px;
line-height: 18px;
}
table th {
padding: 5px;
border-bottom-width: 1px;
border-left-width: 1px;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #999 ;
border-left-color: #999 ;
font-size: 13px;
line-height: 18px;
}
.post table tr td {
font-size: 13px;
line-height: 18px;
}
.post table tr:nth-child(even) {
background-color: rgba(220,220,220,0.2);
}
#main .post table {
border-top-width: 1px;
border-right-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-top-color: #999 ;
border-right-color: #999 ;
color: #333 ;
}
/*テーブル（装飾なし） */
.post .notab table {
border:none;
width: initial; /* 初期状態にリセット */
max-width: initial; /* 初期状態にリセット */
}
.notab table tr td {
border:none;
text-align: left;
vertical-align: top;
}
.notab table th {
border:none;
}
.post .notab table tr:nth-child(even) {
background-color: transparent;
}
/*スクロール*/
.scroll-box {
overflow-x: auto;
margin-bottom:10px;
}
.scroll-box::-webkit-scrollbar {
height: 5px;
}
.scroll-box::-webkit-scrollbar-track {
border-radius: 5px;
background: #f3f3f3 ;
}
.scroll-box::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #ccc ;
}
/*画像 */
img.alignright {
float: right;
margin: 0 0 5px 10px;
}
img.alignleft {
float: left;
margin: 0 10px 5px 0;
}
img.aligncenter {
display: block;
margin:0 auto 10px;
}
img.float-left {
float: left;
}
img.float-right {
float: right;
}
.wp-caption {
text-align: center;
}
.aligncenter {
clear: both;
display: block;
margin:0 auto 10px;
}
.ie8 img {
width: auto;
}
/*リスト */
.post ul {
list-style-type: disc;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 30px;
margin-bottom: 20px;
}
.post ul li {
font-size: 17px;
line-height: 27px;
}
.post ol {
list-style-type: decimal;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 30px;
margin-bottom: 20px;
}
.post ol li {
font-size: 17px;
line-height: 27px;
}
/*マルリスト*/
.post .maruno ol {
list-style-type: none;
counter-reset: st-section;
margin-left: 10px;
padding:20px 20px 0 30px;
}
.post .maruno ol li {
counter-increment: st-section;
margin-bottom:5px;
line-height: 23px;
}
.post .maruno ol li:last-child {
margin-bottom:0;
}
.post .maruno ol li:before {
content: counters(st-section,"");
border-radius: 50%;
float: left;
min-width:23px;
height:23px;
line-height:23px;
text-align:center;
font-size:60%;
margin-right:10px;
background: #f3f3f3 ;
color:#000;
margin-left:-3em;
}
/*チェックリスト*/
.post .maruck {
margin-bottom: 20px;
}
.post .maruck ul {
list-style-type: none;
margin-left: 10px;
padding:0 20px 0 30px;
}
.post .maruck ul li {
margin-bottom:5px;
line-height: 23px;
}
.post .maruck ul li:before {
content: " \f00c";
font-family: FontAwesome;
border-radius: 50%;
float: left;
min-width:23px;
height:23px;
line-height:23px;
text-align:center;
font-size:60%;
margin-right:10px;
background: #f3f3f3 ;
color:#000;
margin-left:-3em;
}
/*----------------------------------
リンクボタン
-----------------------------------*/
/*詳細ページへのリンクボタンカラー*/
.rankstlink-l2 p a,
.rankstlink-l p a,
.rankstlink-b p a {
font-family: Helvetica , "游ゴシック" , "Yu Gothic" , sans-serif;
background: #f2f2f2 ;
color: #000 ;
}
/*アフィリエイトのリンクボタンカラー*/
.rankstlink-r p a,
.rankstlink-r2 p a,
.rankstlink-a p a {
font-family: Helvetica , "游ゴシック" , "Yu Gothic" , sans-serif;
background-color: #f2f2f2 ;
color: #000 ;
}
/*スター*/
.st-star {
color:#FFB400;
font-size:15px;
}
/*投稿用詳細ページリンクボタン*/
.rankstlink-l2 p a {
display: block;
width: 100%;
text-align: center;
padding: 10px;
text-decoration: none;
margin-right: auto;
margin-left: auto;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
font-weight:bold;
box-sizing:border-box;
}
.rankstlink-l2 p {
width: 90%;
text-align: center;
margin-right: auto;
margin-left: auto;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
font-weight:bold;
box-shadow: 0 2px 0 #cccccc ;
position:relative;
}
.rankstlink-l2 p:hover {
box-shadow: 0 1px 0 #cccccc ;
top:1px;
}
/*投稿用公式リンク*/
.rankstlink-r2 p a {
display: block;
width: 100%;
text-align: center;
padding: 10px;
text-decoration: none;
margin-right: auto;
margin-left: auto;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
font-weight:bold;
box-sizing:border-box;
}
.rankstlink-r2 p {
width: 90%;
margin-right: auto;
margin-left: auto;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0 2px 0 #cccccc ;
position:relative;
}
.rankstlink-r2 p img{
display:none;
}
.rankstlink-r2 p br{
display:none;
}
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 414px) {
/*レスポンシブ用PC左右コンテンツ*/
.responboxfree .lbox {
padding:10px;
background:#FFF59D;
float:left;
padding-right:15px;
box-sizing:border-box;
}
.responboxfree .rbox {
padding:10px;
background:#B2EBF2;
float:left;
box-sizing:border-box;
}
.responbox .lbox {
padding:10px;
background:#FFF59D;
float:left;
padding-right:15px;
width:40%;
box-sizing:border-box;
}
.responbox .rbox {
padding:10px;
background:#B2EBF2;
float:left;
box-sizing:border-box;
width:60%;
}
.responbox40 .lbox {
padding:10px;
background:#FFF59D;
float:left;
padding-right:15px;
width:40%;
box-sizing:border-box;
}
.responbox40 .rbox {
padding:10px;
background:#B2EBF2;
float:left;
box-sizing:border-box;
width:60%;
}
/*30%*/
.responbox30 .lbox {
padding:10px;
background:#FFF59D;
float:left;
padding-right:15px;
width:30%;
box-sizing:border-box;
}
.responbox30 .rbox {
padding:10px;
background:#B2EBF2;
float:left;
box-sizing:border-box;
width:70%;
}
/*33%*/
.responbox33 .lbox {
float:left;
padding:5px;
width:33.33%;
box-sizing:border-box;
background:#FFF59D;
}
.responbox33 .lbox:nth-child(even) {
background:#B2EBF2;
}
/*50%*/
.responbox50 .lbox {
padding:10px;
background:#FFF59D;
float:left;
padding-right:15px;
width:50%;
box-sizing:border-box;
}
.responbox50 .rbox {
padding:10px;
background:#B2EBF2;
float:left;
box-sizing:border-box;
width:50%;
}
/*60%*/
.responbox60 .lbox {
padding:10px;
background:#FFF59D;
float:left;
padding-right:15px;
width:60%;
box-sizing:border-box;
}
.responbox60 .rbox {
padding:10px;
background:#B2EBF2;
float:left;
box-sizing:border-box;
width:40%;
}
/*70%*/
.responbox70 .lbox {
padding:10px;
background:#FFF59D;
float:left;
padding-right:15px;
width:30%;
box-sizing:border-box;
}
.responbox70 .rbox {
padding:10px;
background:#B2EBF2;
float:right;
box-sizing:border-box;
width:70%;
}
}
/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 781px) {
/*--------------------------------
各フォント設定
---------------------------------*/
div,
p {
font-size: 16px;
line-height: 35px;
margin-bottom: 50px;
}
/*中見出し*/
h2 {
font-size: 20px;
line-height: 30px;
}
h2:after {
bottom: -10px;
left: 50px;
}
h2:before {
bottom: -10px;
left: 50px;
}
/*小見出し*/
.post h3 {
font-size: 18px;
line-height: 25px;
}
/*リスト */
.post ul li {
font-size: 14px;
line-height: 27px;
}
.post ol li {
font-size: 14px;
line-height: 27px;
}
/* オリジナルスタイルPC */
.oomozi {
font-size: 18pt;line-height: 35px;
}
.yellowbox {
font-size: 14px;
line-height: 27px;
margin-bottom: 20px;
}
.redbox {
font-size: 14px;
line-height: 27px;
margin-bottom: 20px;
}
.graybox {
font-size: 14px;
line-height: 27px;
margin-bottom: 20px;
}
.h2fuu {
font-size: 20px;
line-height: 30px;
}
.h2fuu:after {
bottom: -10px;
left: 50px;
}
.h2fuu:before {
bottom: -10px;
left: 50px;
}
/*-- ここまで --*/
}
以上です。
この記事が気に入ったらサポートをしてみませんか？