最近完成了本站的子主题和Gallery页面的制作！学着程序员来写一个技术总结文章XD虽然其实根本没有技术含量，完全就是最基础的div+css……
子主题是Wordpress自带的一个功能，其产生原因在于：当你对主题的样式进行修改后，一旦主题更新，那么先前所改的样式便会全部消失，需要你再写一次。这也就意味着主题每更新一次，你都要重写一遍自己的样式，显然非常麻烦。子主题则是在引用父主题的基础上，从外部加上修改的样式，即在加载父主题的样式后，再加载子主题中的样式。无论内部的父主题如何更新，只要子主题在引用父主题，那么更新的内容也会随之自动变化，而子主题本身的内容不会被更新换掉。
不过按照Wordpress官方的模板写css文件好像不起作用，我从网上搜到的办法是在开头的注释声明后加上一句（其中parent-style需要替换为子主题的父主题名，因个人而异，路径也有可能有所不同）：
@import url("../parent-style/style.css");
随后在仪表盘的主题中启用子主题即可。需要注意的是，原本父主题中的所有设置都要重新设置一遍。在子主题中，我主要修改的是p标签的段首缩进：
p{
text-indent: 2em;
}
除此之外还有emoji在文本中显示出来的大小问题，现在可以正常显示了（然而根本没人来用……！）。这段之前秋帮我改过，他以前写的代码似乎还在，但不知为何没有起作用，我就将其贴了过来，具体如下：
img.wp-smiley,
img.emoji{
max-height: 0.07em !important;
height: 5em !important;
width: 5em !important;
margin: 0.07em !important;
}
另外为了区别附记的文字与先前所写的文字，加了一个ps_e的ID，使文字显示为棕色：
#ps_e{
color: #660000;
}
并加了一个no_indent的ID，取消带有该ID的标签中的段首缩进，便于居中显示的文字排版问题：
#no_indent{
text-indent: 0;
}
接下来是Gallery的部分。以前菜单中的Gallery选项只是链接到了带有Gallery这个分类目录的日志集合页面，然而这个主题的文章在摘要中不显示图片（后来才发现有特色图片这么个东西，不过还没搞懂是干啥用的），不仅看起来不方便，也完全没有画廊展示的感觉与功能，因此这次自己写了一个Gallery页面作为绘画作品总结，更便于查看。
对于页面的构想来自于shilin老师以前的个人网站中的画廊部分，图片以一个方形缩略图的形式展现，一个个排列在一起，大类按照年份来划分。我很喜欢这样简洁的风格，便决定也做成这样的形式，点开图片后直接链接到图片所在的日志页面（当然shilin的那个更加复杂一点，还有光标效果、编号、分类功能等，对我来说难度有点大，而且我也不是很需要，因此就舍去了）。
经过几次尝试后，方形缩略图的尺寸定为120*120，较为清晰也不会显得太大。直接在页面中写几个连续的img标签，每张图片都会另起一行显示，达不到我要的“几张图片显示在同一行中，排满之后自动换行”的效果。将每张图片都以一个div标签包起来，设置class=”gallery_e”，在子主题的样式表中设置gallery_e这个类别：
.gallery_e{
float: left;
width: 120px;
margin: 1px;
}
就能达到img标签并排显示、图片之间间隔1px的效果。之所以设置为gallery_e而不是gallery，是为了防止覆盖原有的同名类别导致其他地方显示混乱（这个主题自带一个gallery功能，不过我没弄懂，还是决定自己写一个）。这时又出现了新的问题：分割用的年份及hr标签与img并排显示了，出现了很奇怪的效果，因此将分割的部分也用一个div包起来，设置类别为gallery_title，设置clear: both，就能解决换行问题。这时hr标签与上一行的图片几乎是贴在一起的，为了分隔得更开一些，设置适当的padding-top（此处设置margin是没有用的，似乎牵扯到内层div的边距会被转移到外层div上的问题，我没能解决，干脆转为改padding），具体样式如下：
.gallery_title{
clear: both;
padding-top: 15px;
margin-bottom: 5px;
}
虽然同一行中的img是按照我设置的1px外边距隔开的，但两行之间却隔得很远。审查元素后发现这是img的外边距造成的，导致外部的div标签高度有160（这里纠结了好久！），因此设置gallery_e下的img的margin为0（尽量不影响到其他的img显示，因此仅修改gallery_e类下的img样式），问题便解决了：
.gallery_e img{
margin: 0;
}
这时差不多就完成了我理想中的页面，然而在手机上查看还是觉得120*120太大了，故加上：
@media screen and (max-width: 1080px) {
.gallery_e{
width: 80px;
height: auto;
margin: 1px;
}
}
意思是屏幕宽度小于1080时，Gallery中的图片显示为80*80，效果还可以，只是在PC端的窗口宽度小于1080时也会造成图片缩小，看起来就有点太小了。另外我只测试了自己的手机上的效果，没试过其他的屏幕，可能还有些问题。还加了下面这段：
img,
object{
max-width: 100%;
max-height: 100%;
}
防止出现在移动端上图片扩大变形的问题，不过好像是多余的……
大致就是如此。自己解决问题之后很有成就感！同时也觉得css好像没有想象中那么复杂，加上对那些很有年代感的个人网站的憧憬，有点想继续学习一下css并自己搭个小站出来，一方面也是因为FC2太不稳定了……再说吧……