讲解Afinger的推荐定制方法【Tsuzuki博客风格设计】

我将回答这些问题。

本文内容

・Afinger 是一个什么样的主题？
・定制方式①：首页版
・定制方式②：字体版本
・定制方式③：侧边栏版本
・定制方法④：推荐文章

本文的可靠性

当我写这篇文章时，我已经写博客七年了。我开始把写博客作为副业，一年之内每月就赚到了100万日元，现在我靠写博客谋生。

前几天，当我写下面的文章时，我收到了一条意见，“我已经安装了 Afinger，但我想知道如何像 Tsuzuki Blog 一样自定义它！”

>> AFFINGER6实际使用体验回顾【缺点也公开】

本博客的设计如下。

我们的博客首页

因此，这次我将介绍如何将 Afinger 自定义为这个博客的样子，并带有图像。

在这个博客上，我们重视“美好的东西”，并强调小细节的质量，例如首页和正文的字体。

关于 AFFINGER PACK3AFFINGER PACK3（AFFINGER6EX版）的彻底审查！决定是否购买！文章中对此进行了总结。

本博客独有的特别优惠通知

顺便说一下，这7个好处如下。

就是这样。

现在就让我来给大家介绍一下吧。

首先我简单介绍一下Afinger。

阿指基本信息

• 价格：14,800日元（含税）
• 计划：ACTION（AFFINGER6版本）
• 经销商：Onspeed有限公司
• 多个站点使用：适合个人

这是一个中等价格的 WordPress 主题。

我购买并正在使用最简单的计划，称为 ACTION（AFFINGER6 版本）。

接下来为大家介绍一下Afinger的五大魅力。

Afinger 对博客有用的 5 个魅力

• SEO内部措施
• 高度可定制
• 可以在多个站点上使用
• 兼容移动高速显示
• 由于它是一个著名的主题，所以当你谷歌它时，会有很多信息。

是这样的。

最初，它是联盟中的流行主题，因此有很多可以提高 CVR 的装饰，以及可以让您轻松创建专业媒体设计的模板。

我们在下面的文章中总结了实际安装和使用 Afinger 的人的评论，所以如果您正在考虑安装它，请查看一下。

定制方式①：首页版

首先，我将解释如何自定义首页。

对于定制，经典编辑器” 需要插件，如果您还没有启用，请启用它。

第 1 部分：添加/编辑固定页面

都筑博客的首页不是文章页面，而是固定页面。

第一的，”WordPress管理画面」→「固定页面」→「新增加单击``。

我们将在下面解释如何创建它。

第2部分：栏目布局+分类设置（推荐文章）

” 在首页推荐文章我将解释如何制作``部分。

Tsuzuki博客的部分如下。

在 Afinger 上，“布局" 通过更改标签，您可以将文章分两栏显示。

“第 1 部分：添加/编辑固定页面”我创建了一个新的固定页面，所以我用“创建了一个新的固定页面首页让我们给它起一个标题。

添加标题后，如下所示进行编辑。

如下图所示，标签」→「布局」→「PC 和 Tab 左右各 50%”创建两列。

左边的黄色区域就是左边显示的列。在，右侧蓝色部分就是右侧显示的栏目。已经成为了。

*在智能手机版本中，它显示在一列中。

接下来，让我们为类别名称和链接创建一个类似横幅的框。

如下图：标签」→「盒子设计」→「横幅样式框」→「基本”，插入类似横幅框的代码。

顺便说一句，Tsuzuki博客上的代码如下。

• st-flexbox url=”链接目标 URL”
• title=”类别标题”
• backgroud_image=”标题背景图片”

要点如上。

接下来，让我们创建一张博客卡。博客卡由以下部分组成。

可以使用下面的代码创建博客卡。

• st-card id=文章 ID

您应该记住的要点是以上。

您可以在帖子的文章列表中查看文章ID。阿手指官方网站如何查看文章ID它被介绍于.

在都筑博客的情况下，各放置四张博客卡。

以下是完成的版本。

最后，”管理画面」→「AFFINGER6 管理」→「整体设置」→「摘录设置”。

「在 PC 上查看时隐藏内容中的“博客卡”和“推荐文章”摘录”，博客卡将仅显示标题。

栏目布局和类别设置现已完成。

这③：标题下的推荐文章

接下来，我将向您展示如何创建标题下的推荐文章。

就是上面红框圈起来的部分。

「WordPress管理画面」→「AFFINGER管理」→「标题下方/推荐单击``。

