Minimal Green

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

2017-01-01から1年間の記事一覧

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

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

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

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

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

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

ブログのタイトルロゴに使える!フロップデザインのおすすめ日本語フォント8選

フロップデザインさんは老舗のフォントショップですね。とっくに皆さんご存知だと思いますが、フォントの数が膨大なのでお気に入りの日本語フォントを選んでサンプルロゴを作ってみました。主にガーリーデザイン向けの日本語フォントです。はてなブログのタ…

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

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

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

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

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

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

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

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

困った時のIE用CSSハック

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

おすすめ!1カラムのおしゃれなはてなブログテーマまとめ

たまにテレビではてなブログを使ったブログの画面がニュースなどで流れることがあります。 最近だと歌手のASKAさんのブログは有名で、ワイドショー報道とリアルタイム更新していた時ははてなのサーバーが落ちましたねw テレビで見ていてふと思ったのです、…

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

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

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

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

制作したはてなブログテーマ「Minimal Green」が1000インストール超えてました

Minimal Green - テーマ ストア 制作したはてなブログテーマ「Minimal Green」が1000インストールを超えていました。 ご利用ありがとうございます。 出来の悪いところもありますが、思った以上に多くの方にご利用いただき嬉しく思っております。このブログは…

シェアボタンのFacebookアイコンが消えている方へ はてなのブログアイコンwebフォントの仕様変更【追記:アイコン復活してます】

なぜかシェアボタンのFacebookアイコンが消えたので、慌てて調べてたら、寒クマ (id:hatarakitakunaingo)さんがエントリー書いてくださってます。 【はてなブログ】Facebookアイコンが消える問題を解決する - シロクマは冬眠したいはてな独自のブログアイコ…

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

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

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

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

GIMPの文字入れテクニック 半透明背景や文字の縁取りで見やすく

ブログ記事を書く際に、画像に文字入れしてアイキャッチ画像を作ることが多いと思います。 画像加工ソフトは色々ありますが、私は無料のGIMPを使っています。 (現在はAdobeのIllustrator、Photoshopメインです。) 最初はちょっととっつきにくいですが、慣…

JPGかPNGか、それが問題だ / プロのきれいな写真も使いよう

最近新しいパソコンを買ったんですが、自分のブログや宿ブログ(私のうちは宿を経営しています。)を見ていたら、画像のノイズや荒れが気になって修正しました。 画像をアップロードするときは圧縮しているんですが、いつも使っているソフトの設定で自動的に…

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

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