MoonNote

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

ブログカスタマイズ

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

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

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

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

トップページの記事画像を CSS だけでアーカイブページ風のサムネイルに変更するカスタマイズ

はてなブログにはいわゆる概要表示(アイキャッチ画像と文章の一部を抜粋してリストで表示する)機能がありません。自分もそうですが、トップページの記事一覧をアーカイブページのようにすっきりと表示させたい!という方は結構多いのではないでしょうか。 …

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

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

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

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

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

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

はてなブログの Amazon 商品紹介をちょっぴり改善するカスタマイズ

はてなブログには、カエレバやヨメレバといった外部サービスを使わず、管理画面から直接記事に Amazon の商品を紹介できる機能「Amazon 商品紹介」があります。 非常に便利ですが、Amazon の商品ページへのリンクかどうか一目で分からないという弱点があり、…

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

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

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

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

はてなブログで jQuery プラグインを使うなら jsDelivr から読み込もう

はてなブログで jQuery プラグインを使うとなると、ファイルをどこに置くか?という問題に直面します。外部ファイルの呼び出し(ファイル置き場として利用すること)を許可しているサーバーは少ないですし、Dropbox や Github を使うのもなんだかなあという…

はてなブログで使えるアイコンフォント一覧 2015/12/06 版

はてなブログには標準で読み込まれるアイコンフォントがあり、クラス等を指定すれば誰でも使えることは以下の記事で以前から知っていたのですが、なんとなく CSS を見ていたら使えるアイコンの数が以前よりかなり増えていることが分かったのでメモしておきま…

はてなブログで「タイトル画像」を設定する時のテクニック

はてなブログの「タイトル画像」機能はオプションが少なく、せっかく設定しても意図した通りの表示にならないケースが少なくありません。今回はそんなタイトル画像機能の不満を解消するテクニックを数点掲載します。

コピペで使える URL を書くだけでアイコンが表示される SNS フォローボタン5種

ブログの購読率向上のために、記事の下やサイドバーに表示する アイコン付き 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></li></li></li></ul>

はてなブログで記事の画像を開いたときの見た目をカスタマイズする

画像1 画像2 はてなブログでは、記事に貼り付けられたはてなフォトライフの画像はクリックすると画像2のように lightbox 風に開かるけども、lightbox 風に画像を開くならその背景(オーバーレイ)色は白より黒の方がより画像が映える気がするので、例によっ…

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

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

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

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

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

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

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

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

はてなブログで「Highlight.js」を使う

はてなブログに標準で実装されているシンタックス・ハイライト(ソースコードの色分け機能)のビビットな配色を、ブログの雰囲気に合わせてもっと落ち着いた色に変えたくなったんだけど…。 色を変えるには、要素をくくる class 付きの span の color を変更…