副業・ブログ

【JIN】ブログを簡単にサイト型にする方法|ブロックエディタ(Gutenberg)での実装に完全対応!!

 この記事がおすすめな人 
  • 『JIN』でトップページをサイト型にしたい人
  • 難しいコードの入力を簡単に説明して欲しい人
  • 『ブロックエディタ』でも簡単にサイト型にする方法が知りたい人

本記事は『JINでブロックエディタを活用していて、サイト型へ変更したい人』へ向けた記事です。

おそらく一番分かりやすく且つ、丁寧に説明していますので、どなたでも設定可能になっています。

サイト型への変更で、筆者は「コード等の知識不足」および「クラシックエディとブロックエディタの違い」に翻弄(ほんろう)され、約10時間近くブログとにらめっこをしておりました。

無事変更は完了しましたが、終わってからふと思うと、おそらく設定だけなら30分もあれば完了する内容(デザイン除く)でした。

そのため今回は、苦労した部分を簡略化し分かりやすくまとめましたので、参考にしていただければ嬉しく思います。

りりまん

コードとかの知識が無い人にも簡単にできるように説明するよ!!

コードやデザインに関しましては、以下のサイトを参考にさせていただき、設定しています。(ぽんひろさん、かぶとさん、ぎふさん、ありがとうございます。)

  • 兵庫県在住 28歳
  • サラリーマン歴10年目
  • 総資産1400万円
  • ブログ運営(9カ月目)
  • Twitterフォロワー2800名
ブログ運用者
りりまん

運営者プロフィール・ Twitter(@ririmannonline

トップページのサイト型とは

まず「サイト型とはなにか?」についてご紹介します。

既に知っている方は、以下のリンクを押してもらって「カスタマイズ方法」へジャンプしてください。

クリックで移動↓
サイト型へのカスタマイズ方法

サイト型について、実際の画面で説明したいと思います。

JINを利用している方のトップページは以下のようになっています。

パソコンでの表示を記載していますが、スマホでもほとんど同じだと思います。

  • 「ヘッダー」
  • 「ピックアップコンテンツ(無い人もいる)」
  • 「新着記事」
  • 「サイドバー」

が、表示されており『JIN』を利用している人は見た目がほとんど同じとなり個性がでにくいです。

そこで注目されるのが「サイト型」です。

サイト型に変更した実際の画面が以下の通りです。

  • 「ヘッダー」
  • 「ピックアップコンテンツ(無い人もいる)」
  • 「新着記事」
  • 「サイドバー」
  • 「おすすめ記事」
  • 「各カテゴリごとの記事一覧」
  • 「見出し等のデザイン」

上記の赤文字の部分が追加となっている項目です。

しかも、表示させる順番や表記の仕方はある程度カスタマイズ可能となっていますので、自由度は高くなっています。

ではサイト型にすることで、どのようなメリット・デメリットがあるのか簡単にご紹介します。

「サイト型」のメリット

サイト型にすることで得られるメリットは以下の3つです。

  1. 同じテーマでも見た目が差別化できる
  2. デザインのカスタマイズができる
  3. 新着記事以外をトップページに表示させることができる

この3つのメリットは意外と影響が大きいです。

「差別化」や「デザインのカスタマイズ」についてですが、ブログをやっていると同テーマの人は数多くいます。

そこで、自分のブログを覚えてもらう・印象を強くするなどの工夫は必要不可欠です。

その点に関して、サイト型にするのは覚えてもらいやすくなる方法かと思います。

また、よく見てもらいたい記事を自分で選択でき、トップページへ表記できるのも大きなメリットです。

従来のトップページだと、新着記事ばかり表示されるので、見てもらいたい記事もどんどん埋もれていく傾向にあります。

カスタマイズ性の広さがサイト型の特徴ともいえます。

「サイト型」のデメリット

続いてはデメリットです。

  1. 記事数が少ないと物足りない感がでる
  2. 更新した日付が分かりにくい

先ほど「サイト型はカテゴリ毎に表示できる」と紹介しましたが、ブログ全体を見た時の記事数が少ないと少し物足りない感じがでます。

そのため、ブログを始めたばかりで記事数があまりない人は、急いでサイト型に変える必要はないと思います。

感覚的には「各カテゴリ10記事」ずつぐらいあれば良いのではないでしょうか。

また、今回紹介するサイト型へのカスタマイズ方法は「更新日時」がトップページに表示されません。

そこまで気にすることでもない気がしますが、デメリットと言えばデメリットです。

では、上記のメリット・デメリットを踏まえた上で「サイト型」へ変更したい方は、次項よりカスタマイズをしてみてください。

サイト型へのカスタマイズ方法

サイト型に変更する手順は以下の4STEPです。

  • STEP1
    『追加CSS』へコードの入力
    サイト型に必要な追加CSSを入力する
  • STEP2
    『functions.php』へコードの入力
    「新着記事取得」「各カテゴリ別新着記事の取得」の準備をする
  • STEP3
    固定ページに『HTML』で入力
    トップページに表示される画面を編集する
  • STEP4
    設定変更
    WordPressの設定を変更する

本記事の通りに進めると、簡単に設定できるので安心してください。

では、STEP1からどうぞ!!

STEP1 追加CSSへコードの入力

まずは以下のコードを「追加CSS」へ入力します。

/************************************
** トップページカスタマイズ
************************************/
.home .cps-post-main{
  padding-top:0;
}
.home .top-wrap{
  display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content:space-between;
  -ms-flex-wrap: wrap;
  flex-wrap:wrap;
  margin-bottom:1rem;
}
.home .top-wrap .blog-card-hl-box{
  display:none;
}
.home .top-wrap .blog-card{
  border:none;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18);
  background:#fff;
  padding:0 !important;
  margin:1rem 0 !important;
  flex-basis:48%;
}
.home .top-wrap .blog-card:hover{
  transform: translateY(-3px);
  box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.08);
  opacity:1 !important;
}
.home .top-wrap .blog-card:hover .blog-card-thumbnail img{
  transform:none;
}
.home .top-wrap .blog-card-box{
  display:block;
}
.home .top-wrap .blog-card-content{
  flex:unset;
}
.home .top-wrap .blog-card-thumbnail {
  margin: 0 !important;
  flex: unset;
  overflow: visible;
}
.home .blog-card-title{
  padding:1rem;
}
.home .blog-card-excerpt{
  display:none;
}
.home h1.cps-post-title{
  display:none;
}
.home .cps-post-main-box h2:first-of-type{
  margin-top:0 !important;
}
.home .share-top,.home .share{
  display:none;
}

