THE SONICでトップページにおすすめ記事を掲載する方法

260 views

新着記事一覧の上に、おすすめの記事を掲載したい!

ブログを運営していると、トップページによく読まれる記事やプロフィール、お仕事依頼へのリンクを掲載したいと考えることがありますよね。

ただ、ブログを始めたばかりのテーマが定まらない時期は、なかなかサイト型のトップページに変更するほどの記事数がなく、デザインが上手く決まらなくて悩みます。僕もそうでした。

この記事では、そんな

  • トップページにおすすめ記事やプロフィールを固定したい
  • 時間はかけずに簡単にカスタマイズしたい

という方に向けて、WordPressテーマ「THE SONIC」のカスタマイズ方法をまとめています。

前提
  • WordPressテーマ「THE SONIC」を使っている
  • WordPressをちょっといじるくらいのHTML/CSSの知識がある

作成したトップページデザイン

タイトルと画像だけのシンプルな記事一覧

カスタマイズの流れ

  1. STEP

    文字入りのアイキャッチ画像を用意する(慣れによるが、約30分)

    Canva等を利用して、アイキャッチ画像を準備します。

  2. STEP

    再利用ブロックでデザインを作成(15分)

    再利用ブロックを使い、タイトルと画像ブロックを並べていきます。

  3. STEP

    CSSをカスタマイズ

    カスタマイズするCSSは4行だけ。

  4. STEP

    ウィジェット(カスタムHTML)で再利用ブロックを表示

    これで完成です。

アイキャッチ画像を準備する

おすすめしたい記事のタイトルや、「プロフィール」と文字が入った画像を準備します。

もとからアイキャッチ画像にブログタイトルを入れている方はそのまま使用できます。

Canvaを使って作成するのがおすすめです。

もし面倒であれば、「バイラル風」で表示したアイキャッチ画像をスクショしても良いと思います。

Canvaで作成した画像
バイラル風でのスクリーンショット

再利用ブロックでデザインを作成

  1. STEP

    再利用ブロックを新規追加

  2. STEP

    タイトルを設定

    わかりやすければ大丈夫です。今回はトップページ記事一覧上(ウィジェット名と同じ)にしました。

  3. STEP

    ブロックを置いていく

    使うブロックはこの5つです。

    • グループ
    • 見出し
    • カラム
    • 画像
    • 段落

    画像のように配置していきます。

    カラムの数はお好みで。画像のサイズさえ合わせれば3列や4列でも問題ありません。

    (2022年4月現在、画像の下の段落ブロックを入れておかないとモバイル表示の時に画像同士がくっついてしまうため、空ブロックとして入れています)

  4. STEP

    画像を入れて、リンクを設定する

CSSをカスタマイズ

  1. STEP

    見出しにCSSクラスを追加

    トップページの「新着記事」と同じデザインにするため、見出しにCSSのクラス名を追加します。

    main-h2 //必ず追加
    
    //自分の使っている「記事一覧 見出しデザイン」に合わせて追加
    kiji-list-heading-mark1 //デフォルト
    kiji-list-heading-mark2 //デザイン2
    kiji-list-heading-mark3 //デザイン3
    kiji-list-heading-mark4 //デザイン4
    
    //CSSカスタマイズ用の任意のクラスを追加
    toppage-ninki-kiji-h2 //自分で決めてください

    見出しを選択し、「ブロック」→「高度な設定」→「追加CSSクラス」に半角スペースで区切って入力しておきます。

    ここらへんがちょっとややこしいんですよね。
  2. STEP

    追加CSSでカスタマイズ

    「カスタマイズ」→「追加CSS」で先ほど自分で決めたクラスに下記のカスタマイズをあてておきます。

    .toppage-ninki-kiji-h2{
        margin: 0 0 0.83em;
        font-weight: normal;
    }

    カスタマイズはこれだけです。簡単ですよね。

ウィジェットで再利用ブロックを表示する

再利用ブロックの「ショートコード」をコピーしておきます。

ウィジェットで「カスタムHTML」を「トップページ記事一覧(上)」にドラッグ&ドロップ。

「内容」に先ほどコピーしたショートコードを入力して保存します。これでカスタマイズは完了です。

トップページにアクセスして確認してみましょう。

念のため、モバイルでも確認しておきましょう。

デザインが崩れる場合は何かしら別のCSSカスタマイズがされているか、THE SONICのアップデートが原因かもしれません。個別で修正してみてください。

CSSを修正するときは、Chromeの「検証」機能がおすすめです。

これで、トップページにアクセスした際におすすめ記事が最初に目に入るようになりました。

いつか記事が集まってきたらサイト型のトップページデザインに変更したいと思っていますが、それまでのその場しのぎとしても、簡単でそれなりのデザインが作成できるので、かなりおすすめです。

ぜひ参考にしてみてください。

なおき

なおき

PCが得意だったのでEC担当になったカフェ店員のブログ。

学ぶうちにどんどん面白くなり、ショップの制作やマーケティングのフリーランスとして独立しました。

FOLLOW

カテゴリー: