SANGO。何度も言うけどすっきりかわいくて好きなんですが
記事のアイキャッチ周りをちょっと変えたのでその覚書
- アイキャッチが記事内の画像と設定同じなので、アイキャッチなのか画像なのかよくわからない
- シェアボタンがちょっと気に入らない
- タイトルをもっとタイトルらしくしたい
画像と見分けがつかないのでちょっと白ぼかしをいれてメタ情報（投稿日と更新日）をアイキャッチに重ねようと思います
子テーマのフォルダに「parts/single/entry-header.php」をコピーしてちょこっと変更
元entry-header.php
<div class="entry-meta vcard">
<?php
if ( get_option( 'show_only_mod_date' ) ) {
echo sng_get_single_date( null, 'entry-time' );
} else {
echo sng_get_date( null, 'entry-time' );
echo sng_get_modified_date( null, 'entry-time' );
}
?>
</div>
<?php if ( has_post_thumbnail() && ! get_option( 'no_eyecatch' ) ) : // アイキャッチ画像 ?>
<p class="post-thumbnail"><?php the_post_thumbnail( 'thumb-940' ); ?></p>
<?php endif; ?>↓ メタ情報を下に移動してクラスを設定する
変更後entry-header.php
<div class="sippo_eyecatch">
<?php if ( has_post_thumbnail() && ! get_option( 'no_eyecatch' ) ) : // アイキャッチ画像 ?>
<div class="post-thumbnail"><?php the_post_thumbnail( 'thumb-940' ); ?></div>
<?php endif; ?>
<p class="sippo-meta">
<?php
if ( get_option( 'show_only_mod_date' ) ) {
echo sng_get_single_date( null, 'entry-time' );
} else {
echo sng_get_date( null, 'entry-time' );
echo sng_get_modified_date( null, 'entry-time' );
}
?>
</p>
</div>CSSを設定
CSS
.sippo_eyecatch{
position: relative;/*親要素にrelative*/
}
.post-thumbnail img{
opacity: 0.5;
}
.sippo-meta{
position: absolute!important;
top: 0px;
right: 25px;
color: #417af7;
font-size: 1rem;
}外観→カスタマイズ→SANGOオリジナル機能
シェアボタンの設定を以下のようにする
アイコンを丸くするCSSを追加する
CSS
.sns-dif ul {
background: none;
}
.sns-dif ul li a {
padding: 0;
box-shadow: none;
}
.sns-dif ul li a:hover {
box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.25);
}
.sns-btn__title{
display:none;CSS
h1.entry-title{
color:#15adc1;
border-bottom:3px solid #b2d5de;
}
