MoonNote

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

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

f:id:waitingmoon:20160114122112p:plain

先日、とあるはてなブログユーザーの方から「有償でブログをカスタマイズして頂けないでしょうか?」との依頼を頂きました。

特に明記していないにも関わらずそのような依頼を頂いたということは、自分を高く評価して頂いたということで大変嬉しく思います。

もし、この方と同じように依頼を希望される方がおられましたら、希望価格・カスタマイズ内容・ご意見等を添えて、この記事へのコメントまたは @h_a_l_f へのリプライ/ダイレクトメッセージでご連絡下さい。需要があれば後日、正式に価格や詳細を掲載したいと思います。

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

photo by riklomas

Innocent と Blank で、id:bulldra 氏が制作したパンくずリストはてなブログでGoogleにパンくずリストを認識させるブログパーツ - 太陽がまぶしかったから)のカテゴリーとカテゴリーの間に挿入される > が全て最後のカテゴリーの後ろに表示されるという問題を修正するには、以下のコードをデザインCSS欄に追記して下さい。

.categories a{
    display: inline-block;
    float: none;
    margin-right: 0;
}

問題が起こる理由と、問題が起こる指定をしている理由は続きを読むに記載します。

続きを読む

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

f:id:waitingmoon:20160104215851p:plain

はてなブログには、カエレバヨメレバといった外部サービスを使わず、管理画面から直接記事に Amazon の商品を紹介できる機能「Amazon 商品紹介」があります。

非常に便利ですが、Amazon の商品ページへのリンクかどうか一目で分からないという弱点があり、このためにカエレバやヨメレバを使っている方もいるようです。この弱点を改善する CSS を紹介します。

続きを読む

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

f:id:waitingmoon:20151231010403p:plain

Dropbox の Public フォルダが廃止になる 2017/03/15 以降、この方法は使えなくなります。

はてなブログのテーマ制作やデザインカスタマイズで CSS を編集する際、Dropbox の共有フォルダを使うとぐっと楽になります。

  1. Dropbox の共有フォルダに CSS ファイルを保存/アップロードする
  2. CSS ファイルの公開リンクを取得してブログに読み込む

公開リンクの例

https://dl.dropboxusercontent.com/u/********/hatenablog/themes/Innocent/innocent.css

読み込み(ヘッダーに記述)

ダッシュボードの[設定]→[詳細設定]→[head に要素を追加]から、link 要素でスタイルシートを追加します(2016/01/07 @import だと問題があることが判明したので、この形に修正)

<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/********/hatenablog/themes/Innocent/innocent.css">
  1. ローカルの CSS ファイルを編集する
  2. 編集が終わったら保存する
  3. 保存したファイルが自動で同期される
  4. ブログに CSS が反映される

ファイルを編集・保存するとすぐに同期・反映されるのがポイントで、一々コピーしてデザインCSS欄に貼り付けて…という作業から開放されます。

はてなブログのデザインCSS機能の文字の小ささ、レスポンス速度、その他もろもろの不便さに不満を感じている方がいればお試し下さい。

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

f:id:waitingmoon:20151220174234j:plain

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

続きを読む