…ory ブログ運用 SEO対策 ブログカスタム Our Portfolio. A creative agency that believes in the power of creative ideas and great design. Older Posts Recommended 効率的なテキストのクリップボードへのコピーボタン実装方法: Async Clipboard APIの活用 スタイリッシュなキラキラボタンの作成手法: HTMLとCSSで魅惑のエフェクトを実装 …

…act ブログ運用 SEO対策 ブログカスタム ABOUT お問合せ 免責事項 アレンジ アニメーションの遅延発火 animate__delayプロパティは追加のオプションクラスで、指定することによりアニメーションを開始する時間を遅延させることができます。 デフォルトでは１秒間隔で１~５秒の遅延機能が用意されていますが、これに小数を掛けることにより、指定する時間のバリエーションが増やせます。 以下のコードでは、中心の画像カードに対してのみ（.about-tiles:nth-c…

…n}} ブログ運用 SEO対策 ブログカスタム ABOUT お問合せ 免責事項 見出しの装飾 トップページの見出し項目をCSSで装飾します。 #h6midashi{position:relative;padding:1.5rem;font-size:200%;font-family:'Playfair Display';text-align:center;font-weight:400;line-height:auto;background:#eee}#h6midashi:b…

…アクエリに関しては、SEOタイムズさんの記事で詳しく説明されているので、参考にして下さい。 find-a.jp 以下にコードの主な構成要素を解説します。 デスクトップ用スタイル（min-width: 768px以下） 解説が開きます トグルボタンおよびヘッダースタイル: #header（ナビゲーション）の位置を上端に固定 #header { position: fixed; top: 0; left: 0; width: 100%; height: 0px; z-index:…

…解説していきます。 SEO デモページ コードと解説 ①head内にCSSコードを追加 ②preタグにHTMLコードを追加 ③コードブロックに折り返し機能を追加 ④コードブロックにコピー機能を追加 minify化したまとめコード Font Awesome おわりに 今回ご紹介するのは、preタグを使ったコード表記に折り返しとコピーボタンを生成するスクリプトです。 Markdown ```markdown ここにコードを書く ``` はてな記法（はてなブログのみ） >|hate…

…ピーコンテンツ対策とSEO最適化。リダイレクト、Canonicalタグの活用 - hatebcustom 目次ボタン：CSSデザイン・アニメーション - hatebcustom 特定の条件をスタイルで指定し、条件に合う時に疑似要素を生成 aタグ内に[target=_new]がある場合、after要素を付与してスタイルを指定 .entry-content a[target=_new]:after { content: ''; display: inline-block; bac…

…ーコンテンツの問題やSEOへの影響を考慮することが必要です。この記事では、301リダイレクトとCanonicalタグの活用についてステップバイステップで詳しく説明します。 .mawarikomitakunai{clear:both}.migiyose{float:right;margin-left:20px}.hidariyose{float:left;margin-right:20px}.mannaka figure.blogcard{width:80%;margin:0 …

a.entry-title-link.bookmark { display: flex; flex-direction: column; align-items: stretch; }h1.entry-title a span.en{font-family:"hannari-mincho",serif;color:yellowgreen;border-radius:18px;font-weight:600;font-size:80%}h1.entry-title a span…

…何か、その利用方法やSEOへの影響について紹介します。さらに実装方法についても詳しく説明します。 iframeとは IntersectionObserverとは Vimeoなどへの汎用 コード コードの解説 実装 効果の確認 おわりに CONTENTS iframeとは iframe（アイフレーム）とは、Inline Frame（インラインフレーム）の略称です。HTMLタグの中に別のファイルを埋め込むことができる要素です。 iframeを使うと、Webページ内の好きな位置に…

…uto 31px} SEO WebP・AVIFをサイトに配置し、ページ速度を改善 この実践ガイドでは、次世代画像フォーマットであるWebPとAVIFの利用方法について詳しく解説します。WebPとAVIFのメリットについて説明し、ページ速度とパフォーマンス向上の重要性に焦点を当てました。 ガイドでは、形式変換の方法について詳しく説明し、コマンドラインを使用したWebP形式への変換手順とバッチ処理の自動化方法、オンラインツールを活用しての画像圧縮手順も提供しています。 最後に、W…

…というだけでなく、 SEO的な観点からは検索エンジンのクローラーに画像の内容を教える という意味があり、また、 目の不自由なユーザーが音声読み上げでブラウザ閲覧している際など、重要な情報となる ため、記述することが推奨されます。(„◕᎑◕„)⸝⸝꙳ｸﾞｯ これらの要素は、CSS・JavaScriptと組み合わせ、クリックやホバーなどのイベントに反応してスタイルやアニメーションが適用され、ユーザーエクスペリエンスを向上させる目的で使われています。 HTML ココまで CSS ク…

…その他にもクローラ、SEO的メリット、UX 向上の観点からも掘り下げています。裏技のコードや、応用例にも触れ、はてなブログに限らずサイトユーザーにとっても役立つ情報を提供しています。 とくにSEO戦略やプライバシー保護に関心のある方にとっては、有益な内容となっています。 😊 今回、記事の執筆・コードの作成にあたり、つくたろうさんの下記の記事を参考にさせていただきました。ありがとうございました。 1. はじめに 2. 「noindex」とは？ noindex メタタグの用途 3…

…情報源となります。 SEO（検索エンジン最適化）向上 意図: キャプションとディスクリプションにキーワードや関連キーフレーズを含めることで、動画の検索エンジンにおける可視性を向上させます。 効果: 検索エンジンはテキスト情報を理解しやすいため、これらの追加情報を通じて動画が関連するキーワードで検索されやすくなります。これにより、動画の発見性が向上し、視聴者数が増加する可能性があります。 視聴者のエンゲージメント促進 意図: キャプションとディスクリプションは視聴者に対してコー…

…t: 135px; margin: 0 auto; background-repeat: no-repeat; width: fit-content; } *1:ユーザーインタラクション（User Interaction）とは、ユーザーがウェブサイトやアプリケーションで行う行動のことです。具体的には、ページの閲覧、リンクのクリック、フォームの記入、動画の再生、スクロールなどが挙げられます。 ユーザーインタラクションはSEO（検索エンジン最適化）にとって重要な指標となります。

