【SANGOを自分でカスタマイズ】スマホ表示の記事一覧をカスタマイズ

TOPページの記事一覧カードをカスタマイズ

カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。


この記事では TOPの記事一覧カードカスタマイズした方法を説明。

スマホではこんな感じ

Before
カスタマイズービフォー
After
カスタマイズーアフター

このサイトの環境

テーマ
子テーマ
プラグイン

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

サブクライムテキストsublime text

カスタマイズをする準備

SANGOの設定でトップページの記事一覧カードを横長にする

MENくん
SANGOの標準機能で表示を変更することができるよ
記事一覧カードを横長に
STEP 1
WordPressを開く
WordPressを開きます WordPressを開きます
STEP 2
カスタマイズに移動
外観からカスタマイズをクリックします 外観のカスタマイズをクリックします
STEP 3
チャックマークを入れて完了
チャックする部分 デザイン・レイアウト設定記事一覧レイアウト【モバイル】トップページの記事一覧カードを横長にする モバイル=スマホ/タブレットでの表示にチェックマークをつけます
追加方法難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

夏だし髪を斬りに行こう!

夏だしどっか行こう!

カスタマイズコードを追加

style.css(追加するコード:記事一覧カード)
style.css(追加するコード:記事一覧カード)
 

確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

MENくん
記事一覧がシュッとして、NEWマークも丸くなったよ!
   

記事一覧カードをカスタマイズ:まとめ

記事一覧カードをカスタマイズまとめ
手順をザクッと説明
変更手順
  • SANGO標準機能で横長のカードにする
  • FTPソフトとテキストエディタを開いて準備OK。
  • 追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。
MENくん
こっちのほうがマテリアルデザインぽい!