MoonNote

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

メイプルストーリーのWeb小説「初心者物語」を探しています

メイプルストーリーの思い出・初心者物語 Web Archive より 「初心者物語」という作品を皆さんはご存知でしょうか。 内容は知らなくても、ビッグバンアップデート以前にメイプルストーリーをプレイしていた人なら、名前くらいは知っているコトだろうと思いま…

有償カスタマイズ・テーマ制作について

当ブログでは、有料カスタマイズ・テーマ制作の依頼を募集しています。カスタマイズ、またはテーマのイメージを具体的に添えて、下記のいずれかの連絡先までお気軽にご連絡下さい。 17/04/23 現在受付停止中です。 メールアドレス moonthemes@gmail.com(お…

はてなブログテーマ「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を記述することなく、簡単にナビゲーションバーを表示できます。

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

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

はてなブログで 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 風に画像を開くならその背景(オーバーレイ)色は白より黒の方がより画像が映える気がするので、例によっ…

line-height と padding の関係

記事やサイドバーの見出し、あるいはボタンなどに上下左右均等に余白を取りたいとき、例えば padding: 10px と指定しても妙に上下方向だけ伸びていることがあるが、これは余白を指定した要素に含まれる文字が親要素に指定された line-height の影響を受けて…

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

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

四ヶ月連続更新、だけど

photo by photosteve101 3月中旬に WordPress から移行してから今日まで毎日更新を続けてきたのだけれど、7月に入ってから暑さや湿気でいつも以上に家にこもる生活が続き、ゲームやガジェット関連のニュースを引用してなんとか更新を続けるという「ブログに…

HUMIDITY IS VERY HIGH

photo by LoKan Sardari 春夏秋冬の中で夏が一番嫌いだ。というより、湿気が嫌いだ。根っからのインドア派だけど、海にキャンプにバーベキュー、プールに祭りに花火大会などなど夏ならではの楽しみを味わいたい気持ちはゼロじゃない。でも、見えるんだよ、ウ…

Fallout 3 フォントをしねきゃぷしょんに変えてみた

ゴシック体にもそろそろ飽きてきたので、気分転換に日本語化フォントの指定を「源真ゴシック等幅 Bold」から「しねきゃぷしょん」に変えてみた。洋画の字幕っぽい雰囲気が Fallout 3 の世界観と合ってて良いかもしれない。ちょっと半角が詰まり気味だけど。 …

Fruit Ninja アーケードモードで高得点を達成

最近密かにハマっている Fruits Ninja(本当に今更感はあるけれど)のアーケードモードで 1428 ポイントを叩きだしたので記念に記事に書いておく。道場とブレードの組み合わせはそれぞれ10個のフルーツが画面下部から不定期的に湧き上がるグレートウェーブ道…

38度のとろけそうな日

photo by buck82 朝7時30分頃に Twitter で「今日はうちわで耐えるぜ!」なんて元気よく呟やいたけれど、30分後にはもうエアコンのスイッチを入れておりました。近くの公園のセミも今日から鳴き始めて、いよいよ夏という感じ。冷蔵庫の氷も消費に供給が追い…

VVVVVV のウィンドウモード解像度を変更する

ファミコン時代のロックマンを彷彿とさせるテイストのチップチューンBGMが素晴らしいいわゆる"死にゲー" VVVVVV のウィンドウモード時の解像度を変更する方法をメモ。下記の方法で解像度を変更すると次回起動時からずっとその解像度で起動するようになる。と…

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

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

米国で ZenPad の販売が始まる

Best Buy ASUS が今年の Computex で発表した Android タブレット「ZenPad」の販売が米国で始まった模様。主なスペックと価格は以下の通り。 製品名 ZenPad 7 (Z170C) ZenPad S 8.0 (Z580C) CPU x3-C3200 Z3560 メモリ 1GB 2GB ストレージ 8GB/16GB 16GB/32G…

USB扇風機 UMF02 を購入した

日に日に増していく気温に対向するために満を持してUSB扇風機「UMF02」を購入したので簡単にレビュー。Amazon.co.jp で購入、色は白で1,230円。電源の供給は Anker の 40W 5ポート USB急速充電器で行いました。 USBどこでもでか扇風機 ホワイト UMF02WH出版…

今日の出来事まとめ(2015/07/09)

photo by Khánh Hmoong 扶養の申請のために必要な所得証明書を貰いに市役所まで自転車+徒歩で一時間かけて移動したのが今日のハイライト。駐輪場までの帰り道、一方通行の自転車専用レーンを横目に平気な顔で歩道を自転車で逆走する女に危うく接触しかけた。…

夢日記(2015/7/8)

photo by bettlebrox 6畳ほどの誰もいない薄暗い部屋に一人佇んでいる。視線を下に向けると小さな食卓があり、その上にはご飯が一膳盛られた茶碗がぽつりと置いてあった。食べろということなのだろうと箸を手に取り、意味もなく辺りを見回しながらゆっくりと…