Minimal Green

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

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

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

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

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

トップページカード型のカスタマイズを実装された方は修正して下さい。

前の記事のトップページをカード型にするカスタマイズですが、途中で画像の取得方法を変えたため、スマートフォンやタブレットでの表示が若干おかしくなっていました。 design.syofuso.com 2017年6月4日20:52以前の記事のコードを実装された方はコードを修正…

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

※2017年6月4日20:52以前の記事のコードを実装された方はコードを修正したので、カスタマイズを実装された方をもう一度CSSを貼り直して下さい。ついに、はてなブログでトップページの一覧表示機能ができましたね!最近はてなブログはどんどん便利な仕様が追加…

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

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

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

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

Google Adsenseの関連記事ユニット設置のお知らせ

ここ一ヶ月ほどGoogle adsenseを外していました。他の広告ユニットを貼る予定はないのですが、関連記事ユニットのみ記事下に(PR)として貼らせていただきます。 本業ブログと併せてお読みいただけると幸いです。adsense全然貼っていないとGoogleから通知が…

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

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

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

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

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

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

サイドバーの記事一覧モジュールで、変数を用いた高度なカスタマイズをする方法

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

Nコンの課題曲について思うこと 合唱曲が好きなんだ!

NHK全国学校音楽コンクール、Nコンの2017年の課題曲「願いごとの持ち腐れ」(秋元康作詞)の模範演奏がAKB48の選抜メンバーで放映されてから批判が表に出てきました。 dot.asahi.comこうしたNコンの課題曲に対する批判はJ-POP路線が強くなった10年くらい前か…

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

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

よく使う.htaccessの書き方まとめ 301リダイレクト

スマートフォンサイトを制作してPCサイトとスマートフォンサイトをデバイスによって振り分けるときや、サイトのURLが変わった時にリダイレクト転送する際などに使う.htaccessの書き方についてまとめました。 よく使うけれど、サーバー周りのことはよくわから…

数字表記におすすめの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番良いの? - よなかのはなしM…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

困った時のIE用CSSハック

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

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

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

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

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

地元の高校生の試み「うまいもんふぁくとり~」についての記事を書きました

地元の新温泉町の浜坂高校の「うまいもんふぁくとり~」という新しい試みについて紹介する記事を澄風荘ブログで書きました。 blog.syofuso.com うまいもんふぁくとりーは高校生がグローカルな産業や農業課題を学びながら実際に地元のお米をネット販売する会…

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

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

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

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

ネットの写真を平気でパクる人にリアルで遭遇した【著作権侵害】

著作権ロンダリングのイラスト | かわいいフリー素材集 いらすとや ここ数日ある申請書の作成の手伝いをしていたのですが、まったくコンプライアンスとか著作権とか考えていない人に出会って衝撃を受けています。 「ネットで拾ってきた」

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

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

バナーを作ったので宣伝 楽天トラベル宿クーポン

楽天トラベル用にバナーを作ったので宣伝させていただきます。 例によってGIMPで作りました。 バナー制作過程 ターゲットと目標の設定 バナーのレイアウト 素材の選定 バナー画像の作成 気をつけたこと 宿クーポンバナー完成

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

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

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

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

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

ブログ記事を書く際に、画像に文字入れしてアイキャッチ画像を作ることが多いと思います。 画像加工ソフトは色々ありますが、私は無料のGIMPを使っています。 最初はちょっととっつきにくいですが、慣れれば簡単です。 画像加工が得意な方には既にご存知だと…

孫引きはやめよう ライセンス・引用元明記について

このブログの記事を引用した他のブログで、著作権・ライセンスまわりで危うい記事をときどき見かけるので引用元明記やライセンスについて書いてみます。 孫引きはやめて下さい

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

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

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

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

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

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

はてな記法を使い倒す ブログカードのリンク形式を変えてみた

はてなダイアリーユーザーにはおなじみでしたが、はてなブログ以降新規ユーザーにあまり使われていない「はてな記法モード」。ちょっとしたことですがブロガーにとっては色々便利なので「はてな記法」の使い方をご紹介したいと思います。

三浦弘行九段の将棋ソフト使用疑惑は不正なしという調査結果を受けて

2016年12月26日昨日、10月より問題となっていた三浦弘行九段の将棋ソフト使用疑惑について、将棋連盟の依頼により監査を担当した第三者調査委員会により調査結果を報告会見がありました。以前この件に関しては一致率の統計的有意性についての記事を書いたこ…

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

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

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

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

はてなブログのフッタに「ブログを報告する」リンクなんてあったっけ?

読者登録しているはてなブログをいくつか読んでいて、気づいたのですがフッタの「Powered by Hatena Blog 」の後に「ブログを報告する」リンクがありますね。 これって前からでしたっけ? 通報フォームがどこにあるかわかりにくいと以前から言われていたから…

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

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