ブログカスタマイズ
はてなブログを使っていると気づくと思いますが、はてなブログのトップページと個別記事ページ（エントリーページ）では表示される要素に違いがあります。Point はてなスターと公式のソーシャルパーツ以外の記事上、記事下のカスタマイズはトップページに表…
ブログのヘッダー下におすすめ記事を4つ（PC）並べるカスタマイズをしました。過去の記事で読んで欲しいおすすめ記事やブログに初めて訪れた人にまず読んで欲しい記事をピックアップしてファーストビューに表示することが出来ます。「Page Analytics」による…
はてなブログの日付のデザインを変更するカスタマイズ用のCSSコードをご紹介します。 はてなブログテーマストアでは様々なデザインのテーマがあり、とくに公式テーマでは個性的な日付のデザインが多いですから、無理してこの記事のようにカスタマイズする必…
他の方のブログを読んでいて、これは意図しないデザインの崩れ・隙間ではないかと思うことがあります。 例えばはてなブログで広く普及しているyukihyさんのドロップダウンメニューを利用されている方で背景いっぱいにタイトル画像を設定している場合、メニュ…
以前「stripe」というはてなブログテーマを作ったのですが、その時に使ったストライプ背景のCSS（グラデーション）を応用してマスキングテープ風デザインやドット柄、チェック柄背景パターンのCSSをご紹介します。 ブログ記事は白背景に文字が続くと、特に長…
ブログのカスタマイズやサイト制作をしていて、コンテンツを真ん中に揃えるレイアウトはよく使いますね。 画像や文章を中央寄せ（中央揃い）にする方法をまとめてみました。
明日はクリスマス・イブですね。 期間限定で25日までブログ背景とヘッダー画像をクリスマス仕様にします。 ブログ背景に雪を降らせるエフェクト 雪を降らせるエフェクト jQueryなど おまけ サンタは今どこ？Google マップで探してみよう ブログ背景に雪を降…
以前の記事の追記です。 はてなブログのヘッダー、タイトル画像の設定について - Minimal Greenはてなブログのタイトル画像アップロード機能はてなブログでは、管理画面＞デザイン＞カスタマイズ＞ヘッダ＞タイトル画像から、画像をアップロードして簡単にタ…
ブログカスタマイズサービスのご案内です。 はてなブログカスタマイズ料金表 コース料金 シンプルコース： ベーシックコース： フルカスタマイズ コース： 過去の制作実績 代行設置の方法 準備していただくもの 注意事項 納期後の無料アフターケア期間 <<出…
リクエストがありましたのでまとめブログ風にタイトル下に人気記事を並べるカスタマイズをご紹介します。 このコードはid:chiroru_27 さんの記事を参考にしています。 chiroru.hatenablog.comおすすめカスタマイズ： moonnote.hateblo.jp[注意]このカスタマ…
コメントにてリクエストがあったので、3階層のドロップダウンナビゲーションメニューのコードを用意しました。 ドロップダウンの作り方 階層無し 2階層 3階層 グリーン左揃い3階層メニュー（テーマ「Minimal Green」利用者向け ピンク等幅3階層メニュー ユー…
余白の取り方がおかしいところがあったので、「stripe」のページャ（次へボタン）のスタイルを変更しました。色を変更してない人はとくに何もしなくて大丈夫です。blog.minimal-green.com 前回の記事で紹介したカスタマイズでピンクに色を変更された方は、コ…
新しく投稿したはてなブログテーマ「stripe」の当初デザインはピンクのストライプでした。このブログも気分転換にしばらくピンクストライプでいきます。 お色直しのカスタマイズ用CSSコードをまとめました。
stripe - テーマ ストア新しいはてなブログテーマ「stripe」をテーマストアに公開しました。2カラム。レスポンシブデザイン。紺を基調とし、ストライプの下線をアクセントにデザインしました。レイアウトはこのブログとほとんど同じです。デモブログ： blog-…
ブログをカスタマイズする際に、カスタマイズの解説記事からソースコードをコピペすることがありますよね。 このブログのカスタマイズ記事も参考にして下さってありがたいのですが、時々間違って記事そのままをコピペされてる方を見かけます…。 blog.minimal…
テーマ制作のきっかけ 公開テーマをインストールせず、オリジナルのテーマを作ろう CSSの優先順位 実際のテーマ作り CSSの基本 メインカラーの指定 スタイルシートの指定方法 テーマストアへの投稿 テーマ制作のきっかけ 私はid:shiromatakumiさんの記事を読…
このブログで紹介しているカスタマイズの中にはjQueryを使用しているものがいくつかあるのですが、その紹介の際にjQueryライブラリの読み込み先をはてな版CDNにしていました。（その理由は後述） <script src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.9.1" type="text/javascript"></script> これです。（以前の記事のもの）これを本家のjQuery CDNに…
テーマ「Minimal Green」をお使いの場合に、記事に設定したカテゴリーの数が多くて被ってデザインが崩れる事があります。 個別にコメント欄などで対応してましたが、質問を下さった方がいらっしゃるのでここで記事にしたいと思います。↓こういう状態のことで…
細かい変更なんですが、テーマCSSのブログタイトル、エントリータイトルのオンマウス時（ホバーエフェクト）の色を変えました。 具体的には以下のコードを追加しました。 #title a:hover { color: #666; opacity: 0.7; } .entry-title a:hover { color: #666…
レスポンシブデザインではナビゲーション・メニューのスマートフォン表示に三本バーのハンバーガーメニューを設置している場合が多いと思います。 私もこのブログや他のサイトでハンバーガーメニューを使用しています。 ハンバーガーメニューは使いにくい… H…
以前、以下のカスタマイズ記事を投稿したのですが、内容についてはてなブログに問い合わせしました。 blog.minimal-green.com はてなにお伺いを立てる 気付いたらブログが非表示に 記事修正後すぐに公開に はてなにお伺いを立てる スクロールするとメニュー…
最新エントリのFacebookシェアボタンのカウント部分が「ぐるぐる回る」不具合について修正があります。 シロマティ (id:shiromatakumi)さんの記事にて解説・修正コードが公開されています。 オリジナルのシェアボタンを使っている方は確認してください。 shi…
シロマティ (id:shiromatakumi) さんのaboutページが素敵だったので真似してみました。 shiromatakumi.hatenablog.com 1カラムにするアイデアいただきました。ありがとうございました。
注意：このカスタマイズははてなブログPro向けです。無料ユーザーがはてなグローバルヘッダーを隠すと規約違反ですのでこのカスタマイズはできません。 スクロールするとトップに固定するメニュー メニューを常にトップに固定する スクロールするとトップに…
はてなブログのグローバルヘッダーにはお知らせや「記事を書く」「管理画面（ダッシュボード）」へのリンクがあって地味に便利ですよね。 ただちょっと遅くなるし、自分のブログらしさを出したいときやデザインの点で邪魔になることがあります。 はてなブロ…
（懐かしい組み合わせの素材ですね） デザインテーマ「Minimal Green」を使って下さっている方で、JavaScript版のパンくずリストを導入されてて、カテゴリー表示が崩れているブログをいくつか見ました。 パンくずリストを導入した場合の調整について書きます…
Facebookのシェア数をカウントするAPIの旧バージョンが利用できなくなったため、カスタマイズしたシェアボタンを貼っている方はシェア数が0になっているようです。 シロマティ (id:shiromatakumi) さんが修正を喚起する記事を書かれています。 Facebookの開…
デザインテーマ「Minimal Green」では記事とサイドバー以外を可変にした2カラムになっています。 「Minimal Green」のレイアウト 記事幅サイドバー幅の変更 はてなブログのHTML構造について タイトル下やフッター部分をcontent幅に揃える 「Minimal Green」…
記事本文にアクセントを付けたい時に便利な枠付きボックスのCSSです。 それぞれclassにtext-box1～5を適応し以下のようにdivでくくってお使い下さい。 HTML編集（見たままモード、はてな記法、MarkDownモードでも使えます） <div class="text-box1">この中に記述</div> 記事中だけでなく、…
blog.minimal-green.com はてなブログの公式パンくずリストを記事上、下に移動させるカスタマイズについての記事を書きましたが、 前回では空のdivを用意してその中のhtmlを既に記述されたhtml（サイドバーの関連モジュール）から取得し変更するという方法で…
