栄養バランスの良いお弁当やお惣菜の宅配を行う「有限会社あさのやおふぃす」様のホームページ制作を行いました。
ホームページはこちらから。

写真を多用することで賑やかで活力のあるサイトへ

写真を多用することで、賑やかで活力のある元気なサイトへ仕上げました。
ユーザーのクリック頻度の高いコンテンツやリンクはトップビューに設置し、各種ページへのリンクは専用のバナーを作成することで視覚的に分かりやすいデザインに仕上げました。

画像をひと工夫することで楽しいメニュー表に

お弁当の画像にはちょっとした遊び心を加える事で、見るだけでも楽しくなるようなメニュー表に仕上げました。

レスポンシブデザインでスマホにも対応、更新作業の負担を軽減

レスポンシブデザインで構成することで、パソコンと同じ情報量がスマホユーザーにも届くようにしています。
更新の際も「スマホ用」「パソコン用」と二つの情報を更新する手間が無くなるため、ホームページの更新作業も楽になります。

ブログページも写真をメインに、綺麗な写真が並んでもっと華やかに！

ブログページは単純に記事の一覧が並ぶようなページではなく、文字よりも写真をメインにしたタイル型の記事を敷き詰めるようなページに仕上げました。
記事を投稿するごとに一覧ページの華やかさが変わるため、見ているユーザーだけでなく、投稿者の楽しみにもなるように設計しております。

使用しているCMS

WordPress

作業期間について

本制作の作業期間は下記の通りです。

構成検討：約3日
デザイン：約5日
実装：約10日
確認・調整：約3日

制作費用について

制作に関する費用は下記フォームよりお問い合わせください。

お問い合わせはこちらから

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

横浜市の元町・中華街駅から徒歩1分。あらゆる痛み（ペイン）に対し診断、治療を行う診療所「元町ペインクリニック」様のホームページ制作を行いました。
ホームページはこちらから

系列が分かるような構成でユーザーに安心感を

全体的な構成は、同じ医優会系列の「反町整形外科」様のホームページのデザインに合わせて作成しました。

系列医院のホームページが既に存在しますので、「新しさ」よりもユーザーの「期待通り」を形にすることでユーザーに安心感を与えるような構成にしています。

画像を多く使うことで来院しやすい印象を与える

院内の部屋や使っている器具、スタッフの写真を多く掲載することで、新規ユーザー様の「初診の不安」を取り除き、来院しやすい印象を与えています。

レスポンシブデザインでスマホにも対応、更新作業の負担を軽減

レスポンシブデザインで構成することで、パソコンと同じ情報量がスマホユーザーにも届くようにしています。
更新の際も「スマホ用」「パソコン用」と二つの情報を更新する手間が無くなるため、ホームページの更新作業も楽になります。

スマホとパソコンで変わらない情報量を掲載

特殊なギミックは最小限に留めて無理なくレスポンシブ化をすることで、スマホとパソコンで変わらない情報量をユーザーに発信しています。

使用しているCMS

WordPress

作業期間について

本制作の作業期間は下記の通りです。

構成検討：約1日
デザイン：約1日
実装：約7日
確認・調整：約1日

制作費用について

制作に関する費用は下記フォームよりお問い合わせください。
お問い合わせはこちらから

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

数多くの人気女性ファッション誌を手がける「Jupe design」様のコーポレートサイトの制作、製品（HAPPY BOX）用サイトの制作、ECサイトの開設を行いました。

コーポレートサイトはこちらから
製品（HAPPY BOX）用サイトはこちらから
ECサイトはこちらから

文字の余白やサイズなど、細部にもこだわったデザインでレスポンシブ化を実施

本件ではコーポレートサイトと製品用サイトの二つのサイトを制作させていただきました。

デザインや画像などの素材はお客様からいただき、弊社ではいただいた素材を活用してWebサイト用に再構成してレスポンシブ化を実施しました。

▼コーポレートサイト

