Minimal Green

はてなブログテーマ『Minimal Green』のデモブログ。はてなブログカスタマイズや、HTML、CSSなどについて書いています。

ブログカスタマイズ

複数のブログメンバー毎のプロフィール欄を記事下に設置する

はてなブログのブログメンバー機能とは ユーザー毎に記事下にそれぞれのプロフィール欄を表示する プロフィールのHTML/jQuery はてなブログのブログメンバー機能とははてなブログProには複数人で一つのブログを運営できる「ブログメンバー機能」があります。…

スマホに使える!2階層対応レスポンシブメニュー

スマホでのメニュー表示はいつも悩ましいものです。スマホの画面サイズが大きくなったとはいえ、やはり表示領域は狭く限られています。特にカテゴリーの数が多くメニューが多階層にわたるサイトやブログのメニュー表示をどうするか。今回はたくさんのメニュ…

リライト記事の更新日時表示のカスタマイズで時刻まで表示されるようになった件について

時分秒まで表示される XML サイトマップのlastmodタグについて サイトマップバージョンを一部改変 AMPバージョンなら今まで通り フッターに貼るscript CSS はてなブログで「リライト記事の更新日時を日付横に表示する」カスタマイズをされている方も多いと思…

スマートフォンで横から出てくるドロワーメニュー 【レスポンシブ・プロフィール欄・ドロップダウンメニュー】

PCでは横並びのドロップダウンメニューで、スマートフォンではトグルボタンでドロワーメニューが横から出てくるグローバルメニューをはてなブログ向けに作りました。(はてなブログ以外でも使えます) PCではマウスオーバーするとドロップダウンメニューが表…

はてなブログで使えるサイドバーカスタマイズまとめ

はてなブログのサイドバータイトルデザインのカスタマイズ集を作ってみました。 はてなブログではそのままコピペでお使いいただけます。WordPressや他のブログサービスでもセレクタを変えればお使いいただけます。 注意 文字色について(全共通) シンプル …

はてなブログの目次のデザインカスタマイズ集

はてなブログで使える目次のデザインを幾つか作ってみました。コピペでお使いいただけます。 目次の挿入方法 目次デザインパターン集 FontAwesomeの呼び出し ストライプ背景 ストライプ背景2 二重線囲み ステッチ風 目次リストのスタイル(番号順、円) 目次…

【はてなブログ】ページ全体を枠で囲むカスタマイズ

ちょっと前からよく見かける「サイト全体を枠で囲む」デザインをはてなブログでやってみました。このブログでもやっています。 webdesign-trends.net カスタマイズ方法 ストライプ柄 背景画像を設定する カスタマイズ方法以下のCSSをデザインCSSに追加します…

記事下にCTAを設置するカスタマイズ

記事下にCTAを設置するカスタマイズを作りましたのでご紹介します。WordPressの有料テーマではよく見かけますね。このカスタマイズははてなブログはもちろん、WordPress、その他のブログサービスでも使えます。 CTAとは 見た目はこんな感じ カスタマイズコー…

はてなブログの記事下にプロフィールカードを表示するカスタマイズ

はてなブログの記事下にカード型のプロフィール欄を表示するカスタマイズを作りましたのでご紹介します。 こんな感じ カスタマイズコード HTML CSS こんな感じPCではこんな感じに表示にされます。 スマートフォンではこんな感じです。 デザインはこのブログ…

はてなブログカスタマイズ記事のまとめ

はてなブログカスタマイズ記事一覧です。今までの過去記事をまとめました。 パーツ毎に分けているので、カスタマイズしたいところの記事をご参照下さい。上から順番にヘッダー、グローバルメニュー、記事上・記事下、サイドバー、フッターと辿っていくとはて…

ズレた広告は中央寄せに配置しましょう

ブログのヘッダー下やフッターにレスポンシブ広告のGoogle Adsenseを貼っていらっしゃる方は多いと思います。ファーストビューで目に留まりやすく広告を置きたい場所ですよね。 はてなブログでは「タイトル下」や「フッタ」に広告のコードを置くのですが、コ…

最初から完璧を目指す必要はない。ブログは少しずつ育てよう。

カスタマイズ記事を主に書いてるこのブログですが、今回はカスタマイズのやり過ぎについて警告する記事を書きます。 ※カスタマイズご依頼の新規受注は条件が合えばお受けしております。お気軽にご相談下さい。 カスタマイズのやり過ぎにはご注意を過剰なカス…

カスタマイズのお手伝いをさせていただいたはてなブログのご紹介(言及のお礼・制作実績)

今まで私が有料カスタマイズサービスでお手伝いをさせていただいたブログのご紹介をさせていただきます。 今回ご紹介するのは、SNSやブログへの言及でカスタマイズサービスのご紹介をして下さったブログです。 カスタマイズ実例 元スタバ店員の全国カフェめ…

はてなブログ公式の記事下関連記事をカスタマイズ

はてなブログでは6月から記事下に「関連記事」が表示されるようになりました。 記事下に「関連記事」を表示します - はてなブログ開発ブログ 今まではJSなどで表示するカスタマイズで対応していましたが、公式のパーツが出来たということで、こちらの方が軽…

軽量CSSフレームワークではてなブログの固定ページにグリッドシステムを導入する

はてなブログで固定ページをサイトっぽくカスタマイズするにはどうすればよいか、という話題がTwitterでありました。はてなブログProの固定ページを使えば、WordPressの固定ページのようなデザインも可能です。 ただ、そのままではできないので、やり方をこ…

