Skip to content

Instantly share code, notes, and snippets.

@norilog4
Last active January 10, 2021 01:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save norilog4/e14bbd5f93184d95e8bb5f8127356521 to your computer and use it in GitHub Desktop.
Save norilog4/e14bbd5f93184d95e8bb5f8127356521 to your computer and use it in GitHub Desktop.
SANGO関連記事ショートコードのCSSデザイン
/*--------------------------------------
SANGO関連記事ショートコードのデザインカスタマイズ
--------------------------------------*/
.entry-content a.linkto.table{
margin:2em 0;
border:solid 1px #555; /* 線の太さ・色 */
background:none;
transition: .3s;
}
.entry-content a.linkto.table img{
box-shadow:none;
}
.entry-content a.linkto.table:hover{
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
opacity: 0.7 ;
}
.entry-content a.linkto {
position: relative;
max-width: 100%;
}
.entry-content a.linkto:before {
position: absolute;
content: "\こちらもチェック/"; /* タイトル */
top: -17px;
left: 6px;
display: inline-block;
width: 127px;
height: 27px;
text-align: center;
vertical-align: middle;
background: #fff;
font-size: 11px;
line-height: 28px;
color: #333;
letter-spacing: 0.1rem;
padding-left: 3px;
border-radius: 0px;
}
.entry-content a.linkto:after {
position: absolute;
display: flex;
height: 15%;
padding: 2px 15px;
content: "続きを読む \f138";
font-family: "Font Awesome 5 Free";
bottom: 9px;
right: 9px;
font-size: 12px;
color: #fff;
background:#333;
font-weight:bold;
text-decoration:none;
align-items: center;
}
.entry-content a.linkto .tbtext {
font-feature-settings: "palt";
padding: 10px 0px 0px 10px;
line-height: 1.2rem;
vertical-align: top;
font-size: 14px!important;
color:#333;
}
@norilog4
Copy link
Author

このカスタマイズ方法を解説した記事
https://noripon.blog/2021/01/01/sango-kanren-title-customize/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment