MoonNote

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

2015-01-01から1年間の記事一覧

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

Web サイト向けの「Material Design」コンポーネントが公開される

Android 5.0 から採用されている「Material Design」を Web で使うためのコンポーネント「Material Design Lite」が Google によって公開された。内容的には CSS、JS および HTML のセットで、Github では「こういうページが作れますよ」というテンプレート…

稲船氏の新作『RED ASH』の制作スタッフは『DASH』と同じらしい

Game*Spark の記事によると、稲船敬二氏の新作『RED ASH』の制作チームには『DASH』の主要スタッフが参加しているそうな。 もはや CAPCOM に対する仕返し 『RED ASH』は『RE DASH』とも切れる 英語版のタイトルが『Red Ash: The Indelible Legend』(ロック…

Fallout 3 ボブルヘッド収集完了

レイブン・ロックに置かれたボブルヘッド『Energy Weapons』を回収するために恐ろしくて出来れば足を踏み入れたくない Vault 87 を攻略(高レベルなせいで湧く敵がほぼオーバーロードで大変だった)し、行く手を阻むエンクレイブ兵と日本語版の声優が東方不…

東ハト パイクロ・シュガーバター味を食べた

食後のおやつに東ハト パイクロ・シュガーバター味を食べたので簡単に感想を。 東ハト パイクロ シュガーバター味 70g×12袋出版社/メーカー: 東ハト発売日: 2014/02/03メディア: 食品&飲料この商品を含むブログを見る 味は同社のキャラメルコーンと非常によ…

Fallout 3 アンクル・レオとの遭遇

スプリングベール小学校周辺をぶらぶらしているとスーパーミュータントを発見!即座に V.A.T.S を開くとなんと名前付き。敵性を示す赤いマーカーも表示されていない。近づいて話しかけてみると、アンクル・レオというランダムで遭遇できる友好的なスーパーミ…

Media Go でアートワークを埋め込むと劣化する

Media Go を使ってアートワークを埋め込んだ曲を Z3 Compact に転送したとき、ミュージック(旧WALKMAN)アプリで表示されるアートワークにノイズが発生するのが気になり詳しく調べてみたところ、Media Go はアートワークをファイルに埋め込む際、画像に圧縮…

丸亀製麺に行ってきた

photo by raneko 父と母に「1日だし、丸亀製麺に行かんか?」と誘われたので3人で行ってきた。お目当てはもちろん1日に半額になる釜揚げうどん。丸亀製麺に行くのは今回が2回目で、前回の大で満たされなかった経験を活かして、今回は特大を注文した。天ぷら…

iTunes アートワークの保存支援サイト「iTunes Artwork Finder by Bob Dodson」

iTunes Artwork Finder by Ben Dodson http://bendodson.com/code/itunes-artwork-finder/ アルバムアートワークを曲に埋め込む際、Google 画像検索や Amazon の商品画像に世話になるケースは多いと思いますが、良い画像に出会える確率は正直言って高くない…

あわせて読みたいGを導入した

サイドバーに『人気の投稿』を表示したせいで、記事とサイドバーの高さの違いがよりいっそう著しくなってしまったので対策として記事の下に関連記事を表示するスクリプト『あわせて読みたいG』を導入した。多少はましになったかな。 <script src="https://www.google.com/jsapi"></script> <script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>