MoonNote

はてなブログテーマ / CSS / jQuery

はてなブログテーマ

はてなブログテーマ「Who」を公開しました

ブログ本来の目的である読む・書くにフォーカスしたクラシック過ぎないクラシックなテーマ「Who」をはてなブログテーマストアで公開しました。

はてなブログテーマ「Noir」を公開しました

背景画像をヘッダーとして活用するダークな雰囲気のテーマ「Noir」をはてなブログテーマストアに公開しました。

はてなブログテーマ「Innocent」に「おすすめ記事リスト機能」を追加しました

はてなブログテーマ「Innocent」に「おすすめ記事リスト機能」を追加しました。ヘッダー下に数行の HTML を記述するだけで、よく読まれている記事をまとめブログ風のリスト形式で表示できます。詳細は続きを読むからご覧ください。

大多数のはてなブログテーマは「ライセンス違反」によりカスタマイズできない

はてなブログテーマの制作者は、テーマストアに制作したテーマを投稿する際に「ライセンス(利用規約)」を設定できます。設定できるライセンスは大きく分けて「カスタマイズ可」「カスタマイズ不可」「商用利用(アフィリエイト)不可」など様々ですが、今…

はてなブログテーマ「Innocent」のカスタマイズ(続きを読むボタン編)

続きを読むボタンのデザインを変更したいとのコメントを頂いたので、いくつかのサンプルを掲載したいと思います。掲載しているサンプルは全て Innocent 用になりますが、コードを一部修正すれば Blank やその他のはてなブログテーマでも使用可能です。

有償カスタマイズ・テーマ制作についての意見を募集します

先日、とあるはてなブログユーザーの方から「有償でブログをカスタマイズして頂けないでしょうか?」との依頼を頂きました。 特に明記していないにも関わらずそのような依頼を頂いたということは、自分を高く評価して頂いたということで大変嬉しく思います。…

Innocent および Blank でパンくずリストの ”>” を正しい位置に表示する方法

photo by riklomas Innocent と Blank で、id:bulldra 氏が制作したパンくずリスト(はてなブログでGoogleにパンくずリストを認識させるブログパーツ - 太陽がまぶしかったから)のカテゴリーとカテゴリーの間に挿入される > が全て最後のカテゴリーの後ろに…

はてなブログの CSS 編集を Dropbox で高速化しよう

※Dropbox の Public フォルダが廃止になる 2017/03/15 以降、この方法は使えなくなります。 はてなブログのテーマ制作やデザインカスタマイズで CSS を編集する際、Dropbox の共有フォルダを使うとぐっと楽になります。 Dropbox の共有フォルダに CSS ファイ…

はてなブログテーマ「Innocent」のカスタマイズ(ナビゲーションバー編)

はてなブログテーマ「Innocent」はナビゲーションバーを内蔵しています。面倒なCSSを記述することなく、簡単にナビゲーションバーを表示できます。

はてなブログテーマ「Innocent」を公開しました

Blank をベースに更なる改良を加えたはてなブログテーマ「Innocent」をテーマストアにて公開しました。フォントの色やサイズ、余白を調整しよりレスポンシブに進化しました。デザインの詳細は続きを読むからご覧ください。

はてなブログのグローバルヘッダーの高さは User Agent で変わる

はてなブログのグローバルヘッダーの高さは、User Agent に Mobile が含まれている時(スマホ閲覧時)とそうでない時(タブレットあるいはPC閲覧時)でそれぞれ 44px と 37px に変わるので、スマホでもそれ以外でも常に画面上部に固定する場合はめり込みを防…

はてなブログテーマ「Blank」の記事幅を変更する方法

2、3日前から、「Blank 記事幅 変更」という検索キーワードでこのブログに訪れる訪問者が多いので、簡単に解説しようかと思い…ましたが、サイドバーを 300px に固定するために少々理解し難い CSS を書いているため、"即"使えるよく使いそうな幅のサンプルCSS…

「Blank」のダウンロード数の伸びと利用者ブログの紹介

4月13日に公開した「Blank」のダウンロード数がさる6月21日に1000を越えました。およそ二ヶ月かかっての大台越えですが、達成してから一週間後の6月28日、すなわち今日のダウンロード数は230増えて1230となっています。伸びが凄い…。ありがたいことです。 記…

はてなブログのヘッダーについてはてなから回答がきた

新しいテーマを制作するにあたって、はてなにある質問を問い合わせてみました。 はてなブログテーマ制作の手引きには、「ページ最上部に挿入されるヘッダーメニュー(#globalheader-container)の表示位置を変えたり非表示にしてはいけない」との記載があり…

はてなブログの .entry-footer は難しい

はてなブログのテーマを制作していて、「気が利かないなあ」と思うのが entry-footer 周りの仕様。 <footer class="entry-footer"> <p class="entry-footer-section"></p> <div class="hatena-star-container"></div> <div class="hatena-star-metadata"></div> <div class="social-buttons"></div> <div class="customized-footer"></div> </footer>

広告専用のサイドバーモジュールがあったら便利だなと思った

はてなブログでサイドバーに広告を配置する方法は「HTMLモジュール」に広告コードを追加するという他社のサービスでもよくある方法だけど、広告配置専用の「広告モジュール」があったらデザインの幅が広がるのになとテーマを作っていて思った。 さて、はてな…

はてなブログのHTML構造

「はてなブログテーマ制作の手引き」というページがはてなによって公開されているのですが、掲載されている内容は悪く言えば不親切、良く言えば必要最低限という量で、まあ要するに本気でテーマを制作しようとなると何度も開発者ツールを開いては閉じての繰…

はてなブログテーマ「Blank」のカスタマイズ(レイアウト編)

はてなブログテーマ「Blank」のカスタマイズ方法、レイアウト編です。サイドバーの幅を変更する方法や、ページ全体に背景画像を表示する方法について記載しています。参考になれば幸いです。

はてなブログテーマ「Blank」のカスタマイズ(ヘッダー編)

はてなブログテーマ「Blank」のカスタマイズ方法、ヘッダー編です。背景色や背景画像を設定する方法について記載しています。参考になれば幸いです。

はてなブログテーマ「Blank」のカスタマイズ(フォント/色編)

はてなブログテーマ「Blank」のカスタマイズ方法、フォント/色編です。記事本文や見出しで使用されるフォントの変更や、リンクの色の変更について記載しています。参考になれば幸いです。

はてなブログテーマ「Blank」が人気のテーマ1位に

Blank - テーマ ストア - はてなブログ 公開からおよそ2週間、自分用に制作したはてなブログ用のテーマ「Blank」が「人気のテーマ」ランキングで1位になりました。 1週間目あたりで一度3位には食い込みましたが、流石にずぶの素人のテーマが1位になるとは予…

はてなブログテーマ「Blank」

Blank - テーマ ストア - はてなブログ ブログのテーマを Fresh Green から Blank に変更しました。完全に一から制作したはてなブログ用のオリジナルテーマ(処女作)です。 「もうブログのデザインは弄りません」宣言をしておきながら、テーマを一から制作…

はてなブログでレスポンシブデザイン

[管理画面]ー[スマートフォン]最下部にある[レスポンシブデザイン]にチェックを入れても、愛用中のタブレット Nexus7 で 2カラムのまま表示されているので何で?と思ったら、どうやらそこをチェックする以外にカスタム CSS 欄に以下の文字列を書き加え…