読み手を意識して、文字の余白やサイズ、画像の設置位置などの細部まで調整をしています。

▼製品用サイト

画像は大きく、文字は控えめにすることで、画像で興味を惹き付けて文章を読ませる工夫をしています。

コーポレートサイトと製品用サイトでホームページを分けることでユーザーのストレスを軽減

製品用の情報はコーポレートサイトと違って伝えたいメッセージやテーマが異なるため、サイトを分けつつもサブドメインとして関連性を持たせることで情報がごちゃつかない構成に仕上げました。

コーポレートサイトは会社の概要や特徴を前面に押し出しています。

製品用サイトは製品情報をメインにして、会社情報の掲載は最小限に留めています。

性質の異なるサイトを二つに分ける事で、各々のサイトの伝えたいことを明確にして、ユーザーがホームページで迷わないようにしています。

レスポンシブデザインでスマホにも対応、更新作業の負担も軽減

レスポンシブデザインで構成することで、パソコンと同じ情報量がスマホユーザーにも届くようにしています。
更新の際も「スマホ用」「パソコン用」と二つの情報を更新する手間が無くなるため、ホームページの更新作業も楽になっています。

ECサイトの開設も実施、不明点は徹底サポート

ECサイトの運用や決済の方法をヒアリングした上で、ECサイトの開設と運用サポートをさせていただきました。

パソコンに精通したユーザーでなくても簡単に運用できるように、BASEを使ったECサイトを開設しました。

使用しているCMS

WordPress

作業期間について

本制作の作業期間は下記の通りです。

構成検討：約2日間
デザイン：約10日間
実装：約10日間
サーバーやドメインの移管作業：約3日
確認・調整：約2日間

制作費用について

制作に関する費用は下記フォームよりお問い合わせください。
お問い合わせはこちらから

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

WordPressのバージョンアップに伴って、対スピードテストもいろいろと変化しつつあります。

前までは高得点だったのに、今では見る影もない……という方も多いかと思います。インクループでも様々にテーマを試しながら、いったいどのようなテーマがスピードテストで高得点を取れるのか、ということを検証しています。

スピードテストはこちら。

以下もご参照ください。

Page Speed Insightsについて

PageSpeed Insights API（PSI）は、モバイル端末向けとパソコン向けの両方のページにおけるパフォーマンスに関するレポートと、そのページを改善する最適化案を提供するGoogleのデベロッパーツールです。
ページのパフォーマンスがよい＝速さと表示上が高得点となり、近年ではこの速さがGoogleの評価に繋がっていると言われています。SEOを行う上で、Page Speed Insightsで高得点を出すことは大変重要です。

スコアが 90 以上であれば速い、50～90 であれば平均的と見なされます。50 未満は遅いと見なされます。

近年のWordPressを利用したPage Speed Insightsスピードアップの定石は？

WordPressを利用したWEBサイトでPage Speed Insightsをスピードアップするには以下のような事が必要でした。
伴ってよく利用されるプラグインをご紹介します。

• 画像の最適化
  EWWW Image Optimizer
  Smush
• コードを圧縮
  Autoptimize
• キャッシュを利用した高速化
  W3 Total Cache
  WP Fastest Cache

上記の対策を行うと、プラグインがどんどん増えていきます。利用している他のプラグインと衝突し、表示がおかしくなることも多々。
WordPressでプラグインを多用したサイトは、Page Speed Insightsで高得点を出すことは難しいです。ですが、高得点のためにはプラグインをいれなければならない、という矛盾があります。

目的は「Page Speed Insightsで高得点を出すこと」ですか？　それとも「ユーザーエクスペリエンス（UX）を高めること」ですか？

以下の6項目を改善できれば、Page Speed Insightsで高得点を獲得することができます。

WEBを表示する際、もっとも時間を消費するのは「JavaScript」。JavaScriptが多い、あるいは内容の記述が多いサイトほど低得点となります。

