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

Minimal Green

はてなブログカスタマイズや、HTML、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はてなブログのタイトル画像アップロード機能はてなブログでは、管理画面>デザイン>カスタマイズ>ヘッダ>タイトル画像から、画像をアップロードして簡単にタ…

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

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

著作権侵害をしないために 著作権侵害の違法性と正しい引用の仕方

先月末から、著作権侵害や不正確な医療情報を掲載していたキュレーションメディアの閉鎖が話題となっています。 こうした問題はもちろん企業のサイトだけでなく、個人ブログを運営するユーザー全てに関係する問題です。 はてなブログでも規約違反のブログへ…

はてなブログ記事編集画面の使い方② 入力補助ツールバー/はてな記法モード

入力補助ツールバー はてなブログの記事編集画面の使い方解説その②です。リンクを貼ったり、見出しをつけたり、記事を書く時に便利な入力補助ツールバーの使い方を図解したいと思います。(この記事ははてなブログを始められたばかりの初心者向けです。既に…

WordPressなら何をしても良いという話ではない はてなブログのnoindex措置

はてなブックマークで時々ホッテントリに上がっていたはてなブログが、突然検索流入が無くなったという事例がありました。 head内にnoindexメタタグを強制的に入れられる措置にあったようです。 どのブログのことか、はてブのホッテントリ見れば分かると思い…

はてなブログを始めたばかりの方に 「記事を書く」編集画面の使い方

公式ヘルプは少し初心者の方には難しいので、はてなブログを始められたばかりの方向けに、はてなブログのヘルプを書いて見ます。 見たままモードとHTML編集画面の違い 見たままモード HTML編集 編集画面サイドバー はてなブログの記事を書くときに役立つ記事…

ブログカスタマイズ・サービスのご案内 テーマ制作・カスタマイズ設置代行

個別にはてなブログカスタマイズやWordPressカスタマイズのご依頼を少しずつ受けるようになりました。 このブログで書いたカスタマイズ記事や制作したテーマに関する範囲ならご質問になるべくコメントで答えますが、その範囲を超え、新たにコーディングが必…

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

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

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

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

ビジネスサイト・ショップ向け無料レスポンシブWordPressテーマ「Hikari」を公開しました

前回制作したWPテーマ「Not so sweet」をバージョンアップし、カスタマイズ機能やエディタ機能を強化したWorsPressテーマを作りました。結構前から完成していたのですが、時間を置いて動作検証してました。WordPressテーマ「Hikari」 DEMOページ: Hikari | …

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

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