大家好，我是一名上班族博主。麦克林是。
我的一位博主同事是 Yoshi ( @yoshi_bpwire）是一位旅游博主。
第一眼，你就会被美丽的设计和为用户考虑的旅游网站所吸引。背包客电线”被操作。
他也是一个很棒的人，写文章非常注重细节，而且是一个谦虚又清爽的帅哥。
旅游博主Yoshi（@yoshi_bpwire）来到我办公室附近☺️
他从脖子以下看起来都很帅😍pic.twitter.com/VqLtMiIaP2
— Makurin (@Maku_ring)2019年6月20日
他是新一代博主，从博主中很早就对博客的未来抱有危机感，并积极与企业合作。
参考 企业和博主将共同展望什么样的未来？公司面试的建议和方法笔记他就是这样的，网站将于2019年8月下旬关闭令人震惊的消息传出。
我真的很害怕。
我不知道他关闭它背后的真相。
但我隐约想到的是“我猜他想继续赚钱并写不同的东西。” 就是这个意思。
她是一位博主，她的文章充满情感且生动，我也这么认为。
他是一个有性格、有活力、有能力采取行动的人，所以我相信他会继续过上精彩的生活。
Yoshi先生不仅是一位才华横溢的作家，而且在通过博客赚钱方面，他也是一位出色的博主。
当我真正给博主提供建议时，背包客电线他经常用这个作为例子，我很喜欢这个。计算机辅助技术协会。
计算机辅助技术协会
号召性用语是提示读者采取下一步行动的图像或文本。
尽管这并不令人不快，但它表达了一种观点，而且我总觉得它会获得点击。
因此，在这篇文章中，我们将介绍Yoshi的以下内容。如何定制特殊的CTA既然你告诉了我这些，我就把它写下来。
这都是Yoshi先生的好意，希望对您以后的博客运营有所帮助。
Yoshi 定制 CTA 的方式
通过自定义本文，您可以创建此 CTA。
“外部的从“编辑主题”中打开子主题的 style.css 并添加以下 CSS。
样式.css
/* CTAボックス用CSS*/
.ycta-box {
display: block;
width: 100%;
background: #eaedf2;
padding: 10px;
}
.ycta-box-li {
display: table;
width: 100%;
padding: 10px;
margin: 0 0 10px 0;
background: #fff;
}
.ycta-box-img {
width: 40%;
max-width: 400px;
display: table-cell;
padding: 10px;
vertical-align: middle;
}
.ycta-box-desc {
width: 60%;
display: table-cell;
font-size: 0.9em;
padding-left: 20px;
}
@media (max-width: 767px){
/*モバイル定義*/
.ycta-box-img {
display: block;
width:100%;
}
.ycta-box-desc {
display: block;
font-size: 0.9em;
padding: 10px;
width:100%;
}
}
您所要做的就是在文章中编写下面的代码，输入适当的图像、文本和按钮，然后就完成了。
超文本标记语言
<div class="ycta-box">
<div class="ycta-box-li">
<div class="ycta-box-img">（画像のimgタグ）</div>
<div class="ycta-box-desc">
ここに商品説明が入ります。ここに商品説明が入ります。ここに商品説明が入ります。ここに商品説明が入ります。ここに商品説明が入ります。ここに商品説明が入ります。ここに商品説明が入ります。
<a class="btn raised accent-bc strong" href="https://bpwire.net">» 公式サイトを見る</a> <a class="btn raised main-bc strong" href="https://bpwire.net">» 記事一覧を見る</a>
</div>
</div>
<div class="ycta-box-li">
<div class="ycta-box-img">（画像のimgタグ）</div>
<div class="ycta-box-desc">
ここに商品説明が入ります。ここに商品説明が入ります。ここに商品説明が入ります。ここに商品説明が入ります。ここに商品説明が入ります。ここに商品説明が入ります。ここに商品説明が入ります。
<a class="btn raised accent-bc strong" href="https://bpwire.net">» 公式サイトを見る</a> <a class="btn raised main-bc strong" href="https://bpwire.net">» 記事一覧を見る</a>
</div>
</div>
<div class="ycta-box-li">
<div class="ycta-box-img">（画像のimgタグ）</div>
<div class="ycta-box-desc">
ここに商品説明が入ります。ここに商品説明が入ります。ここに商品説明が入ります。ここに商品説明が入ります。ここに商品説明が入ります。ここに商品説明が入ります。ここに商品説明が入ります。
<a class="btn raised accent-bc strong" href="https://bpwire.net">» 公式サイトを見る</a> <a class="btn raised main-bc strong" href="https://bpwire.net">» 記事一覧を見る</a>
</div>
</div>
</div>基于 Yoshi 的 CTA，我在按钮文本后添加了化学符号，并添加了按钮链接本身。请根据您的喜好进行相应调整。
备忘录
按钮装饰采用“SANGO”主题。如果你想与其他主题一起使用，请自行重写。
建议
如果直接把这个BOX代码粘贴到每篇文章中，以后替换的时候会很麻烦。
所以， ”短编码器我们建议使用插件``。
使用此插件，您将能够将自己的代码注册为短代码。
如果要替换内容，只需替换原来的代码，一切都会体现出来，提高可维护性。
另外，作为一个应用程序，您可以按类别分开显示，记住这一点很有用！
揭秘月入100万日元的方法
每月博客收入超过100万日元我已经慷慨地透露了主要查询、如何查找关键字、摘要文章的布局以及如何插入链接。
本文作者
