MoonNote

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

はてなブログ

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

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

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

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

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

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

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

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

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

はてなフォトライフの容量制限が緩和される

photo by pixelroiber ライブドアブログが有料プランを廃止した際に「うちは容量制限無いのに(笑)」と小馬鹿にされ、はてなユーザーからも厳しすぎると批判されていたはてなフォトライフの無料ユーザーの容量制限が30MB/月から300MB/月に緩和された。10倍…

はてなフォトライフは中間サイズを生成しない

はてなフォトライフは WordPress のようにサムネイル/中サイズ/大サイズといった『中間サイズ』を生成しないので、例えば上記のように元サイズ 800x533 の画像をアップロードした場合は 800x533 でしか貼り付けることができない。 こんな風に表示するサイズ…

「はてなブログ」アプリからブログを更新してみる

テーマの制作に熱中していて「やべえ、まだブログ更新してねえ」と気づいたのが午後23時30分。よって今日の更新は、非常にやっつけ感のする更新になります。3月16日から継続している連続更新記録を止めたくないので。 本当は、アプリ経由の投稿と PC 経由の…

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

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

はてなブログの広告を Stylish で消す

有料プランを契約しないと1ページに最大5つの広告が表示されるはてなブログの守銭奴体質は前も書いたと思う。 広告そのものは AdBlock Plus とか uBlock を導入すれば簡単に非表示にできるのだけど、ただ1つだけ、有料プランの契約を促す「広告を非表示にす…

はてなブログ「Flickr貼り付け機能」の画像サイズ

photo by Andy Magee はてなブログの「Flickr貼り付け機能」で挿入される画像の幅は基本的に 500px に固定されていて、他の幅を選ぶことができない(選択オプションがない)。 これの何が問題かというと、このブログのメインカラム(記事部分)の幅は 665px …

一ヶ月連続更新

サブブログとして開設したはてなブログだけれど、今日、この記事で一ヶ月連続の更新。独自ドメインの方は完全に放置状態で、もう何週間も自分で開いてすらいません。だってさー、WordPress で書く理由が見つからないんだもの。 この状況が続いた場合、余計な…

はてなブログの良いところ

はてなブログの有料プランのぼったくり度は同業他社と比べてあり得ないレベルの酷さで全く契約する気にはなれないけど、無料の範疇で考えると、はてなブログは結構優れている。 簡単に Amazon の商品を紹介できる 簡単に iTunes Store の商品を紹介できる 簡…

ぼったくり有料プラン

Twitter の友達曰く、「はてなブログの無料版は広告が多すぎる」との事。試しに AdBlock を切ってブログを閲覧してみると…なるほどこれは酷い。1個か2個ならともかく、まさか全記事の下に挿入されているとは。 また、「有料プランは高すぎる(利点と価格のバ…

どちらをメインにするか

TwitterプロフィールのURL欄を moonnote.hateblo.jp に変更した。 現状のメインブログは有料のレンタルサーバー/独自ドメインという環境に存在する moonnote.net なのだけれど、更新のしやすさで考えると、今後はこっちがメインになる可能性も考えられる。 …

Markdown

はてなブログのエディタは、テーブルの挿入機能が付いてない。WordPress も初期状態だと付いてないけど、TinyMCE Advanced っていうエディタを拡張するプラグインを入れると簡単に解決できる。 テーブルタグの手打ちとか面倒臭すぎるし、テーブルタグ作成ツ…