ですが、JavaScriptはサイトを良くする上で利用していることがほとんど。削減するにも限度があります。また、WordPressのプラグインはだいたいJavaScriptが利用されているケースが多いです。プラグインを多用すると、Wordpressを使ったサイトのスピードは遅くなっていきいます。

このため、ユーザーエクスペリエンス（UX）のためにプラグインを採用しているなら、Page Speed Insightsで高得点を出すことに躍起になる必要はないでしょう。

Page Speed Insightsで高得点を出すなら

JavaScriptを徹底的に削除する。

挿入するJavaScriptは最低限に。また、WordPressの定義済み関数を効率よく使いましょう。
JavaScriptやjQueryは<?php wp_head(); ?>ではなく<?php wp_footer(); ?>で読み込みましょう。

function my_load_widget_scripts() {
    wp_enqueue_script('widgets_js', 'ここにパス.js', array());
    wp_enqueue_script('hatebu', 'ここにパス.js', array());
}

add_action('wp_footer', 'my_load_widget_scripts');

また、「Scripts-To-Footer」を利用してJavaScriptを一括でサイトフッターで読み込ませることができます。
ただ、全てのJavaScriptをフッターで読み込ませてしまうと、サイトの表示でエラーが出る可能性があります。特にjQueryは<?php wp_head(); ?>で読み込まないと、動かないプラグインも……。様子を見ながら利用しましょう。

Google fontsを利用しない。

Google fontsを利用するとPage Speed Insightsは遅くなります。「display=swap」の記載があっても、CSSの読み込みは遅く、Page Speed Insightsで指摘を受けます。いまのところ解決方法は判明していません。
読みやすさというUXよりもスピードを取る場合は、Google Fonts以外のフォントを利用しましょう。

ゴシック

font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;

明朝

font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;

画像の圧縮はプラグインを利用しない

以下のオンラインサイトなどを利用しましょう。

• https://www.iloveimg.com/ja/compress-image
• https://compressjpeg.com/ja/
• https://imagecompressor.com/ja/

サーバーは高性能なレンタルサーバーを。

特に下記がおすすめです。

• エックスサーバー
• ロリポップ！
• さくらのレンタルサーバ

テーマ選びは慎重に。

WordPress5.3からデフォルトテーマになっているTwenty TwentyはGutenbergに対応しており、非常に高速なテーマです。何も手を加えていない状態だと、PageSpeed Insightsで必ず高得点を叩き出します。

その他にも以下のようなテーマがあります。

• Luxeritas
• STINGER8
• Cocoon

PHPのバージョンは可能な限り最新版に！

サーバーによって異なりますが、細かく確認していきましょう。

過度にPage Speed Insightsで点数を上げることにこだわらない！

あまり点数を上げることにこだわってしまうと、UXが良いとは言えないサイトになってしまいます。モバイルファースト対応や画像の遅延表示などできることはするべきですが、必ず90点以上を出さなければならないというわけではありません。

程よく折り合いをつけていきたいですね。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

総合金属加工メーカー「田中プレス工業株式会社」様のホームページを作成しました。
田中プレス工業株式会社様のホームページはこちらから

分かりやすい導線と落ち着いたデザインで「誠実さ」を押し出す

「常に進化を続ける」というお客様の仕事に対する情熱と、会社の指針としている「仕事への誠実さ」を表現するために、ネイビーブルーを基調とした力強く落ち着いたデザインに仕上げました。

「お知らせ」や「製品情報」をトップに押し出すことで、情報発信をメインとした構成に

トップページで「お知らせ」と「製品情報」を表示することで、鮮度の高い情報を発信し、閲覧者に会社の情報がダイレクトに伝わるようにしました。

文字では伝わり辛い情報には画像も掲載することで、閲覧者の興味が逸れないように工夫をしています。
もちろん、管理者が記事を更新する際には、可能な限り入力が楽になるように、内部のシステムも調整しております。

レスポンシブデザインでスマホにも対応、更新作業の負担も軽減

