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

よなかのはなし

http://www.hiroseyonaka.com/

ブログ

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

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

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

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

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

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

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

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

最も収益が高いのは?Google AdSenseの配置を10パターン検証してみる

最近、Google AdSenseを導入して色々試行錯誤するのが楽しくなってきました。配置換えやユニットの見直しをして数値が上がったり下がったりするのを見るのはこう、アリの巣観察みたいで探究心をそそられますよね……。

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

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

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

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

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

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

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

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

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

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

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

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

ブログでモーニング娘。への愛を1年間叫び続けると道重さゆみが憑依する

このブログを開設し、そろそろ1年。開設当初はライフハック系の記事を中心に書いていたので文体も「である調」を使って書かれた、いわゆる調子ぶっこいている記事が多く、たまに読み返すとあっ!やめて!なんか意識高い!とその上から目線具合にいたたまれ…

SEOに強く検索流入が増えるブログ記事タイトルのつけ方

ページ単位で読まれるブログは、回遊率を上げるために記事下に関連記事を挿入している人がほとんどだと思います。でも、どれだけ関連記事を表示させても肝心のタイトルで訪問者の興味を引けなければ効果なし。ブログで読まれやすい記事タイトルのつけ方とは?

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

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

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

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

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

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

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

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

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

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

集客効果も抜群!1秒でユーザーを惹きつけるオシャレなブログアイキャッチ画像の作り方

ブログでは、文章と同じくらい重要な役割を持つアイキャッチ。今回はそんなアイキャッチ画像のトレンドや、制作の参考になるサイトをご紹介していきたいと思います。

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

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

「ブログに書くネタがない」ときに使えそうな5つの方法

ブロガーの中には、頻繁に「ネタがない!」とか「書けない!」と呟いている人達がいる。ネタの枯渇は、ブログを続ける上では対多数のブロガーがいつかはぶち当たる問題だ。書けないときはブログを休んでもいいと思うが「書きたいという情熱はあるけど書けな…

ミニマルなブログを作るとき、配色とレイアウトが参考になるWEBサイト

ブログをシンプル・ミニマルなデザインにしたいと思ったときに、レイアウトや配色が参考になりそうなWEBサイトをまとめてみた。より具体的にインスピレーション出来るように、「ブログ」コンテンツがあるWEBサイトについては、ブログページの画像を掲載して…

ブログが続かない人はこう書け!三日坊主・ネタ切れにならない「箇条書きと記録」の提案

「何のためにブログを書いているの?」と聞かれて、即答できる人は少ないだろう。 とくになんとなくブログを始めてなんとなく続けているだけの人は、大抵1か月も経たないうちに書くネタが尽きて更新を止めてしまうことがほとんどだ。ではブログを長続きさせ…

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

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

アクセスアップを狙おう!魅力的なキャッチコピー作成に役立つ3つのルール

キャッチコピーを作るとき、覚えておきたい3つのルール。

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

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