Web担メモ
ログイン メモする
Web担メモ
  • HOME

Web担当者が、日々の業務の中で役立ったことをメモしています。


Facebookの埋め込みコードをレスポンシブ対応にする

U3
2019/7/11
2024/11/7

編集にはカテゴリー認証が必要です ▼受付終了にする

https://edge.sincar.jp/web/facebook-page-plugin/

コメント

コメントはまだありません。

関連する投稿

BEM設計(CSS設計)
BEM（ベム）は、下記の3つの要素の頭文字から名付けられた設計手法です。Block枠組みとなる要素のこと。セクションやコンテナをBlockとして扱うケースが多いです。ElementBlockの中に存在する子要素のことModifierBlockやElementを修飾するもの。activeやlargeのように状態を管理する場合もModifierで指定するようにしますhttps://webdesign-trends.net/entry/9214メンテナンス性が向上する大規模なWebサイトでも整ったコードで作れる複数人でのコーディングが行いやすくなる

Web制作

  • 0
  • 105
  • 0
U3
無料でホームページを作る方法
2023年現在、を無料で簡単に作るならGoogleサイトがおすすめです。部活動やサークル、自治会などのホームページはもちろん、中小企業のホームページとしても十分です。素晴らしいのはもう一つはCanvaです。無料のデザインツールとして広まっていますが、ホームページ作成機能もあるのです。Webの知識がなくても、デザイン性のあるホームページを作ることができます。世の中の3分の１のサイトはWordPressで作られているといわれていますが、WordPressでサイトを維持しようと思うとサーバーの費用がかかります。Googleサイト費用：無料お問い合わせフォーム：Googleフォームを埋め込める備考：Google関連サービス（スプレッドシート、カレンダーなど）も簡単に埋め込めるCanva費用：無料（有料プランあり）備考：デザイン性のあるホームページが作れるNotionの公開ページ費用：無料（有料プランあり）備考：ホームページのためだけに別ツールを立ち上げなくて良い。情報管理ツールの中の一部のページをWeb上に公開ができる。ワードプレス費用：レンタルサーバー代（月額550円〜）お問い合わせフォーム：コンタクトフォーム７などのプラグインを使って設置は可能だが、スパム攻撃が多い備考：たくさん使われているCMSなのでサイバー攻撃で狙われやすい傾向

Web制作

  • 0
  • 42
  • 0
U3
HTTPで作った既存のサイトをHTTPS（常時SSL化）に移行する方法
 https://coolware.jp/blog/http-to-https/

Web制作

  • 0
  • 101
  • 0
U3
Googleサイト｜無料でホームページが作れるGoogleのサービス
ブラウザでGoogleアカウントへのログインしている必要があります。https://sites.google.com/newメリット：無料デメリット：凝ったデザインはできない。Googleのサービスなのでいつ提供内容が変わるか不明（突然サービス提供が終了したりする場合も）

Web制作

  • 0
  • 124
  • 0
U3
新しいブラウザ「Brave」
ユーザーが許可しないと広告が表示されることはないBraveから提供される広告を見ると、独自の暗号資産BATを受け取れるBATを原始に、応援したいコンテンツに投げ銭ができる　【前編】ブロックチェーンがあったからこそ生まれた。まったく新しいブラウザ「Brave」とは

Web制作

  • 0
  • 218
  • 0