レスポンシブデザインで構成することで、パソコンと同じ情報量がスマホユーザーにも届くようにしております。

パソコンとスマホの両方で見た閲覧者が「別サイト」のように感じないように、直感的で簡単に操作ができるようなメニューにして、見た目も大きく異ならないように調整しました。

また、レスポンシブデザインのためパソコン用とスマホ用で両方の修正は不要となり、更新作業も管理の手間も軽減しております。

使用しているCMS

WordPress

作業期間について

本制作の作業期間は下記の通りです。

構成検討：約1日間
デザイン：約2日間
実装：約3日間
確認・調整：約0.5日間

制作費用について

制作に関する費用は下記フォームよりお問い合わせください。
お問い合わせはこちらから

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

相模原市は、令和2年度からSDGsを推進する組織として、新たに「SDGs推進室」が立ち上がりました。
SDGsとは？　と疑問に思った方は、ぜひサイトへ飛んで、詳細をご確認いただければと思います。
SDGsを楽しく学ぶメディア SDGs one by one

SDGsを楽しく学ぶメディア SDGs one by one とは

「SDGsを楽しく学ぶメディア SDGs one by one」は、SDGsとは何か、相模原市がSDGsに関してどのような取り組みをしているのか、個人や企業はどういった関わり方をしているのか、といった情報を、難しい言葉を使わずに身近な例から楽しく学べるサイトです。

個性的なキャラクターたちが案内してくれるので、学生も親しみやすくSDGsを知ることができます。

SDGsとは何か

SDGs（Sustainable Development Goals）とは、2001年に策定されたミレニアム開発目標（MDGs）の後継として，2015年9月の国連サミットで採択された「持続可能な開発のための2030アジェンダ」にて記載された2030年までに持続可能でよりよい世界を目指す国際目標です。（外務省：JAPAN SDGs Action Platform)

「SDGsを楽しく学ぶメディア SDGs one by one」では、SDGsをより深く理解するためのコンテンツが多く掲載されています。

個人、企業の取組

個人や企業において、具体的にどのようなSDGsの取り組みが行われているのかを紹介しています。インタビューとともに紹介していますので、読みやすく楽しく読むことができます。

相模原市の取り組み

相模原市が独自に取り組んでいるイベントや企画を紹介しています。

スマートフォン対応

スマートフォン対応はレスポンシブWEBデザインで対応しています。
※インクループのWEBサイト制作はレスポンシブWEBデザイン標準対応です。

トップビューを印象的に、内部コンテンツもわかりやすくイラストで

数多くの情報が掲載されていると伝えたい、というご要望から、タイルを並べてアニメーションすることで、見目にも楽しくカラフルにサイトを印象づけることを重視しました。

また、内部コンテンツはどんな年齢層でも親しみやすく、わかりやすいように、随所でイラストを入れています。

キャラクターを利用したサイトナビゲーション

コミカルなキャラクターを作成し、よりユーザーが親しみやすく覚えやすいサイトを目指しました。
キャラクター紹介は是非サイトで。

使用しているCMS

WordPress

製作期間について

ご依頼から納品まではトータル約3ヶ月でした。

• 構成検討：約1ヵ月間
• デザイン：約14日間
• 実装：約1ヵ月間
• 確認・調整：約14日間

制作費用について

今回の制作に関する費用はお問い合わせください。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

Add RichText Toolbar ButtonはGutenbergエディタのツールバーに文章修飾用のボタンを追加するプラグインです。

＞＞Gutenberg用の文章修飾プラグインを開発しました

WordPress Gutenbergには文章装飾のための機能が少ない

WordPress Gutenbergには、昔のWordPressのように、指定した範囲にアンダーラインを引いたり、背景色を置いたり、フォントカラーを変えたりする機能がありません。それらはすべてブロック要素に紐付けられて行われるため、文章中の特定箇所を装飾することができません。

クラシック機能のように、選択した範囲を装飾できるようになるのが、Add RichText Toolbar Buttonです。

Add RichText Toolbar Button動作環境

