Minimal Green

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

黒板風囲み枠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を使っています。 最初はちょっととっつきにくいですが、慣れれば簡単です。 画像加工が得意な方には既にご存知だと…