はてなブログテーマ「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

はてなブログでは、ユーザーの皆様により安全にご利用いただくため、それぞれのブログをHTTPSで配信できる機能のリリースを予定しています。お問合わせも多数いただいておりますが、実施のめどが立ったことから、対応内容とスケジュールをお知らせいたします。 対応内容とスケジュール 第一段階：はてなブログのダッシュボード・管理画面をHTTPS化します 第二段階：はてなが提供するドメインのブログをHTTPSで配信できるようにします 第三段階：独自ドメインのHTTPS化に対応します 混在コンテンツ（Mixed Content）について 編集サイドバーなどはてなブログの機能における対応について ブログ全体のHTTPS化について より安全に「はてなブログ」をご利用いただくため 新たなWeb技術に対応するため 付記・Webブラウザによる警告について 追記・対応状況について [2017/11/7] はてなブログ6

はてなブログを書いている方で問い合わせを受け付ける場合にメールアドレスをそのままサイトに記載するには抵抗がある場合がある。 アドレスを公開することなくブログを見てくれた人からの意見や指摘などを受け付けたい。 そんな方にはお問い合わせフォームを設置することがおススメ。 はじめにどのようなフォームとなるかイメージを紹介しておきます。 【はてなブログでの問い合わせフォームの入り口】 【お問い合わせフォーム】 ※問い合わせで入力された内容は指定のアドレスに転送する設定も可能。 作成方法を以下にまとめる。 目次 １．Google フォームで問い合わせフォームを作成 ２．まとめブログの設定 ３．問い合わせ内容の参照 ４．問い合わせ内容を指定したアドレスに転送 １．Google フォームで問い合わせフォームを作成 1-1.Googleから「Googleアプリ」を選択 ※ブラウザはChromeを推奨。In

こんにちは、ずーむです。                      　　　　【更新】2019年1月20日 今回は、はてなブログにお問い合わせフォームを設置したので、手順をご紹介します。 お問い合わせフォームなんて、今まで必要性を感じていませんでした。しかし、2016年の年の瀬も押し迫ったころ、マイレージブログ業界にポイントサイトとのコラボ企画がいくつも出てきました。また、「マイルで100の世界遺産」のトートさんが、ANA公式サイトでインタビューを受けて、公認陸マイラー？！に、なっておられましたよね？ ※2017年3月14日、私もANA公認陸マイラーとなりました。 それもこれも、ブログの管理人に連絡が取れるからこそです。 というワケで、全くそんなあてはありませんが、もしものときの万が一のために、私が行ったお問い合わせフォームの設置方法を解説いたします。 スポンサーリンク お問い合わせフォーム

コピペコードをうつす前に、必ず以前のコードをメモ帳にバックアップしておくなどの対策をしておくようにしてください。 シェアボタンを設置する上で、何らかのトラブルや損失・損害等につきましては一切責任を問わないものとします(一応)。 2015/11/21追記：11/20より、ツイッターのシェア数の取得ができなくなりました。(参考：持続的なプラットフォームのための難しい決断)これにより、ツイッターのシェア数の部分を「Twitter」と表示するように変更しました。 2016/1/11追記２：当ブログのシェアボタンを使っているかたのみ、Twitterのシェア数を表示させるようにする記事を書きました。詳しくは「count.jsoonを使って当ブログのシェアボタンを使っている方のTwitterカウント数を取得する方法 - Yukihy Life」をごらんください。 2016/5/18追記３：Faceboo

こんにちは、えむしです。 今回はページトップに戻るボタンを設置する方法をご紹介します。 素人なもので、何か間違いなど有りましたらコメント欄にてご指摘お願いします…。 nohack-nolife.hatenablog.com こちらを参考にさせていただきました。 以下はカスタマイズの記事まとめです。 http://blog.mshimfujin.net/archive/category/web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3blog.mshimfujin.net 完成図 まずはfontawesomeを呼び出します。 フッタのhtml記述エリアにコピー 最後はデザインCSS 追記 完成図 カーソルが重なる前 カーソルが重なった後 ちょっと大きい画像になってますが、こんなボタンが右下に設置されます。 まずはfontawesomeを呼び出します。 まずはfo