…間、「target="_new"」の利点 *1:アンカーテキストとは、リンクの内容を表すテキストのことです。アンカーテキストは、ユーザーがリンクをクリックするかどうかを判断し、リンク先の内容を把握するために使用されます。 アンカーテキストは、サイトの階層構造やリンク先の内容を把握するために使われるので、SEO対策では内部SEO対策として重要な位置付けにあります。 アンカーテキストは、HTMLタグのa要素のhref属性（アンカータグ）でマークアップしたリンク付きのテキストです。

…も容易になります。 SEO対策: Googleなどの検索エンジンは、UXを評価する要因として長いページのスクロールを考慮します。良いUXを提供するために「トップへ戻るボタン」を設置することは、SEOランキングの向上に貢献します。 3. 「トップへ戻るボタン」の作成手順 ボタンの実装手順 ここでは、HTML、CSS、JavaScriptを併用して「トップへ戻るボタン」を実装する手順をご紹介します。下記のコードは、ブログやホームぺージなどWebページの最下部に「トップへ戻る」ボタ…

…</li> <li>SEO Optimization</li> <li>Content Creation</li> </ul> </section> <section> <h2 id="Portfolio">Portfolio</h2> <div class="portfolio-item"> <img src="image1.jpg" alt="Project 1"> <h3>Project 1</h3> <p>Lorem ipsum dolor sit amet, con…

…</li> <li>SEO Optimization</li> <li>Content Creation</li> </ul> </section> <section> <h2>Portfolio</h2> <div class="portfolio-item"> <img src="image1.jpg" alt="Project 1"> <h3>Project 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipis…

…</li> <li>SEO Optimization</li> <li>Content Creation</li> </ul> </section> <section> <h2>Portfolio</h2> <div class="portfolio-item"> <img src="image1.jpg" alt="Project 1"> <h3>Project 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipis…

…の考察です。 1. SEOリライトとは？ 1.1 リライトの定義とその重要性 1.2 SEOにおけるリライトの役割と目的 2. 効果的なSEOリライトの手順 2.1 リライト対象のコンテンツの選定 2.2 情報ギャップの調査 2.3 リライト戦略の実施 3. リライトの影響と改善のサイクル 4. SEOリライトが適切な記事の特定 5. SEOリライトの実施に向けた実用的な手順 5.1 ステップ1：リライト対象の記事を選定する 5.2 ステップ2：リライト対象の記事の分析 5.…

…tGPTを利用した「SEOとか検索エンジンからの集客を目的にした記事の書き方」を解説しています。以下、動画の手順に沿ってやった実際の作業です。 キーワードを決める 何の検索ワードに対して上位表示するか、をまず決めます。ラッコキーワードというサイトを利用します。登録無料です。登録したほうが利用制限が解除されて使いやすくなりますのでおススメです！ラッコキーワード｜無料のキーワード分析ツール（サジェスト・共起語・月間検索数など） (related-keywords.com) ✖「は…

