はてなブログの自動生成アイキャッチをデコる方法【HTML/CSSわからなくてOK】 - 虹はね、
はてなブログは基本的に記事ごとにアイキャッチ画像を設定でき、好きな画像をアイキャッチとして設定できるのだが、記事のタイトルなどから自動生成してくれる「自動生成アイキャッチ」機能がある。 これまではいかにも自動生成ではてなブログ～って感じのデザインだったのだが、このたび有料プラン利用者向けにHTMLを使って自由にカスタマイズできる機能を提供された。 staff.hatenablog.com つい先日このブログもはてなブログPROに切り替えたので、ちょっとHTMLをいじってみた。 はてなブログに投稿しました はじめてのミュージカルなに観る？劇団四季のかんたん作品紹介 - 虹はね、 https://t.co/CF1eWBXdSP#はてなブログ— すぴ🐭🎀 (@spica_mic) 2024年3月16日 過去のツイート含めて切り替わっている！ どうやってカスタマイズしたか残しておくので、ぜひ参
CSSアニメーションでパタパタ（反転フラップ式案内表示機）を作ってみた - Qiita
かつて、鉄道や飛行機の案内板として活躍したパタパタ、あるいはソラリ―こと反転フラップ式案内掲示板をイメージをCSSアニメーションとJSで作ってみた。 なお、私が公開しているお気に入りの場所をマッピングした地図を公開するサービスToboggar でパタパタ型のUIを採用した。 サンプル Toboggar - 名古屋で食べるべきハンバーガー Top 10 ここで使用したソースを簡素化したものが今回の記事である。 完成形 まずは、出来上がりを Codepen で確認。(画面が表示されていないときは、Result をクリック) 左下の Start ボタンを押すとフラップが回る。 また、Slow ボタンでゆっくり回るので、動きをじっくり確認できる。 See the Pen Split-flap display animation by hiroatsu (@scqspcfg-the-solid) o
【VSML/VSS】動画を編集できる言語を作った話 - Qiita
はじめに みなさんは動画編集をやったことはありますか？ 私は，頻度は低いものの動画編集をして動画投稿サイトに動画をアップロードした経験があります． 動画編集とは元来めんどくさく手間がかかるものではあるのですが，普段からWebアプリの開発をしている私は，以下のようなことを考えていました． HTML/CSSのように複数オブジェクトを一つのコンポーネントのように扱えたら，CSSのように統括して装飾を指定できたら，HTMLのレンダラー(ブラウザ)が相対値から計算して幅や高さを指定するように，動画のオブジェクトの時間長も編集アプリが計算して指定してくれたら，もっと楽に動画編集できるのになぁ，と． そこで私は，HTML/CSSをベースとした，動画の構成を記述する言語を記述することで動画編集を行えるという技術を開発しました． 元々OSSでやるか，未踏のようなイベントに持ち込むか悩んでいたのですが，大学4
CSSフレームワークVivliostyle Themeで簡単にページデザインを編集する | gihyo.jp
CSSにまだ詳しくなかったり、ページデザインよりも本文の執筆に注力したい人のために、Vivliostyleでは簡単にデザインを適用できる「Vivliostyle Theme」が用意されています。第3回では、Vivliostyle Themeの使い方や、Vivliostyle Themeを実現するためのCSSの機能、自分でVivliostyle Themeを作って公開する方法について紹介します。 Vivliostyle Themeについて Vivliostyle Themeは、Vivliostyleワークフロー上で簡単にページデザインを適用するための仕組みです。CSS組版を実現するVivliostyleは、ページデザインをCSSで実現できることが最大のメリットですが、逆説的に言うとCSSを知らないとデザインの変更ができないとも言えます。CSS自体は広く普及しており、CSSを学ぶ環境も十分に整
Vivliostyle Viewer で CSS 組版ちょっと入門
Vivliostyle は、CSS 組版で本を作るためのツールとして、少しずつ知られるようになってきたかと思います。そして、最近の更新では、目次ナビゲーション機能、Web Publications 対応など、Web／電子出版ビューアとしても、使い勝手のよいものを目指しています。この「Vivliostyle Viewer で CSS 組版ちょっと入門」では、Vivliostyle Viewer でできることを中心にした CSS 組版のちょっとだけ入門を書いてみます。 Vivliostyle Viewer の紹介 Vivliostyle Viewerhttps://vivliostyle.github.io/vivliostyle.js/viewer/vivliostyle-viewer.html は、ブラウザ上で動作する CSS 組版エンジン vivliostyle.js とビューア UI
Vue.js - The Progressive JavaScript Framework | Vue.js
The Progressive JavaScript Framework Web ユーザーインターフェース構築のための、親しみやすく、パフォーマンスと汎用性の高いフレームワーク。 Vue を使う理由 はじめる インストール Vue 2 のセキュリティー・アップデート 親しみやすい 直感的な API とワールドクラスのドキュメントを使用して、標準的な HTML、CSS、JavaScript をもとに構築します。
わたしはページ内検索を普通に使いたい
以前にも少し書いたのですが、ウェブブラウザーで使えるページ内検索による体験が阻害されるのが本当にストレスで、その例を残しておこうと思います。 採用側の気持ちも分かりますので、どうなると皆が幸せになるのか分からないという種類のものなので困ったところです。 省略されたテキストoverflow: hiddenとtext-overflow: ellipsisまたは-webkit-line-clampによってテキストが省略された場合、その省略部分がページ内検索にヒットすると非常に探しづらいです。 特に、グリッドで区切られたアイテムが複数列・複数行で並んでいる際に顕著です。 以前の記事のとおり、わたしはYouTubeでよく遭遇します。 下記のデモは、1000個のアイテムを並べたものです。 このうち、「Red Rose」というワードは12個のアイテムに含まれています。 デモを開いて「Red Rose」で
Web制作者はしっかりと理解しておきたい！ CSSにおけるレイアウトアルゴリズムを解説
CSSを理解するには、プロパティや値を知っているだけでは不十分です。CSSのレイアウトアルゴリズムがどのように機能するかを理解する必要があります。 ブログやツイートで便利なCSSスニペットが紹介されていても、なぜ機能するのか、レイアウトアルゴリズムがどのように使用されているのか説明されていないことはよくあります。CSSにおけるレイアウトアルゴリズムについて解説します。 CSSの初学者をはじめ、長く携わっている人にも、気づきや学びがあると思います。 Understanding Layout Algorithms by Josh W. Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSにおけるレイアウトのアルゴリズム レイアウトアルゴリズムの確認 インライン要素の不思議なスペース 終わりに はじめに 数年
【無料】FPS向け OBS用デジタル時計 - mooncape - BOOTH
FPSゲーム向けのOBS用デジタル時計のhtmlソースです。 配信画面に現在時刻を表示したいときにおすすめです。 OBSのソース「ブラウザ」から追加するだけで簡単にご利用いただけます。 デザイン：全4種 ファイル形式：html ファイルの設定方法 1. OBSのソースウィンドウにある「＋」からブラウザを選択。 2. 名前をつけて新規作成。 3. プロパティのウィンドウが開いたら「ローカルファイル」にチェックを入れ、「参照」を押す。 4. ダウンロードしたファイルを選択し、開く。 共通アレンジ用CSSコードOBSのプロパティ内にある「カスタムCSS」に以下のコードを記入することで簡単に色を変更できます。 body {color: #カラーコード; /* 文字の色 */} .path01 {fill: #カラーコード; opacity:0.3 /* 背景の色と透明度 */} .path02 {
【無料】配信者向け OBS用デジタル時計 - mooncape - BOOTH
VTuberや配信者さん向けのOBS用デジタル時計のhtmlソースです。 配信画面に現在時刻を表示したいときにおすすめです。 OBSのソース「ブラウザ」から追加するだけで簡単にご利用できます。 ダウンロードせずに使えるオンライン版はこちら▼ https://stock.mooncape.net/others/268/ アレンジ用CSS掲載記事 https://stock.mooncape.net/others/30/ ファイル形式：html ・個人、法人問わず商用利用可能です。 ・用途に合わせて自由に改変可能です。 ・改変したものの再配布や自作発言はご遠慮ください。 ・クレジット表記、使用報告の義務はありません。 ・ソースの利用によって発生したトラブルについては一切責任を負いかねます。 お問い合わせはBOOTHのメッセージまたはTwitter(@minozki_i)のリプライ、DMよりご連
vTicker
A jQuery plug-in that adds scrolling vertical tickers to your site Just one line of javascript code is all you need to start a vTicker Items can be paused when the mouse hovers over an item Step backwards and forwards through your ticker items with easy client methods Easy to use: vTicker is easily added to your existing web page by including jQuery, the vTicker plug-in javascript file and then by
数秒ごとに1行ずつ縦スクロールするティッカーを作る [ホームページ作成] All About
文字が流れる電光掲示板のことを「ティッカー」と呼びます。文字が左右に流れたり、上下に流れたりします。鉄道や空港などで使われているほか、街中でも見かけます。 ウェブ上では、IEの独自拡張として「marquee」(マーキー)という要素があり、左右に文字を流せます。しかし、独自拡張なので使うことは推奨されませんし、何より「文字が横に流れていく表示」は、文章を一気に読めない点で、あまり歓迎されないでしょう。 では、1行または数行単位で、「数秒間は静止表示」→「0.5秒くらいのアニメーションで次の1行を表示」……というのを繰り返す垂直方向のティッカーなら、どうでしょうか。その場合は、 文章は一括表示されるため、読みにくくはならない。 ずっと流れ続けるわけではないので、さほど煩くはならない。 場所を取らずに様々な情報を見せられる。 ……という区画になります。 ニュース系サイトなどで、ヘッダの直下あたり
![数秒ごとに1行ずつ縦スクロールするティッカーを作る [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/9f04c2e1290b7d677a20ab445513eccbd4491c41/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F3%2F2%2F0%2F6%2F7%2Ftopimg_large.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vivliostyle — 楽しく CSS 組版！
GitHub - misskey-dev/misskey-hub: Website for Misskey
GitHub - vuepress/core: Vue-Powered Static Site Generator
Home
GitHub - css-modules/css-modules: Documentation about css-modules
Next.jsにCSS Modulesを導入する
mc-stock.site
GitHub - miraoto/jquery.simpleTicker.js: Simple ticker plugin using jQuery
