今回は、はてなブログで「トップに自動スクロールするボタン」を設置する方法について紹介します。 このボタンをクリックすることで、ページの一番上までスクロールさせることができます。 記事のボリュームが大きくてスクロールするのが大変な記事でも、簡単にトップへ移動することができるようになるのでチェックしてみてください。 はじめに 今回は、久しぶりに「はてなブログカスタマイズ」の記事です。 内容は「はてなブログでトップにスクロールするボタンを設置する方法」 実際に設置してみるとこんな感じになりました。 こちらのボタンをクリックすることで、記事を読み進めていても「一瞬で1番上まで自動スクロールさせる」ことができちゃいます。 縦長のページに設置しておくことで、ユーザーの利便性がアップするので参考にしてみてください。 jQueryを記述する 今回の処理では「jQuery」を使用しました。 はてなブログでj

今回は、CSSを使って「特定のsrcを持つ画像」だけ見た目を調整する方法を紹介します。 特定のドメインだけ見た目をカスタマイズしたり、任意の文字列が入っていれば調整できました。 WordPressやはてなブログのカスタマイズで活用できるので、ぜひ試してみてください。 はじめに 今回紹介する内容は「特定のsrcを持つ画像だけにCSSを割り当てる方法」です。 HTMLで画像を設置しようとすると、以下のように記述すると思います。 <img src="http://画像のURL.png"> srcで表示したい画像のURLを指定しているのですが、実は、CSSでは「srcに入っている文字列」で条件分岐ができちゃうんです。 同じような方法を使えば「href」などの属性でも条件を作れるので試してみてください。 特定の画像だけに割り当てるCSS では実際に、特定の画像だけで動作するCSSをチェックしていきま

今回は、はてなブログのトップページにアドセンス広告を設置する方法を紹介します。 トップページの下（ページャーの上）にアドセンスを設置することで、トップページを訪れてくれた方の目に止まりやすくなると思いますので参考にしてみてください。 はじめに 今回紹介する方法は、はてなブログにアドセンス広告を設置する方法です。 実際にアドセンスをトップページに表示すると以下のような見た目になりました。 トップページを下にスクロールしていくと、画像のように記事のリストが表示されたページの下にアドセンス広告が表示され、その更に下に【次へ】などのページャが表示されています。 画像の広告はPC表示で確認したレスポンシブ広告ですが、この他にもビッグバナーやダブルレクタングルなんかでも同様の校庭で実装できるので確認してください。 ※今回紹介する方法では、アドセンスの広告取得や審査などについては全く触れませんので、広告

今回は「はてなブログにGoogle タグマネージャ」を導入する方法を紹介します。 Googleタグマネージャを使うことで、どこまでスクロールされたかや、どんなリンクがクリックされたのかなどを記録できるようになるので、ぜひ導入してみてください。 はじめに 今回紹介するのは「はてなブログにGoogle タグマネージャを導入する方法」です。 Googleアナリティクスと同じように、用意されたコードをコピペするだけで実装できるので試してみてください。 ではまず、Google タグマネージャに登録していきましょう。 Google タグマネージャに登録 以下のリンクから「Google タグマネージャ」にアクセスしてください。 タグマネージャ - アナリティクスのタグ管理 | Google タグマネージャ（GTM） – Google 「無料登録」というボタンがあるのでクリックすると、Googleアカウン