/*(スマホ)480px以下*/
@media screen and (max-width: 480px){
  .home .top-wrap{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction:column;
  }
  .home .top-2{
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
}

/************************************
** トップページカスタマイズ(グーテンベルク用)
************************************/

.home .cps-post-box{
    padding: 0;
    box-shadow: none;
}
@media(min-width: 1024px){
    #main-contents {
        margin-top:-15px;
    }
}

追加CSSへの貼り方はWordpress設定画面より「外観」⇒「カスタマイズ」⇒「追加CSS」で行くことができます。

筆者は『ConoHa』のレンタルサーバーを利用していますが、追加CSSの公開の時にうまくいかないことが何度かありました。

その際は、WAFをOFFにすれば、問題なく公開できると思います。

公開が完了したらWAFは必ずONに戻しておきましょう。

STEP2 functions.phpへのコードの入力

続いては『functions.php』へのコードの入力です。

やり方は簡単なのですが、『functions.php』は下手にいじるとWordpressの画面が真っ白になったりするので、やる前に必ずバックアップをしておきましょう。

筆者は「WinSCP」を活用していますので、参考までに。(バックアップの取り方は、別途記事も作成予定ですが、まだ追いついていません、、、)

では、実際に貼り付けるコードを以下に記載します。

/************************************
**新着記事取得
************************************/
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');

