どうも、”いうと”です！
このページでは、本ブログで行っているカスタマイズ（主にCSS）についてご紹介します。
お問い合わせフォームのボタン色を変更
いうと
お問い合わせボタンが見にくいということで、お問い合わせフォームのボタン色を変更してみました〜
tdk.com様を参考にさせて頂きました、ありがとうございます。
コードはこちらから
input.wpcf7-submit {
padding:1em;/* ボタン内の余白 */
margin:2em 0em;/* ボタンの上下にのみ余白 */
background: #666666;/* 背景色 */
border-radius: 5px;/* 角を丸く*/
color: #fff;/* 文字の色*/
font-size: 18px;/* 文字の大きさ */
font-weight: bold;/* 太字*/
}
input.wpcf7-submit:hover {
opacity: 0.8;/* マウスオンで半透明に */
}「color: #〇〇（カラー名）」を変更すると、他の色に変更可能です。
完成例
いうと
本ブログのテーマに合ったボタンに変わりました〜
メニューデザインを変更
いうと
メニューが何だか寂しいということで、メニューデザインを変更してみました〜
リスブロ様を参考にさせて頂きました、ありがとうございます。
コードはこちらから
nav#navi, .menu-header .sub-menu{
font-weight: bold;
box-shadow: 0 5px 15px -5px rgba(0,0,0,0.2);
}
.menu-header .sub-menu .item-label{
font-size: 80%;
}
.menu-header .item-label{
color: #b5b5b5 !important;
}
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor,
.menu-header .menu-item:hover {
color: #333 !important;
border-bottom: 3px solid #333333;
transition: all .2s ease;
}
.menu-header .sub-menu .menu-item,
.menu-header .sub-menu .menu-item:hover{
border-bottom: none;
}
.menu-header .current-menu-item>a .item-label,
.menu-header .current-post-item>a .item-label,
.menu-header .current-menu-ancestor>a .item-label,
.menu-header .current-post-ancestor>a .item-label,
.menu-header .item-label:hover{
color: #333 !important;
transition: all .2s ease;
}完成例
いうと
メニューデザインが見やすく、よりお洒落になりました〜
記事一覧がふわっと浮く
いうと
記事一覧が何だか寂しいということで、目立つようにカスタマイズ！
リブズロ様を参考にさせて頂きました、ありがとうございます。
コードはこちらから
.home main, .archive main{
background-color: transparent;
margin-top: 0;
padding-top: 0;
}
.category-content{
background-color: white;
padding: 1em 1em 0.2em;
margin-bottom: 1em;
}
.entry-card-wrap{
transition: all .3s ease;
margin-bottom: 1em!important;
background-color: white;
border-radius: 4px;
}
.entry-card-wrap:hover{
box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
transform: translateY(-2px);
background-color: white;
}完成例
いうと
これで記事が見やすくなりました〜