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

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

カスタマイズは自己責任で!
ワードプレステーマ
SANGO
子テーマ
PORIPU

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

スマホではこんな感じ

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

このサイトの環境

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

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

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

カスタマイズをする準備

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

MENくん

SANGOの標準機能で表示を変更することができるよ

記事一覧カードを横長に
  • STEP 1
    WordPressを開く
    WordPressを開きます WordPressを開きます
  • STEP 2
    カスタマイズに移動
    外観からカスタマイズをクリックします 外観のカスタマイズをクリックします
  • STEP 3
    チャックマークを入れて完了
    チャックする部分 デザイン・レイアウト設定記事一覧レイアウト【モバイル】トップページの記事一覧カードを横長にする モバイル=スマホ/タブレットでの表示にチェックマークをつけます

カスタマイズ方法

追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く

追加CSSの使い方はこちら

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

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

style.css(追加するコード:記事一覧カード)
style.css(追加するコード:記事一覧カード)
 
確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新
MENくん

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

   

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

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

こっちのほうがマテリアルデザインぽい!