はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

はてなブックマーク

  • はてなブックマークって?
  • アプリ・拡張の紹介
  • ユーザー登録
  • ログイン
  • Hatena

はてなブックマーク

トップへ戻る

  • 総合
    • 人気
    • 新着
    • IT
    • 最新ガジェット
    • 自然科学
    • 経済・金融
    • おもしろ
    • マンガ
    • ゲーム
    • はてなブログ(総合)
  • 一般
    • 人気
    • 新着
    • 社会ニュース
    • 地域
    • 国際
    • 天気
    • グルメ
    • 映画・音楽
    • スポーツ
    • はてな匿名ダイアリー
    • はてなブログ(一般)
  • 世の中
    • 人気
    • 新着
    • 新型コロナウイルス
    • 働き方
    • 生き方
    • 地域
    • 医療・ヘルス
    • 教育
    • はてな匿名ダイアリー
    • はてなブログ(世の中)
  • 政治と経済
    • 人気
    • 新着
    • 政治
    • 経済・金融
    • 企業
    • 仕事・就職
    • マーケット
    • 国際
    • はてなブログ(政治と経済)
  • 暮らし
    • 人気
    • 新着
    • カルチャー・ライフスタイル
    • ファッション
    • 運動・エクササイズ
    • 結婚・子育て
    • 住まい
    • グルメ
    • 相続
    • はてなブログ(暮らし)
    • 掃除・整理整頓
    • 雑貨
    • 買ってよかったもの
    • 旅行
    • アウトドア
    • 趣味
  • 学び
    • 人気
    • 新着
    • 人文科学
    • 社会科学
    • 自然科学
    • 語学
    • ビジネス・経営学
    • デザイン
    • 法律
    • 本・書評
    • 将棋・囲碁
    • はてなブログ(学び)
  • テクノロジー
    • 人気
    • 新着
    • IT
    • セキュリティ技術
    • はてなブログ(テクノロジー)
    • AI・機械学習
    • プログラミング
    • エンジニア
  • おもしろ
    • 人気
    • 新着
    • まとめ
    • ネタ
    • おもしろ
    • これはすごい
    • かわいい
    • 雑学
    • 癒やし
    • はてなブログ(おもしろ)
  • エンタメ
    • 人気
    • 新着
    • スポーツ
    • 映画
    • 音楽
    • アイドル
    • 芸能
    • お笑い
    • サッカー
    • 話題の動画
    • はてなブログ(エンタメ)
  • アニメとゲーム
    • 人気
    • 新着
    • マンガ
    • Webマンガ
    • ゲーム
    • 任天堂
    • PlayStation
    • アニメ
    • バーチャルYouTuber
    • オタクカルチャー
    • はてなブログ(アニメとゲーム)
    • はてなブログ(ゲーム)
  • おすすめ

    新内閣発足

