はてなブログでは、CSSを編集してオリジナルテーマを作ることができます。作成したテーマは、テーマストアに投稿して、ほかのはてなブログユーザーに使ってもらうこともできます。 既存のデザインテーマをブログにインストールしたい場合はヘルプ「デザインテーマをインストールする」を参照してください。 本ドキュメントでは、Webデザイナーの方がはてなブログ用オリジナルテーマを作成するために必要な情報をまとめています。 オリジナルテーマの作成は、CSSの知識がある方を対象にしています。 テーマを作成する準備 1. テーマ確認用のブログを開設する 2. サンプルエントリーをコピー サンプルテーマ「Boilerplate」 Boilerplateテーマの使い方 レスポンシブデザインのテーマを作成する レスポンシブデザインを有効にする 付録: はてなブログのレスポンシブデザインテーマの挙動 はてなブログのページ

はてなブログを始めてから、色々なブログを見て思ったこと。 『書いている記事が面白いけど、ブログがカスタマイズされてないから読みづらい』。 せっかくいいこと書いてるのに、それ以上読む気にならなくなってしまうのは悲しい。 今回は、ブログカスタマイズのための記事をまとめました。 ・誰かの目止まるようなブログが作れる。 ・自分のブログ運営が楽しくなる。 上記2点のためにカスタマイズ。 多くのはてなブログのカスタマイズ記事を参考にしましたが、知りたい情報がない場合もあったので、私が個人的に設定したカスタマイズ記事もあります。私の記事に関して不具合や助言があれば教えてください。 【1/26 追記しました。】 はじめに ブログのデザインのために参考にした記事 当ブログのデザインカスタマイズ サイドバーのプロフィール設定 topへ戻る blank の日付を設定する。 続きを読むボタンの位置の設定 複数のサ

こんにちは、ぽいふるです。 はてなブログ２ヶ月目に入りましたー。（パチパチパチ） おかげさまで注目のブログでも紹介していただき、アクセスも一気に伸びました。（うれぴー）２ヵ月目もしっかり書いていこうと思いますので、よろしくお願いします！ というわけで、徐々に読んでくださる方も増えてきたので、そろそろブログのデザインをカスタマイズして、もっと読みやすいブログを目指していこうと思います。デザインじゃなくて記事の内容の問題 はてなブログのカスタマイズってやり方全然わからなかったんですけど、愛読させていただいている方々のブログで、非常に参考になる記事が多数紹介されてましたので、それを元にカスタマイズしてみました。 コピペだけでカスタムできるなんて、マジで便利。ブログツールなどご紹介くださっているはてなブロガーの皆様、ありがとうございます。感謝。 実際にやってみて気に入ったカスタマイズ では、ぼくが

ブログ書いているよりも、ブログカスタマイズをしている方が楽しいゆきひーです。 今までいろいろと小出しに記事にしていましたが、デザインCSSに書かれていることの中で、どのテーマでも共通で使える（かもしれない）ものをまとめて書きました。 他の記事で補完できる部分 【PC版】 フォント トップ画面でのフッターを消去 画像をセンタリングして線でくくる サイドバーのタイトルに青い下線を入れる タイトル付近の色を変える 見出しと記事タイトル リンク色の変更 「続きを読む」の文字を横に広くする 【PC１カラム版】 サイドバーのカスタムHTMLのモジュールを消去 下に回り込んだサイドバーを２分割に 【スマホ版】 全体的な文字を小さく 余白や文字の大きさの調整 ２分割サイドバーを解除 まとめ 他の記事で補完できる部分 全て書いていくと長くなってしまうので、他の記事で補完できるところはそちらを見ていただければ

最近、カスタマイズばかりしているゆきひーです。見よう見まねで一通りやっています。デザインとかかなり難しそうだなと思っていたのですが、最初の数個を理解すると意外と応用範囲が広いことに驚いています。 僕がブログを始めたときに困ったのが、見出しをカスタマイズしたいのに全くできないというものでした。「見出し　おしゃれ」とかって検索すると本当に豪華なオシャレなのが出てくるんですよね…。ちょっと線入れたいだけなのに！みたいな。 なので、非常に簡単なものばかりですが、ある意味無機質な見出しコードを10個下に書いていきます。無機質なのでかぶってもOKっす。 基本的にコピペでOKなので活用してみてください！ コードを貼る場所 PC スマホ どの見出しを変える？ 下線 点線下線 上下線 よくあるや〜つ 左だけと背景 四角 角を丸める 影 ぼやかし LIGっぽいかんじ もう少しカスタマイズ 色 文字のサイズ 文

こんにちは、こみそです。 記事もいい感じに溜まってきたので、この土日にコソコソとブログデザインのカスタマイズをしてました(´▽｀)ﾜｵｯ 一気にダラダラ書くと・・・うん、疲れるな(´c_,｀lll) ですので、小出しで載せてきますm(_ _)m 本日は、 【記事の幅や背景色の変更】 では、順番通りいきまーっす！ヾ(*´∀｀*)ﾉ １．背景色の変更 変更内容 白　→　グレー（#f3f3f3）に変更しました。 やり方 ダッシュボード＞デザイン＞カスタマイズ＞デザインCSS　を開いて、以下をコピペ。 /* 背景画像のカスタマイズ */ body { background-color:#f3f3f3; } なんて簡単(´▽｀) ２．記事本文とサイドバーの幅変更 変更内容 記事本文とサイドバー合わせて960pxしかなかったので、合わせて1073px（記事728px、サイドバー320px）になるように

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

以前、はてなブログのスマホデザインのカスタマイズ方法について書いた。 はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 - Literally 多くの方に参考にして頂いたようでとても嬉しい。続編を書いて欲しいというご要望をいくつか頂いたので、僭越ながらまたデザインカスタマイズのTipsを書こう思う。前回はスマホデザインについてのみ触れたが、今回はPC表示のカスタマイズについて。主にコピペだけで「超カンタン」におしゃれなブログが作れるので、Webデザイン初心者の方にも是非読んでいただきたい。 はてなブログユーザーでないのにこのページに辿り着いてしまった方、大変申し訳ありません… はてなブログテーマ「DUDE」を作りました。 「はてなブログを一瞬でおしゃれに美しくする最強のデザインカスタマイズ方法」と仰々しいタイトルを先に決め、ブログのカスタマイズ記事を書き出し