はるなぴログ

ブログ・WEBサイト作成技術研究

AdSense広告ユニットを作成して記事下に配置する方法

前回はAdSense自動広告を導入する方法をお伝えしましたが、今回は広告ユニットを作成してはみ出しのないよう気をつけながら記事下に配置する方法について説明します。 はてなブログでの設置を前提に書いていますが、他のブログシステムでも同じような方法でA…

はてなブログProで独自ドメイン取得するときに注意するべきこと

はてなブログProで独自ドメインを取得するときの注意点について備忘録として書いておきます。 はてなブログを無料版からProにした後すぐにお名前.comで独自ドメインを取得しました! ついに自分の土地を持ったという感じです!ドメイン名はhalu7.comです。 …

WindowsユーザーがMac乗り換え後にストレスなく使うコツ

Windows ユーザーがMacに乗り換えすると、どうも勝手が違って苦労するということが多いと思います。 今まで使えていたショートカットが全く使えなかったり、たくさんのアプリを開くとメモリ不足になって動きが遅くなったりと戸惑うこともあります。 そこで今…

AdSense自動広告設定で表示が崩れるときのCSSカスタマイズ

AdSense自動広告を設置した後に表示が崩れる場合のCSSカスタマイズ方法について説明します。 AdSenseに合格したらすぐに広告を張りたいですよね。 でも広告ユニットを作成して配置するのはそれなりに大変です。その点、自動広告なら挿入する場所はAdSenseが…

Florida2アップデート総括と検索順位変動でアクセスが激減した時の対処法

Florida2アップデートから早一か月、検索順位が変動し突然圏外に飛んだ、アクセスが激減したなどブログ界に激震が走りました。 さまざまなブログやサイトを見渡して何が起こったのかを総括し、検索順位を回復するための対処法について考えていきます。 Flori…

はてなブログに外部CSSを当てる方法とそのメリット

はてなブログに外部CSSファイルをリンクする方法のお勧め記事です。 この方法はメリットいっぱいなのに案外知られていないみたいです。ブログのデザインをCSSでカスタマイズする時にとってもラクチンです。 はてなブログでCSSカスタマイズする方法についても…

Dropboxのファイルを共有化してから外部CSSとして直リンクする方法

Dropboxのファイルを共有化してから外部CSSとして直リンクする方法について備忘録として書きます。 無料ブログはじめ様々なブログシステムではCSSを書き換えるのに手間がかかる場合があります。 こういう時はDropboxからCSSファイルを直リンクしてしまうのが…

はてなブログにヘッダー画像を設定する方法で苦労した話(余白、はみ出し)

はてなブログにヘッダー画像を設置しようとしたら思った以上に苦労した経験を備忘録として書いておきます。 何に苦労したかというとヘッダー画像のサイズが合わなかったこと。余白が合わないとかパンくずリストから下にヘッダー画像がはみ出してしまったりと…

はてなブログがGoogleアドセンス審査に落ちる理由を推測

今回の記事ははてなブログがGoogleアドセンスの審査に落ちる理由についての推測です。 今回も過去記事のリライト版です。いったん削除したのですが人気が高いので復活しました。 それだけGoogleアドセンス審査が難化しているのかなと思います。審査に落ちる…

はてなブログProの30日間無料体験を試してみた結果

はてなブログProの30日間無料体験をお試しした時の感想です。 はるなぴは去年2018年6月に、はてなブログPro版の無料体験を申し込みしました。その時の体験談記事が好評なのでリライトして復活しました。 登録費用は2019年2月現在の数字なので今後の消費税ア…

独自ドメイン化のあとGoogleサーチコンソールのインデックスを引き継ぎする方法

独自ドメイン化のあとでGoogleサーチコンソールのインデックスを旧サイトから新サイトに引き継ぎする方法について備忘録として書いておきます。 はてなブログProを独自ドメイン化した後やることのひとつにGoogleサーチコンソールのインデックスを新ドメイン…

お問い合わせフォームの作成と設置方法

お問い合わせフォームの作成と設置方法について備忘録として書いておきます。 Google Adsenseやアフィリエイトをするならお問い合わせフォームは必須ですね。将来のことを考えて早めにお問い合わせフォームを設置するのがお勧めです! Google Formを利用して…

凶と出たGoogleアドセンス対策から一転合格へ!

はるなぴのサイトで実際に起こった出来事を紹介します。 アドセンス対策を行った結果は凶、いや大凶。もうダメ。Googleアドセンスによる収益化は諦めよう。さすがにもう受かる見込みはないだろう。Amazonアソシエイトに申し込もう。 そこまで追い詰められて…

d3-graphvizを使ってブラウザ上にフローチャート図を表示しよう

d3-graphvizを使用してブラウザ上にフローチャート図を表示する方法について説明します。 D3.jsとGraphvizを使用して動的グラフをブラウザで表示してみましょう。 いちいち画像ファイルを出力しなくともDOT言語で記述したグラフをブラウザに表示することがで…

GraphvizをWindowsにインストールしてフローチャート図を書こう!

Graphvizを知っていますか? これを使うとフローチャート図を描くことができます。 おっと今はあまりフローチャート図とは言わず状態遷移図と言ったりするのですね。 Windows10にChocolateyを使ってGraphvizを簡単にインストールしましょう。 Graphvizの使い…