• PHP 5.6 以上
• WordPress 5.0.3 以上

※2019年5月22日にリリースされたWordPress5.2.1は、PHP5.3.xからでは、アップグレードすることができません。セキュリティ的も問題があるため、PHPは常にアップグレードできる環境を用意しておきましょう。

Add RichText Toolbar Buttonは基本的にWordPressの記事ページ、固定ページのみに適応され、その他のページ（アーカイブページなど）には適応されません。

Add RichText Toolbar Button導入方法

Add RichText Toolbar ButtonはWordPress内の「プラグイン＞新規追加＞検索機能」から追加することができません。GitHubより最新版をダウンロードし、「プラグイン＞新規追加＞プラグインのアップロード」から追加します。

追加後、プラグインを有効可します。

Add RichText Toolbar Buttonの基本的な使い方

導入した時点で以下の機能がすでに使えるようになっています。

文字色を変える

文字に背景色をつける

フォントサイズを変える

蛍光ペンで色をつける

なお、装飾したい箇所を選択すると、右サイドバーに「インラインテキスト設定」が出るようになっています。インラインテキスト設定では、上記3つの装飾が一括でできるようになっています。

Add RichText Toolbar Buttonのカスタマイズ

ダッシュボードからAdd RichText Toolbar Buttonをカスタマイズすることができます。

できることは以下のとおりです。

• 各装飾の有効、無効
• 各装飾のボタンのアイコン変更（デフォルトではダッシュアイコンから選択。メディアからアップロードしたアイコンを選択することも可能です）
• 設定管理（装飾コンテンツの追加、削除）
• 詳細設定（基本的に操作する必要はありません）

Add RichText Toolbar Buttonの設定追加

ダッシュボードからAdd RichText Toolbar Button＞設定管理をクリックすると、以下のような画面が現れます。このページの「新規追加」をクリックすると、テキスト装飾コンテンツを増やすことができます。

新規追加をすると以下のようなページに遷移します。

タグ名

基本はspanですが、code（コンピューターコードの短い断片の文字列であると示す）、sup（下付き文字）、sub（上付き文字）などを指定することができます。いわゆる「記述コンテンツ」と言われる要素を挿入します。

記述コンテンツについてはこちら。「MDN web docs」

クラス名

装飾のクラス名です。数値を利用する時は他装飾コンテンツとかぶらないようにしましょう。

グループ名

「ペン」がデフォルトで入っていますが、以下がそのグループになります。

仮に他、「ストライプペン」を作ると、以下のようになります。

アイコン

グループにアイコンをつけてわかりやすくすることができます。

スタイル

プリセットがありますので、活用しながら装飾するCSSスタイルを入力します。手打ちも可能ですので、ここで自由に装飾を施すことができます。

適応するスタイルはプレビューで確認することができます。

ツールバーボタンが有効かどうか

有効にチェックを入れていると、実際の編集画面で利用することができます。使わなくなった機能や、今の所利用予定がない機能はチェックを外して、保存していおくことができます。

優先度

他、装飾コンテンツと重複した場合、該当するコンテンツがどの程度の優先度にあるのかを設定できます。数字が大きいと優先度が低くなります。

***

効率的に装飾できなくなってしまったWordPress Gutenbergですが、このように大変便利なプラグインが開発されています。ぜひ有効活用して、よりよいコンテンツづくりをしていきましょう！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

マーケター、WEBコンサルタント、営業、商品企画担当で活躍するためのマーケティング資格セミナー、資格講座を行っている日本マーケティングリテラシー協会様の商品・事業開発支援のための【WAKULABO（ワクラボ）】サイトを作成いたしました。

WAKULABO | 人をワクワクさせる、感動商品の創造

日本マーケティングリテラシー協会が開催する「WAKULABO」とは？

日本マーケティングリテラシー協会様は、現代社会における大量生産、大量消費時代が終焉し、豊かで物が充足した成熟社会においては新しい マーケティングに対する取り組みが必須になってきている中で、課題解決や調査研究、様々な講座を開設し、セミナー開催や資格取得などの事業支援を行っている協会です。

