サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
WWDC25
www.torat.jp
Webサイトをデザインする際、フォント選びはそのサイトの雰囲気を左右する重要な要素のひとつとなります。 こだわりのあるフォント、おしゃれなフォントをWebサイトに使うことで差別化することができます。 WebサイトにWebフォントを使うことも増えつつあります。 Webフォントを使用するメリット 見栄えが良くなる、デザイン性が高くなるテキスト表示できるためSEO効果がある他サイトと差別化できるどの端末で閲覧しても同じフォントになる自動翻訳に対応できる Webフォントの使い方はこちら Webフォント使用の注意点 Webサイトをより魅力的にするWebフォントですが、日本語のWebフォントには最大の問題点があります。それは容量が大きくなってしまうことです。 日本語フォントは含まれる文字数が多いためファイル容量がかなり大きくなります。10MBを超えたりするものもあります。さすがにこれは重すぎて表示する
ブログなどで関連記事を並べて表示したり、動画コンテンツを一覧表示する際などに、タイル状に並べるのも見やすくて良いんですが、記事の投稿数が増えてきたり、テキスト量が多いときなど、場合によっては横スクロールするようにすると便利だったりします。 タイル状に並べて表示 横スクロールできるように表示 今回はリスト構造を使用して、実装する方法をご紹介します。 ソースコードの記述実例はこちらです。 html <body> <ul class="scroll_list"> <li class="list1"><img src="img/image1.jpg" alt="image1"></li> <li class="list2"><img src="img/image2.jpg" alt="image2"></li> <li class="list3"><img src="img/image3.jpg"
WordPressサイトを構築、カスタマイズしていくと、機能が増え、不必要な項目やメニューで管理画面がごじゃごじゃしていく場合があると思います。 その際に、クライアント目線での使いやすさの向上などでダッシュボードの不要なメニューを非表示にさせたり、新しくカスタム投稿を追加したり、カスタマイズする方法をご紹介します。 管理画面の不要なメニューを非表示にする 全く使わないメニューや触って欲しくない項目は最初から非表示にしておきましょう。 例えば、投稿することがないので投稿メニューを非表示にしたい場合は「functions.php」に以下のように追加します。 管理画面の投稿を非表示にする WordPressでは、デフォルトで投稿が用意されています。しかし、クライアントによっては使用しない場合もあるため、その際は非表示にすると使いやすいのではないでしょうか。 管理画面から投稿を非表示にするには「f
みなさん、こんにちは！ TORATのよっしーです！ 今回はWEBデザインに必要不可欠なマウスオーバーのデザインをいくつかご紹介させていただきます。 リンクボタンをマウスオーバー（カーソルを置く）した際に、色やスタイル、大きさなどを変化させたり、 CSSだけで様々な動きを加えることができます。簡単に実装できますので、ぜひWEBサイトに使用して ユーザビリティ をアップさせましょう！ カラーチェンジ マウスオーバーすると一瞬で色が変わります See the Pen gOpvdNE by ヨッシー (@yoshida123) on CodePen. プッシュアップ マウスオーバーすると上にあがります See the Pen abOqRoL by ヨッシー (@yoshida123) on CodePen. プッシュダウン マウスオーバーするとボタンを押したように下がります See the Pen
JavaScriptを使ってフォーム項目の表示/非表示を切り替えるのは慣れるまで大変ですよね。そんな方のために5つのサンプル集を作成しました♪ サンプル① 下のサンプルは、好きな音楽のジャンルをクリックすると音楽のジャンルが表示され、項目をクリックすると説明が表示されます。 See the Pen ZEbJGwJ by ヨッシー (@yoshida123) on CodePen. サンプル② 下のサンプルは、クリックするとリストに表示される内容が変わります。 See the Pen vYNJNoy by ヨッシー (@yoshida123) on CodePen. サンプル③ サンプル②に追加機能を付けました。 クリックするとリストに表示される内容が変わります。ここまでは一緒です。 なんと、「☑ チェックリスト」として選択ができるようになります。 See the Pen abvydMB b
WordPressなどのCMSでクライアント側がアップロードした縦長、横長、どんな画像サイズでも、枠内に納めて対応させたい時があります。 そんな時に便利なのが「object-fit」プロパティです。 「object-fit」プロパティを使うと画像を中央で切り取る取ることができ、任意の枠内に縦横比を保ったまま納めることができる大変便利なプロパティです。 しかしこのobject-fitプロパティは、IEやEageには対応してないみたいです。Internet Explorerなんてどうでもいいなんて言わずにIEくんにもちゃんと対応させてあげましょう IEにobject-fitを対応させる方法 まずやり方ですが二通りあります 1.object-fit-imagesを使う ①ofi.jsの読み込み ②CSSの書き換え ③objectFitImages();関数の起動 2.fitie.jsを使う ①f
今回はWordPressでプラグインを使わずにOGPの設定、SNSでシェアされた際の表示に関する設定方法をご紹介します。 なぜプラグインを使わないかというとプラグインをたくさん使ってしまうとサイトが重くなったり、アップデート時に不具合や手間がかかったりと不便なことがあるためです。そのため直接ソースコードに記述した方がいろいろと利便性が高いと思われます。 OGPとは OGPとは「Open Graph Protocol」の略称です。 FacebookやTwitterなどのSNSにシェアされた際に、表示させるページの情報設定（タイトル、URL、要約、アイキャッチ画像、サムネイル画像）を行うことです。この設定を行うことでSNSで拡散された際により魅力的な表示ができ、多くの人に記事を見てもらうためには必要な設定をなります。 Facebookで共有すると以下のように表示されます。 もしOGP設定を行っ
SNSの持つ高い拡散力はブログを運営していく上で無視することはできません。 上手に活用することで新しいユーザーの獲得や読者の増加といった機会を大幅に増やすことができます。 WordPressの投稿記事内などの特定の場所にSNSのシェアボタンをプラグインなしで設置する方法を紹介します。 SNSの効果的な使用方法についてはこちら 余談：プラグインを使わない理由 プラグインを使わない理由は、サイトの読み込み速度が早くなること、自由にカスタマイズができること、プラグインのアップデートによる不具合の干渉を受けないことなどがあります。 より軽快にサイトが表示されれば検索順位も上げられますよね。 また、プラグインの脆弱性からサイトを攻撃される恐れもあるとか。 なんせできる限りプラグインは使わないということを目指した方がよさそうです。 SNSボタンをまとめたsns.phpを作成する まずは、SNSボタンを
このページを最初にブックマークしてみませんか？
『株式会社TORAT | 東京都中央区のweb制作開発会社』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
