userswww.torat.jpWebサイトをデザインする際、フォント選びはそのサイトの雰囲気を左右する重要な要素のひとつとなります。こだわりのあるフォント、おしゃれなフォントをWebサイトに使うことで差別化することができます。WebサイトにWebフォントを使うことも増えつつあります。Webサイトをより魅力的にするWebフォントですが、日本語のWebフォントには最大の問題点があります。それは容量が大きくなってしまうことです。日本語フォントは含まれる文字数が多いためファイル容量がかなり大きくなります。10MBを超えたりするものもあります。userswww.torat.jpブログなどで関連記事を並べて表示したり、動画コンテンツを一覧表示する際などに、タイル状に並べるのも見やすくて良いんですが、記事の投稿数が増えてきたり、テキスト量が多いときなど、場合によっては横スクロールするようにすると便利だったりします。今回はリスト構造を使用して、実装する方法をご紹介します。ソースコードの記述実例はこちらです。userswww.torat.jpWordPressサイトを構築、カスタマイズしていくと、機能が増え、不必要な項目やメニューで管理画面がごじゃごじゃしていく場合があると思います。その際に、クライアント目線での使いやすさの向上などでダッシュボードの不要なメニューを非表示にさせたり、新しくカスタム投稿を追加したり、カスタマイズする方法をご紹介します。使わないメニューや触って欲しくない項目は最初から非表示にしておきましょう。投稿することがないので投稿メニューを非表示にしたい場合は「functions.php」に以下のように追加します。WordPressでは、デフォルトで投稿が用意されています。クライアントによっては使用しない場合もあるため、その際は非表示にすると使いやすいのではないでしょうか。今回はWEBデザインに必要不可欠なマウスオーバーのデザインをいくつかご紹介させていただきます。CSSだけで様々な動きを加えることができます。userswww.torat.jpJavaScriptを使ってフォーム項目の表示/非表示を切り替えるのは慣れるまで大変ですよね。下のサンプルは、好きな音楽のジャンルをクリックすると音楽のジャンルが表示され、項目をクリックすると説明が表示されます。下のサンプルは、クリックするとリストに表示される内容が変わります。サンプル2に追加機能を付けました。クリックするとリストに表示される内容が変わります。チェックリスト」として選択ができるようになります。userswww.torat.jpWordPressなどのCMSでクライアント側がアップロードした縦長、横長、どんな画像サイズでも、枠内に納めて対応させたい時があります。そんな時に便利なのが「object-fit」プロパティです。「object-fit」プロパティを使うと画像を中央で切り取る取ることができ、任意の枠内に縦横比を保ったまま納めることができる大変便利なプロパティです。このobject-fitプロパティは、IEやEageには対応してないみたいです。userswww.torat.jp今回はWordPressでプラグインを使わずにOGPの設定、SNSでシェアされた際の表示に関する設定方法をご紹介します。プラグインを使わないかというとプラグインをたくさん使ってしまうとサイトが重くなったり、アップデート時に不具合や手間がかかったりと不便なことがあるためです。そのため直接ソースコードに記述した方がいろいろと利便性が高いと思われます。Protocol」の略称です。FacebookやTwitterなどのSNSにシェアされた際に、表示させるページの情報設定(タイトル、URL、要約、アイキャッチ画像、サムネイル画像)を行うことです。この設定を行うことでSNSで拡散された際により魅力的な表示ができ、多くの人に記事を見てもらうためには必要な設定をなります。Facebookで共有すると以下のように表示されます。userswww.torat.jpSNSの持つ高い拡散力はブログを運営していく上で無視することはできません。上手に活用することで新しいユーザーの獲得や読者の増加といった機会を大幅に増やすことができます。WordPressの投稿記事内などの特定の場所にSNSのシェアボタンをプラグインなしで設置する方法を紹介します。プラグインを使わない理由は、サイトの読み込み速度が早くなること、自由にカスタマイズができること、プラグインのアップデートによる不具合の干渉を受けないことなどがあります。軽快にサイトが表示されれば検索順位も上げられますよね。プラグインの脆弱性からサイトを攻撃される恐れもあるとか。できる限りプラグインは使わないということを目指した方がよさそうです。Reserved.設定を変更しましたx。