今天开始记录一下对天湾这边也就是将来的天湾对面所用的ink主题的自定义CSS修改过程，基本上就是一边系统性地自学CSS一边实战应用在自己的博客上，遇到实际问题就去搜索相应的解法，这样等于是系统性学习和针对性学习同时并进，应该是非常有效的。

首先遇到的问题就是旧天湾对面已经实现的网页分享到社交媒体APP（比如微信）时自动抓取博文缩略图这个功能在新天湾这边没出来。折腾了半天网页分享抓取缩略图都失败，完全搞不懂为什么，甚至彻底卸载删除wordpress重装一个新的也没用。同一个主题旧版装在老博客上可以抓，新版装新博客就不能抓，而作者的新版demo又可以抓，真是百思不得其解🤣

最后还是学网上教的装了一个yoast seo插件一下子就解决了，太简单了，哎早知如此还折腾啥。

后来给太联测试站也装了yoast，从来都抓不出来的这个测试站也能抓了，真是相见恨晚啊！有时也不能太不信邪，只想通过修改设置或CSS而不想装插件。该装的插件还是得装！

2023.1.24 更新：

现在采用的找到相关元素的方法是搜style.css，里面挑出可能的元素和类贴到addtional css版里修改，还挺成功的。

目前为止调整了这些：

• .entry-title
• .entry-subtitle
• .entry-title
• .site-title

以上类别分别对应文章标题、副标题、站点大标题。

再调整了body的line-height，全局a的color、text-decoration和border，以及a:hover的font-weight，这些是为调整全局文字行距、链接颜色和悬停变色变形。暂时没改悬停变色因为全都变了。

接下来重点调整侧栏。包括菜单链接颜色、悬停变色+变形，修改的这些类： .widget_archive，.widget_categories，.widget_pages，.widget_meta，.widget_recent_comments，.widget_nav_menu， .main-navigation里的li的padding-top，padding-bottom和border-bottom这几个值。修改.main-navigation a:hover的color和padding-left，最后的结果是菜单链接为黑色，悬停深粉并右移。

再加上以下这段，修改这些类的链接颜色，不写的话侧栏所有链接都变深粉了：

.widget_archive a,
.widget_categories a,
.widget_pages a,
.widget_meta a,
.widget_recent_comments a,
.widget_nav_menu a,
.main-navigation a {
	color: #222;
}

但日历部分的链接仍是深粉，也蛮好看的暂时不改了。

把文章通用页脚两条横线去掉了一条，并减少了高度：

.single .site-footer {
	margin-top: 20px;
	margin-top: 1.25rem;
	border-top: 0px solid #ccc;
}

页面修改：页脚同post一样，并且改变了高度和位置，页脚改为深底浅字，默认文字为浅色；页头的站点标题和汉堡包菜单改为浅灰；页面背景要每页单独设成深色，会连带页头一起的，只有页脚颜色是单独设。修改的是以下这些类，要和.page搭配写：.page .site-header、.page .site-title、.page .site-footer，意思就是只有page的这三个类才生效。

把评论部分的两个按钮的background，都从默认的深粉色改成了中灰色，submit按钮加长成全宽：.comment-form-actions button、.comment-form .submit。

遗留问题：page整个调成深色系，倒是蛮好看，不过a:hover变色问题还没解决，现在深底浅字，结果hover后变黑色，链接就看不大出了，要想办法在本页内单独设出一个悬停变色。
或者就想办法把page上的文字链接a:hover改成#ff91bd后，要让封面与索引页标题等不能变色，现在它们一起变色变粗了，这几个要不变才好。目前索引页上的分类、时间、作者的悬停的确变色变粗了不过不太明显。

