こんにちは、陽翔です。
今回ブログのデザインをリニューアルしました。
そこでこの記事ではどこを変更したのか、どのような作業をしたのかをまとめます。
ほとんど「ぽんひろ.com」さんの方法でやっていますので、そこからの変更点を書きます。
コードばかりなのでPCで見ることをおすすめします。
メリット
・ブログが見やすくなると、クリック率が上がる。
・初心者から一歩進めた気になる。
- JINに適用しています。他のブログテーマを使用している方は調整が必要かもしれません。
※2022/01/08 テーマをSWELLに変更してさらにリニューアルしています。ですがこの記事は残しておきます。 - CSSは長くなるので「外観」-「テーマエディター」-「style.css」を使うとよいでしょう。かならずバックアップを取ってから編集してください。
- functions.phpも必ずバックアップを取ってから編集してください。
- Googleアドセンスをすでに取得しています。この変更のせいでアドセンス合格出来ない、という可能性も否定できません。合格まではやらない方がいいかも知れません。
トップページをサイト型に変更
トップページをサイト型に変更するとはどういうことかと言うと、
変更する前は新着記事がズラッと並んでいるだけかと思います。
それが変更後では、おすすめ記事を載せたり、カテゴリの記事を載せたりといったカスタマイズが出来るようになります。
「もっと見る」ボタンなんかも付けることができます。
方法
一言で言うと、トップページを固定ページで表現する、というものです。
基本ぽんひろさんの「どこよりも簡単にJINのトップページをサイト型にカスタマイズ！」の通りに進めます。
変更点は下記です。
・Step1のCSSに以下を追加します。ブログカードの「続きを読む」を消しています。元々ない方は飛ばしてください。
.home .blog-card:after{
display:none;
}・Step2のコードを下記に変更する。（そのままだと何か上手くいかなかったので変更）
/* 最新記事取得 */
function new_list_func($atts){
global $post;
$arg = array(
'posts_per_page' => 4,
'orderby' => 'date',
'order' => 'DESC',
);
$posts = get_posts($arg);
foreach($posts as $post):
setup_postdata($post);
$str.= get_permalink();
$str.="\n";
endforeach;
wp_reset_postdata();
return $str;
}
add_shortcode('new_list', 'new_list_func');・またカテゴリ別の最新記事を取得するためにStep2のコードに下記を追加
/* カテゴリ別最新記事取得 */
function cat_list_func($atts) {
extract(shortcode_atts(array(
"cat" => '',
"num" => ''
), $atts));
global $post;
$posts = get_posts('numberposts='.$num.'&order=DESC&orderby=date&category='.$cat);
foreach($posts as $post) :
$str.= get_permalink();
$str.="\n";
endforeach;
wp_reset_postdata();
return $str;
}
add_shortcode('cat_list', 'cat_list_func');・Step3のカスタムHTMLを以下に変更
h1見出しにしてるのは、普段僕がh1見出しを使用していないので、CSSの変更をし易かったからです。
new_listは新着記事を取得します。
cat_list cat=”（カテゴリページのID）” num=”（いくつ載せるか）”はカテゴリページから記事を取得します。
<h1 class="top_h">新着記事</h1>
<div class="top-wrap top-2">
new_list ←両側に[]をつけてください
</div>
<div class="wp-block-jin-gb-block-rich-button jin-flexbox"><div class="jin-shortcode-button jsb-visual-flat jsb-hover-down"><a style="border-radius:40px;background-color:#FFA500;background:linear-gradient(107.61deg, #5ba9f7 7.99%, 91.12%)" href="https://kiridashi-kousatsu.com/articles/">新着記事をもっと見る</a><img border="0" width="1" height="1" alt=""></div></div>
<div class="wp-block-jin-gb-block-blank-space blank-space" style="height:30px"></div>
<br>
<h1 class="top_h">おすすめ</h1>
<div class="top-wrap top-2">
https://kiridashi-kousatsu.com/first-month-adsense/
https://kiridashi-kousatsu.com/coffee-basis-taste/
https://kiridashi-kousatsu.com/db-siken/
</div>
<br>
<h1 class="top_h">カフェ/コーヒー</h1>
<div class="top-wrap top-2">
cat_list cat="24" num="4" ←両側に[]をつけてください
</div>
<div class="wp-block-jin-gb-block-rich-button jin-flexbox"><div class="jin-shortcode-button jsb-visual-flat jsb-hover-down"><a style="border-radius:40px;background-color:#FFA500;background:linear-gradient(107.61deg, #5ba9f7 7.99%, 91.12%)" href="https://kiridashi-kousatsu.com/category/cafe/">「カフェ/コーヒー」をもっと見る</a><img border="0" width="1" height="1" alt=""></div></div>
<br>
<h1 class="top_h">ブログのノウハウ</h1>
<div class="top-wrap top-2">
cat_list cat="38" num="4" ←両側に[]をつけてください
</div>
<div class="wp-block-jin-gb-block-rich-button jin-flexbox"><div class="jin-shortcode-button jsb-visual-flat jsb-hover-down"><a style="border-radius:40px;background-color:#FFA500;background:linear-gradient(107.61deg, #5ba9f7 7.99%, 91.12%)" href="https://kiridashi-kousatsu.com/category/blog-know-how/">「ブログのノウハウ」をもっと見る</a><img border="0" width="1" height="1" alt=""></div></div>
<div class="wp-block-jin-gb-block-blank-space blank-space" style="height:30px"></div>・見出しのデザイン設定のため、以下のCSSを追加
/* トップ見出し */
.top_h {
position: relative;
margin-bottom: 1em!important;
font-size: 32px!important;
padding-bottom: 0!important;
text-align: center;
font-weight: unset!important;
color: unset!important;
line-height: unset!important;
}
.top_h:before {
content: '';
position: absolute;
bottom: -15px;
display: inline-block;
width: 100%;
height: 2px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #F7C57B;
border-radius: 2px;
}・余白と枠線を消すのは以下に変更（若干左右の余白を残すため）
.home .cps-post-box{
padding: 0 1%;
box-shadow: none;
}以上です！
これでトップデザインを変更しました。
ボックスナビを作成する。
PCではサイドバーに、スマホはグローバルメニューに表示させる
ボックスナビとは以下のようなものです。
ただのリストよりクリックしたくなりますよね！
これもぽんひろさんのを参考にします。
PCとスマホで共通する設定
「ボックス分けされたナビを作る！回遊率をアップしよう！」のCSSをコピペします。
そのページに書いてありますが、JINの人は.sidebarを「.sideber」に変えることを忘れないでください。
PCのサイドバーに設定する
「外観」-「ウィジェット」のサイドバーに、「カスタムHTML」を追加し、以下を入力します。
2つだけ抜粋したので後は<li>～</li>をコピペください。
・href=”カテゴリページのURL”
・jin_icon_cafeの部分はJINのアイコンリストの上側をコピペしてください。
・タイトルを変更してください。
<div class="p-nav">
<ul>
<li><a href=https://kiridashi-kousatsu.com/category/cafe/>[jin_icon_cafe]<span class="p-nav-title">カフェ/コーヒー</span></a></li>
<li><a href=https://kiridashi-kousatsu.com/category/blog-know-how/>[jin_icon_wordpress]<span class="p-nav-title">ブログの作り方</span></a></li>
</ul>
</div>スマホのグローバルナビゲーションのボタンに設定する
「JINのスマホメニューをカスタマイズ！アイコン付きでわかりやすく！」の順に進めます。
最初のCSSはもうコピペしたので必要ないです。
メニューの調整用のCSSを以下に変更します。（画面幅を見やすくするのと、スクロールできるように）
.sp-menu-box .p-nav ul.menu-box{
height: 78%;
width: 100%;
}
.sp-menu-box .p-nav ul{
padding: 0 7% 1%;
}
.sp-menu-box .p-nav .menu-item{
min-height:120px;
}
.sp-menu-box .p-nav li a:before{
content:unset;
}
.sp-menu-box .p-nav ul li a {
padding: 0.3em 1em 1em;
}
@media screen and (min-width: 768px) {
ul.menu-box li.menu-item a img{
display:none;
}
}メニューの設定では、まず右上の「表示オプション」をクリックして、「説明」にチェックを入れます。
メニューに載せたいページを追加し、それぞれの設定で「ナビゲーションラベル」は<br>を付けます。
そして説明のところにJINアイコンの下側のコードを入力します。
最後に「グローバルナビゲーション」のみにチェックを入れます。
ヘッダのグローバルナビゲーションが多くなって見ずらい場合、非表示にする。
グローバルナビゲーションのヘッダは以下をCSSに追加することで非表示にできます。
#nav-container {
display:none;
}以上で完了です。
まとめ
以上が方法になります。
僕と同じようにしてみたい方は参考にしてみてください。
ひとつ課題があるとしたら、おすすめの記事は自動でなく手動で設定しているので、ここもfunctions.phpで取得して表示させる方法があれば、より手軽だと思います。
最初にも書きましたが、ブログが見やすくすると、クリックされやすくなりますし、初心者から進んだような気持になります。
ぜひ一度お試しください。
コメント