読者です 読者をやめる 読者になる 読者になる

Minimal Green

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

CSS

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

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

はてなブログのトップページをWordPressの固定フロントページっぽくする方法

Twitterでちょろっと書いたのですが、はてなブログでもWordPressの固定フロントページっぽくビジネスサイト風のトップページを作ることができます。 まずはDEMOページをご覧ください。(PC向け) DEMOページ トップページ用の記事を作る トップページからサ…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

困った時のIE用CSSハック

制作しているサイトでどうしてもIEでだけ発生するバグがあったので、IEだけ適用させるCSSを変更するCSSハックで解決させました。 自分用に備忘録としてメモします。 IE10以上に適用

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

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

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

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

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

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

初心者がHTML/CSSを勉強するのにおすすめの入門記事・参考書

ブログを書くのに便利な世の中になって久しいですね。WordPressやはてなブログのようなCMSを使えば、HTML・CSSの知識が無くてもキレイなデザインの記事が書けますよね。ただ、それでも自分独自のデザインや装飾をしたければ、HTML/CSSの知識が必要となってき…

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

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

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

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

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

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

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

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

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

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

まとめブログ風にタイトル下に人気記事を並べるカスタマイズ(重いので注意)

リクエストがありましたのでまとめブログ風にタイトル下に人気記事を並べるカスタマイズをご紹介します。 このコードはid:chiroru_27 さんの記事を参考にしています。 chiroru.hatenablog.comおすすめカスタマイズ: moonnote.hateblo.jp[注意]このカスタマ…

多階層のドロップダウングローバルメニュー(レスポンシブ)

コメントにてリクエストがあったので、3階層のドロップダウンナビゲーションメニューのコードを用意しました。ドロップダウンの作り方まず、メニューリストの構造とドロップダウンの階層構造の作り方を説明します。 ABC三つの項目があるとして 階層無し /* …

ピンクストライプでガーリーにカスタマイズ(訂正あり)

新しく投稿したはてなブログテーマ「stripe」の当初デザインはピンクのストライプでした。このブログも気分転換にしばらくピンクストライプでいきます。 お色直しのカスタマイズ用CSSコードをまとめました。

はてなブログテーマ「stripe」を公開しました。

stripe - テーマ ストア新しいはてなブログテーマ「stripe」をテーマストアに公開しました。2カラム。レスポンシブデザイン。紺を基調とし、ストライプの下線をアクセントにデザインしました。レイアウトはこのブログとほとんど同じです。デモブログ: blog-…

自作テーマのススメ/はてなブログテーマ制作の流れなど

テーマ制作のきっかけ 私はid:shiromatakumiさんの記事を読んだことがきっかけで、自分のブログ用の自作テーマを作り、それからはてなブログのテーマストアで公開するテーマ作りを始めました。 CSSではてなブログをカスタマイズしてみよう - NO TITLE自作CSS…

カテゴリーの数が多くてデザインが崩れる場合の対処と読者になるボタンの設置

テーマ「Minimal Green」をお使いの場合に、記事に設定したカテゴリーの数が多くて被ってデザインが崩れる事があります。 個別にコメント欄などで対応してましたが、質問を下さった方がいらっしゃるのでここで記事にしたいと思います。↓こういう状態のことで…

はてなブログテーマ「Minimal Green」のブログタイトル、エントリータイトルの:hoverの色を変えました

細かい変更なんですが、テーマCSSのブログタイトル、エントリータイトルのオンマウス時(ホバーエフェクト)の色を変えました。 具体的には以下のコードを追加しました。 #title a:hover { color: #666; opacity: 0.7; } .entry-title a:hover { color: #666…

見せたいメニューのみ表示して残りをドロップダウンにするレスポンシブナビゲーション(追記あり)

レスポンシブデザインではナビゲーション・メニューのスマートフォン表示に三本バーのハンバーガーメニューを設置している場合が多いと思います。 私もこのブログや他のサイトでハンバーガーメニューを使用しています。 ハンバーガーメニューは使いにくい… …

スクロールするとトップに固定するメニュー(はてなブログPro向け)

注意:このカスタマイズははてなブログPro向けです。無料ユーザーがはてなグローバルヘッダーを隠すと規約違反ですのでこのカスタマイズはできません。 スクロールするとトップに固定するメニュー スクロールするとトップにメニューを固定するには以下の①と②…

太陽がまぶしかったから さんのパンくずリストプラグインを使っている方向けのCSS調整

(懐かしい組み合わせの素材ですね) デザインテーマ「Minimal Green」を使って下さっている方で、JavaScript版のパンくずリストを導入されてて、カテゴリー表示が崩れているブログをいくつか見ました。 パンくずリストを導入した場合の調整について書きます…

囲み枠・デザインボックスCSSでブログ記事にアクセントを

記事本文にアクセントを付けたい時に便利な枠付きボックスのCSSです。 それぞれclassにtext-box1~5を適応し以下のようにdivでくくってお使い下さい。 HTML編集(見たままモード、はてな記法、MarkDownモードでも使えます) <div class="text-box1">この中に記述</div> 記事中だけでなく、…

はてなブログ「コメントを書く」ボタンのカスタマイズ

はてなブログの「コメントを書く」ボタンってデフォルトだとシンプルで少し小さめですよね。場合によってはどこにあるか気づきにくいことも。 コメントボタンの文字を大きくしたり、デザインを変えるなら.leave-comment-titleのcssで指定します。このブログ…

見出しのデザイン CSS

デザインテーマ「Minimal Green」の見出しのデザインh1からh4までのCSSh1見出し .entry-content h1 { font-size: 160%; padding: .75em 0; border-top: 2px solid #454545; border-bottom: 2px solid #454545; }

はてなブログの記事上下にレスポンシブなカウント付きシェアボタンをつけるカスタマイズ(修正あり)

このシェアボタンはid:hiroseyonakaさんのコードを参考にしています。ありがとうございました。 www.hiroseyonaka.com [追記]2017/01/20:はてなブログのブログアイコンWebフォントが使えなくなっています。 こんな感じのデザイン はてなブックマーク、Faceb…

まとめて色を変更するCSSコード、ピンク、水色

まとめて色を変更するコード、ピンク、水色を用意しました。デザインCSSに貼り付けてお使い下さい。 ピンク系 #E9546B薔薇色 水色系 #89C3EB勿忘草(わすれなぐさ) ピンク系 #E9546B薔薇色

まとめて色を変更する 黒系カスタマイズ一例[訂正あり]

まとめてリンク文字や メニューバー、ページャー、続きを読む、サイドバーの色を変更するコードを書きました。 デザインCSSに追加でコピペして下さい。 他の色にもコードを参考に変更してみてください。 追記:セレクタごとに分けました。必要なところをお使…

グローバルメニューの設置と色変更

手引にも書いたのですが、こちらでも詳しく書きます。 共通作業:タイトル下に貼り付けるHTML ドロップダウンメニューのHTML構造について 黒背景のグローバルメニューCSS 白背景に黒文字のグローバルメニューCSS メニューに表示するアイコンを変える

デザインテーマ「Minimal Green」のカスタマイズの手引

この「Minimal Green」テーマのCSSは自由に改変してくださって構いません。 Minimal Green - テーマ ストア 背景画像や背景色を変えるとこんな感じになります。 メニューやリンク文字の色を変えるとこんな感じになります。 [注意] グローバルメニューとペー…