今回は、新商品を開発したい方や新規事業開発をしたい方、新商品開発にあたってもっと自分のスキルを向上させたい方へ「人をワクワクさせる、感動商品の創造」の実践プロジェクトを立ち上げました。

他にはない、新商品や新事業開発の支援に関するご案内がこの「WAKULABO」に記載されています。

実践プロジェクトの内容は、新しい商品・サービスの開発、新しい事業の開発アイデア抽出から調査・分析、開発の最適コンセプト決定まで実践支援まで行う「Neo P7 システム」があります。

【Neo P7 システムの図】

また、日本マーケティング・リテラシー協会会長でもある「神田 範明」会長が講師を務める
「失敗しない！商品企画・開発の進め方 ～Neo P7 ヒット商品を生むシステム～」のセミナーを期間限定で開催しているとのことです。

セミナー概要

1. 商品企画に必要な３つの視点
2. NeoP7が成果を出した事例
3. WAKU LABOの概要

失敗しない！商品企画・開発の進め方 ～Neo P7 ヒット商品を生むシステム～

場所・日時

2020年3月12日（木）15：00～17：00

東京都中央区八丁堀4-10-8　第3SSビル5階
株式会社コーディネート・パートナーズ　感性分析支援センター（最寄り駅　八丁堀駅より徒歩3分）

セミナー受講料はなんと無料。事前登録制とのことですので、お早めの申し込みをお勧めします。

詳細はこちら

お客様ご自身でも修正できるようにWordPressで制作

マーケティングリテラシー協会様の公式HPもWordPressで制作しておりますが、今回制作した「WAKULABO」に関してはランディングページと言われるサイトの一つです。

全てWordPressで制作し、なおかつグーテンベルクで全て実装しているため更新修正がこれまでより操作しやすくなっております。

WordPressのダッシュボード内で全て修正できるので、テキストの変更や画像の修正までいつでも簡単に変更できるようになっています。

全ページレスポンシブ化

レスポンシブ必須になっている近年では、弊社が作成するHPも全ページレスポンシブ対応しております。

制作期間について

ヒアリング　　：約1日
デザイン・調整：約3日
実装　　　　　：約2日
確認・調整　　：約1日

制作費用について

今回の制作に関する費用はお問い合わせください。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

つい先日のことですが、弊社にこんなご相談がありました。

「記事を書いたらあちこちに余白ができてるんだけど、なんで？」と。
どうやら記事を書いていたお客様が、記事をアップしたらなぜだかたくさんの余白ができてて困ってしまった、とのこと。

実際にサイトを見て、検証モードでチェックしていると・・・
なぜかtableに余白がついている。

• グーテンベルクに変わって自動的にtableに余白がつく機能がついたのか？
• WordPressのアップデートでtableに余白でも自動的についたのか？
• 何かしらのプラグインが干渉している？

はて。。原因はいったいなんだ？？
原因と改善方法について今回ご紹介していきます！

TinyMCE Advancedのテーブル機能が原因（カーソルをいじってしまう）

あらゆるエラーや可能性を加味して検証していましたが、原因は「TinyMCE Advanced」プラグインのテーブル機能でした。
TinyMCEといえば、WordPressのビジュアルエディタの機能を拡張することができるプラグインです。
htmlやcssの知識がなくても無料ブログと同じような感覚で記事が書けるので、多くの方が利用されていると思います。

ですが、tableにおいてはちょっとでも表をずらしてしまうと勝手にwidth（横幅）とheightが（高さ）が設定されてしまうという・・・

これこれ。

テーブルの枠にマウスをあてると、カーソルが表示され、これを少しでもずらしてしまうと、自動的に横幅や高さの調整が入ってしまいます。
しかも、ビジュアルエディタでは見た目の変化はあまりないのですが、
テキストエディタに変えてみると・・・

