- いろいろスタイルを設定したので、ここまでの「追加CSS」の中身をここにメモしておきます。
- それぞれの機能について、ブログで説明しているページがあればリンクも貼っておきます。
ブログのデザインを練り上げている過程が全部わかる！
改めてみるとコードの重複があったりするので、ちょっと整理したほうが良さそうですね。
1. 追加CSS全体（2020年9月11日現在）
/**
* 印刷時のフォント
*/
@media print {
p {
font-family: 'Noto Serif JP', serif;
text-indent: 1.0em;
line-height: 2.0em;
}
.block-box p, .wp-block-quote p {
font-family: 'Kosugi', sans-serif;
text-indent: 0em;
line-height: 1.5em;
font-size: 90%;
margin:1em 0;
}
.wp-block-quote {
margin: 1em;
}
}
/**
* モバイルメニューボタン
*/
.mobile-menu-buttons {
color: #a08010;
}
.mobile-menu-buttons .home-menu-button>a {
color: #a08010;
}
.mobile-menu-buttons .top-menu-button>a {
color: #a08010;
}
.mobile-menu-buttons .menu-button>a {
color: #a08010;
}
@media screen and (max-width: 599px) {
.container .column-wrap {
flex-direction: row;
}
}
/**
* 吹き出しの設定
*/
.speech-balloon {
font-size: 110%;
line-height: 1.5em;
}
/**
* 強調文字列・マーカー
*/
.bold {
font-family: 'Kosugi', sans-serif;
font-size: 120%;
}
.marker-under, .marker-under-red, .marker-under-blue {
-webkit-print-color-adjust: exact;
}
.marker-under-red {
font-family: 'Kosugi', sans-serif;
font-weight: 600;
font-size: 125%;
}
.marker-under {
font-family: 'Kosugi', sans-serif;
font-weight: 600;
font-size: 120%;
}
.marker-under-blue {
font-family: 'Kosugi', sans-serif;
font-weight: 600;
font-size: 120%;
}
/**
* 画像
*/
.wp-block-image img, .eye-catch img {
border: 3px solid #f0c020;
}
/**
* リストを目立たせる
*/
.article ul li:not(.toc-content), .article ol li:not(.toc-content){
font-size: 115%;
font-weight: 600;
}
.article ul, .article ol {
margin: 1.3em;
page-break-inside: avoid;
}
/**
* ページ余白
*/
@page {
size: A4;
margin-top: 10mm;
margin-bottom: 10mm;
margin-left: 15mm;
margin-right: 15mm;
}
/**
* 印刷時用紙サイズ
*/
@media print {
#container .main, #container .content, #container .wrap {
top: 0 !IMPORTANT;
left: 0 !IMPORTANT;
width: 180mm !IMPORTANT;
font-size: 15pt;
}
body {
width: 180mm;
/* needed for Chrome */
}
.wrap {
width: auto;
}
}
/**
* アイキャッチ画像のサイズ
*/
@media print {
.eye-catch img {
max-width: 100%;
height: 100%;
width: 100%;
max-height: 420px;
object-fit: contain;
}
.eye-catch-wrap {
display: block;
text-align: center;
max-width: 100%;
width: 100%;
max-height: 420px;
}
/**
* 記事内画像のサイズ
*/
.wp-block-image, .size-large {
page-break-before: avoid !IMPORTANT;
/*display:inline !IMPORTANT*/
;
text-align: center;
}
.wp-block-image, .size-large img {
max-height: 450px;
max-width: 100%;
width: 100%;
object-fit: contain;
}
}
/**
* 記事内のブロックの余白
*/
@media print {
.entry-content>*, .demo .entry-content p {
line-height: 1.5;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.wp-block-cocoon-blocks-balloon-ex-box-1, .wp-block-cocoon-blocks-icon-box, .wp-block-cocoon-blocks-tab-box-1 {
page-break-inside: avoid;
margin-top: 1.0em;
margin-bottom: 1.0em;
}
}
/**
* 見出しの余白（印刷時）
*/
@media print {
#container h1, #container h2, #container h3, #container h4, #container h5, #container h6 {
background-color: transparent;
border-width: 0;
padding: 0;
margin-top: 1.7em;
margin-bottom: 0.2em;
color: #333;
page-break-after: avoid;
}
#container h1 {
font-size: 14pt;
margin-top: 0em;
}
#container h2 {
font-size: 140%;
margin-top: 2.5em;
margin-bottom: 2.0em;
display: inline-block !IMPORTANT;
page-break-after: avoid !IMPORTANT;
/* page-break-before:avoid; */
}
}
/**
* 印刷時のブログカードの設定
*/
@media print {
.blogcard-footer {
display: none;
}
.blogcard-title {
line-height: 1.3em;
}
.blogcard-snippet {
display: none;
/* font-family: 'Noto Serif JP', serif;
line-height: 1.3em; */
}
}
/**
* 印刷時の吹き出し
*/
@media print {
.speech-balloon {
font-family: 'M PLUS 1p', sans-serif !IMPORTANT;
font-weight: 200 !IMPORTANT;
}
.speech-balloon p {
line-height: 1.4em;
margin-bottom: 0.3em !IMPORTANT;
}
}
/*end of print*/
/**
* 非表示の項目
*/
@media print {
.read-time, .video-container, .button-block {
display: none;
}
}
/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
display: none;
}
/* サイドバーボタンの色・サイズを変更 */
a.btn.btn-block.btn-primary.btn-lg {
background-color: #f0c020 !IMPORTANT;
width:100%;
font-size: 105%;
text-align: left;
}
/************************************
** ブログカード
************************************/
.blogcard-snippet,
.blogcard-footer {
display: none;
}
.blogcard-wrap {
width: 100%;
height: 80px;
margin: 0 auto;
}
.blogcard {
transition: all .3s;
border:1px solid #eaeaea !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
padding: 0px;
height: 80px;
}
.blogcard:hover {
height: 80px;
background: none;
transform: translateY(-1px);
box-shadow: 0px 5px 10px rgba(0, 0, 0, .1);
}
.blogcard-thumbnail {
margin: 0;
width: 138px;
max-height: 80px;
}
.blogcard-thumbnail img {
display: block;
width : 100%;
max-height: 80px;
border:1px;
}
.blogcard-title {
color: #555;
letter-spacing: 0.5px;
font-size: 18px;
line-height: 1.5;
margin: 4px 0 0 0;
height: 30px;
overflow: hidden;
}
.blogcard-content {
min-height: auto;
margin-left: 145px;
padding-right: 6px;
}
.blogcard-label {
top: -11px;
left: 9px;
padding: 3px 0.6em;
background:#aaa;
padding: 1px 10px;
font-weight: 600;
font-size: 11px;
letter-spacing: 1px;
}
.blogcard-content:after {
content: "クリックして読む";
background: #66c2c3; /* 背景色 */
display: block;
text-align: center;
color: #fff;
font-weight: 600;
letter-spacing: 1px;
width: 180px;
border-radius: 20px;
font-size: 16px;
padding: 1px 0;
margin-top: 6px;
margin-right:30px;
margin-left:auto;
}
@media screen and (max-width: 834px) {
.blogcard-wrap {
transition: all .3s;
width: 100%;
max-width: 800px;
height: 86px;
padding: 0;
margin: 0;
}
.blogcard:hover {
height: 102px;
box-shadow: 0;
}
.blogcard {
height: 102px;
padding: 0;
margin: 0;
}
.blogcard-content {
margin-left: 0px;
}
.blogcard-title {
font-size:16px;
line-height: 1.4;
height: 66px;
padding-left:5px;
padding-top:1px;
letter-spacing: 0px;
}
.blogcard-content:after {
content: "タップして読む";
margin-right:8px;
margin-left:auto;
}
.blogcard-thumbnail {
margin: 0;
width: 200px;
max-height: 150px;
max-width:50%;
}
.blogcard-thumbnail img {
display: block;
width : 100%;
max-height: 100px;
border-right:0.1px solid #cccccc;
}
}
@media screen and (max-width: 560px) {
.blogcard-content:after {
width: 150px;
font-size: 14px;
}
.blogcard-title {
margin:0;
}
}
@media screen and (max-width: 320px) {
.blogcard-thumbnail {
width: 100px;
}
.blogcard-content {
margin-left: 110px;
}
.blogcard-title {
height: 35px;
}
}
/**印刷時のブログカードの表示*/
@media print {
.blogcard-wrap {
margin:24px 24px;
max-width: auto;
}
.blogcard-content:after {
display:none;
}
.blogcard-title {
font-size: 100%;
height: 90px;
}
}
/*SNSシェアボタン*/
#main .button-caption {
display: none; /*キャプション非表示*/
}
.sns-share-message{
font-weight: bold; /*太字*/
color: #875d5b; /*文字色*/
}
.sns-share-buttons {
flex-wrap: nowrap; /*折り返さない*/
justify-content: center; /*中央寄せ*/
}
.sns-share-buttons a {
border-radius: 50%; /*丸くする*/
font-size: 20px; /*アイコンのサイズ*/
margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-share a {
width: 40px; /*ボタンの横幅*/
height: 40px; /*ボタンの高さ*/
}
/*SNSフォローボタン*/
.sns-follow-message{
font-weight: bold; /*太字*/
color: #875d5b; /*文字色*/
}
.sns-follow-buttons {
justify-content: center; /*中央寄せ*/
}
.sns-follow-buttons a {
border-radius: 50%; /*丸くする*/
font-size: 20px; /*アイコンのサイズ*/
margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-follow a {
width: 40px; /*ボタンの横幅*/
height: 40px; /*ボタンの高さ*/
}
/* アイキャッチカテゴリーラベル非表示 */
.entry-card .cat-label,
.related-entry-card .cat-label,
.carousel-in .cat-label{
display: none;
}
/** 見出しに吹き出しをつける */
@media screen {
#container h2 {
position: relative;
padding: 0.6em 1em !IMPORTANT;
}
#container h2:not(.entry-card-title):after {
position: absolute;
content: '';
top: 100%;
left: 50px;
border: 15px solid transparent;
border-top: 15px solid #FDC000;
width: 0;
height: 0;
}
.widget h2 {
font-size: 24px;
width: 100%;
}
}
@media screen and (max-width: 834px) {
.widget h2 {
font-size: 20px;
width: 100%;
}
}
/** シェアボタンの間隔をつめる*/
.entry-content {
margin-bottom: 0em;
}
.sns-share, .sns-follow {
margin: 0 0;
}
/** note 風のワンカラム*/
@media screen {
.no-sidebar .wrap {
width: 700px;
}
.no-sidebar .navi-in>ul li {
width: 120px;
}
.no-sidebar body.public-page {
background-color: #ffffff;
}
.no-sidebar .header {
display: none;
}
.no-sidebar .content {
margin-top: 0;
}
}
@media screen and (max-width: 834px){
.no-sidebar .wrap {
width: auto;
}
}
2. 文字を目立たせる関係のスタイル
2-1. 画面表示時と印刷時でフォントを変える
/**
* 印刷時のフォント
*/
@media print {
p {
font-family: 'Noto Serif JP', serif;
text-indent: 1.0em;
line-height: 2.0em;
}
.block-box p, .wp-block-quote p {
font-family: 'Kosugi', sans-serif;
text-indent: 0em;
line-height: 1.5em;
font-size: 90%;
margin:1em 0;
}
.wp-block-quote {
margin: 1em;
}
}
2-2. モバイルメニューボタンの色
/**
* モバイルメニューボタン
*/
.mobile-menu-buttons {
color: #a08010;
}
.mobile-menu-buttons .home-menu-button>a {
color: #a08010;
}
.mobile-menu-buttons .top-menu-button>a {
color: #a08010;
}
.mobile-menu-buttons .menu-button>a {
color: #a08010;
}
@media screen and (max-width: 599px) {
.container .column-wrap {
flex-direction: row;
}
}2-3. 吹き出しの文字をちょっと目立たせる
これです
/**
* 吹き出しの設定
*/
.speech-balloon {
font-size: 110%;
line-height: 1.5em;
}
2-4. マーカーの文字を目立たせる
これですね。
/**
* 強調文字列・マーカー
*/
.bold {
font-family: 'Kosugi', sans-serif;
font-size: 120%;
}
.marker-under, .marker-under-red, .marker-under-blue {
-webkit-print-color-adjust: exact;
}
.marker-under-red {
font-family: 'Kosugi', sans-serif;
font-weight: 600;
font-size: 125%;
}
.marker-under {
font-family: 'Kosugi', sans-serif;
font-weight: 600;
font-size: 120%;
}
.marker-under-blue {
font-family: 'Kosugi', sans-serif;
font-weight: 600;
font-size: 120%;
}
2-5. 記事内の画像に枠をつける
/**
* 画像
*/
.wp-block-image img, .eye-catch img {
border: 3px solid #f0c020;
}
2-6. リストの文字を目立たせる
/**
* リストを目立たせる
*/
.article ul li:not(.toc-content), .article ol li:not(.toc-content){
font-size: 115%;
font-weight: 600;
}
.article ul, .article ol {
margin: 1.3em;
page-break-inside: avoid;
}3. 冊子印刷したときに読みやすくするためのスタイル
ここでは、冊子印刷にしたときに、そのままブックレットにできるように、スタイルを検討しました。
3-1. 印刷時の用紙設定など
/**
* ページ余白
*/
@page {
size: A4;
margin-top: 10mm;
margin-bottom: 10mm;
margin-left: 15mm;
margin-right: 15mm;
}
/**
* 印刷時用紙サイズ
*/
@media print {
#container .main, #container .content, #container .wrap {
top: 0 !IMPORTANT;
left: 0 !IMPORTANT;
width: 180mm !IMPORTANT;
font-size: 15pt;
}
body {
width: 180mm;
/* needed for Chrome */
}
.wrap {
width: auto;
}
}
3-2. 印刷時に縦長の画像が大きすぎないように
/**
* アイキャッチ画像のサイズ
*/
@media print {
.eye-catch img {
max-width: 100%;
height: 100%;
width: 100%;
max-height: 420px;
object-fit: contain;
}
.eye-catch-wrap {
display: block;
text-align: center;
max-width: 100%;
width: 100%;
max-height: 420px;
}
/**
* 記事内画像のサイズ
*/
.wp-block-image, .size-large {
page-break-before: avoid !IMPORTANT;
/*display:inline !IMPORTANT*/
;
text-align: center;
}
.wp-block-image, .size-large img {
max-height: 450px;
max-width: 100%;
width: 100%;
object-fit: contain;
}
}3-3. 印刷時の余白設定
/**
* 記事内のブロックの余白
*/
@media print {
.entry-content>*, .demo .entry-content p {
line-height: 1.5;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.wp-block-cocoon-blocks-balloon-ex-box-1, .wp-block-cocoon-blocks-icon-box, .wp-block-cocoon-blocks-tab-box-1 {
page-break-inside: avoid;
margin-top: 1.0em;
margin-bottom: 1.0em;
}
}
3-4. 印刷時の見出しを余白を広げたりした
普通紙にプリンタで印刷すると、白抜きの文字はインクでよれるので、デザインを見直した。
/**
* 見出しの余白（印刷時）
*/
@media print {
#container h1, #container h2, #container h3, #container h4, #container h5, #container h6 {
background-color: transparent;
border-width: 0;
padding: 0;
margin-top: 1.7em;
margin-bottom: 0.2em;
color: #333;
page-break-after: avoid;
}
#container h1 {
font-size: 14pt;
margin-top: 0em;
}
#container h2 {
font-size: 140%;
margin-top: 2.5em;
margin-bottom: 2.0em;
display: inline-block !IMPORTANT;
page-break-after: avoid !IMPORTANT;
/* page-break-before:avoid; */
}
}3-5. 印刷時のブログカードを控えめにした
/**
* 印刷時のブログカードの設定
*/
@media print {
.blogcard-footer {
display: none;
}
.blogcard-title {
line-height: 1.3em;
}
.blogcard-snippet {
display: none;
/* font-family: 'Noto Serif JP', serif;
line-height: 1.3em; */
}
}3-6. 印刷時の吹き出しを控えめにした
/**
* 印刷時の吹き出し
*/
@media print {
.speech-balloon {
font-family: 'M PLUS 1p', sans-serif !IMPORTANT;
font-weight: 200 !IMPORTANT;
}
.speech-balloon p {
line-height: 1.4em;
margin-bottom: 0.3em !IMPORTANT;
}
}
3-7. 印刷時に非表示にする項目を追加した
/**
* 非表示の項目
*/
@media print {
.read-time, .video-container, .button-block {
display: none;
}
}4. 気になった箇所の細かい微調整
4-1. フロントページのタイトルを非表示にした
/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
display: none;
}4-2. サイドバーのボタンの色・サイズを変更した
/* サイドバーボタンの色・サイズを変更 */
a.btn.btn-block.btn-primary.btn-lg {
background-color: #f0c020 !IMPORTANT;
width:100%;
font-size: 105%;
text-align: left;
}5. ブログのいろんな要素に統一感と機能性を
5-1. ブログカードを押したくなる感じに
/************************************
** ブログカード
************************************/
.blogcard-snippet, .blogcard-footer {
display: none;
}
.blogcard-wrap {
width: 100%;
height: 80px;
margin: 0 auto;
}
.blogcard {
transition: all .3s;
border: 1px solid #eaeaea !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
padding: 0px;
height: 80px;
}
.blogcard:hover {
height: 80px;
background: none;
transform: translateY(-1px);
box-shadow: 0px 5px 10px rgba(0, 0, 0, .1);
}
.blogcard-thumbnail {
margin: 0;
width: 138px;
max-height: 80px;
}
.blogcard-thumbnail img {
display: block;
width: 100%;
max-height: 80px;
border: 1px;
}
.blogcard-title {
color: #555;
letter-spacing: 0.5px;
font-size: 18px;
line-height: 1.5;
margin: 4px 0 0 0;
height: 30px;
overflow: hidden;
}
.blogcard-content {
min-height: auto;
margin-left: 145px;
padding-right: 6px;
}
.blogcard-label {
top: -11px;
left: 9px;
padding: 3px 0.6em;
background: #aaa;
padding: 1px 10px;
font-weight: 600;
font-size: 11px;
letter-spacing: 1px;
}
.blogcard-content:after {
content: "クリックして読む";
background: #66c2c3;
/* 背景色 */
display: block;
text-align: center;
color: #fff;
font-weight: 600;
letter-spacing: 1px;
width: 180px;
border-radius: 20px;
font-size: 16px;
padding: 1px 0;
margin-top: 6px;
margin-right: 30px;
margin-left: auto;
}
@media screen and (max-width: 834px) {
.blogcard-wrap {
transition: all .3s;
width: 100%;
max-width: 800px;
height: 86px;
padding: 0;
margin: 0;
}
.blogcard:hover {
height: 102px;
box-shadow: 0;
}
.blogcard {
height: 102px;
padding: 0;
margin: 0;
}
.blogcard-content {
margin-left: 0px;
}
.blogcard-title {
font-size: 16px;
line-height: 1.4;
height: 66px;
padding-left: 5px;
padding-top: 1px;
letter-spacing: 0px;
}
.blogcard-content:after {
content: "タップして読む";
margin-right: 8px;
margin-left: auto;
}
.blogcard-thumbnail {
margin: 0;
width: 200px;
max-height: 150px;
max-width: 50%;
}
.blogcard-thumbnail img {
display: block;
width: 100%;
max-height: 100px;
border-right: 0.1px solid #cccccc;
}
}
@media screen and (max-width: 560px) {
.blogcard-content:after {
width: 150px;
font-size: 14px;
}
.blogcard-title {
margin: 0;
}
}
@media screen and (max-width: 320px) {
.blogcard-thumbnail {
width: 100px;
}
.blogcard-content {
margin-left: 110px;
}
.blogcard-title {
height: 35px;
}
}
/**印刷時のブログカードの表示*/
@media print {
.blogcard-wrap {
margin: 24px 24px;
max-width: auto;
}
.blogcard-content:after {
display: none;
}
.blogcard-title {
font-size: 100%;
height: 90px;
}
}5-2. SNSシェアボタンを丸くした
/*SNSシェアボタン*/
#main .button-caption {
display: none; /*キャプション非表示*/
}
.sns-share-message{
font-weight: bold; /*太字*/
color: #875d5b; /*文字色*/
}
.sns-share-buttons {
flex-wrap: nowrap; /*折り返さない*/
justify-content: center; /*中央寄せ*/
}
.sns-share-buttons a {
border-radius: 50%; /*丸くする*/
font-size: 20px; /*アイコンのサイズ*/
margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-share a {
width: 40px; /*ボタンの横幅*/
height: 40px; /*ボタンの高さ*/
}
/*SNSフォローボタン*/
.sns-follow-message{
font-weight: bold; /*太字*/
color: #875d5b; /*文字色*/
}
.sns-follow-buttons {
justify-content: center; /*中央寄せ*/
}
.sns-follow-buttons a {
border-radius: 50%; /*丸くする*/
font-size: 20px; /*アイコンのサイズ*/
margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-follow a {
width: 40px; /*ボタンの横幅*/
height: 40px; /*ボタンの高さ*/
}
/* アイキャッチカテゴリーラベル非表示 */
.entry-card .cat-label,
.related-entry-card .cat-label,
.carousel-in .cat-label{
display: none;
}
5-3. 見出しのデザインに吹き出しをつけた
/** 見出しに吹き出しをつける */
@media screen {
#container h2 {
position: relative;
padding: 0.6em 1em !IMPORTANT;
}
#container h2:not(.entry-card-title):after {
position: absolute;
content: '';
top: 100%;
left: 50px;
border: 15px solid transparent;
border-top: 15px solid #FDC000;
width: 0;
height: 0;
}
.widget h2 {
font-size: 24px;
width: 100%;
}
}
@media screen and (max-width: 834px) {
.widget h2 {
font-size: 20px;
width: 100%;
}
}5-4. シェアボタンの余白を狭く調整した
/** シェアボタンの間隔をつめる*/
.entry-content {
margin-bottom: 0em;
}
.sns-share, .sns-follow {
margin: 0 0;
}
6. note風のワンカラムデザインにした
もっと文章に集中できるように、という大仕事でした。
/** note 風のワンカラム*/
@media screen {
.no-sidebar .wrap {
width: 700px;
}
.no-sidebar .navi-in>ul li {
width: 120px;
}
.no-sidebar body.public-page {
background-color: #ffffff;
}
.no-sidebar .header {
display: none;
}
.no-sidebar .content {
margin-top: 0;
}
}
@media screen and (max-width: 834px) {
.no-sidebar .wrap {
width: auto;
}
}継ぎ足し継ぎ足しスタイルを追加してきたので、ぼちぼち整理しないといけませんね。
ここで紹介したリンクはこちら
ブログの印刷時のスタイルを変更する【@media print】
スタイルシートは表示画面だけではなく、印刷時のスタイルを指定することもできます。今回は、先日（2020年6月1日）更新した。追加スタイルシートの中身をまとめておきます。 追加CSSの中身 このブログは冊子印刷でA4に2ページ分印刷したときに、文字サイズなど読みやすいように編集しています。 そのまま印刷すると文字が大きすぎるかもしれません。 このホームページではちょこちょこっとしたスタイルはWordPressの追加CSSに記述しています。今回、少し整理したので、まずはずらっとC...
chiilabo.com
ブログの画像に枠をつける ～ CSSのimgタグとWordPress
今回は、ブログ記事の画像に枠をつける、という設定をしました。 画像の文字がリズムを壊している このブログ記事で使う説明画像は、説明資料や講義でも使うので文字が入っています。 しかし、これまで本文と画像内の文の見分けがつきにくく、記事を読むときに文章が繰り返されたりして、リズムが悪いように感じていました。 なんか自分でも違和感があったんですよね そこで、違和感の原因を考えたところ「読む順番がわかりにくいから」と思い至りました。例えば、漫画でも上から下へ自然な順番で読むことができ...
chiilabo.com
![CocoonのSNSフォローボタンが大きかったので小さくした（border-radius）[CSS]](https://chiilabo.com/wp-content/uploads/2022/02/image-49-320x198.png)
CocoonのSNSフォローボタンが大きかったので小さくした（border-radius）[CSS]
ちいラボのブログ メンテナンス日記！ 今日は「フォローボタン」のデザインをおしゃれにしてみました。メモしておきます。 環境 WordPress 5.5.1 (Cocoon テーマ バージョン: 2.2.3.1) 「SNSフォロー」ボタンを見つけた ホームページのメンテナンスをしながら「Cocoon設定」を見ていたら、「SNSフォロー」ボタンがありました。 さっそく表示させてみたところ、スマホでみると３行とだいぶ「目立ちすぎる」感じです。 フォローボタンが５つもあると、ちょっと...
chiilabo.com
ブログをnote風のデザインにしてみた（ワンカラムデザイン）
今回はCocoonとCSSを使って、note風のシンプルなブログデザインに変更してみました。 note風デザインの記事一覧 「note（ノート）」というブログサービスをご存知ですか？ ブログサービスといえば、ヤフーブログ、アメブロ、はてなブログといろいろありますが、noteの特徴は簡単にいえば、投稿されたブログにカンパしたり、有料記事として公開することができること。 でも、それ以上にnoteの特徴になっているのは、シンプルなデザインだと思います。 ２カラムのアメブロと比べてみ...
chiilabo.com
見出しに吹き出しをつけるスタイルをやめた
見出しに吹き出しつけるCSSを入れていたんですが、やめることにしました。 こんな見た目でした /** 見出しに吹き出しをつける */ @media screen { #container h2 { position: relative; padding: 0.6em 1em !IMPORTANT; } #container h2:not(.entry-card-title):not(.related-entry-heading):after { position: absol...
chiilabo.com
![[WordPress] ブログの一部をウェブフォントに変更する 【Google Fontsを追加する】](https://chiilabo.com/wp-content/uploads/2020/05/スクリーンショット-2020-05-21-18.43.17-160x99.png)
[WordPress] ブログの一部をウェブフォントに変更する 【Google Fontsを追加する】
ホームページを見ながら、デザインのメリハリをつけたいと思いました。そこで、今回はウェブフォントの変更をした話を書きます。 コンテンツ管理システムとテーマ このホームページはWordPressのCocoonを利用して管理しています。 環境 コンテンツ管理システム：WordpressWordpressのテーマ：Cocoon利用したウェブフォント：Google Fonts 利用しているシステム・テーマによって、CSSの読み込み・記述をどこにするか変わってきますよー Google F...
chiilabo.com
QRコードを読み込むと、関連記事を確認できます。
