本ブログで行っているカスタマイズについて

どうも、”いうと”です!

このページでは、本ブログで行っているカスタマイズ(主にCSS)についてご紹介します。

お問い合わせフォームのボタン色を変更

Before
いうと
いうと

お問い合わせボタンが見にくいということで、お問い合わせフォームのボタン色を変更してみました〜

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: #〇〇(カラー名)」を変更すると、他の色に変更可能です。

完成例

After
いうと
いうと

本ブログのテーマに合ったボタンに変わりました〜

メニューデザインを変更

Before
いうと
いうと

メニューが何だか寂しいということで、メニューデザインを変更してみました〜

リスブロ様を参考にさせて頂きました、ありがとうございます。

コードはこちらから

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;
}

完成例

After
いうと
いうと

メニューデザインが見やすく、よりお洒落になりました〜

記事一覧がふわっと浮く

Before
いうと
いうと

記事一覧が何だか寂しいということで、目立つようにカスタマイズ!

リブズロ様を参考にさせて頂きました、ありがとうございます。

コードはこちらから

.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;
}

完成例

After
いうと
いうと

これで記事が見やすくなりました〜

タイトルとURLをコピーしました