然后，您将看到如下所示的屏幕。图片网址」「文本」「链接目标 URL”。

之所以有两段文字，是因为本博客使用的是AFFINGER EX版本。对于普通版，仅显示一行。

如何获取图片URL

图片网址是

「WordPress管理画面」→「媒体」→「图书馆”，然后单击要附加的图像以复制 URL。

看起来像下面这样。

粘贴上面复制的 URL，就会显示图像。

「图片网址」「文本」「链接目标 URL”，然后输入“节省单击``。

第 4 部分：将固定页面放在首页上

如果您将创建的静态页面设置为如下所示的首页，则首页将成为静态页面。

「定制」→「主页设置」→「主页”可以设置。

像这样的东西：头版” 显示时，TOP 页面设置完成。

这是自定义首页的方法。

定制方式②：字体版本

第二个定制是字体。

字体是控制博客文章“某种好感”的一个超级重要因素，所以我们要注意它。

第 1 部分：字体类型

Tsuzuki Blog 的字体类型设置如下。

font-family:Noto, "Hiragino Sans", Helvetica, Arial, sans-serif;

可以从管理屏幕配置上述设置。

您可以通过“AFFINGER6管理”→“常规设​​置”→“字体类型”并在“其他（优先）”中写入上述字体来进行设置。

看起来就像上面的那样。

只需填写“总体”和“文章标题、标题（H2-3）、小部件按钮等”即可。你就完成了。

第 2 部分：字体大小

接下来，我们来谈谈字体大小。

在 Tsuzuki 博客上，以下项目指定字体大小。

• 标题
• H2标签
• H3标签
• 基本（P 标签）

关于以上，我们设置了PC版和智能手机版。

如果你像上图那样设置，它就会反映出来。

之所以设置多种字体类型，是因为根据浏览器的不同，有些字体无法显示。

第三部分：句子的字里行间

最后我想谈谈行距。

您可以在设置的屏幕上设置字体大小。

就像字体大小一样，我们设置以下项目。

• 标题
• H2标签
• H3标签
• 基本（P 标签）

如果按照上面的方法设置的话，就会有反映。

顺便说一句，要在文章中添加行之间的空格，请使用古腾堡的间隔符。

您可以通过插入间隔符来调整行距。如果不插入间隔符，行距将为“AFFINGER6管理”中设置的行距。

如果您使用经典编辑器，如何在WordPress中创建文章时添加换行符[针对初学者]您可以使用 来设置行距。

第 4 部分：关于标题（H2、H3）

要设置标题，管理画面」→「外部的」→「定制”将举行。

H2 的标签设置是“标题标签 (hx)/文本）」→「H2标签”并配置如下所示的设置。（H3的方法相同）

• 文字颜色：#333333
• 背景颜色：#f7f7f7
• 背景颜色（渐变顶部）：#f7f7f7
• 边框颜色：#4865b2

如上所述设置字体颜色和背景。

设置标题设计，如下图所示。

H3的设计设置如下。区别在于左边距。

是这样的。请随意调整颜色和边距以满足您的口味。

定制方式③：侧边栏版本

最后我们来介绍一下侧边栏的设置。

侧边栏设置是通过管理屏幕上的小部件来控制的，因此请打开外观 → 小部件来查看它们。

第 1 部分：搜索窗口

将左侧的“搜索”拖放到右侧的“侧边栏小部件”。

如果像上面这样就OK了。

第 2 部分：作者简介

接下来是作者的简介，位于右侧。侧边栏小部件”，在左侧“11_STINGER站点管理员介绍” 拖放。

如果像上面这样就OK了。

如何设置管理员卡：个人资料卡（站点管理员介绍）请看一下。

第三部分：推荐文章

都筑博客で「最常阅读的文章》可设为Affinger的“推荐文章”。

如上图所示，在管理界面中，AFFINGER6管理」→「标题下方/推荐」→「推荐文章列表”。

「推荐文章列表中显示的人物：”并指定您想要包含在推荐文章中的文章 ID。

在那之后，”显示在侧滚动条上”完成。

总结：要想取得好成绩，就应该注意细节。

这次，我们介绍了如何将 Afinger 定制成 Tsuzuki Blog 的样子。

我已经分别谈论了首页、字体和侧边栏，但我个人认为通过密切关注细节来表达“好东西”很重要。

如果您阅读了本文并想介绍 Afinger，请参阅下面的文章。

现在就这些了。