『MoonNote』

  • 人気
  • 新着
  • すべて
  • IPS液晶ディスプレイに古いゲーム機を接続するのはやめたほうが良い - MoonNote

    205 users

    moonnote.hateblo.jp

    2021/10/17: 知見不足を反省しつつタイトルと文章を加筆・修正。 2021/11/05: 焼き付きの原因は白から黒、黒から白のような極端な色変化が長時間連続して行われるとその部分の液晶素子がうんぬんだそうです。つまりプログレッシブでも映像次第で焼き付きは発生するため、インターレースが直接の原因であるという感じのニュアンスで書かれたこの記事は微妙です。ですが、特にインターレースの場合は様々な組み合わせでそういう映像になりやすいので注意喚起として残しておきます。 危うく買ったばっかりの液晶ディスプレイを壊しかけた。 買ったばかりの液晶ディスプレイが壊れるかと思った。 GANA Wii to HDMI変換アダプタ-Wii to HDMI コンバーター Wii専用HDMI コンバーター480p/720p/1080pに変換 3.5mmオーディオ GANAAmazon PS2やWiiなど、HD

    • テクノロジー
    • 2021/10/16 21:15
    • ディスプレイ
    • ゲーム
    • 液晶
    • ガジェット
    • 家電
    • あとで読む
    • game
    • PC
    • HDMI
    • display
    • はてなブログで jQuery プラグインを使うなら jsDelivr から読み込もう - MoonNote

      3 users

      moonnote.hateblo.jp

      はてなブログで jQuery プラグインを使うとなると、ファイルをどこに置くか?という問題に直面します。外部ファイルの呼び出し(ファイル置き場として利用すること)を許可しているサーバーは少ないですし、Dropbox や Github を使うのもなんだかなあという感じ。そんな時は jsDelivr から読み込むのがおすすめです。 jsDelivr jsDelivr の使い方 実際に使ってみた jsDelivr https://www.jsdelivr.com/ jsDelivr は jQuery 本体など著名なライブラリをはじめ、個人が制作した jQuery プラグイン、CSS、Webフォントなど合計で1650種類以上ものライブラリを配信する CDN です。 CDN とはコンテンツ・デリバリー・ネットワーク(Contents Delivery Network)の略で、ウェブコンテンツを配信す

      • テクノロジー
      • 2016/01/27 13:01
      • はてなブログテーマ「Innocent」に「おすすめ記事リスト機能」を追加しました - MoonNote

        22 users

        moonnote.hateblo.jp

        はてなブログテーマ「Innocent」に「おすすめ記事リスト機能」を追加しました。ヘッダー下に数行の HTML を記述するだけで、よく読まれている記事をまとめブログ風のリスト形式で表示できます。詳細は続きを読むからご覧ください。 設置する手順 表示する記事はどうやって設定するの? デザイン PC(幅1280px~) PC(幅1279px以下) タブレット(1023px以下) タブレット(767px以下) スマートフォン(599px以下) カスタマイズ 幅いっぱいに表示 タイトル部分を一行で表示 まとめ 設置する手順 設置する手順はたったの1ステップ、以下の HTML を[ヘッダ]→[タイトル下]にコピペするだけです。 <div id="recommend-entries"> <div id="recommend-entries-inner"> <div class="hatena-modu

        • 世の中
        • 2016/01/22 16:58
        • はてなブログ
        • ブログ
        • あとで読む
        • 大多数のはてなブログテーマは「ライセンス違反」によりカスタマイズできない - MoonNote

          5 users

          moonnote.hateblo.jp

          はてなブログテーマの制作者は、テーマストアに制作したテーマを投稿する際に「ライセンス(利用規約)」を設定できます。設定できるライセンスは大きく分けて「カスタマイズ可」「カスタマイズ不可」「商用利用(アフィリエイト)不可」など様々ですが、今回は「カスタマイズ不可」のライセンスに焦点をあてて記事を書きたいと思います。 設定できるライセンス カスタマイズできないライセンス カスタマイズできないテーマの例 カスタマイズできるライセンス カスタマイズできるテーマの例 まとめ 設定できるライセンス テーマストアでテーマ制作者が設定できるライセンスは以下の通りです。テーマを利用するユーザーは設定されたライセンスを順守しなければいけません。また、制作者は一度投稿したら最後、設定したライセンスを変更することはできません。 CC = クリエイティブ・コモンズ マーク ライセンス名 備考 CC-BY(表示) C

          • 世の中
          • 2016/01/20 15:00
          • はてな
          • トップページの記事画像を CSS だけでアーカイブページ風のサムネイルに変更するカスタマイズ - MoonNote

            9 users

            moonnote.hateblo.jp

            はてなブログにはいわゆる概要表示(アイキャッチ画像と文章の一部を抜粋してリストで表示する)機能がありません。自分もそうですが、トップページの記事一覧をアーカイブページのようにすっきりと表示させたい!という方は結構多いのではないでしょうか。 JSで無理やりアーカイブページに転送するカスタマイズもあるみたいですが、一手間加えれば転送なし + CSS だけで実装できるので、今回はその方法を紹介したいと思います。 JS で実装するカスタマイズ CSS で実装するカスタマイズ 準備 CSS 完成イメージ 解説 まとめ JS で実装するカスタマイズ dokuwohaku.hateblo.jp JS で実装するカスタマイズの方法は上記の記事に掲載されています。オーナーの方もおっしゃっていますが、転送が原因で Google からの評価が下がる可能性があります。 CSS で実装するカスタマイズ 準備 まずは

            • テクノロジー
            • 2016/01/18 10:09
            • はてなブログテーマ「Innocent」のカスタマイズ(続きを読むボタン編) - MoonNote

              7 users

              moonnote.hateblo.jp

              続きを読むボタンのデザインを変更したいとのコメントを頂いたので、いくつかのサンプルを掲載したいと思います。掲載しているサンプルは全て Innocent 用になりますが、コードを一部修正すれば Blank やその他のはてなブログテーマでも使用可能です。 基本CSS サンプル 1. 背景色変更 2. 背景色・文字色変更 3. 背景色変更(グラデーション) 4. マウスオーバーで中抜き 5. マウスオーバーで中埋め 6. 影をつける 7. 影をつける(内側) 8. アイコンを表示 9. アイコンを表示・マウスオーバー時にアイコンをずらす 10. 文字列を変更 まとめ 基本CSS .entry-content .entry-see-more { background-color: #222; border-radius: 2px; box-sizing: border-box; color: rg

              • テクノロジー
              • 2016/01/15 18:15
              • カスタマイズ
              • はてなブログ
              • Innocent および Blank でパンくずリストの ”>” を正しい位置に表示する方法 - MoonNote

                10 users

                moonnote.hateblo.jp

                photo by riklomas Innocent と Blank で、id:bulldra 氏が制作したパンくずリスト(はてなブログでGoogleにパンくずリストを認識させるブログパーツ - 太陽がまぶしかったから)のカテゴリーとカテゴリーの間に挿入される > が全て最後のカテゴリーの後ろに表示されるという問題を修正するには、以下のコードをデザインCSS欄に追記して下さい。 .categories a{ display: inline-block; float: none; margin-right: 0; } 問題が起こる理由と、問題が起こる指定をしている理由は続きを読むに記載します。 問題が起こる理由 不具合が起こる指定をしている理由 半角スペースの幅 まとめ 問題が起こる理由 .categories a { display: block; float: left; } Innoc

                • 暮らし
                • 2016/01/10 01:45
                • はてなブログ
                • はてなブログの Amazon 商品紹介をちょっぴり改善するカスタマイズ - MoonNote

                  21 users

                  moonnote.hateblo.jp

                  はてなブログには、カエレバやヨメレバといった外部サービスを使わず、管理画面から直接記事に Amazon の商品を紹介できる機能「Amazon 商品紹介」があります。 非常に便利ですが、Amazon の商品ページへのリンクかどうか一目で分からないという弱点があり、このためにカエレバやヨメレバを使っている方もいるようです。この弱点を改善する CSS を紹介します。 CSS リンクの色を変更 アイコンを表示 適用後 CSS リンクの色を変更 .hatena-asin-detail a { color: #e47911; } .hatena-asin-detail a:hover { color: #ff9900; } Amazon 商品紹介に含まれるリンクの色を Amazon 風のオレンジに変更します。 アイコンを表示 .hatena-asin-detail { position: relati

                  • テクノロジー
                  • 2016/01/05 12:52
                  • はてなブログ
                  • カスタマイズ
                  • ブログ
                  • CSS
                  • Amazon
                  • はてな
                  • hatena
                  • あとで読む
                  • はてなブログの CSS 編集を Dropbox で高速化しよう - MoonNote

                    10 users

                    moonnote.hateblo.jp

                    ※Dropbox の Public フォルダが廃止になる 2017/03/15 以降、この方法は使えなくなります。 はてなブログのテーマ制作やデザインカスタマイズで CSS を編集する際、Dropbox の共有フォルダを使うとぐっと楽になります。 Dropbox の共有フォルダに CSS ファイルを保存/アップロードする CSS ファイルの公開リンクを取得してブログに読み込む 公開リンクの例 https://dl.dropboxusercontent.com/u/********/hatenablog/themes/Innocent/innocent.css 読み込み(ヘッダーに記述) ダッシュボードの[設定]→[詳細設定]→[head に要素を追加]から、link 要素でスタイルシートを追加します(2016/01/07 @import だと問題があることが判明したので、この形に修正)。

                    • テクノロジー
                    • 2015/12/31 12:11
                    • はてなブログ
                    • css
                    • はてなブログで「タイトル画像」を設定する時のテクニック - MoonNote

                      8 users

                      moonnote.hateblo.jp

                      はてなブログの「タイトル画像」機能はオプションが少なく、せっかく設定しても意図した通りの表示にならないケースが少なくありません。今回はそんなタイトル画像機能の不満を解消するテクニックを数点掲載します。 タイトル画像機能を使う場合 設定したタイトル画像はどのように表示されている? 左寄せにする 高さを変える タイトル画像機能を使わない場合 タイトル画像+概要 タイトル画像+タイトルテキスト+概要 jQuery で 文字列を img に置換する まとめ タイトル画像機能を使う場合 設定したタイトル画像はどのように表示されている? 設定後の HTML <body class="header-image-only"> <header id="blog-title"> <div id="blog-title-inner" style="background-image: url("画像のURL");

                      • テクノロジー
                      • 2015/12/27 20:33
                      • はてなブログ
                      • はてなブログテーマ「Innocent」のカスタマイズ(ナビゲーションバー編) - MoonNote

                        51 users

                        moonnote.hateblo.jp

                        はてなブログテーマ「Innocent」はナビゲーションバーを内蔵しています。面倒なCSSを記述することなく、簡単にナビゲーションバーを表示できます。 設置の手順 jQuery をフッターに記述する HTML をヘッダーに記述する デザイン スマートフォン・タブレット PC カスタマイズ 色の変更 中央寄せにする 設置の手順 jQuery をフッターに記述する <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> (function($) { $(".menu-toggle").on("click", function() { $(".main-navigation").toggleClass("toggled"); }); })(jQuery); </scrip

                        • テクノロジー
                        • 2015/12/25 10:23
                        • はてなブログ
                        • カスタマイズ
                        • HTML
                        • はてな
                        • あとで読む
                        • はてなブログテーマ「Innocent」を公開しました - MoonNote

                          44 users

                          moonnote.hateblo.jp

                          Blank をベースに更なる改良を加えたはてなブログテーマ「Innocent」をテーマストアにて公開しました。フォントの色やサイズ、余白を調整しよりレスポンシブに進化しました。デザインの詳細は続きを読むからご覧ください。 デザイン スマートフォン タブレット(小) タブレット(大) PC(幅1024px~) PC(幅1280px) ナビゲーションバーの設置 デザイン スマートフォン スマートフォン(幅360px~)閲覧時のデザインです。左右の余白はそれぞれ 20px で、コンテンツ部分にモバイルバナー大(320x100)サイズの広告を設置できます。 iPhone 6 や Nexus 6(幅375px~)ではコンテンツ部分の幅は 335px~ となり、レクタングル大(336x280)を設置できます。 ナビゲーションバーは展開式です。 タブレット(小) タブレット(幅540px~)閲覧時のデザ

                          • 暮らし
                          • 2015/12/20 12:01
                          • はてなブログ
                          • blog
                          • hatena
                          • ブログ
                          • あとで読む
                          • はてなブログテーマ「Blank」のカスタマイズ(レイアウト編) - MoonNote

                            4 users

                            moonnote.hateblo.jp

                            はてなブログテーマ「Blank」のカスタマイズ方法、レイアウト編です。サイドバーの幅を変更する方法や、ページ全体に背景画像を表示する方法について記載しています。参考になれば幸いです。 サイドバーの幅を変更する Blank のサイドバーは、広告を配置しやすくするために幅を固定しています。デフォルトの幅は、配信数が最も多いレクタングル(中)に配慮して 300px に設定しています。 @media screen and (min-width: 960px) { #wrapper { width: 100%; margin-right: -348px; padding-right: 348px; box-sizing: border-box; float: left; } #box2 { width: 300px; float: right; } } これがデフォルトの CSS です(ベンダープレ

                            • 学び
                            • 2015/12/16 16:26
                            • はてなブログ
                            • はてなブログで使えるアイコンフォント一覧 2015/12/06 版 - MoonNote

                              18 users

                              moonnote.hateblo.jp

                              はてなブログには標準で読み込まれるアイコンフォントがあり、クラス等を指定すれば誰でも使えることは以下の記事で以前から知っていたのですが、なんとなく CSS を見ていたら使えるアイコンの数が以前よりかなり増えていることが分かったのでメモしておきます。 bulldra.hatenablog.com 一覧 以前から使えていたもの 追加されていたもの 一応使い方を掲載 使い方 その1 使い方 その2 まとめ 一覧 以前から使えていたもの No クラス名 アイコン 000 blogicon-hatenablog 001 blogicon-plus 002 blogicon-minus 003 blogicon-reorder 004 blogicon-grid 005 blogicon-chevron-left 006 blogicon-chevron-right 007 blogicon-chev

                              • テクノロジー
                              • 2015/12/06 23:38
                              • アイコン
                              • はてなブログ
                              • ブログ
                              • あとで読む
                              • コピペで使える URL を書くだけでアイコンが表示される SNS フォローボタン5種 - MoonNote

                                13 users

                                moonnote.hateblo.jp

                                ブログの購読率向上のために、記事の下やサイドバーに表示する アイコン付き SNS フォローボタンの HTML って、こんな感じで書かれていることが多いと思います。 よくあるパターン1 <ul class="follow-me"> <li><a href="https://twitter.com/hogehoge"><i class="fa fa-twitter"></i></a><li> <li><a href="https://www.facebook.com/hogehoge"><i class="fa fa-facebook"></i></a></li> <li><a href="https:/plus.google.com/hogehoge"><i class="fa fa-google-plus"></i></a></li> </ul> <a> の中にアイコンフォントの表示タグを

                                • テクノロジー
                                • 2015/12/04 00:53
                                • ボタン
                                • ブログ
                                • css
                                • はてな
                                • デザイン
                                • はてなブログテーマ「Blank」の記事幅を変更する方法 - MoonNote

                                  4 users

                                  moonnote.hateblo.jp

                                  2、3日前から、「Blank 記事幅 変更」という検索キーワードでこのブログに訪れる訪問者が多いので、簡単に解説しようかと思い…ましたが、サイドバーを 300px に固定するために少々理解し難い CSS を書いているため、"即"使えるよく使いそうな幅のサンプルCSSを記載しておきます。 640px #blog-title-inner, #content-inner, #footer-inner, .breadcrumb { max-width: 640px; /* for Smartphone and Tablet */ } @media screen and (min-width: 960px) { #blog-title-inner, #content-inner, #footer-inner, .breadcrumb { max-width: 1037px; /* for PC */

                                  • 世の中
                                  • 2015/12/01 01:29
                                  • はてなブログテーマ「Blank」のカスタマイズ(フォント/色編) - MoonNote

                                    5 users

                                    moonnote.hateblo.jp

                                    はてなブログテーマ「Blank」のカスタマイズ方法、フォント/色編です。記事本文や見出しで使用されるフォントの変更や、リンクの色の変更について記載しています。参考になれば幸いです。 フォント フォントサイズを変更する body { font-size: 16px; } body の font-size を変更すると、ブログタイトル(#title)を除く全ての要素のフォントサイズが自動的に調整されます。推奨値は 14px から 17px の間です。 フォントを変更する /* 全般 */ body { font-family: "Open Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; } /* 見出し */ h1, h2, h3, h4, h5, h6 { font-family: "Open Sans","Hiragino kaku

                                    • 学び
                                    • 2015/08/20 04:41
                                    • あとで読む
                                    • はてなブログテーマ「Blank」のカスタマイズ(ヘッダー編) - MoonNote

                                      6 users

                                      moonnote.hateblo.jp

                                      はてなブログテーマ「Blank」のカスタマイズ方法、ヘッダー編です。背景色や背景画像を設定する方法について記載しています。参考になれば幸いです。 背景色を設定する ヘッダーに背景色を設定するには、[ダッシュボード(管理画面)]→[デザイン]→[カスタマイズタブ]→[背景色]メニューで使いたい色を選択します。 この時、選択する色によってはブログタイトルとブログ概要が見えにくくなってしまうことがあります。この問題は、カスタムCSSで #title(ブログタイトル)と #blog-description(ブログ概要)に明るめの色を指定することで改善できます(暗めの方が良い場合もあります)。 #title a { color: rgba(255,255,255,0.9); } #title a:hover { color: rgba(255,255,255,0.7); } #blog-descri

                                      • 世の中
                                      • 2015/07/11 07:33

                                      このページはまだ
                                      ブックマークされていません

                                      このページを最初にブックマークしてみませんか?

                                      『MoonNote』の新着エントリーを見る

                                      キーボードショートカット一覧

                                      j次のブックマーク

                                      k前のブックマーク

                                      lあとで読む

                                      eコメント一覧を開く

                                      oページを開く

                                      はてなブックマーク

                                      • 総合
                                      • 一般
                                      • 世の中
                                      • 政治と経済
                                      • 暮らし
                                      • 学び
                                      • テクノロジー
                                      • エンタメ
                                      • アニメとゲーム
                                      • おもしろ
                                      • アプリ・拡張機能
                                      • 開発ブログ
                                      • ヘルプ
                                      • お問い合わせ
                                      • ガイドライン
                                      • 利用規約
                                      • プライバシーポリシー
                                      • 利用者情報の外部送信について
                                      • ガイドライン
                                      • 利用規約
                                      • プライバシーポリシー
                                      • 利用者情報の外部送信について

                                      公式Twitter

                                      • 公式アカウント
                                      • ホットエントリー

                                      はてなのサービス

                                      • はてなブログ
                                      • はてなブログPro
                                      • 人力検索はてな
                                      • はてなブログ タグ
                                      • はてなニュース
                                      • ソレドコ
                                      • App Storeからダウンロード
                                      • Google Playで手に入れよう
                                      Copyright © 2005-2025 Hatena. All Rights Reserved.
                                      設定を変更しましたx