position:absoluteでタイトル横にSNSフォローボタンなどを並べる

ブログのタイトルロゴの右横にSNSフォローボタンが並んでいるレイアウトをWordPressなどではよく見かけますよね。無料テーマなのに超優秀な人気テーマ「simplicity」などもそうですよね。 WordPressの場合は自由にHTMLでヘッダーの構造をいじれるのですが、…

はてなブログのトップページ一覧形式表示を使ってカード型レイアウトに

ついに、はてなブログでトップページの一覧表示機能ができましたね!最近はてなブログはどんどん便利な仕様が追加されててカスタマイズ好きにとっては嬉しい限りです。 staff.hatenablog.com 今まで一覧表示にするにはCSSでなんとかそれっぽくしたり、/archi…

ヘッダー下のおすすめ記事をスマートフォンで横スクロールにするカスタマイズ

ヘッダーの下のおすすめ記事の横並びにするカスタマイズを以前書きました。今回はそれをスマートフォンでは横スクロールで表示するカスタマイズです。 blog.minimal-green.com ==== スマートフォンで横スクロール HTML CSS 注意点 JavaScriptを使うのは面倒…

はてなブログのタイトルテキストのみ画像に置換し、スマートフォンでも最適化する方法

はてなブログには標準のタイトル画像アップロード機能がありますが、サイズなど色々制限があり、自由に表現するには少し難しいところもあります。

はてなブログのトップページをWordPressの固定フロントページっぽくし、ホームページとして活用する方法

Twitterでちょろっと書いたのですが、はてなブログでもWordPressの固定フロントページっぽくビジネスサイト風のトップページを作ることができます。これではてなブログをビジネスサイトやホームページのように活用することができます。 まずはDEMOページをご…

はてなブログのAMP用CSSを書くときの注意点

はてなブログのAMP版のCSSを記述出来るようになりましたね。おかげで今までAMP対応を見送ってた方も見直してAMP対応始めた方も多いと思います。カスタマイズ依頼案件でもAMP対応を依頼されることが多くなりました。 基本的にはPC版のデザインCSSと同じように…

サイドバーの最新記事にリボンラベルを付ける方法【変数を用いた高度なカスタマイズ】

先日はてなブログのサイドバーモジュールに新しい機能が追加されましたね。 staff.hatenablog.com 何か出来ないかなあと、カスタマイズを試してみました。 色々な表現が出来ると思うのですが、今回は以下の2点を取り入れたデザインを作ります。 サイドバーの…

はてなブログのサイドバーに画像を貼り付ける方法

最近Adobe CCを導入してIllustratorを使っています。なんだかんだ言って有料のソフトウェアは使いやすいですね。解説もネットに多いですし。 印刷物を作る機会が増えて、無料の画像編集ソフトでは限界がありましたが、Adobe CC導入して良かったです。まだ全…

数字表記におすすめのGoogle Font はてなブログの日付にどうぞ

このブログではブログタイトルと日付にGoogle FontのJosefin Sansを指定しています。全体にWeb Fontを指定すると見出しやタイトルなど一部分にフォント指定すると、デザインのアクセントになりおすすめです。今回は日付の表示、数字の表示に最適なGoogle Fon…

この記事が気に入ったらいいねの代わりに、Twitter、読者登録、Feedlyのフォローボタンを設置するカスタマイズ

記事下のシェアボタンの下にバイラルメディア風の「この記事が気に入ったらフォロー」バナーを置いてみました。 よくWordPressでは見かけますよね。そのデザインを応用して「この記事が気に入ったらフォロー」バナーにアレンジしました。 Facebookページは持…

かわいい系のガーリーなデザインの見出しのCSS はてなブログへコピペで使えます。

ガーリーデザインシリーズです。見出しのデザインに使えるコピペCSSを用意しました。ガーリーなデザインのソーシャルシェアボタンのCSS はてなブログへコピペで使えます - Minimal Greenとあわせてお使いいただくと良いかと存じます。 以下ははてなブログの…

ガーリーなデザインのソーシャルシェアボタンのCSS はてなブログへコピペで使えます

ストライブ柄とステッチ風のかわいい?シェアボタンを作ってみました。ガーリーデザインなブログカスタマイズにぜひどうぞ。 このシェアボタンは過去にこのブログで公開したシェアボタンのHTMLと同じですので、CSSを変更するだけで着せ替え出来ます。レスポ…

記事下の関連記事を2列に表示するCSS

記事下の関連記事ってカスタマイズされてますか?多くの方はMilliardなどのプラグインを使っていらっしゃいますが、関連記事を表示させる方法はいくつかあります。 はてなブログの記事下に使う関連記事プラグイン、結局どれが1番良いの?Milliardはとてもき…

異なるサイズの広告バナーをスマホ・PCで切り替える方法

※注意:AdSenseで使うことは無いと思いますが、この方法をGoogle Adsenseで使うときは必ず「レスポンシブ広告ユニット」にして下さい。レスポンシブ広告以外にdisplay:noneを使うと規約違反になりますのでご注意下さい。 Google Adsenseの場合レスポンシブ広…

黒板風囲み枠CSSでブログの解説記事をまとめよう

色白おばけ (id:lightgauge) さんのブログ記事で使われていた”黒板風囲み枠”にインスパイア(笑)され、私も黒板風囲み枠のCSSを作ってみました。 はてなブログで独自のWEBフォントを利用する方法 - 攻めは飛車角銀桂守りは金銀三枚 CSSは参考せず自分で組み…