※この記事は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

どうも、だいち（@spountant）です。 はてなブログに限った話ではないが、ブログをカスタマイズすると、何がいいのか。 実際にいじくりまわしてみて、良いことは３つあることに気が付いた。 ブログの滞在時間が長くなり、Google先生からの評価がよくなる。 愛着がわいてブログを更新しよう（というより、ブログを育てていこうという感覚に近い）という気になる。良いこと尽くめだ。 だが、プログラミングとかまったく知らないWeb初心者のぼくにとって、ブログのカスタマイズというのはなかなか至難の業だった。 そこで、はてなブログをカスタマイズしていく上で、簡単コピペで実装できて、本当に参考になった記事を一挙に公開していく。 最初にはてなブログでHTML・CSSをいじるときの注意点 はてなブログでのカスタマイズの方法は、「デザイン」→「PC」・「スマホ」をいじる感じ。それぞれ下に「ヘッダ」とか「記事」とか

どうも、だいち（@spountant）です。 はてなブログに限った話ではないが、ブログをカスタマイズすると、何がいいのか。 実際にいじくりまわしてみて、良いことは３つあることに気が付いた。 ブログの滞在時間が長くなり、Google先生からの評価がよくなる。 愛着がわいてブログを更新しよう（というより、ブログを育てていこうという感覚に近い）という気になる。良いこと尽くめだ。 だが、プログラミングとかまったく知らないWeb初心者のぼくにとって、ブログのカスタマイズというのはなかなか至難の業だった。 そこで、はてなブログをカスタマイズしていく上で、簡単コピペで実装できて、本当に参考になった記事を一挙に公開していく。 最初にはてなブログでHTML・CSSをいじるときの注意点 はてなブログでのカスタマイズの方法は、「デザイン」→「PC」・「スマホ」をいじる感じ。それぞれ下に「ヘッダ」とか「記事」とか

みんな大好き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のデザインテーマには影響ありません スマートフォン表示でも、広告のリンク色は変更できません スマートフォンのデザイン設定で「レスポンシブデザイン」を選

どうも、だいち（@spountant）です。 はてなブログに限った話ではないが、ブログをカスタマイズすると、何がいいのか。 実際にいじくりまわしてみて、良いことは３つあることに気が付いた。 ブログの滞在時間が長くなり、Google先生からの評価がよくなる。 愛着がわいてブログを更新しよう（というより、ブログを育てていこうという感覚に近い）という気になる。良いこと尽くめだ。 だが、プログラミングとかまったく知らないWeb初心者のぼくにとって、ブログのカスタマイズというのはなかなか至難の業だった。 そこで、はてなブログをカスタマイズしていく上で、簡単コピペで実装できて、本当に参考になった記事を一挙に公開していく。 最初にはてなブログでHTML・CSSをいじるときの注意点 はてなブログでのカスタマイズの方法は、「デザイン」→「PC」・「スマホ」をいじる感じ。それぞれ下に「ヘッダ」とか「記事」とか

※記事更新から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％の赤色、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マゼン

十六進の色コード#b90059ピンク色の暗さの中間の色合いです。光の三原色RGBにおいて色モデル#b90059は72.55％の赤色、0％の绿色、34.9％の青色でできている。HSLで色彩空間#b90059は331°度の色調、100％の彩度、36％の明るさを有している。この色は約496.18nmの波長である。 色のバリエーション反転 #46ffa625％飽和度 #d00058濃淡階調 #5d5d5d25％明るく #d01770オリジナル #b9005925％暗く #850f48ウェブセーフ： purple #80008025％不飽和度 #a7125aHTML: mediumvioletred #c71585名前付き色密接関係ストロベリー #bb1e5eルビー #c70067ルビーレッド #b91e68コチニールレッド #af3168フクシャ・フクシア／フューシャ #cc1669中間関係セルリ

十六進の色コード#f2f3f4シアン青色のとても明るい色合いです。光の三原色RGBにおいて色モデル#f2f3f4は94.9％の赤色、95.29％の绿色、95.69％の青色でできている。HSLで色彩空間#f2f3f4は210°度の色調、8％の彩度、95％の明るさを有している。この色は約481.12nmの波長である。 色のバリエーション反転 #0d0c0b25％飽和度 #f2f3f4濃淡階調 #f3f3f325％明るく #ffffff / #fffオリジナル #f2f3f425％暗く #bec2c6ウェブセーフ： white #ffffff / #fff25％不飽和度 #f2f3f4HTML: whitesmoke #f5f5f5名前付き色密接関係白／ホワイト／スノーホワイト #f1f1f1しろJIS #f0f0f0シルバーホワイト #efefefパールホワイト #f7f6f5ラベンダーアイス

十六進の色コード#f70078ピンク色の色合いです。光の三原色RGBにおいて色モデル#f70078は96.86％の赤色、0％の绿色、47.06％の青色でできている。HSLで色彩空間#f70078は331°度の色調、100％の彩度、48％の明るさを有している。この色は約496.07nmの波長である。 色のバリエーション反転 #08ff8725％飽和度 #ff0077 / #f07濃淡階調 #7c7c7c25％明るく #eb4a98オリジナル #f7007825％暗く #b21461ウェブセーフ： red #ff0000 / #f0025％不飽和度 #de1979HTML: deeppink #ff1493名前付き色密接関係アザレ #d83473ローズ #d94177マゼンタ #e4007fブーゲンビリア #e62f8bこうししょく／ソルフェリノ／マゼンタJIS／マジェンタ #ec008c中間

十六進の色コードでマゼンタ色#e4007fマゼンタピンク色の色合いです。光の三原色RGBにおいて色モデル#e4007fは89.41％の赤色、0％の绿色、49.8％の青色でできている。HSLで色彩空間#e4007fは327°度の色調、100％の彩度、45％の明るさを有している。この色は約498.32nmの波長である。 色のバリエーション反転 #1bff8025％飽和度 #ff0082濃淡階調 #72727225％明るく #e93499オリジナル #e4007f25％暗く #a41264ウェブセーフ： fuchsia #ff00ff / #f0f25％不飽和度 #cd177cHTML: deeppink #ff1493名前付き色密接関係こうししょく／ソルフェリノ／マゼンタJIS／マジェンタ #ec008cブーゲンビリア #e62f8bアザレ #d83473アザレア #cd4187フクシャ・フク

こんにちわシャモです！ 最近、読まれていない過去記事がSEOの足を引っ張っているという情報を聞きました。 （SEOとは、ネット検索の上位に表示してもらう手法のようなものです） 私の場合ほとんどの記事読まれてないやろ！！ってなりそうですけど、今後のためにもまとめておきたいと思います！ 低品質な過去記事がSEOの足を引っ張っている ドメインパワー ブログを始めたばかりの人 過去記事を修正、削除するべき人 シャモさんの大掃除 過去記事を修正 過去記事を削除 まとめ 低品質な過去記事がSEOの足を引っ張っている 今回はこちらの記事を参考にさせていただきました！ fwww7.com 私がブログを始めたばかりの頃は、目次などの機能を全く理解していませんでした。 更に、文字のサイズを無駄に大小させるなどとても読み辛い記事だったと思います。 もろに低品質な記事ってやつですね・・。 この低品質な過去記事がS