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…

…js jQuery Font Awesome ソースコード HTMLの構造 コードの解説 CSSスタイル コードの解説 JavaScript コードの解説 アレンジ Typed.jsオプションのバリエーション おさらい コードのまとめ おわりに これまでの記事 振り返り はてなブログ無料版でトップページをカスタマイズする方法について、これまで以下の内容を紹介して参りました。 ① 基本設定、見出しの装飾、コンタクトへのリンクボタン ② Animate.cssによるスライドアニメ…

…DN jQuery Font Awesome ソースコード HTMLの構造 コードの解説 CSSスタイル コードの解説 JavaScript コードの解説 アレンジ 背景画像の固定／スクロール 交差監視を継続する おさらい コードのまとめ おわりに これまでの記事 振り返り はてなブログ無料版でトップページをカスタマイズする方法について、これまで以下の内容を紹介して参りました。 ① 基本設定、見出しの装飾、コンタクトへのリンクボタン ② Animate.cssによるスライドア…

⑤Animate.cssを使ったフリップアニメーションと ポートフォリオのディスプレイ はてなブログ無料版のトップページを、自分好みのスタイルにカスタマイズする方法を紹介するシリーズの５回目です。 以下、今回の主な内容となります。 Intersection Observer（スクロール監視）によるイベントトリガー Animate.cssを使ったフリップアニメーション ポートフォリオのディスプレイ https://pixabay.com/users/geralt-9301/

…ss jQuery Font Awesome ソースコード HTMLの構造 コードの補足解説 CSSスタイル コードの補足解説 JavaScript コードの解説 1.ドキュメントの読み込み完了後の処理: 2.対象とする要素の指定: 3.Intersection Observerの設定: 4.Intersection Observerのコールバック関数: 5.要素ごとのアニメーションの追加: 6.アニメーションの種類ごとの処理: Main Contents, Contact …

…t" style="font-size: .8em;background: #eee;text-align: center;">Copyright © 20XX <strong>ブログ名</strong>, All Rights Reserved.<br> <a href="お問い合わせへのリンク"><i class="blogicon-mail lg"></i>Contact Us</a> | <a href="免責事項へのリンク">Privacy Policy and D…

…化したまとめコード Font Awesome おわりに 今回ご紹介するのは、preタグを使ったコード表記に折り返しとコピーボタンを生成するスクリプトです。 Markdown ```markdown ここにコードを書く ``` はてな記法（はてなブログのみ） >|hatena| ここにコードを書く ||< Markdownやはてな記法で上記のように記述すると、以下のようなHTML構造が生成されます。 HTML <pre class="code lang-markdown" da…

…:marker { font-family: 'Unica One'; color: orangered; font-weight: 600; } ol>li li::marker { color: cornflowerblue; } ol>li>ul>li>ol>li::marker { font-size: .9em; } button#toggle-button{position:fixed;z-index:1000;top: 30px; left: 125px;tra…

…HTMLコードによるFont Awesomeアイコンの指定方法とそのバリエーションについてご紹介します。 https://unsplash.com/ja/@foxfox fontawesome.com 見出し・コード表記にアイコンを自動付与 HTML CSS JavaScript minify化したコード フリー版の指定方法 font-familyの記述 font-weight スタック（stack） Quate（引用） List Style（リスト） 見出し・コード表記にア…

…re.code { font-family: 'Fira Code', monospace } button#toggle-button { position: fixed; z-index: 999; top: 45px; left: 45px; transform: translate(-50%,0%); cursor: pointer; border-radius: 15px; text-shadow: 1px 1px #000; color: #a0a080; bor…

@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…

…ight: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 solid #fffaf0;padding:5px 30px 26px;left:1…

…a span.en{font-family:"hannari-mincho",serif;color:yellowgreen;border-radius:18px;font-weight:600;font-size:80%}h1.entry-title a span.en::after{font-family:blogicon;content:"\f000"}img.kazari-tsuke,iframe.kazari-tsuke{border-radius:3px;marg…

…;top:22px;font-size:115%;color:inherit;border-color:darkseagreen;font-family:'Marcellus';letter-spacing:2px;width:200px;height:30px}pre.code{font-family:'Fira Code',monospace}ul.table-of-contents li ul li::before{content:"●";color:burlywood…

… "\f028"; font-family: blogicon; margin-right: 5px; } p.batch-bash{background:gainsboro;padding:0 0 0 20px;border-radius:10px;box-shadow:rgb(0,0,0,18%) 0 1px 7px 1px;position:relative;border-left:5px solid;border-right:15px double;text-shad…

…い方を紹介します。 FontAwesomeなどのアイコンを使ったリストや、目次への応用例を通して、読者にわかりやすく魅力的なコンテンツを提供する方法を一緒に学びましょう。 ©nyanco リストの使い方って、ややこしいですよね…。よかったら、一緒に勉強しましょう~ ฅ^•ω•^ฅ すぐに役立つブログ知識：リストタグ<UL> <OL> 便利な使い方 <ul>とは type 属性（「・」）を変える <ol>とは type、start、reversed属性を使用したバリエーション …

…。 <i>要素: 「FontAwesome」アイコン。faa-falling animatedの部分でアニメーションを指定。（これについては次回③でまた、詳細ご紹介します。） . ディスプリクション部分: クリックで解説を開閉 <div class="description"> ここにディスプリクションを書く。（動画説明・解説など） <i class="fas fa-angle-double-down faa-falling animated"></i> </div> cla…

…gn: left; font-family: 'Kaisei Decol', serif; font-size:13px; } @import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@700&family=Sacramento&display=swap'); .douga-taitoru { font-size: 130%; font-family: 'Sacramento', cursi…