このように勝手にwidthとheightの調整が入っているのです・・・！
この機能、必要なんでしょうか？と疑問に思ってしまいますが、原因はわかったのでこれを修正する方法と、カーソルをいじっても自動的にwidthとheightが入らないように設定変更したいと思います。

まずは修正の仕方をレクチャー

とてもめんどくさいのですが、これを修正するにはひとつひとつの記事でテキストエディタに変えて修正するしかありません。
※ほかに方法があったら教えてほしいです＾＾；

カーソルをなんとか微調整してもwidthとheightを消すことはできません。
例えばですが、置換できるエディタ（メモ帳、サクラエディタ、テラパッドなど）を使い一気に置換作業をする方法もあります。

ただ、記述がバラバラな場合が多いので置換作業も結構大変ではあります＾＾；

素直にテキストエディタモードで一つ一つ手直ししたほうが早いかもしれません。※ビジュアルエディターで修正するのはおすすめしません！＾＾；

テーブルの横幅を勝手にwidthやheightが調整されないようにする方法

本題はこちらです。

ビジュアルエディターでテーブルのカーソルをいじっても勝手にwidthやheightが入らないように設定する方法があります。

一度設定してしまえばもう安心！

早速やり方をご紹介します。

functions.phpにコードを追記する

functions.phpに以下のコードを追記します。
※functions.phpは事前に必ずバックアップを取ってください。（エラーで真っ白になります）
※下記のコードをそのまま貼るとエラーを起こすので、記載には注意してくださいね。（関数はまとめて記載）

function customize_tinymce_settings($mceInit) {
$mceInit['table_resize_bars'] = false;
$mceInit['object_resizing'] = "img";
return $mceInit;
}
add_filter( 'tiny_mce_before_init', 'customize_tinymce_settings' ,0);

これでアップロードすれば、ビジュアルエディタでテーブルの枠線をいじってしまってもwidthやheightが自動的に入ってしまうことはなくなります。

安心してテーブル操作できます＾＾！

ぜひ試してみてくださいね。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

基本的な使い方はこちら。

WordPressの見た目が変わった？投稿画面（エディタ）はどうやって使えばいいの？WordPress5.0で追加された「Gutenberg」とは。

WordPress5.0で追加された「Gutenberg」の投稿画面（エディタ）使い方【レイアウト編】

WordPress5.0で追加された「Gutenberg」の投稿画面（エディタ）使い方【フォーマット編】

グループ化機能の使い方

いくつかのブロックを選択したのち、アイコンまたは詳細メニューからグループ化を選択します。

グループ化機能を利用してできること

大概のWordPressテンプレートは、固定ページや記事ページのwidthが決まっています。
例としてインクループの記事ページのwidthは1050pxが固定で決まっています。

このテンプレートの固定ページや記事ページのwidthがフルワイド（全画面）表示で設定されていると、バックグラウンドに任意の色を設定し、全体的にフルワイドのデザインでページや記事を作成することが出来ます。

この画面は全て固定ページ内で作成しています。

以下、エディタ編集ページです。

各ブロックにCSSを設定する

各ブロックには細かくCSSを設定することが出来ます。

グループ化したブロックにもCSSを指定することができ、上記のレイアウトには以下のようなCSSを設定しています。

.group-960 > div{
max-width:960px
}

これにより、group-960をクラスに指定した要素の一階層下のdivにはmax-width:960pxが適応されることになります。
こうすることにより、

グループ化ブロック：フルワイド
その一階層下のdivブロック：max-widthが960px

となり、グループ化された部分はフルワイドデザインとなります。

グループ化されたブロックには背景色・アンカーリンクが設定可能

グループ化されたブロックには、背景色とアンカーリンクが設定可能になります。

グループ化がフルワイド設定されていると、バックグラウンドカラーが一面に伸びるので、きっちりとコンテンツが分けられます。
使い方をマスターして、よりわかりやすいコンテンツ作りをしていきましょう！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。