Google, Fonts の検索結果:
var newMeta = document.createElement("meta"); newMeta.setAttribute("name", "robots"); newMeta.setAttribute("content", "noindex"); document.getElementsByTagName("head")[0].appendChild(newMeta); Welcome To My Blog A Theme For Top About Menu L…
⑧ブログ名周りの装飾とタイピングアニメーション はてなブログ無料版のトップページを、自分好みのスタイルにカスタマイズする方法を紹介するシリーズの８回目です。 以下、今回の内容となります。 Typed.jsライブラリを利用したタイピングアニメーションの実装 タイトル部分の装飾に関するカスタマイズ Typed.jsは、テキストをタイピングするように表示するJavaScriptライブラリです。これを使用すると、文字が一文字ずつアニメーションされるように表示され、まるで誰かがキーボー…
…eous'; /* Googleフォント */ } /* 数値カウンターのテキストスタイル */ .counter .counter-text { font-size: .88em; text-transform: uppercase; letter-spacing: .22em; font-family: 'Montserrat'; /* Googleフォント */ } fonts.google.com fonts.google.com メディアクエリ: /* ウィンドウ幅…
…色は黒色、フォントはGoogleフォント「Roboto」が使用しています。 スライダーの配置と余白: .slider-wrapper: スライダーのコンテンツを包むラッパーで、上に3em、下に4emの余白があり、画面左上からの位置は上方向に5vw、左方向に11vwずれています。 スライドとイメージのスタイル: .slide-image: 各スライドのイメージ部分のスタイルを指定しています。幅と高さがそれぞれ12emで、内部の画像は全幅・全高に拡がるように設定されています。 オ…
⑤Animate.cssを使ったフリップアニメーションと ポートフォリオのディスプレイ はてなブログ無料版のトップページを、自分好みのスタイルにカスタマイズする方法を紹介するシリーズの５回目です。 以下、今回の主な内容となります。 Intersection Observer（スクロール監視）によるイベントトリガー Animate.cssを使ったフリップアニメーション ポートフォリオのディスプレイ https://pixabay.com/users/geralt-9301/
…コードで使用しているGoogleフォント JavaScript コードの解説 アレンジ オプション指定 おさらい コードのまとめ おわりに これまでの記事 振り返り 前回まで3度に渡り、はてなブログ無料版でトップページをカスタマイズする方法について紹介しました。 ①基本設定、見出しの装飾、コンタクトへのリンクボタン ②Animate.cssによるスライドアニメーションとホバー効果1 ③Animate.cssによるスライドアニメーションとホバー効果2 今回も引き続き、トップペー…
③Animate.cssによるスライドアニメーションとホバー効果2 この記事では、はてなブログ無料版のトップページを自分らしいスタイルにアップグレードするための具体的なカスタマイズ方法を紹介します。Intersection Observer（交差検知）とAnimate.cssライブラリを使って、オススメ記事やページへのリンク画像にスクロールに応じたスライドアニメーションを付与します。 HTML、CSS、JavaScriptのコーディングについては丁寧な解説を心掛けました。本記…
②Animate.cssによるスライドアニメーションとホバー効果1 この記事では、はてなブログ無料版のトップページを自分らしいスタイルにアップグレードするための具体的なカスタマイズ方法を紹介します。 Intersection ObserverとAnimate.cssライブラリを駆使して、画像カードにスライドアニメーションを加え、マウスホバーでSNSボタンやメッセージを表示する仕組みも取り入れています。 さらに、Animate.cssの導入方法や基本的なHTML、CSS、Jav…
…play'; /* Google Fonts「Playfair Display」を利用 */ text-align: center; font-weight: 400; line-height: auto; } .entry-content h6:before { content: ''; position: absolute; width: 60px; height: 5px; bottom: 10px; left: calc(50% - 30px); border-rad…
…ps://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 外部ライブラリのCDN（Content Delivery Network）を配置する場所は、通常は<head>セクション内の<script>要素の直前に配置することが一般的です。これは、ページが読み込まれる前にライブラリが利用可能であることを確保するためです。 ソースコード このコードは、動くWebデザインアイデア帳さんの以下の記事…
…ps://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 外部ライブラリのCDN（Content Delivery Network）を配置する場所は、通常、<head>セクション内の<script>要素の直前に配置することが一般的です。これは、ページが読み込まれる前にライブラリが利用可能であることを確保するためです。 ソースコード HTML -> CSS -> JavaScriptの順に紹…
…ps://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 外部ライブラリのCDN（Content Delivery Network）を配置する場所は、通常、<head>セクション内の<script>要素の直前に配置することが一般的です。これは、ページが読み込まれる前にライブラリが利用可能であることを確保するためです。 ソースコード HTML -> CSS -> JavaScriptの順に紹…
本記事では、はてなブログでpreタグを使ってコード表記をする際に、行ごとに連番を付ける簡単な方法を紹介します。javaScriptとCSSスタイリングの組み合わせで、読みやすく整形されたコード表示が可能となります。
この記事では、はてなブログの記事タイトルに背景画像を追加するテクニックを紹介します。画像に角度をつけたり、さまざまなフィルターを組み合わせてオリジナルなデザインを実現しましょう。
この記事では、details・summaryタグを使用したアコーディオン式UIにアニメーション効果を追加し、アクセシビリティを向上させる方法を紹介します。GSAP（GreenSock Animation Platform）ライブラリを活用したJavaScript、ほかCSSによる装飾等、コードの実装について詳細に解説しています。 See the Pen How to use details and summary tags (GSAP) by yFGq-Ziw (@yfgq-…
…Query CDN Google CDN <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> Hosted Libraries [jQuery] | Google for Developers JavaScript(jQuery) $(document).ready(function () { // スクロールが発生したら $(window).on("…
この記事では、JavaScriptを活用して、コードブロック内のテキストを折り返し可能にし、かつコピー機能を実装する手法に焦点を当てています。フロントエンドデザインにおいて有益なテクニックを紹介し、具体的なコーディング方法も解説していきます。 SEO
…zilla.org Googleフォントの場合、読み込みリンクに&text=というパラメータを追加すると、指定した文字だけを読み込むことができます。 div.kaisei-select { margin: 60px auto; } div.kaisei-select p { font-family: 'Kaisei Decol'; } .kaisei-select span { background: seashell; padding: 5px; border-radius…
この記事では、CSS・HTMLコードによるFont Awesomeアイコンの指定方法とそのバリエーションについてご紹介します。 https://unsplash.com/ja/@foxfox fontawesome.com 見出し・コード表記にアイコンを自動付与 HTML CSS JavaScript minify化したコード フリー版の指定方法 font-familyの記述 font-weight スタック（stack） Quate（引用） List Style（リスト） …
ul.table-of-contents { transform: translateY(-200%); position: fixed; top: calc(-100% - 100px); left: 20px; transition: top .5s; background: #f0f8ff; min-width: 336px; max-height: 40vh; overflow-y: scroll; z-index: 2; opacity: .3 } .table-o…
@font-face{font-family:'hannari-mincho';src:url(https://dl.dropboxusercontent.com/scl/fi/h7yxw9hg7k9ifjp60b0p4/HannariMincho-subset.woff2?rlkey=i6yxqy9r66746ziepasg341de) format('woff2');font-display:swap} h1.entry-title a { font-family: 'G…
…ぐことができます。 Google Search Console: Google Search Consoleなどのツールを使用して、新しいブログの変更を通知し、インデックスの変更を監視できます。また、不要なコピーの排除やインデックスの管理に役立ちます。 これらの措置を講じることで、新しいブログのコピーコンテンツとして扱われるリスクを最小限に抑え、検索エンジンからのペナルティを避けることができます。ただし、正確な処理は検索エンジンのアルゴリズムや方針の変更に影響を受ける場合があ…
/* postタグ */ .post-category{top:37px;height:33px;font-size:13px;border-radius:0 0 10px 10px;box-shadow:rgb(0,0,0,.33) 1px 2px 9px -1px;text-shadow:1px 1px #000;border-left:1px solid #fffaf0;border-top:1px solid #fffaf0;border-bottom:1px sol…
pre.code { font-family: 'Fira Code', monospace; } .code-box { margin: 60px 0; } @font-face { font-family: 'hannari-mincho'; src: url('https://dl.dropboxusercontent.com/scl/fi/h7yxw9hg7k9ifjp60b0p4/HannariMincho-subset.woff2?rlkey=i6yxqy9r66…
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…
var noindex=document.createElement("meta");noindex.name="robots";noindex.content="noindex";var head=document.getElementsByTagName("head")[0];head.appendChild(noindex); .entry-content .table-of-contents{position:relative;margin:2em 5px;paddi…
var noindex=document.createElement("meta");noindex.name="robots";noindex.content="noindex";var head=document.getElementsByTagName("head")[0];head.appendChild(noindex); /* スクリプトと連動 */ h1.entry-title a span.en { font-family: "Marcellus", seri…
…ツ設置ということで、Googleはiframeタグを評価しない旨の見解を示しています。ですので、iframeがSEOにおいて直接効果を与えることはあまり期待できませんが、 iframeタグを使うことでユーザビリティが向上すれば、間接的にSEO効果を上げられる可能性はあります。 例えば、料理の方法を解説している記事で、実際に料理をしている動画がYouTubeなどにあれば、テキストリンクで誘導するよりもiframeで動画を記事に埋め込んであげたほうがユーザーにとっては親切です。 …
…リット WebPは、Googleが開発したフォーマットで、高い圧縮効率を持ちながらクリアな画質を提供します。 AVIFは、AV1ビデオコーデックに基づいたフォーマットで、非常に効率的な圧縮と高品質な画像を提供します。 これらのフォーマットを使うことで、ウェブページの読み込み速度が向上し、ユーザーエクスペリエンスが向上します。 最新の形式で画像と動画を提供する重要性 ページ速度とパフォーマンス向上の意義 ウェブサイトの速度は、ユーザーにとって重要な要因です。遅い読み込み速度は訪…
GitHub p.gitfuji-image { text-align: center; } p.gitfuji-image img { max-width: calc(100% - 20px); position: relative; z-index: 1; } .shortcuts-list dt span, .pic_frm figcaption span { padding: 3px 8px 1px; background-color: #cfeafd; border…