※この記事は2015年7月時点でのカスタマイズについて書いていますので、現在のデザインとは異なる点もあります。ご了承ください。 今回は、これまでに私が当ブログに対して行った「はてなブログをおしゃれにするカスタマイズ」をまとめてみました。ミニマルデザイン・シンプルデザイン・レスポンシブデザインに使える、簡単なカスタマイズばかりです。すべてレスポンシブデザイン対応なので、よろしければお試しください。 ちなみに使用しているテンプレートは「Blank」。シンプルで使いやすいテーマですが、カスタマイズのし過ぎでそろそろ原型がなくなってきました。 1、はてなブログのフォントを変更 ブログをおしゃれにしたいと思い、まず変更したのがフォント。 コンテンツの内容にもよりますが、デザイン優先のときははてなブログのデフォルトより、やや細めのフォントを使う方が良いように思います。本文はゴシックにし、記事タイトルだ

上記は、私のカスタマイズ環境です。 今回のコードは他の環境でも導入可能だと思います。また、はてなブログProでない方でも、レスポンシブにすればスマホでも利用することができます。 スマホ画面の「複合メニューバー」 「ページトップへ戻る」ボタンを導入する それでは、私が行った「ページトップへ戻る」ボタンの導入手順を順番に整理してみます。 （１）「HTMLとJavaScript」のコードを貼る はじめに「ページトップへ戻る」ボタンの「HTMLとJavaScript」のコードを貼ります。 〈貼り付けるコード〉 <!-- 「ページトップへ戻る」ボタン --> <div id="page-top-area"> <a id="page-top-button"><i class="fa fa-chevron-up"></i></a> </div> <script> (function($) { $(fun

みんな大好きFont Awesome！ ※2018/05/04追記 この記事はFont Awesome4の導入記事です。 最新のFont Awesome5の導入記事はこちら moghouse.hatenablog.com Font Awesomeって何なのさ？ 様々な用途で便利に使えるWebアイコンフォント。 フォントなのでサイズや色の変更をCSSで好きなように出来て便利。 600種類以上のアイコンが揃っているので、わざわざ自分で用意する必要が無い。 じゃあもう使うしかないでしょ。 はてなブログにもWebアイコンフォント無かったっけ？ 確かにある。 ただ、現状80種類くらいしかないし、あんまり汎用性のあるアイコンが無い。 とはいえ基本的なアイコンは一通り揃っているので、 こっちで十分という人もいるかもしれない。 使い方はこちらのサイトに詳しく書いてある。 shirokai.hatenabl

Webで見るデジタル色彩見本として 配色の見本帳は無料のインターネットツールです。各色のページでは、Webカラー（RGBカラー）をベースとした色の系統（色相）と色の鮮やかさ（彩度）・明暗の度合い（明度）を数値で表しています。各種カラーモードでの色数値を掲載しています。DTPでチラシや看板を作るとき、ホームページといったWEBサイト作成、パワーポイントでの資料作成など、各種デザインでのカラーマネージメントに便利なカラーコードが一目でわかるWebで見るデジタル色見本です。 色を扱うときに頻繁にぶち当たるのが配色ですが、色の法則に沿った色の組み合わせがテンプレートとなり色彩設計の手助けをしてくれます。 色検索で見つかる新配色 ベースとなる色、キーカラーを選ぶとそこからおすすめな相性の良い色をマッチングしてくれるのが当サイトの色検索です。メインに使う色が決まっているとき求める配色がすぐに見つけられ

このテーマのアクセントカラーは、「赤」ですが、簡単に変更可能です。 1. ダッシュボードから「デザイン」を選択 2. レンチアイコンの「カスタマイズ」を選択 3. 「デザインCSS」を選択 下記のCSSをコピーします。 #blog-title, .entry-see-more, .entry-content h2 { background-color: #008fde; /* base color */ } .entry-content h3, .entry-content h4, .page-archive .archive-entries .entry-title { border-color: #008fde; /* base color */ } .entry-content h2:after { border-top-color: #008fde; /* base color *

はてなブログでは、スマートフォン用のデザイン設定に「アクセントカラー」設定を追加しました。デフォルトのスマートフォン表示で、ヘッダのロゴ色やリンク色を、15種類から選んで変更することができます。 アクセントカラーをいろいろに変更した表示例 アクセントカラーの設定方法 以下の手順で、スマートフォン用の「アクセントカラー」を設定することができます。 デザイン設定画面で「スマートフォン」タブを選択します 「アクセントカラー」を選択します 15種類からお好きな色を選択してください 変更内容は右のプレビュー欄で確認できます 「変更を保存する」をクリックすると、選択した色が反映されます ※注意事項 上記の設定で変更されるのはスマートフォンの画面です。PCのデザインテーマには影響ありません スマートフォン表示でも、広告のリンク色は変更できません スマートフォンのデザイン設定で「レスポンシブデザイン」を選

SANS189 📢 Situs Login Sans189 Penyedia Gaming Terlengkap 💰 JAMIN MEMBAYAR SEMUA KEMENANGAN !!!

※記事更新から1年以上が経っているため情報が古い可能性があります 当ブログ「ひつじの雑記帳」は5月1日で運営1ヵ月目を迎えました。お陰様で5記事しか書いてないにも関わらず1ヵ月目で4万PVを達成することができました。 投稿する記事の質は当然意識してきましたが 、短期間でここまで成長できたのはブログデザインの影響も少なからずあるかなと感じています。 そこで今回は、当ブログ「ひつじの雑記帳 」で実践しているカスタマイズ・コード全てを紹介していこうと思います。 当初はこのブログのスマホデザインのカスタマイズコード全てをひとつのパックとして5000円で販売しようと思っていたんですが、いろいろと気が変わったので全て無料で公開することにしました。 デザイン完成図 使う色を落ち着いた色に統一したフラット風のデザインに仕上げています。おすすめ記事を宣伝するスペースもいくつか設けているので直帰率の改善にも貢

カスタマイズ性を重視したシンプルな2カラムテーマです。レスポンシブデザインに対応しています。 サイドバーの幅は、レクタングル（中）の広告が綺麗に収まる 300px です。 CSS の指定を変更すれば、レクタングル（大）に合わせた 336px にも変更できます（詳しくはカスタマイズの項を参照してください）。 2016/07/26 Thanks for 10000 downloads!

十六進の色コード#868787シアン色の色合いです。光の三原色RGBにおいて色モデル#868787は52.55％の赤色、52.94％の绿色、52.94％の青色でできている。HSLで色彩空間#868787は180°度の色調、0％の彩度、53％の明るさを有している。この色は約491.41nmの波長である。 色のバリエーション反転 #79787825％飽和度 #868787濃淡階調 #87878725％明るく #a8a8a8オリジナル #86878725％暗く #6b6c6cウェブセーフ： gray #80808025％不飽和度 #868787HTML: gray #808080名前付き色密接関係鼠色 #868686バトルシップグレイ #898989ねずみいろJIS #8a8c8eモスグレイ #7e837fグレイ #7d7d7d中間関係わかたけいろJIS #65c294オパールグレイ #bfbe

十六進の色コード#bcbdbdシアン色の明るさの中間の色合いです。光の三原色RGBにおいて色モデル#bcbdbdは73.73％の赤色、74.12％の绿色、74.12％の青色でできている。HSLで色彩空間#bcbdbdは180°度の色調、1％の彩度、74％の明るさを有している。この色は約491.41nmの波長である。 色のバリエーション反転 #43424225％飽和度 #bcbdbd濃淡階調 #bdbdbd25％明るく #ecececオリジナル #bcbdbd25％暗く #969797ウェブセーフ： silver #c0c0c025％不飽和度 #bcbdbdHTML: silver #c0c0c0名前付き色密接関係パールグレイJIS／パールグレー #bdbdb7マーブルグレイ #c0c5c2オパールグレイ #bfbec5スカイグレイJIS／スカイグレー #bfc5caうすにびいろ／うすにぶい

十六進の色コードでdeeppink色#ff1493マゼンタピンク色の色合いです。光の三原色RGBにおいて色モデル#ff1493は100.0％の赤色、7.84％の绿色、57.65％の青色でできている。HSLで色彩空間#ff1493は328°度の色調、100％の彩度、54％の明るさを有している。この色は約498.8nmの波長である。 色のバリエーション反転 #00eb6c25％飽和度 #ff0095濃淡階調 #8a8a8a25％明るく #ee69b1オリジナル #ff149325％暗く #c61675ウェブセーフ： fuchsia #ff00ff / #f0f25％不飽和度 #e82b91HTML: deeppink #ff1493名前付き色密接関係アザレアピンク #ff3399 / #f39ブーゲンビリア #e62f8bこうししょく／ソルフェリノ／マゼンタJIS／マジェンタ #ec008cマ