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

Transcript

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

   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
   １．常に読者の目線を意識
   ⇒ブログが読み辛くなってしまうことを防ぐ
   ２．自分が書きやすい環境を整える
   ⇒「書きやすさ」は更新頻度やブログの質に影響する
   ３．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
    １．常に読者の目線を意識
    ⇒ブログが読み辛くなってしまうことを防ぐ
    ２．自分が書きやすい環境を整える
    ⇒「書きやすさ」は更新頻度やブログの質に影響する
    ３．CSSはシンプルに
    ⇒CSSが多くなると、ページの読み込み速度が遅くなる
    

    View Slide

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

    View Slide