講解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，請參閱下面的文章。

現在就這些了。