…sさんの記事にある、SEOコンサルタント・辻正浩さんのTwitterでのコメントを拝見するかぎり、Googleアプリのディスカバーからの訪問はGoogleアナリティクスだと参照元はDirect扱いになるようです。 あきらかにDirectからの訪問が激増していたので、これはGoogleアプリからの訪問だと推察されます。 辻さんについては以前こちらの記事を書いたとき、はじめてそのお名前を知りました。やはり、著名なおかただったのですね。 なお、この日から数日たって、Googleサー…

…" |"; } } SEO Webサイト（ブログ）のページスピード（表示速度）を改善することは、SEO対策として重要な要素です。画像イメージを遅れて読み込ませることにより、サイトアクセス時のダウンロード容量を抑え、ページスピードを向上させることができます。 それには、IntersectionObserverというJavaScript機能を使います。今回は、IntersectionObserverの導入方法についての投稿です。 CONTENTS IntersectionObse…

…ピードアップの方法、SEO的な影響を調べました。 SEO的な影響 ページスピードが遅いほど直帰率が高くなる 直帰率は検索順位に関係ない SEOの目的 ページスピードの測定方法 ページスピードの改善方法 画像の圧縮 コードのminify（ミニファイ）化 画像の遅延読み込み さいごに SEO的な影響 ページスピードが遅いほど直帰率が高くなる 一般に、ページの表示にかかる読み込み速度は3秒未満が適切と言われているようです。 ページ表示速度の影響を理解して高速化しよう｜ferret …

…ersuggestでSEO対策に有利なキーワードを選出。また、最適な文字数は「32」と言われていますが・・じっさいは？ 記事タイトルの見直し 記事タイトルの付け方 Pythonで形態素解析 コードの実行 Ubersuggestでキーワードを選ぶ 記事タイトル32文字論 記事タイトルを決定する おわりに 記事タイトルの見直し ブログを始めて約2か月、投稿数も30を超えました。 いろいろとブログをやるうちにわかってきたこと、知ったことがあって、そのひとつがブログ記事タイトルの付け…

…いだろうし・・ 。 SEO的なことをいろいろ考えるうちに、頭がグルグルしてきて・・(＠_＠;)最終的に思考停止に、オチいりました 笑。 変更理由と効果測定 とりあえず、グローバルナビを最下部固定の使いやすそうなデザインに変えてみることにしました。 常にメニューがあるのはジャマ、という意見もあるようですが・・、スマホって縦長だし、視線は真ん中だし、そんなにジャマじゃないよなぁ、と思うことにして。(^.^) 変更の理由をまとめると。 スマホだと、記事全文のあとにサイドバーがだーー…

…す。 alt属性は、SEO的には「画像イメージの内容を正しく説明していることが望ましい」、とされているので、それぞれの画像に個別に指定するのがベターです。 それ以外の画像コードの書き換え作業は一括でやる方法を考え、まとめましたので、よろしければご参照ください 画像のHTMLを書き換え - hatebcustom *** 追記ここまで *** 記事が少ないカテゴリー 3つ目の問題点、記事が少ないカテゴリーについて。 そもそもカテゴリー・タグの区分けがないはてなブログだと、タグ＝…

…lates.com SEO Friendly（SEO対策済み）、Fast Load（高速読み込み）など、メニューから項目を絞って探すことができます。 Live Demoでデモの確認もできます。メニューバーのView asでスマホやタブレット表示の切り替えも可能です。どれもカッコいいので迷います・・笑。 こちらはデモの一例です。 btemplates.com gooyaabitemplates.com 上記サイトには登録がないですが、こちらのデザインもシンプルでオシャレです。S…

…の言葉が候補のなかでSEO的に効果がありそうだったので、いつかどなたかに読んでもらえることを願って、、この辺の言葉をからめた内容で、考えてみることにします。 Ubersuggestは、無料のSEO対策ツールです。Ubersuggestを利用したブログタイトルの付けかたについては、こちらの記事を参照なさってください。rubirubi.hateblo.jp 「勉強」とか「学習」って、どうせなら流行ってるとか話題のモノ・人を題材にした方が楽しい！と思いまして。（正直、やってる本人も…

…気に入りの便利な無料SEO ツール「Ubersuggest」を、使います。 neilpatel.com まずはキーワード候補、そのままですが「SERP」と入れてみます。 検索ボリュームは少ないですね。CPC（Google 広告のクリック単価・高いほどいい）も、ほぼ0円。 SD（サーチディフィカルティ・低いほど競合がなくていい）も軒並み低いのですが、価値のあるワードは「serposcope」くらいかも、しれません。 serposcope をクリックして、右画面のキーワード概要を…