レスポンシブの確認がこれで快適に！複数のスクリーンサイズで同時に確認できる無料ツール -Responsively App
レスポンシブの確認ツールやサービスをいろいろ紹介してきましたが、ついに本命とも言える無料ツールの登場です！ Windows, macOS, Linux対応で、しかもオープンソース、快適にレスポンシブの確認ができるResponsively Appを紹介します。5つのデバイスを同時にすれば、制作時間は5倍速くなります。 無料とは思えないほど高性能で、すべてのWeb制作者にお勧めです！ Responsively App Responsively App -GitHub Responsively Appの特徴 Responsively Appのダウンロード Responsively Appの使い方 Responsively Appの特徴 Responsively Appは、レスポンシブのWeb制作に役立つElectronで構築されたブラウザです。 ユーザーインタラクションは、すべてのデバイス間でミ
CSSの便利なプロパティmin-widthとmax-width、min-heightとmax-heightの効果的な使い方のまとめ
Webページやスマホアプリのレイアウトをはじめ、画像、ボタン、ナビゲーションなどを親要素に応じてそれらの幅や高さを適したサイズにしたい時がありませんか？ そんな時には、min-widthとmax-width、min-heightとmax-heightを効果的に使用すると、非常に便利です。 widthとheightプロパティにおけるminとmaxの効果的な使い方を紹介します。 Min and Max Width/Height in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに widthプロパティにおけるminとmax heightプロパティにおけるminとmax minとmaxプロパティの効果的な使い方 メモ リソース はじめに 要素の幅をその親に対して相対的にすると同時に、
☀️ダイナミックデスクトップ壁紙 - みずぴー日記
Mojaveのダイナミックデスクトップでは時刻によって壁紙が変化する。 これを用いてミクさんが部屋の中を歩きまわる壁紙を作成した。 (livetune feat. 初音ミク「Redial」Music Video - YouTubeより) 🖥ダイナミックデスクトップ macOS Mojaveの紹介ページに記載されているとおり、Mojaveでは時間の経過に応じて壁紙が変化する。 WWDCのキーノートでも、生活にあわせて変化する壁紙のデモがあった。 🛠仕組み ダイナミックデスクトップ用の壁紙は他の壁紙と同様 /Library/Desktop Pictures に配置されている。 異様にファイルサイズがでかい。 プレビューで開くと16枚の画像が確認できる。HEIFでは一つのファイルに複数の画像をまとめられるので、その機能を利用している。 それに加えてメタデータに時刻と画像の対応、より正確には太
サイト運営の「答え」がここに。無料なのが信じられないユーザー分析ツール「juicer」[PR]
あなたが生み出すコンテンツは、誰に、何を感じてもらうために作られていますか？ 僕は毎日のようにライフワークとして、このmonographで記事を書いています。基本的には自分の中で今気になっていること、書きたいと思っていることを率直にお伝えしているのですが、一つだけ気を付けている”ルール”があります。 それは「誰かの役に立つことしか書かない」ということ。 モノのレビューでもカフェの紹介でも、エッセイでも全ては自分のためではなく人のためです。 「自分が書きたいこと」の中で「誰かの役に立つこと」だけを抽出し、変換してmonographの中に出しています。 ただ”書きたい”というよりも”人の役に立ちたい”という気持ちの方が大きいのかもしれませんね。そのバランスの上で調整を重ねながら日々このブログを運営しています。 「誰かの役に立つ」というのは、受け手の「誰か」がいて初めて成り立つこと。 なので僕は
![サイト運営の「答え」がここに。無料なのが信じられないユーザー分析ツール「juicer」[PR]](https://cdn-ak-scissors.b.st-hatena.com/image/square/149af15421781b1b85e6bc750f416313443a8b7a/height=288;version=1;width=512/https%3A%2F%2Fnumber333.org%2Fwp-content%2Fuploads%2F2018%2F08%2Fjuicer-review-0002.jpg)
はてなブログのHTTPS化の対応やることリスト【独自ドメイン・はてなドメイン】 - Minimal Green
はてなブログの独自ドメインのHTTPS配信がついに有効になりました。 staff.hatenablog.com ていうかはてなブログの開発ブログがまだHTTPS化されてない(´・ω・`)最近WordPress移転する方が多くて寂しいです。 HTTPS化の手順・やることリスト 修正すべき記事を検索 置換ツール Upgrade Insecure Requestsのメタタグをheadに入れる Mixed Content（混在コンテンツ）の確認 忘れやすいポイント はてなブックマークのシェアボタンをカスタマイズしている場合 jQueryを使ったカスタマイズをしている場合 管理画面（デザイン＞カスタマイズの画面）が崩れている・混在コンテンツになっている場合 【追記】2016年12月以前のブログカード 画像の置換のやり方の詳細 Google Search ConsoleとGoogleアナリティクスの再
kyu7.com is for sale | HugeDomains
Huge Domains makes it easy to acquire premium domain names. As an entrepreneur, the flexibility of interest-free payment options is amazing. It means I can build a killer brand without a huge upfront expense. That allows me to invest in other key areas of the business without settling for a lower-quality domain name. - Sean King, October 25, 2023
【CSS】コピペするだけ！「目次」をカスタマイズする方法 - えむしてっく
いつの間にか目次が標準で出るようになっていますね。 先月からだったとは気づかなかった。 せっかくなので、目次のカスタマイズ法を載せようかと思います。 staff.hatenablog.com CSSの貼り付け場所 動きをもたせた *2017年6月8日追加 CSS 目次が横に縦に並ぶバージョン CSS シンプルに変える CSS シンプルに変える2 CSS CSSの貼り付け場所 以下で紹介するCSSの貼り付け場所はこちら。 デザイン→カスタマイズ→デザインCSS。 動きをもたせた *2017年6月8日追加 「目次」を少し目立つようにして、動きを加えました。 こんな感じで重ねると右にちょっときます。 「目次」の横のアイコンはFontAwesomeを利用しています。 各々導入してみてください。 こちらの要素をheaderの中へぽんと放り込んで下さい。 <link rel="stylesheet"
はてなブログがSSL化（HTTPS化）するまでに準備しておくべきこと
こんばんは。 はてなブログへの接続をすべてHTTPSにできる機能の実装予定と、利用を検討するユーザー様に準備いただきたいこと – はてなブログ開発ブログ はてなブログがSSL化を予定しているようです。 SSL/TLSについてはこちらの記事が分かりやすいので、参考にしてください。 SSL/TLSってなんだろう？｜SSL/TLS-総合解説サイト 差し替えが必要なコード SSL化に伴い、いくつかのコードを修正する必要があります。 専門的な話は抜きにして、サクッと対処法を書いておきます。 追記:置換ツールを作りました。 はてなブログ用の一括置換ツールを作りました | SHIROMAG コードを検索する方法 サイドバーに検索ボックスがあると思うので、該当するコードを検索してください。 サイドバーに検索ボックスがないブログは設置してください。ユーザビリティ的にもあった方が良いでしょう。 「デザイン」→
スゴイのが登場！Webやスマホページを積み木感覚でデザインできる、日本語対応の無料オンラインツール -STUDIO
国産のツールでは初じゃないでしょうか。 Webサイトやスマホアプリのページデザインを積み木感覚で楽しくデザインできる無料のオンラインサービスを紹介します。 操作が非常に快適で、ちょっと触るだけでもかなり楽しめます。 STUDIO STUDIOは無料で利用できるオンラインサービスで、日本語版と英語版がリリースされています。 ヘッダやフッタ、コンテンツのコンポーネントなどをドラッグ&ドロップでぽんっと配置するだけで、レイアウトを完成させることができます。コーディングのスキルは一切必要ありません。 レイアウトはすべてレスポンシブデザインに対応しており、従来のデザインツールでは表現できない動きやスクロールの再現も可能です。 STUDIOの作例 さっそく使用してみました。 まずは、メールアドレスとパスワードを登録します。
はてなブログで2年以上更新してきたので生き残っているカスタマイズを大体晒すよ - 心に火を、指先にペンを
かれこれ2年以上はてなブログを利用しているわけですが、当ブログもこの2年でこつこつのプチ整形とメイクをしつづけ2年前の面影はほぼなくなっております。 今でこそはてなブログはオシャレなテーマや多くのカスタマイズ記事が出てきておりますが、私がはじめたころなんて全然ありませんでした。スマホなんてひどかったもんですよ、本当に。カスタマイズ記事を書いてくれる人には頭が上がりませんね。 ただそれらの記事を精査せずに使い続けると「あれ？このコードなんだっけ」とか「なんかデザインが干渉しとる…」とか色々ありましてこの半年ぐらいいろんな人の手を借りながら断捨離したり、新しいカスタマイズをしたりしていたのでその辺をまとめてみようかなと。 はてなブログで2年以上更新しているアフィカスクソブロガーのカスタマイズ事情を晒します…というのがこの記事の趣旨でございます。 基本デザイン PC スマートフォン 無料公開され
WPテーマ「AFFINGER4」と「STORK」を両方買ったので比較して紹介！どっちがおすすめ？｜今日はヒトデ祭りだぞ！
というわけで、新サイトを作るにあたってワードプレステーマ 「アフィンガー（AFFINGER4）」 「ストーク（STORK）」 を両方買いました 新サイトっていうのはこのサイトです 今日は社畜祭りだぞ！ 何故両方買ったかと言うと優柔不断で決められなかったからです 結論だけ先に言うと アフィリエイトサイトならアフィンガー ブログならSTORK がおすすめです。僕は現在STORKを使っています この記事ではその理由を個人的な目線で書いていきますよ！ まずは何より大事なお値段から 買い物をする以上、価格は大切です。こんな感じになっております。 アフィンガー：8000円 STORK：10800円 どちらも良い金額ですが、有料テーマの中では安い方かと思います 色々なアフィリエイターさんが進めてる「賢威」とか2万円超えますからね しかしこう見るとアフィンガーの安さには驚きますね。これで値上げ後というから
レビューブログに使ってほしい はてなブログカスタマイズ その1：良い点・悪い点のリスト - FOXISM
私のこのブログはレビュー系ではありませんが、メインサイトの方ではスマホや周辺機器のレビューをやっています。そこで使っていたり、ほかのレビューブログでもこういうのがあるといいな、というカスタマイズを残しておきます。 まず今回の「あるといいな」は「その製品の良い点・悪い点を端的にまとめたリスト」です。 はじめに まず、レビューとか言いつつ自分では実物を手にせずにネット上のスペックだけをコピペしているだけでそれを見て「コスパ抜群です」とか言ってるようなブログ、スペックレビューとか言って本当にスペックしか書かれていない公式サイトでわかる情報以外が無いようなブログは滅んでください。よろしくお願いします。 レビューとか言って、開封の様子を順番に写真を載せただけで記事の9割が埋まっているブログもありますが、それもかなり残念な気持ちになります。開封レビューとかで、それぞれの写真にちゃんと有用なコメントつけ
flexboxで横並び ヘッダー下におすすめ記事を並べるカスタマイズ - Minimal Green
ブログのヘッダー下におすすめ記事を4つ（PC）並べるカスタマイズをしました。過去の記事で読んで欲しいおすすめ記事やブログに初めて訪れた人にまず読んで欲しい記事をピックアップしてファーストビューに表示することが出来ます。「Page Analytics」によるとそこそこクリックされているようなので、直帰率を下げるのに役立つかもしれません。 はてなブログのサイドバーモジュールを使って自動的に人気エントリーを表示する方法もありますが、この方法は手動で記事を選びHTMLコードを貼り付けています。 レスポンシブ表示 flexboxで横並び ヘッダー下におすすめ記事を並べるカスタマイズ 余白などの調整 自動的に人気記事をまとめブログ風に表示するには↓の半月さんの記事をご参照下さい。 moonnote.hateblo.jp レスポンシブ表示 PC スマートフォン このようにレスポンシブに表示されます。タブ
黒板風囲み枠CSSでブログの解説記事をまとめよう - Minimal Green
色白おばけ (id:lightgauge) さんのブログ記事で使われていた”黒板風囲み枠”にインスパイア（笑）され、私も黒板風囲み枠のCSSを作ってみました。 はてなブログで独自のWEBフォントを利用する方法 - 攻めは飛車角銀桂守りは金銀三枚 CSSは参考せず自分で組みました。borderで太枠囲んでるだけですけど。 HTML&CSS HTML&CSS ポイント 黒板風囲み枠CSSです。 はてなブログで使うには、ダッシュボード→デザイン→カスタマイズ→デザインCSSに以下のコードを貼り付けて下さい。 @font-face { font-family: 'HuiFontP109'; src:url('/fonts/public/HuiFont/HuiFontP109.eot'); src:url('/fonts/public/HuiFont/HuiFontP109.eot?#iefix')
はてなブログのトップページ一覧表示機能を利用してカード型っぽいレイアウトにするカスタマイズ - つばさのーと
こんにちは、つばさ（@tsubasa123）です。 若干出遅れましたが、タイトル通り、私もカスタマイズコードをご用意しました。まだちょっと課題があるんですけど、水物といいますか、旬を逃したくないので見切り発車でご紹介します。 ごめん、バグってた 詳細は公式ブログを 現時点での出来栄え ソースコードはこちら JavaScript CSS 把握している課題 さいごに ごめん、バグってた www.tsubasa-note.blog ごめんなさい記事書きました。上記ページのコードをご利用いただけますようお願いします。 詳細は公式ブログを staff.hatenablog.com どうぞ。特に説明は必要ないと思いますので割愛。/archiveに飛ばす必要がなくなりましたね、やったぜ。 現時点での出来栄え キャプチャでドン。 うん、カード。 www.foxism.jp 本日、先に記事を公開されたore
cssで作るシェアボタンのデザインパターン36種類 - FOXISM
cssで作るシェアボタンのデザインパターンをたくさん考えてみました。とりあえずシェア数の表示がない、単純なボタンとして36種類あります。（色違いなども若干含みます。） 記述するhtmlはどれも同じようなものですが、一部微妙に異なるものもあります。基本的にはcssだけでデザインを決めています。アイコンフォントに関してもcssだけでほとんどやっていますが、そのコードは省略していますのでソースを見てください。 コピペでもだいたい使えると思いますが、それぞれ微調整が必要なものもあると思います。なのでコピペだけでなく自分のサイトに合わせて調整できるcss中級者以上向けですね。スマホ表示も考えてないし。（スマホで見ると崩れてるやんwと思う人はこの記事の対象外です。） というか、ローカルなhtmlで作っていたものをここにコピペしたらうまく動かないものやフォントが反映されていないものがありました。面倒なの
導入するだけではてなブログをオシャレにできるテーマ「Codomisu Flat」を公開しました。 - ひつじの雑記帳
※当テーマの紹介する際は、テーマ配布ページではなくこの記事のURLを使用してください。 このブログも開設してから約３週間が経ちました。今までずっと、はてなブログのオリジナルテーマを作ろうと思っていたのですが、忙しくて中々作れず公式のテーマを使用していました。 さすがに公式のテーマのままでやっていくのも限界を感じてきたため、3日ほど掛けてオリジナルテーマ「Codomisu Flat（こどみすフラット）」を作りました。 最初はこのブログ専用の非公開テーマにする予定でしたが、少し考えてみたところ、せっかく作ったものを独り占めするのは勿体ないという結論にいたったため公開することにしました。 個人的に、はてなブログはPCデザインとスマホデザインは分けた方が美しく表示できると考えているのもあって、当テーマはレスポンシブ非対応ですので注意してください。 ちなみに、はてなブログのスマホデザインのカスタマイ
ブログテーマ「Codomisu Flat(こどみすふらっと)」を導入しました - 力こそパワー
本日は久しぶりにブロガー向け記事となります。 このブログはPCとスマートフォンで表示を変えていますが、今回はPC表示時のブログテーマを変更しました。 本日は導入したテーマと、「どうしてそのテーマを選んだのか」という理由をご紹介させていただきます。 Codomisu Flat テーマ選びの基準 メインカラムの幅が広い 余計な装飾が少ない 今後弄りたい箇所 最後に Codomisu Flat 今回選んだテーマはこどみす(id:codomisu)さんが昨日公開したテーマ「Codomisu Flat」です。 hitsuzi.hatenablog.com こどみすさんのブログはスマートフォン時のデザインが本当に格好良くて、Twitterで「デザイン作成中」との話を聞いてずっと楽しみにしていました。 公開されたテーマも期待通りのものでしたので、その夜のうちに早速導入することに。 テーマ選びの基準 私が
はてなブログテーマ「ZENO-TEAL」をテーマストアに投稿しました - FOXISM
以前より何回か書いていた、はてなブログ用の公開テーマ「ZENO-TEAL」をテーマストアに投稿しました。問題なければインストールできるようになっているはずです。
おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ
リンクを目立たせよう クリックして欲しいリンクがある時、ただ単にリンクを貼るのではなく枠で囲って目立たせてみましょう。 できる限りコードはシンプルに、コピペだけでできるようにしました。 枠がない場合はこんな感じですね。 必見！はてなブログのカスタマイズを一気に紹介する – SHIROMAG これを枠で囲って強調するようにカスタマイズします。 CSS まずはCSSにコードを追加していきます。以下の中から好きなコードを選んで、ダッシュボードの「デザイン」→「カスタマイズ」→「デザインCSS」に追加して下さい。 スマホで使う場合は、<style> ～ </style> で囲んでヘッダーのタイトル下にでもぶっこんでください。 シンプルなタイプ 必見！はてなブログのカスタマイズを一気に紹介する – SHIROMAG .entry-content .emphasize-link { position:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
