Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WordPress MeetUp Shimane #8 ブログのカスタマイズで大切にしたい精神

Yoshi
December 22, 2019

WordPress MeetUp Shimane #8 ブログのカスタマイズで大切にしたい精神

Yoshi

December 22, 2019
Tweet

Other Decks in Design

Transcript

  1. My points of customize
    - 3つの心得 -

    View Slide

  2. Y&K Studio
    発表の流れ
    ◇自己紹介
    ◇カスタマイズで意識しているPoint
    ◇実例紹介
    -フロントページ
    ーショートコードによるFAQ
    ーBox
    ◇まとめ
    2

    View Slide

  3. Y&K Studio
    自己紹介
    Yoshitaka
    ◇島根大学 大学院 M1
    研究:ニューラルネットワークを用いた嘘検出
    ◇最近はまっている物:FGO
    ◇趣味:カメラ SONY α7iii
    ◇活動:松江水燈路 広報チーム
    ◇個人ブログ:Y&K Studio –二人三脚ブログ-
    3

    View Slide

  4. Y&K Studio
    Y&K Studio -二人三脚ブログ-
    4
    Kana
    東京なう
    担当:デザイン、構成
    Yoshitaka
    担当:運営、執筆
    #yandkstudio
    #二人三脚ブログ

    View Slide

  5. Y&K Studio
    皆さんはカスタマイズするとき
    何を意識しますか?

    View Slide

  6. Y&K Studio
    カスタマイズで意識しているPOINT

    View Slide

  7. Y&K Studio
    カスタマイズで意識しているPOINT
    1.常に読者の目線を意識
    ⇒ブログが読み辛くなってしまうことを防ぐ
    2.自分が書きやすい環境を整える
    ⇒「書きやすさ」は更新頻度やブログの質に影響する
    3.CSSはシンプルに
    ⇒CSSが多くなると、ページの読み込み速度が遅くなる

    View Slide

  8. Y&K Studio
    実例1 – フロントページ -

    View Slide

  9. Y&K Studio
    フロントページ
    読んで欲しい記事を最初に
    持ってくる
    カードをホバーした時に
    浮き上がるモーション
    ⇒クリック率を上げる

    View Slide

  10. Y&K Studio
    実例2 – ショートコード -

    View Slide

  11. Y&K Studio
    ショートコード
    [faq]
    [faq_item question="質問です" answer="回答です"][/faq_item]
    [faq_item question="質問です" answer="回答です"][/faq_item]
    [faq_item question="質問です" answer="回答です"][/faq_item]
    [/faq]
    11
    ショートコードとは…WordPressで使えるコードの呼び出し機能
    ショートコードを書くことで
    右(⇒)のようなデザインを呼び出せる

    View Slide

  12. Y&K Studio
    実例3 – Box -

    View Slide

  13. Y&K Studio
    CSSをシンプルに書くコツ
    13
    全Box共通のCSS
    各BoxのCSS
    各BoxのCSS
    各BoxのCSS
    各BoxのCSS
    各BoxのCSS
    各BoxのCSS

    View Slide

  14. Y&K Studio
    Page Speed Insights
    14

    View Slide

  15. Y&K Studio
    まとめ
    15

    View Slide

  16. Y&K Studio
    カスタマイズで意識しているPOINT
    1.常に読者の目線を意識
    ⇒ブログが読み辛くなってしまうことを防ぐ
    2.自分が書きやすい環境を整える
    ⇒「書きやすさ」は更新頻度やブログの質に影響する
    3.CSSはシンプルに
    ⇒CSSが多くなると、ページの読み込み速度が遅くなる

    View Slide

  17. Y&K Studio
    Thank you for your attention!!
    17

    View Slide