今回は「はてなブログで設置した画像を縁取りする方法」を紹介します。 コピペOKの超簡単なCSSを設定するだけで実現できるので、ぜひ試してみてください。 今回の方法では「全ての画像を縁取りする方法」と「特定の画像だけを縁取りする方法」があるので、用途に合わせて実装してみてください。 はじめに 今回紹介するカスタマイズは「はてなブログで設置した画像を黒く縁取る方法」です。 例えば、以下のような画像をブログ内に貼り付けたとしましょう。 このような場合、背景と同化してしまい「どこまでが画像なのかわかりにくい」という問題が発生してしまいますよね。 そう言ったときに使えるのが今回の方法。 このように背景と同化する画像だったとしてもハッキリ表示できます。 簡単なCSSだけで実装できるのでチェックしてみてください。 全ての画像を縁取りする 今回のカスタマイズでは、以下の3通りの方法を紹介します。 では早速

今回は、はてなブログのプロフィール画像を動画にカスタマイズする方法を紹介します。 プロフィール画像を動画にすることで、より目立たせることができますし、GIF画像を使うだけで簡単に実行できるのでぜひ試してみてください。 はじめに 今回紹介するのは「はてなブログのプロフィール画像を動画にして動かす方法」です。 実際に、私が設定しているプロフィール画像がこちら。 こんな感じで、プロフィールを動画にすれば目立ちますよね。 実は、GIF（ジフ）と呼ばれる拡張子の画像を用意するだけで簡単なので、ぜひチェックしてみてください。 今回の方法では、動画が必要になるのであらかじめ用意しておきましょう。 動画をGIFに変換する はてなブログ内で使う前に、撮影した動画をGIFに変換する必要があります。 ネット上で動画をGIF画像に変換できるサイトは、調べれば色々出てくるので、ファイルの拡張子に合ったサイトを探して

みなさんはブログを書く時、マインドマップを活用していますか？ マインドマップに記してから記事を書くことで、全体のバランスを取りやすくなりますし、スムーズに書きやすくなると思っています。 そこで今回は、PCやスマホで使える無料のマインドマップ作成アプリ「SimpleMind」を紹介します。

2017年最終日、いかがお過ごしでしょうか。 今回は、一年のまとめとして「今年買ってよかったものランキング」をしようと思います。 基本的に、過去にレビューした商品のみをランキング形式で順位付けしているので、よければ記事もチェックしてみてください。

GearBestでクーポンを使うためには、購入時にクーポンコードを入力する必要があります。 クーポンが利用できるのは「8GB」モデルのみです。 注意してください。 追記：6GBモデルのクーポンも発行されました。 6GBモデルのクーポン 先日、GearBestにて「OnePlus5T 6GBモデル」にもクーポンが発行されていました。 利用方法は同じなので、コードを確認してください。 「5toneplusdp」 ttone OnePlus5Tは人気すぎて、どんどんクーポン情報が更新されています。 いつまでこのクーポンが使えるかわからない状況なので、お早めに！ 8GBモデルのクーポン GearBestで利用できる「OnePlus5T 8GB」のクーポンコードは以下のようになっています。 「hkoneplus5t」 「hk5toneplus」 「t5plushk」 このようなクーポンコードをGea

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

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

iPhoneを使っていて、マナーモードやサイレントにしていると、なかなか通知に気がつかないことってありますよね。 実はiPhoneには、通知をLEDライトのフラッシュにするという裏技があるので紹介します。 もちろんアプリ不要で設定できるので試してみてください。 はじめに 今回紹介する内容は「iPhoneの通知をLEDライトのフラッシュにする方法」です。 iPhone以外の端末に、同様の機能があるかはわからないので注意してください。 実際にiPhoneに通知が来ると、LEDライトが点滅して知らせてくれます。 LEDライトは、カメラのフラッシュや、懐中電灯などの時に使われるライトのことですね。 この機能を使えば、iPhoneが離れた場所にあっても、きっとメールやLINEの通知に気づくことができるはず。 ただし、逆にフラッシュが強すぎて迷惑になる可能性もあるので注意してくださいね。 では早速設定

