* { box-sizing: border-box } div.fix-back-image { background: url(//dl.dropboxusercontent.com/scl/fi/tb9x1qs1xp2s73pubrlyv/a-silly-chihuahua.avif?rlkey=f6gv2awlfk0u0xz81qb934ahl), url(//dl.dropboxusercontent.com/scl/fi/fmy2rxid3x19td8ypivx…
class My_recommend_entries { constructor(element) { this.element = $(element); } show() { let m = My_recommend_entries; m.max_height=[]; for (let i = 0; i { html = $($.parseHTML(result));//parse data["html"] = html; data["url"] = URL; data…
/* other */ .ListPageByAllCategory-archive-entries-more { cursor: pointer; font-size: small; } .ListPageByAllCategory-archive-entries-more:hover { color: #174fec; } /* title */ .ListPageByAllCategory-archive-entries-title { font-weight: bo…
Top About Blog Blog Top Blog-1 Blog-2 Blog-2 Top Blog-2-1 Blog-2-2 Blog-2-3 Blog-2-4 Blog-3 Menu Services Latest Posts Main Category Our Portfolio. Partner Recommended Leisurely Enjoy. Meet The Team Contact Welcome To My Blog A Theme For W…
.entry-header, /* 記事タイトル */ #top-box, /* パンくずリスト */ .pager, /* 記事下ページャー */ #box2, /* サイドバー要素 */ #footer /* フッタ */ {display: none;} .entry-content h6 { position: relative; margin: 100px auto 50px; padding: 1.5…
Welcome To My Blog A Theme For Top About Blog Blog Top Blog-1 Blog-2 Blog-2 Top Blog-2-1 Blog-2-2 Blog-2-3 Blog-2-4 Blog-3 Menu Latest Posts Main Category Our Portfolio. Recommended Leisurely Enjoy. Meet The Team Contact Page Content Perce…
h1#Logo { position: absolute; top: -10px; left: 20px; z-index: 1; color: #999; border-bottom: none; } header#header { position: fixed; top: 0; left: 0; z-index: 1; } #header.UpMove { animation: UpAnime 0.5s forwards; } @keyframes UpAnime {…
Welcome To My Blog A Theme For Top About Blog Blog Top Blog-1 Blog-2 Blog-2 Top Blog-2-1 Blog-2-2 Blog-2-3 Blog-2-4 Blog-3 Menu Latest Posts Main Category Our Portfolio. Recommended Leisurely Enjoy. Meet The Team Contact Page Content Perce…
Latest Posts Main Category Recommended Take it easy! Contact Latest Posts Click on the image 21.11.2023. はてなブログ: コードブロックに行番号を振る簡単な方法(jQuery) 本記事では、はてなブログでpreタグを使ってコード表記をする際に、行ごとに連…
Latest Posts Click on the image 21.11.2023. はてなブログ: コードブロックに行番号を振る簡単な方法(jQuery) 本記事では、はてなブログでpreタグを使ってコード表記をする際に、行ごとに連番を付ける簡単な方法を紹介します。 jQueryライブラリとCSSスタ…
@font-face { font-family: 'SourceHanCodeJP-Bold'; src: url(https://dl.dropboxusercontent.com/scl/fi/16qz5x6jj2yp6fl58n68o/SourceHanCodeJP-Bold-subset.woff2?rlkey=ae5xixvcb2oz7wfycwa8rdnof) format('woff2') } a.entry-title-link.bookmark { fo…
div#blog-title-content { position: relative; margin-top: -50px; overflow: hidden; width: 100vw; left: 50%; transform: translateX(-50%); height: 50vh; } h1#title { /* margin-bottom: 61.8%; */ } h1#title::before { content: ""; top: 0; left: …
Latest Posts Main Category Recommended Take it easy! Contact Latest Posts Click on the image 21.11.2023. はてなブログ: コードブロックに行番号を振る簡単な方法(jQuery) 本記事では、はてなブログでpreタグを使ってコード表記をする際に、行ごとに連…
See the Pen Flip for GSAP by GSAP (@GreenSock) on CodePen. See the Pen GreenSock Home Page Animation - GSAP 3 by GSAP (@GreenSock) on CodePen. See the Pen Bongo Cat Codes #2 - Jamming by Caroline Artz (@carolineartz) on CodePen. See the Pe…
a[target=_blank]:after { content: ''; display: inline-block; background-image: url(https://dl.dropboxusercontent.com/scl/fi/58xabsi06qtftm9wlfcv7/link-icon.svg?rlkey=jj7y05l27tyi5irh88641y5r4); background-repeat: no-repeat; background-size…
コピー時に改行が消える問題を修正 .code-line { counter-increment: linenumber; /*code-lineクラスの数でカウント*/ } .code-line:nth-child(even){ background-color: #E8E9F2; /*偶数行のみ背景色を適用*/ } .code-line::before { content: counter(line…
@font-face{font-family:'SourceHanCodeJP-Medium';src:url(https://dl.dropboxusercontent.com/scl/fi/hjr9n65i0uw2c54wq9b7p/SourceHanCodeJP-Medium-subset.woff2?rlkey=207233n7k71vnidnod02tbb3e) format('woff2')}pre.code{font-family:'SourceHanCode…
<iframe src="//player.vimeo.com/video/884268758?background=1&keyboard=0" width="500" height="280.55" frameborder="0" id="mp4Video" alt="舷窓からの風景"> </iframe>
/* Topへ戻る */ html{scroll-behavior:smooth}body{height:auto}.top-button{width:60px;height:60px;border-radius:50%;background-color:#fecb6e}.yajirushi::before,.yajirushi::after{content:'';width:25px;height:6px;background-color:snow;position…
.entry-content pre{ overflow-x: auto; white-space: pre; const codeElements=document.querySelectorAll('pre.code');codeElements.forEach((codeElement)=>{const codeContainer=document.createElement('div');codeContainer.className='code-box';const…
.entry-content h2#Sample-code{margin-bottom:50px} Sample code サンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプル…
Clicking the toggle button at the top left of the screen opens side navigation, which expands on mouse hover to a submenu with photos. 他の記事を見てみる 記事一覧（カテゴリ別） 記事一覧（新着順） 初心者オススメ Webデザイン 実用的なページ F…
/* ナビゲーションメニューのスタイリング */ nav ul { list-style: none; /* リストのマーカーを非表示に */ text-align: center; /* テキストを中央寄せに */ } nav ul li a { position: relative; display: block; text-decoration: none; color: #000; p…
/*#yt-wrap { max-width: ; margin: auto; } #yt-block { margin: 2.8rem 0 5rem; position: relative; } /* プレイヤーのレスポンシブ対応 */ .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 = 56.25% */ padding-top: 25px; height…
はてなブログの1カラムテーマを個別の記事で2カラムに変更し、さらにサイドバーを固定する方法
はてなブログの1カラムテーマを個別の記事で2カラムに変更し、さらにサイドバーを固定する方法
@charset "utf-8"; body{ background:#f3f3f3; } /*========= 検索窓を開くためのボタン設定 ===========*/ .open-btn1{ position: fixed; /* 絶対配置で固定。スクロールで消したい場合は「absolute」 */ top:10px; right:10px; background:url("https://co…
ブログ作成にはとり急ぎこれくらいあれば足りるかなぁ 何しろ、HTMLも普通の文書も、同じ場所にそのまま書けるので。 それでは。 お読みいただきありがとうございます◝(⑅•ᴗ•⑅)◜..°♡ ブログ作成にはとり急ぎこれくらいあれば足りるかなぁ …？といった基本的な…
