细心的小伙伴发现。我的PC端 logo 像白猫那样。这篇文章讲述的就是如何做到这个样子。

原文来自 雾时之森

首先你需要字体导入才能。启用这种字体。之后就是动画而已。

1.那么对于适合的字体。(比如中文字体。或者日文字体)我推荐使用Google字体

2.之后你需要这个软件,获取下载 (如果连接挂了,请评论留言)

3. 生成完成后会有个文件夹,将文件夹复制到 Sakura主题包的 \inc\fonts 目录,文件夹重命名为你自己想要的名字,这里我用的是LOGO

4.复制其名字 打开Sakura主题包中的头文件 header.php
引用上面文件里的 KosugiMaru-Regular.css 文件

<link rel="stylesheet" type="text/css" href="/wp-content/themes/Sakura/inc/fonts/LOGO/KosugiMaru-Regular.css">

修改 Sakura主题包中的头文件 header.php class=logolin 这个样式

其样式名字为所引用字体名字 (当这个地方的引用的字体为软件生成的字体)

使用下面的代码。请自行修改。

5.

<span class="logolink KosugiMaru-Regular">
    <a href="<?php bloginfo('url');?>">
    <ruby>
    <span class="sakuraso">有坂</span>
    <span class="no">の</span>
    <span class="shironeko">ましろ</span>
    <rp></rp>
    <rt class="chinese-font"><?php echo akina_option('site_name', ''); ?></rt>
    <rp></rp>
    </ruby>
    </a>
</span>

6.在 后台主题设置-自定义CSS样式增加如下CSS

.KosugiMaru-Regular {
    font-family: 'miao', 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;;
}
 
.logolink .sakuraso {
    background-color: rgba(255, 255, 255, .5);
    border-radius: 5px;
    color: #464646;
    height: auto;
    line-height: 25px;
    margin-right: 0;
    padding-bottom: 0px;
    padding-top: 1px;
    text-size-adjust: 100%;
    width: auto
}
 
.logolink a:hover .sakuraso {
    background-color: orange;
    color: #fff;
}
 
.logolink a:hover .shironeko,
.logolink a:hover rt {
    color: orange;
}
 
.logolink.KosugiMaru-Regular a {
    color: #464646;
    float: left;
    font-size: 25px;
    font-weight: 800;
    height: 56px;
    line-height: 56px;
    padding-left: 6px;
    padding-right: 15px;
    padding-top: 11px;
    text-decoration-line: none;
}
.logolink.KosugiMaru-Regular .sakuraso,.logolink.KosugiMaru-Regular.no {
    font-size: 25px;
    border-radius: 9px;
    padding-bottom: 2px;
    padding-top: 5px;
}
.logolink.KosugiMaru-Regular .no {
    display: inline-block;
    margin-left: 5px;
}
 
.logolink a:hover .no {
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}
 
.logolink ruby {
    ruby-position: under;
    -webkit-ruby-position: after;
}
 
.logolink ruby rt {
    font-size: 10px;
    transform: translateY(-15px);
    opacity: 0;
    transiton-property: opacity;
    transition-duration: 0.5s, 0.5s;
}
 
.logolink a:hover ruby rt {
    opacity: 1
}

请自行替换其中的KosugiMaru-Regular为您前面header.php所使用的class 名称

可以自定义颜色。

$注意,请将外观-Skura主题下的Logo取消图片。使用默认文字模式。否则样式无法表现!


ようこそ、これは有坂ましろ!よろしく!