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

よなかのはなし

LifeHacks And Hello!Project Blog

サイドバーのタブメニューをインデックス風デザインにするCSS

モバイル端末からのアクセスが増えている昨今、ユーザビリティを考慮してサイドバーにタブメニューを導入するサイトが増えています。今回は、そんなタブメニューをおしゃれにカスタマイズする方法をご紹介!もちろんレスポンシブにも対応済みです。

はてなブログのサイドバーにグリッドデザイン風のタブメニューを設置する

当ブログでも以前から実装しているサイドバーのタブメニュー。今回は、このタブメニューをグリット風デザインにカスタマイズする方法をご紹介!

約5分で元通り!はてなブログProの更新を忘れたときに行う設定を時系列で解説

はてなブログProを契約していたにも関わらず、ある日急に見覚えのないAdSenseが表示され、URLも「hatenablog.jp」に。更には急にアクセス数が一桁に激減、Google AdSenseの収益もまさかの7円!これがはてなブログProの更新を忘れたブロガー(私です)に襲い…

はてなブログのサイドバーに吹き出し風のタブメニューを作るカスタマイズ

最近レスポンシブサイトでよく見かけるタブメニュー。今回はこのタブメニューを吹き出し風にするカスタマイズをご紹介します。

はてなブログの「デザインCSS」でソースコードがハイライトされなくなった理由が判明!

はてなブログは利便性向上のためか最近仕様がコロコロ変わります。数ヶ月前に突如デザインCSSに記述してあるソースコードが黒一色になり、その原因が仕様変更か個人的なミスか分からなかったので、はてなに直接聞いてみました。

【FBシェア数非表示版】はてなブログにレスポンシブ対応のフラットなソーシャルボタンを設置する

先月Facebookの仕様が変わり、記事に設置していたボタンでシェアカウントを取得できなくなりました。

レスポンシブ対応!tableタグを使わずアドセンスを横並びにするカスタマイズ

8月の中旬にGoogleアドセンスの規約が変わり「広告3枚制限」が撤廃されたそうです。そこで記事中に2枚、記事下にダブルレクタングルで2枚広告を配置するカスタマイズを行ってみました。

はてなブログの記事下に使う関連記事プラグイン、結局どれが1番良いの?

はてなブログでは記事下に関連記事を表示させる公式プラグインがないため、表示させたいときはカスタマイズが必要になります。今回は導入してみて感じた主要な関連記事表示プラグインのメリットとデメリットをご紹介。

はてなブログのサイドバーにある記事サムネイルにカウントアイコンをつける方法

はてなブログのサイドバーには最新記事や関連記事を表示させるモジュールが用意されていますが、このサムネイルにカウントアイコンを付けるカスタマイズを行なってみました。

文章を強調したいときにおすすめ!フルCSSで作るレスポンシブ対応の囲み枠

記事を書いていると文章を強調させるために囲み枠を使うことがありますが、CSSでborderを指定するだけじゃちょっと物足りないときもありますよね。今回はそんな時に役立つ囲み枠の作り方をご紹介します。なお、すべてCSSのみで作っておりレスポンシブにも対…

【修正済】はてなブログにレスポンシブ対応のフラットなソーシャルボタンを設置するカスタマイズ

はてなブログに設置されているソーシャルボタンは、分かりやすい反面読み込みが遅く、何よりレスポンシブデザインに対応していないというデメリットがありました。今回はこの2つを解決してくれる超絶シンプルなマテリアル風ソーシャルボタンのカスタマイズ…

はてなブログの関連記事プラグイン「Milliard」で、サムネイルに画像変更が反映されない時の対処法

このブログでは記事下に「Milliard」というプラグインを使用して関連記事を表示させているのですが、投稿時に設定していたアイキャッチ画像を変更しても全く反映されず困っていました。先日、提供元のシスウ株式会社に問い合せし対応して頂いたので、その流…

はてなブログにグラフを表示させる便利なJavaScript、「amCharts」の実装方法

ブログの中でたまにレーダーチャートや棒グラフを使いたいなーというときって結構ありますよね。そんな時は画像よりも「 amCharts」を使い、javascriptで実装するのがおすすめ。修正や管理も簡単ですよ。

ブログをミニマル&シンプルに!洗練されたデザインを作る5つのブログカスタマイズ

今回は当ブログが行ってきた中から「ブログデザインをシンプルにしたい時に使えるベーシックなカスタマイズ」を5つご紹介!すべてレスポンシブデザイン対応なので、よろしければお試しください。

はてなブログにグローバルナビとスマホ用トグルスイッチを設置しレスポンシブ対応させる

このブログは、手軽にワンソースで管理できるようレスポンシブデザインのテンプレートを使用しています。テンプレートにグローバルメニューがなかったので自分で設置し、スマホではトグルメニューに切り替わるようカスタマイズしてみました。

はてなブログでのiTunesStoreアフィリエイト導入方法とレスポンシブに対応させるカスタマイズ

今月、iTunesのアフィリエイトプログラムをブログに導入してみました。

【レスポンシブ】CSSだけで画像に上下中央揃えのキャプションを実装する方法

記事のアイキャッチ画像は、ブログを訪れてくれたユーザーの一番最初に目に入るもの。記事のテーマに合ったセンスの良い画像選びも大事ですが、一目で内容が分かるキャプションを付けておくと、より記事を読んでもらいやすくなります。

はてなブログに「PC・スマートフォンの切り替えボタン」をつけました

私がこのブログに使用しているのは「Blank」というテンプレートで、トレンドを押さえてきっちりとレスポンシブデザインにも対応している。

はてなブログをシンプル&ミニマルデザインに変える9個のカスタマイズ

※この記事は2015年7月時点でのカスタマイズについて書いていますので、現在のデザインとは異なる点もあります。ご了承ください。