…cell code{font-size:16px}table .cell{text-align:center}.font-shitei.cell{font-size:20px;font-weight:600;color:#d32f2f;background:lightcyan} HTMLエンティティは、アンパサンド&で始まりセミコロン;で終わるテキストの一固まりで、主に予約済み文字や見えない文字の表示に用いられます。 ウェブ開発者はHTMLドキュメント内で特別な文字や記号を正…

…（はてな） CDN fontawesome.com よく利用するアイコン一覧 コピペでどうぞ~（ちなみにfaはver.4、fasはver.5~です。ここでは基本fas以降で掲載してます） アイコン コード 説明 <i class="fas fa-external-link"></i> 外部リンク <i class="fa-solid fa-list"></i> リスト <i class="fa-solid fa-expand"></i> 拡大・拡張 <i class="fa-…

…:before { font-family: 'Fira Code', 'Font Awesome 6 brands'; content: attr(data-lang) '\f3b9'; border-radius: 0 0 7px 0; box-shadow: rgb(0,0,0,.3)1px 1px 10px -5px; } .entry-content pre[data-lang="html"]::before { background: #f06429; conte…

…noindex); Font Awesome html css HTMLとCSSでつくる🎨キラキラボタン✨の作成方法③ アニメーションとスタイリングによって、ボタンが魅力的に光り輝くエフェクトを実現します。 さらにGoogleフォントを使用してフォントスタイルを設定し、Font Awesomeアイコンを組み込んでボタンを彩ります。 クリックで目次を開閉 HTMLとCSSでつくる🎨キラキラボタン✨の作成方法③ Font Awesomeアイコンの組み込み 1. Font Awes…

…トスタイルを設定し、FontAwesomeアイコンを組み込んでボタンを彩ります。 (◎´∪｀))ｽｷﾅﾉクリック↑で、幸せな場所に連れて行きます~✧♡ クリックで目次を開閉 HTMLとCSSでつくる🎨キラキラボタン✨の作成方法 キラキラ⭐光るエフェクト: CSSコードの詳細な解説 1. ボタンを適用したクラス 2. 擬似要素（::before） 3. アニメーション（@keyframes） 脚注 See the Pen Untitled by yFGq-Ziw (@yfgq-…

…); Google Fonts Quasar Explorer | Matthias Hurrle@atzedent HTMLとCSSでつくる🎨キラキラボタン✨の作成方法② Googleフォントの活用 1. Googleフォントの読み込み 2. フォントの適用 3. クリエイティブなデザインへの活用 html css HTMLとCSSでつくる🎨キラキラボタン✨の作成方法② アニメーションとスタイリングによって、ボタンが魅力的に光り輝くエフェクトを実現します。 さらにGoogl…

@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} /* H5のコードにAwesome */ h5#JavaScript…

…ng: 15px; font-size: inherit; } .code_break { white-space: pre-wrap !important; word-wrap: break-word !important; overflow: auto !important; } blockquote a[target="_blank"]:after { margin: 0 0 0 3px; font-family: "Font Awesome 5 Free"; font…

…or: #fff; font-weight: bold; } /* 目次のマーカーのスタイル */ ul.table-of-contents li::marker { content: ""; } /* 目次のアイコン */ ul.table-of-contents li ul li::before { content: "●"; color: burlywood; font-size: 7px; margin-right: 5px; vertical-align: midd…

…ます。 まず一行目でFont Awesomeを呼び込む設定をしています。 Font Awesomeとは、アイコンを文字として扱えるようにするツールのことです。ボタンの↑マークに使っています。詳しくは、こちらの記事をご覧になってください。 【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう 3行目から20行目は、JQueryのコードです。 8行目の1500という数値を変えると、ボタンが出現する位置を調整できます。数値が大きいほど出現位置が下に（遅く）なり…

…ちらのコードですが「Font Awesome」を使用しています。 Font Awesome とは、無料で使えるWebアイコンフォントのことで、中・小見出しのチェックマークはFont Awedome のアイコンです。 利用はこちらの記事を参考になさってください。【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう コードの44行目、こちらの「f00c」の部分を変更すれば、好きなアイコンが使えます。 content\f00c"; /*アイコンのユニコード*/…

.container { padding: 1%; width:1080px; position:relative; left:-180px; } .content { display: flex; padding: 20px 0; } .main { padding: 20px; flex: 1 0 auto; display: block; height: 3000px; margin-right: 5px; background: linear-gradient(to …