U3
【解決】HTML：Safariで一部の画像が表示されない
MacのSafari(MacBook Pro、iPad）で、ある画像が表示されない。という現象が起きました。WindowsのChromeやFirerox,Edgeで見ると表示されている画像が、MacのSafari（マックブックプロやiPad等）で表示したときだけ表示されないのです。それもWebページすべてではなく、ある画像のみです。キャッシュをクリアしたり、スーパーリロードしたりしたが非表示のまま。解決法：画像を作り直して差し替え表示されないpng画像がおかしかったようなので、差し替えたらSafariでも表示されるようになりましたた。具体的に何がおかしかったかというと、この画像をエクスプローラ上でディレクトリの中に入れると背景透過の部分が、黒くなるというものです。ちなみにこの画像です。この投稿をする際に、文章内に挿入はできましたが、「画像」からuploadしようとすると、internal errorが出ました。PNG等の背景透過画像をJPG等にフォーマット変換を行った場合に背景が黒くなることがありますが、この画像の拡張子は.pngです。難しいことはわかりませんが、とりあえず、この画像そのものに何か問題があり、Safariだけはその異常に反応して表示してくれないという状況だったようです。そこで、ややこしい画像を使うのはやめて、再度作り直して画像を差し替えたところ、Safariでも画像が表示されるようになりました。まとめSafariでのみ画像が表示されないという現象が、インターネットで探しても全くヒットしませんでした。背景透過のpng画像を作成する過程で何か余計なことをしてしまうとこういうことが起こるようです。Windowsで表示されるので、ちゃんとMacでもブラウザチェックしないと見逃すため、要注意。・メディアクエリでスマートフォンサイズで非表示にしていることが関係しているのかもしれない。と思ったが、そんな難しいことではありませんでした。

Web制作

  • 0
  • 3502
  • 0
U3
Windowsエミュレーター（EdgeでF12）
Windowsから手っ取り早くブラウザチェックがしたいときなど、この機能を使おう。実機とはやっぱり異なるので、本来は実機での確認が必要。Windowsの場合は標準で入っているMicrosoft EdgeまたはInternet Explorerで確認できます。ショートカットキーとしてキーボードの「F12」を押せばデベロッパーツールが表示されます。デベロッパーツールの「エミュレーション」のタブからモードの部分で変更することができます。

Web制作

  • 0
  • 3432
  • 0
U3
Next.jsとTailwindを使ったWeb構築のおすすめ構成
「AIも使いたいけど、人間も手動で修正したい」という場合、次の組み合わせが最も現実的です：Next.js (App Router構成)Tailwind + shadcn/uimicroCMS（メインCMSとして運用）Markdown + GitHub Actions（AI生成コンテンツ用）Vercel（自動デプロイ）これなら：ページ修正はCMSで即時反映AIページはスクリプトでMarkdown生成＋自動公開運用の属人化を防ぎつつ、スピードも維持できます

Web制作

  • 0
  • 25
  • 0
U3
Polyfill.io について（2024）
Polyfill.io はオープンソースのJava Script ライブラリとして公開されていましたが、2024年2月にFunnullという中国企業に買収されました。Polyfill.ioは、古いブラウザでも新しいWeb技術を使えるようにするためのスクリプトを提供するサービスです。しかし、セキュリティやパフォーマンスの観点から注意が必要です。セキュリティリスク外部依存性: Polyfill.ioは外部のサーバーからスクリプトを取得するため、そのサーバーが攻撃を受けた場合、あなたのサイトも影響を受ける可能性があります。バージョン管理の不安定性: 外部のスクリプトが更新された場合、互換性の問題が発生することがあります。対策自前ホスティング: Polyfill.ioから必要なスクリプトをダウンロードし、自分のサーバーでホスティングすることで、外部依存性を減らすことができます。SRI (Subresource Integrity): スクリプトタグにSRI属性を追加することで、スクリプトが改ざんされていないことを確認できます。適切なバージョン管理: スクリプトのバージョンを固定し、必要な場合のみ手動で更新するようにします。以下は参考リンクです。https://neightbor.jp/blog/js-polyfill-iohttps://qiita.com/A-Kira/items/1f084ae482dc90dd4eac

Web制作

  • 0
  • 79
  • 0
U3
コマンドプロンプトでネットワーク診断できるpingコマンド
https://michisugara.jp/archives/2014/ping.htmlpingコマンド通信したい相手に対してパケットを送信し、ちゃんと応答が帰ってくるかどうかを確認できる１．コマンドプロンプトを起動２．下記の通りコマンドを打つping [URL] [URL]はhttp:などの付いていないもの３．コマンドを送信して通信が正常か確認正常でないと、「要求がタイムアウトしました」などのメッセージが出る。

Web制作

  • 0
  • 145
  • 0
U3

アクセスランキング

1

App Storeでアプリを一時的に配信停止にする方法

28

2

Excelで一つの値を一番下のセルまでコピーしたい時

15

3

VSCodeで複数ファイルを横断して検索＆置換する方法　Option+Shift+F

8

4

自分のチャンネルのYouTube動画に広告が表示されないようにしたい

7

5

ロケットチャットの新規通知をデスクトップ表示させるには

6

6

アクセス解析結果に「fbclid」というパラメーターが付く原因は？

4

7

システムの受託開発での「準委任契約」で気を付けることは？

3

8

Adobe XD：オブジェクトが勝手にパスに変換されてしまう

3

9

Facebook広告：Facebookピクセルとは？

3

10

【CSS】リンクの時は外部リンクアイコンのマークを自動で付ける

3

11

★リスト表示をjQueryで絞り込んで表示させる方法(フィルタ機能)

3

12

TortoiseSVNのインストールと日本語化

3

13

YouTubeの「クイズ」機能とは？

2

14

Google Playストアでアプリを一時的に非公開にする方法

2

15

Androidのアプリが「繰り返し停止しています」と表示される場合の対処法

2

16

Excelで指定の行に飛びたいとき（例えば2300行目とか）にパッと移動できる方法は

2

17

WordPress：Elementorでエラー ”Your site doesn't have a default kit”

2

18

SafariでFacebookの埋め込みが表示されない

2

19

Adobe：PhotoshopでAdobeCCのログイン画面でIDが入力できない

2

20

Font Awsomeの接頭辞　fas far fal fab の違い

2

コメントランキング

1

「２人の営業パーソン」のクイズ

1

2

AIO (AI最適化) 重点要件

1

3

AIコピペハラスメントとは？〜AIが生成した文章をそのまま送るのはやめよう

1

いいねランキング

1

AIコピペハラスメントとは？〜AIが生成した文章をそのまま送るのはやめよう

2

2

Androidのアプリが「繰り返し停止しています」と表示される場合の対処法

2

3

「２人の営業パーソン」のクイズ

1
この投稿者に問い合わせ
この投稿者に問い合わせ

当サイトでは、Cookieを使用しております。

すべての Cookie の使用に同意いただける場合は、下記の「同意します」をクリックしてください。

  • シェア
  • ログイン
  • 利用登録する
  • ログアウト
  • マイアカウント
  • メモする
  • このサイトについて
  • 問合せ
Copyright © Web担メモ
シェア
いいね！ X このエントリーをはてなブックマークに追加 LINEで送る