Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

Avatar for Yoshi Yoshi
December 22, 2019
Design
0
550

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

Avatar for Yoshi

Yoshi

December 22, 2019
Tweet

Other Decks in Design

See All in Design
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
1.1k
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
Avatar for Kasumi Morita mkasumi
0
970
Character Experience AI 〜 AIキャラクターのつくりかた 〜
Avatar for 株式会社スマートバンク smartbank
1
440
佐藤千晶｜ポートフォリオ
Avatar for 佐藤千晶 chimi_chia
0
310
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
Avatar for ため tame
0
320
ユーザー像を「みてね」らしく可視化する　家族アルバムみてねUXリサーチチームの取り組み
Avatar for MIXI DESIGN mixi_design
PRO
3
390
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
Avatar for yamamoto-yuta yamamotoyuta
0
230
体験を守るためのデザイン計測
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
110
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
Avatar for MIXI DESIGN mixi_design
PRO
0
130
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
Avatar for Aki spring_aki
1
230
Treasure_Hunting
Avatar for Sol Metts solmetts
0
110
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
Avatar for Tomoya AZUMA t_east
1
1.5k

Featured

See All Featured
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.4k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
1
80
Code Reviewing Like a Champion
Avatar for maltzj maltzj
527
40k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Navigating Team Friction
Avatar for Lara Hogan lara
191
16k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3k
Done Done
Avatar for chrislema chrislema
186
16k

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