Minimal Green

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

CSS

はてなブログのヘッダー右上に突如出現した「読者になる」ボタンと崩れたスマホ版ヘッダー画像の修正方法

こんにちは。久しぶりにはてなブログのカスタマイズ記事書きます。 追記:はてなでは表示位置の変更を検討中 はてなブログのヘッダー右上に「読者になる」ボタンが突如出現 「読者になる」ボタンを消す方法(はてなブログProユーザー限定) 無料ユーザーの方…

はてなブログテーマストアの投稿方法 自作テーマをはてなブログで使う

はてなブログのテーマストアにはたくさんのテーマが公開されています。多くのユーザーが目にし利用するものなので、ある程度内容は精査しないといけません。 自作テーマを「非公開」で投稿するのはそれほど内容に気を使う必要はありません。(但し著作権には…

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

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

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

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

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

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

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

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

トップページの先頭に固定された記事の表示をカスタマイズする

はてなブログのトップページの先頭に記事を固定できるようになりました。Twitterの「プロフィールに固定表示する」と似たような機能ですね。(と言っても実装は2週間前から既に行われており、正式な告知が今日だったようです。) staff.hatenablog.com早速こ…

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

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

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

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

HTML/CSSの覚え方 WEB制作に役立つ便利なチートシートまとめ

HTML/CSSを書くとき、「あれ、これ何だったっけ?」ってことがありますよね。私はしょっちゅうありますw そういうとき、ちらっとチートシート(カンペ)を見て効率よく作業を進められるよう、便利なチートシートをまとめました。 似たような記事は既にたく…

ガーリーデザインのための画像を使ったCSSテクニック

最近アメブロカスタマイズのお仕事もご依頼いただくようになってきました。アメブロはサロン経営者の方や女性個人事業主が運営されていることが多く、女性向けの「きれい・かわいい」デザインが求められます。 アメブロカスタマイズの紹介は別記事で改めてさ…

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

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

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

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

この記事が気に入ったらいいねの代わりに、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の場合レスポンシブ広…

流動体について―小沢健二の並行世界と赦し

小沢健二の新曲「流動体について」が先週2月22日発売された。突然のシングル発売だったのでとても驚いた。「春にして君を想う」から19年振りのシングル発売だという。 数年前からライブ活動を再開していたので、日本での活動も馴染みがあったけれど、CD発売…

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

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

『Vertical Timeline』の使い方 タイムライン表示で旅の過ごし方コンテンツを作りました

Vertical TimelineはCSS3とjQuryで表現された縦のタイムラインで時系列にコンテンツを作るためのライブラリです。レスポンシブ対応でシンプルミニマルなデザインでアニメーション付きのタイムライン表現が実装できます。これはフラットデザインというよりマ…

困った時のIE用CSSハック

制作しているサイトでどうしてもIEでだけ発生するバグがあったので、IEだけ適用させるCSSを変更するCSSハックで解決させました。 自分用に備忘録としてメモします。 IE10以上に適用 IE10以上に適用 IE11以上に適用 .foo{ color: green; /* IE10以下 */ } @me…

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

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

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

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

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

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

2017年新春 ブログでJavaScriptのおみくじをひこう

あけましておめでとうございます。昨年始めたこのブログですが、読者登録やブログで紹介、またスターやコメントで交流していただき、とても励みになりました。ありがとうございました。今年もマイペースで記事を書いてまいります。どうぞよろしくお願いしま…

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

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

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

明日はクリスマス・イブですね。 期間限定で25日までブログ背景とヘッダー画像をクリスマス仕様にします。 ブログ背景に雪を降らせるエフェクト 雪を降らせるエフェクト jQueryなど おまけ サンタは今どこ?Google マップで探してみよう ブログ背景に雪を降…

CSSが効かない…よくある原因(バグやミス)と対処方法

サイト制作やテーマ制作をしていて、CSSの記述が適用されていない、レイアウトがおかしい、などなど困った事態にぶつかることがよくあります。 私だけでしょうか? まだまだ勉強中ですが、HTML・CSS覚えたての頃から現在まで、私が実際に出会ってきた様々な…

楽天トラベルカスタマイズページ無料テンプレート作りました/個別のカスタマイズ承ります

楽天トラベルのPC版のカスタマイズページ用テンプレートをローカルビジネスのお宿さん向けに作ってみました。 既に業者に頼んでるお宿さんが多いと思いますが、新規に楽天トラベルに参画される施設や、業者に頼んでるけど自分で更新したい個人事業主の方の参…