と、ここまで会話形式でコンテンツとして作成してみました。 いかがでしょう。 これまで、文字ベースで記事を書いている人は、より読みやすいコンテンツとして記事を作成できるのではないでしょうか。 より簡単に書けるようにした 会話形式の吹き出しだけであれば、過去に紹介したコードでも実装できていたんです。 「会話形式の吹き出しを記事内で使う」で紹介したコードがこちら。 <div class="person-right"> <img src="https://cdn1.www.st-hatena.com/users/cl/clrmemory/profile.gif?1491644025"> <p>今日は会話形式のコンテンツを作成してみますよ！</p> </div> <div class="person-left"> <img src="https://cdn-ak.f.st-hatena.com/im

実際に計測して見たところ 撮影の都合上、多少の誤差はあるものの、公式ページに載っている大きさで間違いないと思います。 横幅： 奥行き： キーボード置き： 天板奥行き： 天板横幅： 心血管疾患って？ 先ほども出てきた「心血管疾患」とはなんでしょう。 私は初めて聞いたのですが、生活習慣病の方に多い病気で最悪の場合は死に至る危険性もあり、65歳以上の女性の死亡原因1位だそうです。 また、ガンと同じように、目立った体調不良などがないまま進行するらしく、そのような病気は「サイレントキラー」とも呼ばれているみたいです。 もっと簡単に言うと、心臓や血管などの病気のこと。 心筋梗塞や狭心症なども、これに含まれるみたいです。 この心血管疾患に対して有効なのが「生活習慣の改善」。 立ちっぱなしも座りっぱなしもダメで、要は同じ体勢でずっと作業するのがよくないってことなんですよ。 それに対して有効なのが、高さ調節

お問い合わせフォームやメモ系の記事など、読者に通知したくないタイプの記事ってありますよね。 そんな時は、ある公開方法をとることで、はてなブログの読者に通知しないで記事を公開できるので紹介します。

皆さんは、Twitterでブログの集客を行なっていますか？ ブログ拡散用のアカウントを使っている人もいると思います。 そんな人はSocialDogを使えば、自分のTwitterアカウントの自動化・解析が簡単にできるので紹介します。 はじめに 私は、普段使っているアカウントとは別に、 過去記事をツイートするBotとしてアカウントを持っています。 そのようなアカウントを無料で自動化・解析できたら、より効果的にTwitterで集客ができると思いませんか？ 今回紹介するSocialDogは、そんな作業を簡単に実現できるサービスです。 Socialdogに無料登録しよう 先ほども紹介した通り、SocialDogは無料で利用できます。 公式サイトにアクセスして、Twitterと連携させるだけで簡単に登録できます。

早いものでもう9月になるんですね。というわけで、今回は2017年8月のブログ運営報告をしようかと思います。 はじめに 今回の記事は、2017年8月のブログ運営報告です。 はてなブログに移転してから始めたブログ運営報告ですが、早くも3回目になります。つまりはてなブログに移転してから3ヶ月もたったということですね。 今月は、アクセスに関して大きく変化はなかったのですが、とりあえず収益やPV、購読者なんかについて触れていこうと思います。 収益は？ 収益自体に大きな変化はなかったのですが、Amazonアソシエイトの審査に通過したりレビュー依頼をいただいたりと、ブログ全体を通してみると大きな変化がありました。 さて実際の収益です。 アドセンスは、詳しい額を書くと規約違反になっちゃうので、ざっくりと「振込1回分くらい」とだけ言っておきます。 Amazonアソシエイトと、A8.netも少しだけ貼り付けて