こんにちはクリアメモリです。 今回は、はてなブログで「選択範囲に蛍光ペンを使ったように目立たせる」CSSの使い方を紹介します。 目立たせたいテキストをわかりやすくできますし、記事にメリハリをつけられるようになるので、ぜひカスタマイズしてみてください。 はじめに 今回紹介する内容は「はてなブログのテキストを蛍光ペンのように目立たせる」方法です。 蛍光ペンを適用させると「こんな感じ」のテキストになります。 cssを設定しておけば、1クリックで適用できるようになるので簡単です。 目立たせたいテキストがあるときに使ってみてください。 cssを調整する 先にCSSからチェックしましょう。 あとで、カスタマイズに関する注意点もあるので、必ずチェックしてください。 i, em { background: linear-gradient(transparent 60%,#fff36c 0); font-s

みなさんは、アドセンスの「関連コンテンツ」を利用していますか？ 一定の基準を超えたブログのみ利用できる関連コンテンツですが、コードに手を加えることで、表示数や見た目をカスタマイズできるので参考にしてみてください。 はじめに 今回紹介する内容は「アドセンスの関連コンテンツで見た目のカスタマイズをする方法」です。 関連コンテンツは、基準を突破したサイトにしか設置できないので注意してください。 関連コンテンツの見た目をカスタマイズすることで、以下のようなテキストの関連コンテンツにすることもできちゃいます。 他にも列や行の数もカスタマイズできるので、よりサイトデザインに合った関連コンテンツになると思います。 規約は大丈夫なの？ 基本的に、改変NGなアドセンスですが、関連コンテンツの見た目に関しては「改変OK」なんです。 Googleヘルプにも表記されていました。 この記事で説明されている例は、Ad

はてなブログにTwitterのタイムラインを表示させることで、ブログに訪れた方がフォロワーになってくれる機会も増えます。 そこで今回は、はてなブログのサイドバーにTwitterウィジェットを設置する方法を紹介します。 はじめに 今回紹介する内容は「はてなブログにTwitterのタイムラインを設置する方法」です。 実際に設置できると、以下のようになります。 色やサイズなどは調整できます。 では早速、Twitterのタイムラインを表示するための「ウィジェット」を作成していきましょう。 Twitterウィジェットを作成 まず、Twitterにアクセスします。 自分のページ（h ttps://twitter.com/User_ID）を表示してください。 自分のTwitterアイコンをクリックし、表示された項目の中から「設定とプライバシー」を選択しましょう。 ページが切り替わりますので、その中から今

今回は、はてなブログのリスト（箇条書き）につく点「・」を自分の好きな形にカスタマイズする方法と一部カスタマイズ例を紹介します。 リストをより目立たせることができるので、ぜひ試してみてください。 これがリストです。 ついでにリストの良いところも合わせて紹介しておきました。 デフォルトの状態だと、リストの点は「・」になっていますよね。 この点をカスタマイズすることで、「三角形」「四角形」「ダイヤ」「ー」「数字」などにもできるので、ぜひ参考にしてみてください。 ではさっそくcssをみていきましょう。 比較的簡単なものから順番に紹介していきます。 四角形 まずは、リストの点を四角形にするcssです。 以下のコードを、はてなブログの「デザインCSS」の中に追加してください。 .entry-content ul>li { list-style-type: square; } たったこれだけで、箇条書き

サイトをカスタマイズしている時「©（コピーライト）」や「▼（逆三角）」などを使うことがあると思います。 このような記号はHTML特殊文字と呼ばれており、対応したコードを入力することで自動的に書き換えられているんです。 そこで今回は、HTML特殊文字の記号コードをまとめて紹介します。 はじめに 今回紹介するのは「HTML特殊文字」についてです。 フッターに「©サイトタイトル」のように表記したい時、この記号をどのように入力すれば良いかわかりますか？ HTMLの記号コードを入力することで、自動的に変換してくれます。 マークダウンでブログを書くときにも使えるので、ぜひ覚えてみてください。 ©（コピーライト） まずは、HTML特殊文字「コピーライト」です。 HTMLの中に以下のように記述してください。 &copy; 表示 コード

はじめに 今回紹介する内容は 「cssでテキストだけを強調（ハイライト）して色を変更する方法」 です。 実際にテキストの強調色を設定すると、サイト内のテキストをドラッグした時に、以下のような色を設定できるようになります。 それぞれの要素にハイライト時の色を設定しました。 背景の強調色 先日の記事で、背景の強調色を変更する方法を紹介しています。 似たような方法で実装できるので、こちらもぜひ試してみてください。 では、さっそくテキストの強調色を調整しましょう。 使うのはselection！ 使用するcssは、ハイライトの背景色を設定した時と同様「selection」を使用します。 ベースはこちら！ p::selection { } ここに、テキストの色を設定するためのコードを記述していくわけですね。 では実際のコードを見ていきましょう。 テキストの強調色を変更する 今回は、テキストがハイライト

先日、当ブログに初めてのレビュー依頼がきました。 そこで、実際に受けてみてどんな感じだったのか、なんで依頼をいただけたのかについて書いていきます。 はじめに 先日、メールをチェックしていたところ、見慣れないアドレスからメールが届いていました。 それが「Googleフォーム」 ついに届いたんですよ！当サイトクリアメモリにもレビュー依頼が。 なんでうちのサイトにレビュー依頼が来たんでしょうか。 実は、特に難しいことは何もしていないんですよね。 強いて言うならば、お問い合わせフォームを設置しておいたってくらいです。 お問い合わせフォームは大事 依頼者側からすると、いろんな記事を読んでいて このサイトと、自社商品がマッチしてる！ って思っても、レビューを依頼するためのリンクが見当たらなかったら連絡できませんよね。 仮にTwitterのリンクが貼ってあったとしても、 DMが送れない状態だったり、相手

先日、Googleアドセンスの収益をチェックしていたところ、普段に比べて圧倒的に収益がアップしていました。 その前日との差（％）が、初めてアドセンスアプリの上限に到達し、カンストしたので記事にしようと思います。 はじめに 今回の記事は、いつもとちょっと変わった感じの記事になります。 皆さんは「Googleアドセンス」の収益をチェックできる無料アプリ、使っていますか？ ブログ内にアドセンスを貼り付けている方は、Googleのアドセンスアプリを使っている人も多いんじゃないでしょうか。 私は、基本的にこのアプリで毎日の収益をチェックしています。 それほどの額になっているわけではないですが、収益チェック自体が日課みたいになっています。 そんな中、先日、いつものように収益をチェックしていると、前日との収益比がカンスト（上限いっぱい）になっていました。 そんなこと初めてだったので、思わず記事を書いちゃ

はじめに 今回紹介する方法を使えば、aタグを使って設置したリンクの範囲をボタン全体にできます。 まずは以下をチェックしてみてください。 例えば、このようなボックスを用意してボタンとして利用する場合、テキストをクリックするのではなくボックスをクリックしても動作させたいですよね。 ですがこの状態では、クリックできる範囲はリンクのみです。

はじめに 皆さんはアドセンス広告設置していますか？私はPCページ・スマホページ共にアドセンスを設置しているのですが、スマホページのアドセンスだけ「中央寄せ」で表示しています。 簡単なコードを追加するだけで実装できるのでチェックしてみてください。 実際の動作 では実際に中央寄せにしたアドセンスを確認しましょう。 まずは、通常の左側に寄ったアドセンスをみてください。 表示自体に問題はないのですが、左側によってしまっていて左右のバランスがおかしいですよね。 サイトによっては「このレイアウトでいいよ！」って方もいると思いますが、私のブログでは中央寄せでアドセンスを表示させています。 こんな感じになりました。 いかがでしょうか。 左右の余白が均等になってバランスの取れたレイアウトになっていませんか？ 実はこのようなカスタマイズは、すでに設定してあるアドセンスコードを維持しつつ簡単に実装できてしまうん

はてなブログなどのブログサービスを使って記事を書く時、記事の一番最初にアイキャッチ画像（サムネイル）を表示していませんか？ 今回は、そんな時に使える便利なコードを紹介します。 呼び出し部分などを除けば実質1行だけで表示させられるためコピペだけで実装できますし、記事の見た目もより良くなるのでぜひ試してみてください。 はじめに 今回紹介するコードは、はてなブログで書いた記事の一番最初の行に「アイキャッチ画像（サムネイル）」を表示させる方法です。 冒頭でも紹介した通り、実際に動作させるためのコードは一行だけで実装できるので、プログラミングがわからない方でも安心してカスタマイズできるかと思います。 また、WordPressからはてなブログに移行してきた方など記事数が多い場合にオススメです。 ではまず最初にこちらを確認してください。 こんな感じで、アイキャッチに設定した画像を記事の一番最初に自動で表

今回は、はてなブログのタイトル下に「この記事は約何分何秒で読む事ができます」というような読了時間を表示させる方法です。 記事のコンテンツの目安を設置できるので試してみてください。 はじめに 今回紹介するカスタマイズは「はてなブログに読了時間を設置する方法」です。 読了時間というのは、記事をどのくらいで読む事ができるかの目安を表示させるもので【この記事は1分14秒で読む事ができます】というような表示になります。 こんな感じの読了時間を計算し、記事のタイトル下に自動で挿入できました。 値の設定 後々登場するコードで「何文字読んだら1分」みたいな計算をするのですが、この時に何文字にするかは自由に設定できます。 例えば値を400にした場合、400文字の記事の読了時間は1分になり、800文字の記事は2分で読む事ができるとなります。 人間は、1分間にだいたい「400〜600」文字を読めるそうです。 私

はじめに 前回は、はてなブログでcssを使った見出しデザインをカスタマイズする準備が整いました。 テーマによる注意点なども合わせて紹介しているので、前回の記事をまだ確認していない方は確認してみてください。 【はてなブログ】cssの見出しカスタマイズ例50種＋α！準備編 【はてなブログ】css飲み出しカスタマイズ例50種＋α！シンプルデザイン編 【はてなブログ】cssの見出しカスタマイズ例50種＋α！上級デザイン編 では、早速見出しをカスタマイズしていきましょう。 今回の記事では、シンプルなデザインを紹介します。 枠のみ まずは、枠だけの見出しです。 .entry-content h2{ border: 1px solid black; padding: 10px; } このようなコードを追加してください。 見出しのテキストを真ん中に表示 先ほどのシンプルな見出しで、見出しのテキストを真ん中