はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

はてなブックマーク

  • はてなブックマークって?
  • アプリ・拡張の紹介
  • ユーザー登録
  • ログイン
  • Hatena

はてなブックマーク

トップへ戻る

  • 総合
    • 人気
    • 新着
    • IT
    • 最新ガジェット
    • 自然科学
    • 経済・金融
    • おもしろ
    • マンガ
    • ゲーム
    • はてなブログ(総合)
  • 一般
    • 人気
    • 新着
    • 社会ニュース
    • 地域
    • 国際
    • 天気
    • グルメ
    • 映画・音楽
    • スポーツ
    • はてな匿名ダイアリー
    • はてなブログ(一般)
  • 世の中
    • 人気
    • 新着
    • 新型コロナウイルス
    • 働き方
    • 生き方
    • 地域
    • 医療・ヘルス
    • 教育
    • はてな匿名ダイアリー
    • はてなブログ(世の中)
  • 政治と経済
    • 人気
    • 新着
    • 政治
    • 経済・金融
    • 企業
    • 仕事・就職
    • マーケット
    • 国際
    • はてなブログ(政治と経済)
  • 暮らし
    • 人気
    • 新着
    • カルチャー・ライフスタイル
    • ファッション
    • 運動・エクササイズ
    • 結婚・子育て
    • 住まい
    • グルメ
    • 相続
    • はてなブログ(暮らし)
    • 掃除・整理整頓
    • 雑貨
    • 買ってよかったもの
    • 旅行
    • アウトドア
    • 趣味
  • 学び
    • 人気
    • 新着
    • 人文科学
    • 社会科学
    • 自然科学
    • 語学
    • ビジネス・経営学
    • デザイン
    • 法律
    • 本・書評
    • 将棋・囲碁
    • はてなブログ(学び)
  • テクノロジー
    • 人気
    • 新着
    • IT
    • セキュリティ技術
    • はてなブログ(テクノロジー)
    • AI・機械学習
    • プログラミング
    • エンジニア
  • おもしろ
    • 人気
    • 新着
    • まとめ
    • ネタ
    • おもしろ
    • これはすごい
    • かわいい
    • 雑学
    • 癒やし
    • はてなブログ(おもしろ)
  • エンタメ
    • 人気
    • 新着
    • スポーツ
    • 映画
    • 音楽
    • アイドル
    • 芸能
    • お笑い
    • サッカー
    • 話題の動画
    • はてなブログ(エンタメ)
  • アニメとゲーム
    • 人気
    • 新着
    • マンガ
    • Webマンガ
    • ゲーム
    • 任天堂
    • PlayStation
    • アニメ
    • バーチャルYouTuber
    • オタクカルチャー
    • はてなブログ(アニメとゲーム)
    • はてなブログ(ゲーム)
  • おすすめ

    WWDC25