/************************************
*カテゴリ別新着記事
************************************/
function cat_list_func($atts) {
    extract(shortcode_atts(array(
        "num" => '',
        "cat" => ''
    ), $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");

内容は「新着記事」「カテゴリ別の新着記事」を取得するようのショートコードを取得するコードです。

ややこしいですが、これを貼り付けないと後ほどトップページを作成する時にうまくいかないので、しっかり対応しておきましょう。

上記の新着記事取得『’posts_per_page’ => 4』の「4」の部分は、読み込まれる記事数を表していますので、自由に変更することが可能です。

貼り方はWordpressの設定画面より「外観」⇒「テーマエディター」⇒「テーマのための関数(functions.php)」にて設定できます。

上記のコードはブロックエディタで使用するために、冒頭で紹介した参考にさせていただいたサイトから少し変更しています。

本記事で紹介しているコード貼れば問題ないと思います。

ですが、バックアップは必ず取っておいてください。(もし不具合が発生した場合の責任は負いかねますので)

STEP3 固定ページにHTMLで入力

コード等のややこしい部分は完了しましたので、さっそくトップページに表示させる記事を作成していきましょう。

トップページのサイト型は「固定ページ」を活用します。

基本的にここでの表記が、そのままトップページ表記になると覚えておいてください。

固定ページを作成し、タイトルには「トップページ」と入力しましょう。

パーマリンクはなんでもよいです。

固定ページの本文に、後述する「HTMLコード」を入力すると自動で記事が読み込まれます。

見出し(おすすめ記事や新着記事など)は自らデザインしても良いですし、普通に見出しブロックを使用しても良いです。

自分の好きなようにカスタマイズして、個性を出していきましょう!!

HTMLコードは「カスタムHTML」から選択し、入力しましょう。

新着記事の表示

まずは新着記事の表示方法についてです。

<div class="top-wrap top-2">

[****new_list]

</div>

上記のコードの「****」の部分を削除し、カスタムHTMLに貼り付ければOKです。

りりまん

このブログでコード内に「new_list」って書くと、僕の新着記事が表示されるから、めんどくさいけど「****」の部分は削除してね!

新着記事が4記事表示されると思います。

記事数を変更したい方は「functions.php」に入力したコードを変更する必要があります。

先ほど簡単に説明していますのでご参考に⇒タップで移動

次に新着記事の一覧を表示するURLを取得します。

よく「新着記事一覧はこちら」のような表記を見たことがあると思いますが、それのURLです。

こちらも固定ページを活用します。

固定ページを新規で作成し、タイトルは「記事一覧」、URLスラッグは「articles」とし、公開しておいてください。(本文は記載不要です)

すると「https://自分のドメイン/articles」 のURLが取得できたと思います。(例:https://www.ririmann.online/articles/

このURLを貼るなどして活用することができます。

筆者の場合は、以下の画像の赤枠部に上記のURLをリンクとして使用しています。

URLが正しく動作しているか確認するには、後述する『STEP4 設定変更』を完了させる必要がありますので注意ください。

また、固定ページのプレビューを見た際は、以下の画像のようにブログカードが表示されていますが、実際は2カラム(1カラムにもできる)で表示されますので安心ください。

カテゴリ別新着記事の表示

続いてはカテゴリ別の新着記事の表示です。

<div class="top-wrap top-2">

[****cat_list cat="2" num="4"]

</div>

上記のコードの「****」の部分は削除して使用ください。

コードの『cat』の中にはカテゴリーIDを入れます。

複数のカテゴリを対象にしたい場合はcat=”2,3″のように複数のカテゴリ番号を書けば問題ありません。

『num』の中には取得する数を入れます(4記事を表示させたい場合は4と入力)

カテゴリーIDの確認方法

WordPressの設定画面より「カテゴリー」⇒「各カテゴリーのID」

おすすめ記事の表示

最後におすすめ記事に関してです。

<div class="top-wrap top-2">
リンク先URL
リンク先URL
リンク先URL
リンク先URL
</div>

こちらは任意の記事を表示させることができます。

表示させたいURLを上記の「リンク先URL」に置き換えて記載ください。

STEP4 設定変更

お疲れ様でした。

ここまでくればほとんど終わりです。

あとはWordPressの設定を変更して完了です。

WordPressの設定画面より「設定」⇒「表示設定」⇒「ホームページの表示」から画像の通り変更してみてください。

デザインの応用

ここまでの説明で、ある程度トップページのサイト型は完成していると思います。

ここからはデザイン面での応用です。

具体的な内容を2点ご紹介します。

  • スマホでは1カラムでの表示も可能
  • 見出しやボタンをやめて画像にする

1つずつ画像を用いて説明します。

スマホでは1カラムでの表示も可能

例えば、新着記事を取得させる「HTMLコード」は以下のコードとなっています。(先ほど紹介したもの)

<div class="top-wrap top-2">

[****new_list]

</div>

このままのコードを貼り付けると、スマホでは以下のような表示になります。

コードの1行目に「<div class=”top-wrap top-2“>」と記載がありますが、赤字の部分「top-2」を削除すれば、スマホでは『1カラム』になり、以下のような表記になります。

画面いっぱいにアイキャッチが表示されるので、見やすくなる半面スクロールが増えてしまうので一長一短があります。

ご自身の好みに合わせて変更してみてください。

見出しやボタンをやめて画像にする

これは完全にデザインだけの問題です。

実際に見てもらった方が早いので、以下に画像を載せておきます。

『←左』が見出しとボタンを使用した表示
『→右』が画像による表示

いかかでしょう。

右の方が良いと思いませんか?

嫁さま

うん!
右の方が見やすいし、個性でてるね!!

りりまん

でしょ!
デザインの沼に数時間滞在して出来上がったものだからね!(笑)

サイト型にしている人で左の「見出し・ボタン」を利用している方は多いと思います。

見出しとボタンは、簡単ですぐにできますが似たような見た目になってしまうので、出来れば画像等を活用することをおすすめします。

筆者は『Canva』を利用し、画像を作成しています。

デザインは少し時間が掛かりますが、その分ブログへの愛着も湧くので、ぜひ挑戦してみてください!!

まとめ:サイト型はカスタマイズ性があがる

少し長くなってしまったので、よく分からなかった部分は以下のリンクより戻って確認してみてください。

今回は誰でも「サイト型」にできるように、できるだけ簡単にまとめてみました。

『JIN』を利用していて、サイト型に変更したい方の手助けになればと思っています。

サイト型へ変更することで、トップページにも個性がでますし、今後色々な形へカスタマイズすることが可能になります。

実際、筆者もサイトのデザイン等を変えて、多くの方からお褒めの言葉をいただきました。

見やすさだけではなく、ブログのモチベUPにも繋がるので大変おすすめです。

今回のようなブログ関連の内容を『ブログのノウハウ全て公開』という記事でまとめていますので、お時間がある方は見ていただけると嬉しいです。

ブログのノウハウ_アイキャッチ
【完全保存版】ブログのノウハウを全て公開|初心者のためのブログ運営!! 【2021年】5月22日:初版発行6月30日:記事追加(6記事追加)7月31日:記事追加(6記事追加) 8月30日:記事追加(2記事...

これからも楽しくブログを続けていきましょう!

では、また!!

にほんブログ村 にほんブログ村へ

関連記事はこちら!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA