【CSS】Youtube動画の埋め込みで縦横比率をPCでもスマホでも維持する方法

ブログやホームページにYoutube動画を埋め込む際に
Youtubeで埋め込みコードをコピペすると
サイズが小さかったり、でかすぎたり、
左寄せで見栄えが悪かったり。
そこで、縦横サイズを変えてみ ...

再利用ブロック(パターン)で作成したものをショートコードで出力できるようにする方法
ブロックエディタで構築したいところがあるがテーマの仕様などによって、そのエリアはブロックエディタを扱うことが出来ないというときがあります。 例えば、ウィジェットだけクラシックウィジェットになってるテーマとかTCD系のテーマは、トップページは ...

ウェブ制作での黒文字カラーコード候補
ホームページを制作する際ウェブサイトの黒文字の色はどのように設定してますか? カラーコード:#000000の真っ黒で設定してますか? 読者に出来るだけ負担をかけずに隅々まで読んでもらえるようにテキストのカラー設定は、とても大事です。 #00 ...

【WordPressテーマ】Cocoonのモバイルボタン設定の覚書
Wordpresの人気無料テーマcocoonのモバイルボタンの設定の仕方について解説します。 ちなみにcocoonは、ブログ運営には最適なテーマです。 ただし、サイト作りにはカスタマイズ性があまりよくないのでお勧めできません。 また結構プラ ...

Windows 11でScreenpressoのショートカットキーが効かない時の対処法
PCの画面キャプチャーソフトでHiro先生が、愛用しているScreenpresso。 簡単に画面をスクショできるのはもちろんのこと相手に指示する際、教える際に撮った直後に簡単にクリックする場所を四角で囲ったり矢印を入れたり、文字入れしたりと ...

【WPのプラグイン】Public Post Previewで下書きの記事を第三者に確認してもらう方法・有効期限を変更する方法
ワードプレスを運用していて時に仕事で記事を公開前に第三者に見てもらいたい場合があります。 そんな時、ログイン情報をお渡しするにはリスクが高いし公開してチェックしてもらうのも仕事上NG、ワードで書いた原稿を相手に渡してチェックしてもらうもあり ...

WordPressの公開エリアでのエラー表示を非表示にする方法
Wordpressを運用していると、プラグインやテーマシステムの更新を怠るとエラーが表示されたりする。 また、テーマやプラグインなどにバグがあった場合などもエラーが表示されてしまったりする場合がある。 例えば、自分のミスでエラーが表示されて ...

【WordPress】Hiro先生おすすめのTCDテーマ
Wordpressでまず一番最初に悩むのはテーマの選定です。 型通りで構わないが、高品質のテーマが良いそんな方には、TCDのテーマがおすすめです。 ちなみにTCDのテーマは有料です。 TCDテーマのメリット 高品質でプロの見栄えと挙動 用途 ...

WordPressのブロックエディタでMarkdownはコピペできる
Wordpressで記事を書く際、慣れてきたらMarkdownを使った方がスピーディーに記事が書けるようになるので便利です。 ブロックエディタで例えば、見出し2を入れたい場合、通常であれば、ブロック挿入ツールから見出しを見つけてクリックする ...

SEO分析に役立つGoogle検索用特殊コマンド
"あ" キーワードと完全一致するWEBページを検索 例"巫女 神楽鈴 意味" site: 特定のWEBサイトに限定して検索を行いたいときに使う 例site: あ OR い どちらかの言葉に関連する結果が表示される 例豚 OR タコ AND ...

Googleアナリティクスで個別ページのアクセス数を見る方法
Googleアナリティクスで任意の個別ページのアクセス数を確認する方法について解説します。 Googleアナリティクスを追加したは良いが思うように使いこなせていない方は、参考にしていただけたら嬉しいです♪ ①まず、アクセス数を調べたい個別ペ ...

Contact Form 7の送信ボタンを中央寄せにする方法
Contact Form 7を使っていると色々と細かい調整が必要になるときがあります。 使用しているWordpressのテーマによってレイアウトが崩れる場合もありますので。 今回は送信ボタンを中央寄せにする方法を解説します。 まず、送信ボタ ...

CSSで何番目の要素に対して指定する方法
例えば、対象のHTMLコードが修正できなく、classやidが無いなどで何番目かの要素に対してCSSを指定したい場合以下の通り指定いただくと解決します。 最初の要素 :first-child :first-of-type 最後の要素 :la ...

