Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

ブログカスタマイズ

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

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

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

今まで私が有料カスタマイズサービスでお手伝いをさせていただいたブログのご紹介をさせていただきます。 今回ご紹介するのは、SNSやブログへの言及でカスタマイズサービスのご紹介をして下さったブログです。(掲載許可を頂いていないクライアント様のブロ…

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

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

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

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

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

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

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

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

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

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

はてなブログのスマートフォン版をカスタマイズするとき役立つ記事

先日読んだid:codomisu さんの記事が素晴らしかったので、自分も本業ブログのリデザイン、スマホ版のカスタマイズしました。 スマホ版のデザインもPC版とあわせてリニューアルしました。 夏らしさを意識しましたがいかがでしょうか?スマホ版もPC版と同様、c…

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

はてなブログには標準のタイトル画像アップロード機能がありますが、サイズなど色々制限があり、自由に表現するには少し難しいところもあります。 タイトルまわりの調整 タイトルのみ画像でスマートフォンでも最適化する デザインCSS スマートフォンでピッタ…

はてなブログのトップページを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では見かけますよね。「この記事が気に入ったらいいね!」ボタンは私も澄風荘ブログに置いています。そのデザインを応用して「こ…

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

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

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

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

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

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

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

Google Adsenseの場合レスポンシブ広告ユニットがあるので、それを使えば良いのですが、ASPによってはレスポンシブに対応してない広告もあります。PCでは横長のバナーを表示したいけど、スマホではスマートフォン用の小さいサイズの広告バナーを表示させたい…

Twitterとココナラ始めました。

澄風荘アカウントと区別するためこのブログ専門のTwitterアカウントを作りました。 ブログカスタマイズやサイト制作の話題、Minimal Greenの更新情報をお伝えしていきます。 よろしければフォローしてくださると嬉しいです。 @minimalgreen00さんをフォロー …

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

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

はてなブログのトップページと個別記事ページの違い

はてなブログを使っていると気づくと思いますが、はてなブログのトップページと個別記事ページ(エントリーページ)では表示される要素に違いがあります。Point はてなスターと公式のソーシャルパーツ以外の記事上、記事下のカスタマイズはトップページに表…

flexboxで横並び ヘッダー下におすすめ記事を並べるカスタマイズ

ブログのヘッダー下におすすめ記事を4つ(PC)並べるカスタマイズをしました。過去の記事で読んで欲しいおすすめ記事やブログに初めて訪れた人にまず読んで欲しい記事をピックアップしてファーストビューに表示することが出来ます。「Page Analytics」による…

はてなブログ日付のデザインカスタマイズ カスタマイズ用CSSコード

はてなブログの日付のデザインを変更するカスタマイズ用のCSSコードをご紹介します。 はてなブログテーマストアでは様々なデザインのテーマがあり、とくに公式テーマでは個性的な日付のデザインが多いですから、無理してこの記事のようにカスタマイズする必…

ページレイアウトの余計な隙間・デザイン崩れを修正する方法 Chromeのデベロッパーツールの簡単な使い方

他の方のブログを読んでいて、これは意図しないデザインの崩れ・隙間ではないかと思うことがあります。 例えばはてなブログで広く普及しているyukihyさんのドロップダウンメニューを利用されている方で背景いっぱいにタイトル画像を設定している場合、メニュ…

マスキングテープ風デザインCSS ガーリーデザインのサイトやブログに

以前「stripe」というはてなブログテーマを作ったのですが、その時に使ったストライプ背景のCSS(グラデーション)を応用してマスキングテープ風デザインやドット柄、チェック柄背景パターンのCSSをご紹介します。 ブログ記事は白背景に文字が続くと、特に長…

CSSでセンタリング 画像や文章を中央寄せにする方法 

ブログのカスタマイズやサイト制作をしていて、コンテンツを真ん中に揃えるレイアウトはよく使いますね。 画像や文章を中央寄せ(中央揃い)にする方法をまとめてみました。

ブログをクリスマス仕様に CSSでブログに雪を降らせるエフェクト・アニメーション

明日はクリスマス・イブですね。 期間限定で25日までブログ背景とヘッダー画像をクリスマス仕様にします。 ブログ背景に雪を降らせるエフェクト CSS3のanimationで雪の画像を左上から右下へ移動させて雪が降る表現をしています。 参考:CSS Snow Effect | Br…

【コピペでOK】はてなブログのタイトル画像の高さを変更する・上下の余白を消す【css】

以前の記事の追記です。 はてなブログのヘッダー、タイトル画像の設定について - Minimal Greenはてなブログのタイトル画像アップロード機能はてなブログでは、管理画面>デザイン>カスタマイズ>ヘッダ>タイトル画像から、画像をアップロードして簡単にタ…

ブログカスタマイズ・サービスのご案内 テーマ制作・カスタマイズ設置代行

個別にはてなブログカスタマイズやWordPressカスタマイズのご依頼を少しずつ受けるようになりました。 このブログで書いたカスタマイズ記事や制作したテーマに関する範囲ならご質問になるべくコメントで答えますが、その範囲を超え、新たにコーディングが必…