『株式会社TORAT | 東京都中央区のweb制作開発会社』

  • 人気
  • 新着
  • すべて
  • サブセット化で日本語Webフォントの容量を軽量化する方法

    5 users

    www.torat.jp

    Webサイトをデザインする際、フォント選びはそのサイトの雰囲気を左右する重要な要素のひとつとなります。 こだわりのあるフォント、おしゃれなフォントをWebサイトに使うことで差別化することができます。 WebサイトにWebフォントを使うことも増えつつあります。 Webフォントを使用するメリット 見栄えが良くなる、デザイン性が高くなるテキスト表示できるためSEO効果がある他サイトと差別化できるどの端末で閲覧しても同じフォントになる自動翻訳に対応できる Webフォントの使い方はこちら Webフォント使用の注意点 Webサイトをより魅力的にするWebフォントですが、日本語のWebフォントには最大の問題点があります。それは容量が大きくなってしまうことです。 日本語フォントは含まれる文字数が多いためファイル容量がかなり大きくなります。10MBを超えたりするものもあります。さすがにこれは重すぎて表示する

    • テクノロジー
    • 2021/06/29 22:46
    • フォント
    • 日本語
    • font
    • wordpress
    • web
    • CSSだけでスマホの横スクロールを実装する

      3 users

      www.torat.jp

      ブログなどで関連記事を並べて表示したり、動画コンテンツを一覧表示する際などに、タイル状に並べるのも見やすくて良いんですが、記事の投稿数が増えてきたり、テキスト量が多いときなど、場合によっては横スクロールするようにすると便利だったりします。 タイル状に並べて表示 横スクロールできるように表示 今回はリスト構造を使用して、実装する方法をご紹介します。 ソースコードの記述実例はこちらです。 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"

      • テクノロジー
      • 2021/04/12 10:46
      • css
      • WordPress 管理画面の投稿をカスタマイズ

        4 users

        www.torat.jp

        WordPressサイトを構築、カスタマイズしていくと、機能が増え、不必要な項目やメニューで管理画面がごじゃごじゃしていく場合があると思います。 その際に、クライアント目線での使いやすさの向上などでダッシュボードの不要なメニューを非表示にさせたり、新しくカスタム投稿を追加したり、カスタマイズする方法をご紹介します。 管理画面の不要なメニューを非表示にする 全く使わないメニューや触って欲しくない項目は最初から非表示にしておきましょう。 例えば、投稿することがないので投稿メニューを非表示にしたい場合は「functions.php」に以下のように追加します。 管理画面の投稿を非表示にする WordPressでは、デフォルトで投稿が用意されています。しかし、クライアントによっては使用しない場合もあるため、その際は非表示にすると使いやすいのではないでしょうか。 管理画面から投稿を非表示にするには「f

        • テクノロジー
        • 2021/03/13 03:36
        • 【第一弾】コピペだけ!CSSで実装できるホバーデザイン集

          3 users

          www.torat.jp

          みなさん、こんにちは! TORATのよっしーです! 今回はWEBデザインに必要不可欠なマウスオーバーのデザインをいくつかご紹介させていただきます。 リンクボタンをマウスオーバー(カーソルを置く)した際に、色やスタイル、大きさなどを変化させたり、 CSSだけで様々な動きを加えることができます。簡単に実装できますので、ぜひWEBサイトに使用して ユーザビリティ をアップさせましょう! カラーチェンジ マウスオーバーすると一瞬で色が変わります See the Pen gOpvdNE by ヨッシー (@yoshida123) on CodePen. プッシュアップ マウスオーバーすると上にあがります See the Pen abOqRoL by ヨッシー (@yoshida123) on CodePen. プッシュダウン マウスオーバーするとボタンを押したように下がります See the Pen

          • テクノロジー
          • 2021/01/19 21:20
          • 【コピペOK】ラジオボタンのクリックでフォームの表示・非表示の切り替えを簡単に実装

            3 users

            www.torat.jp

            JavaScriptを使ってフォーム項目の表示/非表示を切り替えるのは慣れるまで大変ですよね。そんな方のために5つのサンプル集を作成しました♪ サンプル① 下のサンプルは、好きな音楽のジャンルをクリックすると音楽のジャンルが表示され、項目をクリックすると説明が表示されます。 See the Pen ZEbJGwJ by ヨッシー (@yoshida123) on CodePen. サンプル② 下のサンプルは、クリックするとリストに表示される内容が変わります。 See the Pen vYNJNoy by ヨッシー (@yoshida123) on CodePen. サンプル③ サンプル②に追加機能を付けました。 クリックするとリストに表示される内容が変わります。ここまでは一緒です。 なんと、「☑ チェックリスト」として選択ができるようになります。 See the Pen abvydMB b

            • 学び
            • 2020/09/24 13:58
            • CSSプロパティ【object-fit】をIEに対応させる方法

              3 users

              www.torat.jp

              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

              • テクノロジー
              • 2020/07/23 11:26
              • JavaScript
              • WordPressプラグインなしでOGPの設定、SNSシェア時の画像の設定

                6 users

                www.torat.jp

                今回はWordPressでプラグインを使わずにOGPの設定、SNSでシェアされた際の表示に関する設定方法をご紹介します。 なぜプラグインを使わないかというとプラグインをたくさん使ってしまうとサイトが重くなったり、アップデート時に不具合や手間がかかったりと不便なことがあるためです。そのため直接ソースコードに記述した方がいろいろと利便性が高いと思われます。 OGPとは OGPとは「Open Graph Protocol」の略称です。 FacebookやTwitterなどのSNSにシェアされた際に、表示させるページの情報設定(タイトル、URL、要約、アイキャッチ画像、サムネイル画像)を行うことです。この設定を行うことでSNSで拡散された際により魅力的な表示ができ、多くの人に記事を見てもらうためには必要な設定をなります。 Facebookで共有すると以下のように表示されます。 もしOGP設定を行っ

                • テクノロジー
                • 2020/06/09 16:15
                • *webデザイン
                • *Web制作
                • wordpress
                • php
                • SNS
                • WordPressプラグインなしでSNS共有ボタンを設置する

                  3 users

                  www.torat.jp

                  SNSの持つ高い拡散力はブログを運営していく上で無視することはできません。 上手に活用することで新しいユーザーの獲得や読者の増加といった機会を大幅に増やすことができます。 WordPressの投稿記事内などの特定の場所にSNSのシェアボタンをプラグインなしで設置する方法を紹介します。 SNSの効果的な使用方法についてはこちら 余談:プラグインを使わない理由 プラグインを使わない理由は、サイトの読み込み速度が早くなること、自由にカスタマイズができること、プラグインのアップデートによる不具合の干渉を受けないことなどがあります。 より軽快にサイトが表示されれば検索順位も上げられますよね。 また、プラグインの脆弱性からサイトを攻撃される恐れもあるとか。 なんせできる限りプラグインは使わないということを目指した方がよさそうです。 SNSボタンをまとめたsns.phpを作成する まずは、SNSボタンを

                  • テクノロジー
                  • 2020/03/09 16:00

                  このページはまだ
                  ブックマークされていません

                  このページを最初にブックマークしてみませんか?

                  『株式会社TORAT | 東京都中央区のweb制作開発会社』の新着エントリーを見る

                  キーボードショートカット一覧

                  j次のブックマーク

                  k前のブックマーク

                  lあとで読む

                  eコメント一覧を開く

                  oページを開く

                  はてなブックマーク

                  • 総合
                  • 一般
                  • 世の中
                  • 政治と経済
                  • 暮らし
                  • 学び
                  • テクノロジー
                  • エンタメ
                  • アニメとゲーム
                  • おもしろ
                  • アプリ・拡張機能
                  • 開発ブログ
                  • ヘルプ
                  • お問い合わせ
                  • ガイドライン
                  • 利用規約
                  • プライバシーポリシー
                  • 利用者情報の外部送信について
                  • ガイドライン
                  • 利用規約
                  • プライバシーポリシー
                  • 利用者情報の外部送信について

                  公式Twitter

                  • 公式アカウント
                  • ホットエントリー

                  はてなのサービス

                  • はてなブログ
                  • はてなブログPro
                  • 人力検索はてな
                  • はてなブログ タグ
                  • はてなニュース
                  • ソレドコ
                  • App Storeからダウンロード
                  • Google Playで手に入れよう
                  Copyright © 2005-2025 Hatena. All Rights Reserved.
                  設定を変更しましたx