HTMLタグ「dl・dt・dd」とは?
dl(description list)とは、 説明リストのこと。dt(description term)とは、 説明する言葉のこと。dd(definition / description)とは、 定義文 or 説明文のこと。 つまり、dt ...

CSSのプロパティ「clear」とは?
CSSのプロパティである「clear」とは、要素をその前にある浮動要素の下に移動する必要があるかどうかを設定することが出来ます。ちなみにclearは、浮動要素も非浮動要素もどちらも対応出来ます。 clear: none; clear: le ...

sitemap.xmlを開くと1行目が空白のエラーが出る問題を解消する
All in one SEO Packを入れてサーチコンソールにサイトマップを登録しようとしてsitemap.xmlを確認したところ、思いがけない以下エラーが発生した。 This page contains the following er ...

CSSで縦並びのレイアウトにする方法
例えばdivなどでレイアウトを行う際に、縦並びにしたい場合があります。 そんなときは、以下コードにて、flexboxで縦並びにするとよいです。 お試しください。 使い方は、親要素に以下CSSを追加することでその内部が縦並びになります。 .w ...

CSSでリンクの下線を消す方法
サイト制作していると、時々デザインの関係で、リンクの下線を消したいときがあります。 その下線を消すにはどうしたら良いか? あまりCSSに詳しくない方は、border-bottomなどで指定してうまくいかないなんてこともあるかもしれません。 ...

WordPressのメディアにある不要な画像ファイルを一括で削除する方法
長らくワードプレスを運用していると ついつい不要な画像をそのままメディアから削除し忘れてしまうことがあり バックアップの際、データ量が多くなりすぎて かなり面倒になることがあります。 そこで、不要な画像を一括で削除したくなります。 今回、そ ...

Elementorでのレスポンシブ設定での思わぬ落とし穴
充実様です♪Hiroです♪ 今回はElementorで編集中に起こった思わぬトラブルについてシェアしたいと思います。 Hiroの環境ではまったく問題ない内容なのでこれまで気づかなかったのですが、お客様に納品した際にそれは起こりました。 PC ...

ワードプレスでのSEO対策・画像編
充実様です♪ 今回はSEOの基本について シェアします。 HTMLでのサイト制作を経験されている方 SEOについてちょっと勉強したことのある方なら ご存じのSEOの基本 画像を貼り付けた際には 画像コードに「alt="画像の説明を入れる"」 ...

スマホにてワードプレスのプレビューが表示されない原因
充実さまです。 ワードプレスにて記事を投稿する際 プレビュー確認しようとすると PCでは表示されるのに 何故かスマホでは表示されない現象があります。 この原因の一つに Twitterのツイートを埋め込んでいる場合 今回のケースが該当すること ...

リダイレクトハッキングから復旧しました!
気づくの遅れてすみませんでした<(_ _)> 当サイトがおそらく先月の20日前後あたりから リダイレクトハッキングされていたようです。 当サイトにアクセスすると リダイレクトで自動的に他の怪しいサイト ...

【CSS】電話番号にリンクを貼り付けてないのにスマホでリンクが付いてるのを解除する方法
ホームページ制作で 電話番号とか住所の番地にリンクを貼り付けていないのに スマホで確認すると電話のリンクが付いてる場合があります。 そのリンクを解除する場合は 以下、CSSを追加し リンクが付いてるところにClassで 指定し ...

Cyfonsの編集画面はこれをやると編集不能に陥るので要注意
Cyfonsシリーズ 今回もいきます♪ 今回も実際に起こった事例です。 トップページの編集画面で起こった出来事ですが テーブルタグを閉じ忘れると ページレイアウトが崩れ なんと編集画面でも不具合が発生し 編集も出来ない状態となります。 こう ...

Cyfonsのデータベース情報の格納場所
今回は、Cyfonsのデータベース情報の確報場所は どこなのか解説したいと思います。 ワードプレスの場合は、 wp-config.php に接続データベースの情報が 格納されています。 今回、Cyfonsのトップページの 編集画面に不具合が ...

バックアップは大事!怠けるとこうなります♪
こんにちは、hiroです♪ 久しぶりの投稿になりました。 先日、当サイトが505エラーで しばらく表示されない問題が発生しました。 復旧に結構時間が掛かったので ご迷惑をおかけしました。 今回の問題 ...

WordPressのアップデートでウィジェット仕様が変わり不具合が起きた場合の対応方法
昨日だったかWordpress本体のアップデートがあり 早速、最新状態に更新しました。 アップデートしたところ ウィジェットエリアの仕様が ブロックエディタ仕様に変わりました。 日頃からブロックエディタを使ってる ...