Mathjaxの使い方を覚えて美しい数式表示をしてみよう!

Mathjaxを導入して数式を美しく表示してみましょう。 CDNを利用して簡単にMathjaxを導入する方法についてご紹介します。 またインライン表示、ディスプレイ表示の方法や数式番号を付ける方法についても解説していきます。 はてなブログのMarkdown記法モード…

【2019年版】クリックされやすいリンク色を極める!

クリックされやすいリンクの色はどんな色でしょうか? 大抵のリンクは青色をしていますが、その青色も調べてみると実にさまざまな種類があることが分かりました。 主だった検索エンジンやブログサービスなどの青色リンクの色を比較して独自テーマ制作の参考…

Chrome拡張機能で是非お勧めしたいもの10選

Chromeブラウザの拡張機能を使っていますか? とても便利でお勧めしたいChrome拡張を紹介します。 Web開発する場合にお役立ちのものやSEO対策用など10個の拡張機能をリストアップしてみました。 はてなブログを運用する方に便利なものも最後にご紹介します!…

秀丸マクロのrunexを使ってPandocでマークダウン記法の変換をしよう!

秀丸エディタをインストールしていますか? 秀丸マクロではrunex文を使って外部コマンドを実行することができます。これは超便利! 前回の記事で紹介したPandocを秀丸マクロに組み込み、マークダウン記法で書いているブログ記事を簡単にHTMLファイルに変換す…

Pandocをインストールしてマークダウン記法を自分好みに変換しよう!

前回の記事では、はてなブログでのマークダウン記法の書き方について説明しました。 今回はPandocというソフトウェアをWindows10にインストールします。 更にPandocのオプション設定によりマークダウン記法を自分好みに変換する方法について説明します。 Pan…

はてなブログをマークダウン記法で書く方法

はてなブログをマークダウン記法で書く方法を網羅的に調べます。 どのようなHTMLタグに変換されているのかをきちんと調べてテーマ制作の参考にしようと思います。 更に、ツールボックスを使った場合に挿入される内容などもこの機会に調べておきます。 はてな…

Macは本当に使いにくい?MacとWindows使い勝手比較第二弾

Macは使いにくいという記事が溢れています。 特にWindowsからMacに乗り換えた方の使いずらいという記事が目立ちます。 前回の記事で使い勝手を比較した際に、これは単なる「慣れの問題」と書きました。 しかし深く考えてみるとそこには単に慣れの問題にとど…

ウィンドウズPCとMacどちらを選ぶべきかを比較してみる

今回はウィンドウズとMacの比較を行います。 どちらを選ぶべきでしょうか? ウィンドウズPCだけを使ってきた方、Macだけを使ってきた方はお互い違うPCはどうなのか興味があるのではないかと思います。 はるなぴはウィンドウズPCとMac両方使ってきましたので…

DockerをWindows10HomeにインストールしてCentOS7環境を導入しよう!

DockerをWindows10Homeにインストールしましょう。 Chocolateyを使ってdocker-toolboxをインストールすればとても簡単です。 更にCentOS7のdockerイメージを導入してみましょう。これでDockerの勉強も簡単にできますね。 Windows10にDockerをインストールす…

VirtualboxとVagrantをWindows10にインストールしてCentOS7環境を構築しよう!

Windows10環境にVirtualboxとVagrantをインストールして仮想化環境を作りましょう。 Chocolateyを使うと簡単に構築できます。 更にVagrantにCentOS7のBoxを追加してCentos7環境を作りましょう。これでWindows10にCentOS7環境があっという間にできあがります…

curlをWindows10にインストールしてウェブサイトをスクレイピングしよう!

curlを使うと何がいいのか? ウェブサイトのHTMLファイルをコマンドひとつで簡単にゲットできるようになります。 これをウェブスクレイピングと呼びます。 CurlをWindows10にインストールしてウェブサイトをスクレイピングしましょう! Linuxを使用している…

CSSだけでtableを見やすく表示するカスタマイズ方法

CSSだけを使ってtableを見やすく表示するカスタマイズ方法を備忘録として書いておきます。 スマホ表示もレスポンシブ対応を含めて考えていきます。 tableを見やすくするためにテーブルセルに枠線をつけます。さらにヘッダ領域に背景色をつけ、何を比較してい…

オリジナルテーマ制作のためにCSS開発環境を整える

オリジナルテーマを制作するにあたり、まずCSSの開発環境を整えます。 はてなブログでのテーマ制作とはすなわちイコールCSSの開発だからです。 今回はNode.jsを使ってCSSの開発環境を整備していきますので、その手順を備忘録として記録しておきます。 Node.j…

はてなブログテーマを比較してみる

はてなブログでオリジナルテーマを作成するにあたり、はてなブログの既存テーマを調べて比較してみます。 テーマには公式テーマとオリジナルテーマがありますが、テーマストアから人気順に10テーマずつピックアップして比較します。 人気テーマは更に詳細に…

アイコン(アバター)の作り方を考える

今回はアイコンの作り方について考えてみます。 ブログでもそうですがツイッターなどのSNSではアイコンはとても重要です。企業のロゴと同じで、見る人に真っ先に認知されるところだからです。 企業がロゴを使ってブランド価値を高めるのと同じように、個人ブ…