现在暂时解决了page悬停变色问题，在page部分加了一句让它变白：.page a:hover{color: #ffffff;}。但随之侧栏菜单的悬停都变成了白色，后来想出把main-navigation这一大堆都移到page部分的后面，于是侧栏保持了全局一致，单单page的悬浮变成白色。这只是权益之计，我希望是可以用第二种解决办法更好。就是要找出1.站点副标题的元素，2.单帖封面与index、archive页的标题、meta等悬浮的元素。

顺序应该是：

1. 全局链接深粉、悬停变粗变浅粉#ff91bd，或者更深粉#ff0569
2. page页头链接黑，站点副标黑，悬浮不变（这样的话可以设回白色页面了）
3. 主页、存档页、单帖页的标题、meta链接为白，悬浮不变
4. 侧栏任何元素链接黑、悬停深粉，菜单悬停移位
5. page回到白色的话，页脚就不用改颜色了，只需要去掉横线就行，放哪里都可以

晚上找到了站点副标题的元素： .site-description。把它加在page那一片里，副标题颜色就变了。所以就把page默认的都改回了白底黑字，页头3个元素： .site-header，.site-description，.site-title都变黑。

页头标题+汉堡包菜单和副标题各设了深灰和稍浅灰，悬停变黑，不影响页面文字、侧栏菜单和footer已经设好的链接色和悬停变色变形。另外也把页面文字的颜色去掉了，回归默认值。

又找到了主页存档页单帖页的标题、副标题、meta元素：.entry-meta .entry-categores .entry-title .entry-subtitle。分别加了链接颜色为白色、不变粗，这时发现原来之前看到的meta变色并不是变色，而是变透明，原始css里给这个hover设了一个0.6的透明度，我就沿用了，并且给标题也加了0.8的透明度 .entry-title a:hover {opacity: 0.8;}

.entry-subtitle 可以单独设颜色变化，但我没有设，它就自动默认和title一样变透明度了，没有找到调整副标题位置的方法，觉得它有点低。

现在几个页面、单帖的链接悬停都各自设好，没有问题了。就是archive页，搜不到帖子时它版面不对。不过等到博文导入后应该就没问题了。还有就是菜单的标题字没有自动变成大写，也要找找的。还有tag的字体不大对。

加了侧栏菜单下面的小组件，比以前难弄很多，加分割线也不好看，现在除了菜单链接色对之外别的侧栏元素链接都是深粉，看上去一片粉，吓人，明天还得改。

2023.1.25 更新：

顺利找到侧栏全局元素.site-nav（不是.widgetd_area，这个也有一定用处但并不针对整个浮动侧栏），设了链接悬停色、背景色，还能设透明度，但没啥意思就没设，这里设了之后发现前面设的一大堆widget多余了，就去掉了重复的，只留了需要的，最后整理一下成了这样：

.site-nav, 
.main-navigation li {
	padding-top: 0px;
	padding-bottom: 5px;
	border-bottom: none;
}
.site-nav a {
	color: #000
}
.site-nav a:hover {
	color: #ff2d81;
	padding-left: 0px;
	font-weight: inherit;
}
.main-navigation a:hover {
	color: #ff2d81;
	padding-left: 10px;
	font-weight: normal;
}
.site-nav form {
	padding: 0px;
	background: transparent;
}
.site-nav {
	background: #f6f6f6;
	opacity: 1
}

还找到了分割线separator元素，也就是hr标签，改了默认的两个线样式，把当中那个小签图标隐藏，就没有背景色对不上的问题了，如下：

hr:not(.stag-divider):not(.is-style-dots)::before {
	background: transparent;
	display: none;
}

但这个小签图标还挺有特色的，所以我想保留，想新设一个分割线样式为纯横线，这样正文里可以用带小签的，侧栏用纯横线，正文里也可以用纯横线，多一个选择。目前还没找到怎么添加分割线新样式。

现在新博客就很像样了，再导入十几个贴看效果，只有一个贴的时候有些效果还看不出来。

还在自定义css框里归类好的几大块都加了/**/注释，以后再找会很容易。

只是昨晚发现一个奇葩问题百思不得其解，搜索栏里搜别的关键词如果搜不到作品会进入设好的404页这个没问题，但一旦搜索一个已知的tag而没有帖子（这次是太空堡垒）时，它不进404，而是进了一个很奇葩的水弓页面，edit会发现就是我的关于作者页，但却有不一样，是那种奇葩灰背景没内容的页面，从没设过这样一个页面，感觉是系统哪个php自动生成的。

不过问题应该不大，等博客导入后，不会有发生这种情况的机会的，只要是tag就一定会搜出结果来，所以暂时就不管它了。

2023.1.27 更新：

.site-nav hr:not(.stag-divider):not(.is-style-dots)::before {
	background: transparent;
	display: none;
}

.stag-divider--double { 
	height: 0px;
	border: 1px solid #ccc; } 
.stag-divider::before { 
	display: none; 
}