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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Yoshi Yoshi
December 22, 2019
Design
0
560

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

Avatar for Yoshi

Yoshi

December 22, 2019
Tweet

Other Decks in Design

See All in Design
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
7
1.8k
「自分の仕事はどこまで？」と問い続けたら。デザイナーの「視座」を考える
Avatar for Takeru Mukai mukai_takeru
0
300
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
Avatar for ため tame
1
370
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
Avatar for 株式会社ルート root_recruit
0
280
Spacemarket Brand Guide
Avatar for Spacemarket spacemarket
2
170
kintone Style Book
Avatar for kintone kintone
6
10k
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
800
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
150
Liquid GlassとApp Intents
Avatar for touyou touyou
0
820
Correspondence：共に生成していく過程
Avatar for Akira Motomura akiramotomura
0
190
これからの「Webデザイン」の話をしよう～デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値～
Avatar for ミヤケアツシ ds35mm
0
550
Diverse Design Team Deck
Avatar for Diverse diverse
0
630

Featured

See All Featured
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
380
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
130
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
54
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
182
10k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
500
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
200
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
150
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.1k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.6k

Transcript

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

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

    2

  3. Y&K Studio 自己紹介 Yoshitaka ◇島根大学 大学院 M1 研究：ニューラルネットワークを用いた嘘検出 ◇最近はまっている物：FGO ◇趣味：カメラ

    SONY α7iii ◇活動：松江水燈路 広報チーム ◇個人ブログ：Y&K Studio –二人三脚ブログ- 3

  4. Y&K Studio Y&K Studio -二人三脚ブログ- 4 Kana 東京なう 担当：デザイン、構成 Yoshitaka

    担当：運営、執筆 #yandkstudio #二人三脚ブログ

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

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

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

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

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

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

  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で使えるコードの呼び出し機能 ショートコードを書くことで 右（⇒）のようなデザインを呼び出せる

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

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

    各BoxのCSS

  14. Y&K Studio Page Speed Insights 14

  15. Y&K Studio まとめ 15

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

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