技術書や資料など、読みながらPCで作業するタイプの本の場合、本を立てておくのって意外と難しいんですよね。 そのような時にこのacttoブックスタンドがあれば、本を開いた状態で立てておけるので、技術書を見ながらPCで入力するなんてことが簡単にできちゃいます！ 価格も安いのでチェックしてください。 角度調節がすごい たいていのブックスタンドの場合、角度があまり調節できないものが多いんですよね。 私は技術書を読む用にこのacttoブックスタンドを使っているのですが、技術書のようなタイプの本はできる限り自分にあった角度で読み進めていきたいです。 以下の画像のように、本の角度を調節できるので非常に読みやすくなりました。 角度調節は、ほぼ真上から真下まで調節できるので、きっと自分にあった角度で作業できるようになりますよ！ 調節は、画像にある透明の部分をぱちっと外したりして固定します。 扱える本の厚さは

そのような時に、コンテンツが少ない記事や提供レビュー系の記事などでは、アドセンス広告を非表示にした方が良い場合もありますよね。 今回紹介する方法を使えば、記事に「noads」というカテゴリーを設定するだけで、自動で設置したアドセンスやASPなどの広告を非表示にすることができます。 記事にカテゴリーを設定 まずは、アドセンスを非表示にしたい記事に「noads」カテゴリーを設定していきます。 記事の編集画面を表示させたら、右側の「カテゴリー」から「新しいカテゴリー」を選択しましょう。 ここに「noads」という項目を追加してください。 こんな感じになって入ればOKです。 記事を保存（更新）しましょう。 javascriptを記述する 今回の方法は、すでに設置されているアドセンスなどのコードを多少書き換えることで非表示にする記事を判断させます。 例えば、最初の見出し前に広告を表示させた場合は、以

今回は、はてなブログで表示した画像を中央寄せにして、真ん中に表示させる方法を紹介します。 画像の表示方法をちょっと変えるだけで、より目立たせたり見やすくなったりするので使いこなしてみてください。 はじめに 今回紹介する方法を使えば、はてなブログの記事内に設置した画像を中央寄せ（真ん中よせ）に表示させることができます。 だから何？ってなるかもしれませんが、まずはこちらをチェックしてください。 なんとなく左側に寄っていませんか？ こちらはタイトル下に表示させる「アイキャッチ画像」なのですが、サイズはこのまま中央寄せにするとこんな感じになります。 左右の幅が均等になってバランスが取れた感じになりましたね。 今回の記事では、このように画像を中央に寄せる方法を紹介します。 注意点 今回のコードは、「全記事の画像を中央寄せ」にする場合と「特定の画像を中央寄せ」にする方法があります。 どちらの方法を取る

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

今回は、はてなブログの記事を検索結果から除外する【noindex】を、特定の記事だけ追加する方法を紹介します。 他のサイトを調べたところ、記事の最初にコードを記述するというような方法の紹介が結構あったのですがこれは微妙です。 編集すると元に戻ってしまいますからね。 そこで、今回はそれに対応したコードを作成してみました。 はじめに 今回紹介する方法は、はてなブログで書いた特定の記事に【noindex】を追加する方法です。 "はてなブログ noindex" というようなテキストで検索をかけてみると、記事をHTML編集に切り替えてあるコードを直接書き込むというような内容の記事がたくさん表示されたのですが、これだと管理が大変ですし、再編集するとnoindexではなくなってしまいます。 そこで今回は、【カテゴリーを追加してnoindexにする】コードを作成してみました。 そもそもnoindexって？

はてなブログで記事を書いた時、誤って予約投稿の日時を間違えて記事を公開してしまったことはありませんか？ その場合読者への通知も同時に表示されちゃいます。 そこで今回は、一度公開してしまった記事を予約投稿に戻してから再度日時を指定する方法を紹介します。 はじめに 例えば18日の17時に記事を公開したとしましょう。 間違えてその日2つの記事を同じ時間に公開してしまった場合、読者への通知は以下のようになります。 どちらも同じ18時に公開した記事なのに、先にアップされた方の記事が小さくまとめて表示されてしまいました。 これでは読者の方に過去の記事だという印象がついてしまいますよね。 今回紹介する方法を使えば、一度記事が公開されてしまった後からでも予約投稿に戻すことができ、通知からも削除することができます。 予約日時の再設定ではダメ はてなブログでは、一度公開した記事にもう一度予約投稿の日時を設定し

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