サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
Switch 2
bloglab.naenote.net
ここ最近、ブログ執筆にDynalistを使っているんですが、目が飛び出るくらい便利です。 特にMarkdownとGutenbergを組み合わせて使うと、手戻りなくサクサク記事が書けます。 そこで本記事では、Dynalis […]
こんにちは、NAEです。 はてなブログのカスタマイズには欠かせないjQuery。カスタマイズの際にこんなコードをコピペしたこと、覚えていますか？ <script src="https://cdn.blog.st-hatena.com/js/vendor/jquery/jquery.min.js?version=1.9.1"></script> これjQueryというライブラリを読み込む処理なんですが、先に読み込ませないとカスタマイズがうまく動かないという理由でヘッダーなどわりと上の方に配置している方も多いはず。 しかしこの配置、ページの表示速度を考えるとあまりよろしくありません。PageSpeed Insightsでも警告メッセージが出ます。 そこで、jQueryのライブラリ読み込みやjQueryに依存するカスタマイズ用のコードをまるごとフッターに寄せることで、表示速度の高速化とPageS
こんにちは、NAEです。 ブログのカスタマイズ、楽しいですよね。 デザイン変えたり新しい機能を入れたり。自分のブログが進化するのはワクワクします。 ところで、カスタマイズの際に公開しているブログ（本番ブログ）を直接いじっていませんか？ Yesの方、危ないので今すぐやめてください。 ブログのカスタマイズについて回る、元に戻せない問題 ブログをカスタマイズしていてついやってしまうのがこういうミス。 本番ブログを直接カスタマイズ プレビュー画面で確認 見た目も動作もOKっぽいので変更内容反映 いざスマホやPCで実物確認・・・なんか変だ！戻さなきゃ！ やべ、元のってどんなんだっけ・・・戻せない・・・ いわゆる元に戻せない問題です。ぼくも何回も痛い目を見ました。 カスタマイズ前のバックアップは大事！だけど不便 よく言われる対策はバックアップを取っておけですよね。 カスタマイズ内容（HTMLやCSS）
あなたのWordPressログインIDは基本、全世界にバレてます。 実験してみましょう。以下やってみてください。 ログインIDをバラす手順 あなたのブログのトップページを開く URLの最後に「/?author=1」と入れてEnter 遷移先のURLの末尾を見る ↑こんな感じで、URLの末尾にログインIDが出ていると思います。 別にログインもなにもしていないのに、ログインIDがURLに出てしまうんです。 複数人で共同運営の場合、1を別の数字に変えると、他の人のログインIDも出てきます。 実はこれ、よく知られたWordPressの仕様です。全世界のハッカーももちろん把握済。 つまりあなたのログインIDは、全世界のハッカーがすぐに知れる状態にあります。 ログインページのURLなんてすぐバレるので、ようは当てずっぽうでもパスワードを当てられたら管理画面に入られ、乗っ取られてしまいます。 セキュリテ
Cocoonのバージョン1.0.6から、Amazonの商品リンクショートコード機能が追加されました。 とてもステキな機能ですが、カエレバのブックマークレット的に使えればもっと便利だなあと。 なので、作りました。Cocoonをお使いの方はぜひどうぞ。 ※2018/08/14更新：Music、Videoに対応しました ※2020/03/15更新：Music、VideoのAmazon側仕様変更に対応しました
これからWordPressでブログを始めようとしている方に向けて、このブログで使っている サーバー ドメイン WordPressテーマ プラグイン をまとめて紹介します。 特にWordPressテーマとプラグインの部分は、 これで必要十分（最強） 相性による不具合なし であることを確認済なので、そのままコピって使ってもらってもOKです。 サーバー：エックスサーバー エックスサーバーを使っています。 サーバーとは サーバーは、要するにブログの置き場所です。 ブログはデータの塊です。どこかに保存しないといけません。 その保存先がサーバーです。 サーバ選びがなぜ大事か サーバの移転（引っ越し）がかなり面倒だからです。 ブログはデータの塊でしょ？ 入れ物であるサーバーを変えるだけなら、コップの水を別のコップに移すのと変わらないじゃないの？ ……と思われるかもしれません。 でもブログのデータの中には
AMP化したページのリンククリックをGoogle Tag Manager（GTM）でトラッキングしようとしても、通常はクリックされたリンクテキストは計測できません。 Web用のコンテナとは違い、AMPコンテナには組み込み変数{{ClickText}}が存在しないためです。 とはいえリンクテキストはA/Bテストに必須なデータ。取れないと困ります。 なので、取れるようにしてみました。環境はAMP化したWordPress、参考にしたのは下記フォーラムの情報です。 参考 解決済み: GTMで設定してAMPでクリックイベント計測したい – Google 広告主コミュニティ ※GTMの操作に慣れている前提でお話します AMPページでクリックされたリンクテキストを計測する設定手順 1. GTMのAMPコンテナにAMP変数を追加する 「変数＞ユーザ定義変数」から、AMP変数を追加します。 変数名はなんでも
カテゴリの切り方どうしよう？ タグってどう使えばいいの？ ……とお悩みのブロガーさんに向けて、当ブログのカテゴリ・タグ設計の考え方を共有してみます。 コレが唯一の正解、というわけではないですが、考えの足しにしていただければ幸いです。 カテゴリの切り方 「モノ・サービス」視点で切る 当ブログはガジェットやネットの話題を扱うため、記事の主題は常に「モノ・サービス」です。 そのためカテゴリは「モノ・サービス」視点で整理しています。 たとえば、 スマホ Google Pixel iPhone 格安スマホ アプリ ネット Amazon 楽天 Webサービス ネット接続 のような感じです。 1記事1カテゴリ また、「1記事1メッセージ」の原則にしたがって、1記事につけるのは1カテゴリのみとしています。 たとえば「Amazonでスマホを買った」記事の場合、 Amazonでのお買い物体験のすばらしさを伝え
ブログカスタマイズ後は必ずタグマネで効果測定しています、PDCAマニアのNAEです。 AFFINGER4の後継テーマ「WING」が発表されたので、さっそくAFFINGER5版を導入してみました。 すると、驚きました。 これまで積み重ねてきたテストの結果、「こうすると効果が高い」と立証されたカスタマイズが、ほとんど一発でできるようになっていたんです。 そこで本記事では、AFFINGER5で追加された機能やデザインについて、特に注目すべきポイントをピックアップしてご紹介します。 AFFINGER5を買うか悩まれている方の参考になればと思います。 参考 AFFINGER5（WING） ※本記事では便宜上、WING（AFFINGER5版）を「AFFINGER5」と呼びます おさらい：AFFINGER5とは AFFINGER5は、有名な有料WordPressテーマAFFINGER4の後継にあたるテー
Twitterでフォローしているブロガーさんの多くが、確定申告を紙で提出している模様。 ブロガーはネットで生きる人間なのに、なんでそこだけアナログなのか？ ……とTwitterで無邪気に問いかけたら、各人の事情を教えていただけたので、まとめてみます。 ※ツイート引用、まずかったらご連絡ください！ 理由1. マイナンバーカードを持っていない マイナンバーを通知書のまま放置してたので結局紙ベースでやってしまいました。e-taxできればだいぶ楽ですよね。 — なぎ@ブロガー×研究開発職 (@nagibrno) March 13, 2018 e-taxの前提、マイナンバーカードをそもそも発行してない、というお話。 たしかにマイナンバーカードは マイナンバー通知カードをなくすとネット申請できない（なくても郵送申請は可能） 申請〜受領まで早くて1ヶ月くらいかかる 受取のため、近所の役所まで行く必要があ
結果、12万くらいあった月間PVは6〜8万とだいぶ落ちた一方、収益は当時の1.5〜2倍くらいに増えました。 ［読者の役立つ情報を」の範疇で順調に伸びているのでありがたい限りです。 短文SEO推進 脱PV依存にあわせ、「短文SEO」を推し進めました。 短文SEOはぼくの造語なんですが、サイト全体でミドル〜ビッグワードを取りに行く戦略を指します。 ミニサイトを作るときよく用いられる考え方で、戦術的には次の3つで構成されます。 キーワードの関連情報を論理的に網羅したサイト設計検索意図にピンポイントに刺さる端的な記事読者の疑問を先読みする内部リンク配置 これは、2016〜2017年初頭までブログのアクセスアップに効果的と言われていた「長文SEO」の対局にあるものです。 「長文SEO」とは、「漫画 おすすめ」などのビッグワードを単一記事で取りに行く戦略。上位陣は1記事5〜10万字レベルの超大規模記事
このツールについて 画像とボタンが一緒になっているカエレバ・ヨメレバのHTMLを、画像とボタンに分割します。 作った背景は下記記事を参照ください。 参考 「おすすめ○○選」記事の収益アップにつながるカエレバの貼りかた
2016年2月に「はてなブログ」で開設したこのブログは、2017年2月にWordPressへ移行しました。 今回は、はてなブログからWordPressへの移行を決意するまでのお話です。 初心者にも使いやすく、幅広く機能が備わっており、カスタマイズもしやすかった「はてなブログ」。 しかしカスタマイズすればするほど、WordPressに移行したくなる気持ちがムクムクと盛り上がってきたのでした…… はてなブログカスタマイズの癖と限界 デザインだけでなく、高速化の限界に挑むなど、ぼくはかなり深めのはてなブログのカスタマイズをしてました。 その中でしみじみと感じたのは、はてなブログカスタマイズには変な癖と限界があることでした。 中途半端に専門知識が必要 はてなブログのカスタマイズには、HTML、CSS、JavaScriptなどを使わなければなりません。 クリック一発、チェックボタン一つあればできるレ
WordPressでショートコードの中にショートコードを入れたいとき、ありませんか？ テーマで提供されている囲み用のショートコードの中に、自作のショートコードを使って文章を書きたい、みたいなシチュエーションです。 しかしWordPressでは通常、ショートコード内のショートコードは展開されずそのまま表示されるため、せっかく準備したショートコードを思い通りに使えません。 今回は、そんな問題を解決できる超有能なWordPressプラグインを見つけたので紹介します。
カエレバを使って「おすすめ○○選」記事を書いているブロガーさんたちに質問です。 もしかして、カエレバをそのままベタッと貼りつけていませんか？ それ結構もったいないと思うんです。せっかくの収益を逃しているかもしれません。 そこで今回は、「おすすめ○○選」の収益アップにつながる（かもしれない）カエレバの使い方を紹介します。 もったいない「おすすめ○○選」の構成 「おすすめ○○選」記事の、よくやってしまいがちな構成がこちらです。 見出し（商品名） カエレバ おすすめな理由 次の商品の見出し（以下同） でもこれ、もったいないんです。なぜかというと、読者に優しくないから。 「おすすめ○○選」記事の読者が知りたいのは、「なぜコレがおすすめなのか」ですね。 では「おすすめな理由」を読み終わったあと、次に知りたいのはなんでしょうか。 「商品の詳細情報」「もっと詳しいレビュー」「どこで売っているか」「どうす
ブログカスタマイズ部分のクリック分析のため導入したツール 新たに導入したのはGoogleタグマネージャーです。 ユーザの動きを追跡する地雷（タグ）をブログの各所に設置するためのツールです。 ボタンやメニュー、その他なんでもクリックされたことを追跡できます。 具体的な導入方法をこちらの記事で紹介しています。 Googleタグマネージャーの導入しなければならなかった理由 ユーザのアクセスを分析するツールは数あります。 なぜ今回Googleタグマネージャーを導入しなければならなかったのか。 多くのWebサイトで導入されている多機能な解析ツール、Googleアナリティクスだけではなぜダメなのか。 理由は、Googleアナリティクスだけではデータが足りないから。 Googleアナリティリクスだけだと、カスタマイズの有意性を判断できないんです。 Googleアナリティクスのデフォルトの分析粒度はページ
以下2点、行いました。 特化ブログへの切り替えAFFINGER5（WING）へのテーマ変更 本記事では切り替えた理由と、切り替えた結果をご紹介。 ブログ収益アップの参考にしてください。 きっかけは、運営ミニサイトの輝かしい実績 2017年2月にはてなブログからWordPressへ移行してからお世話になってきた無料テーマ「Simplicity」。 無料とは思えないきめ細やかな機能群と、自分色に染め上げられるカスタマイズの自由さに惚れ、ずっと使い込んできました。 にもかかわらずAFFINGER5へくら替えしたのには理由があります。 ほかで運営中のミニサイトにおける実績です。 例1: 特化型ミニサイトA 2017年2月オープン、記事数およそ70、作ってからほぼ放置。 SNS拡散施策はゼロで、アクセスは100%検索のみ。 がっちりサイト設計を行い、記事別に狙うワードを決め、検索意図に答える形で作っ
2016年12月15日現在、ぼくははてなブログを使っています。 しかし最近WordPressに惹かれており、エックスサーバーの10日のお試し無料プランを利用して海外製を含めテーマをいじくり倒しています。 そんな中わかってきたのが、テーマによってカスタマイズできる範囲がかなり違うということ。デザインはステキ。だけどはてなブログでできるカスタマイズすら簡単にできない……ような、少し残念なテーマもちらほら。 では、はてなブログに慣れきったWordPress初心者にやさしいテーマはどれなんでしょうか？ ついでにSEOに強くてオシャレで無料……というぜいたくな条件で絞り込んだら何が残るのか？ そこで今回は、はてなブログとWordPressにおける「カスタマイズ」や「テーマ」の違いとあわせて、国内・海外テーマ問わず調べまわり、実際にインストールして触って試して「これはいい！」と思ったものを5つ厳選した
こんにちは、なにごとも検証しないと気が済まないNAEです。 ブログのカスタマイズで入れたお便利ボタン、渾身の記事に貼ったアフィリエイトのリンク、記事下に羅列した関連記事のリンク・・・ 実際どれくらい使われてますかね？ こうするといいよ、という耳より情報にのっかって入れてはみたものの、きちんと効果測定せずにほったらかしてませんか？ もしくは、何か効果があったとして、その要因がきちんと分析できていますか？ そのお手伝いをするツールが、Googleタグマネージャーです。 つい最近このブログにも導入し、そのすごさを実感しています。全部数字でわかるってすごいですよ。 そこで今回は、GoogleタグマネージャーとGoogleアナリティクスによるクリックトラッキングの導入方法を紹介したいと思います。 Googleタグマネージャーとは Googleタグマネージャーとは、Webページ上でのユーザの動きを検知
このたび、ブログトップページを全面リニューアルしました。 参考 NaeNote | Life Be Nice And Easy そこで今回は なぜトップページを作ったか？どうやって作ったか？結果、どうなったか？ をご紹介します。 ブログトップページは本当に新着記事一覧でいいのか？ ブログトップといえば通常、新着記事一覧です。 しかし記事一覧だと不便な点があります。 何のブログかわからない、目当ての記事が探しにくい、見栄えに特別感がないの3点です。 何のブログかわからない まず、新着記事の一覧では一体何のブログなのかがパッと見わかりません。 ブログトップページにアクセスすると見えるのは ブログヘッダー（ブログ名）グローバルメニュー記事の一覧サイドバー（PC） です。 特化ブログの場合はブログ名やグローバルメニューからだいたい把握できるでしょう。 しかし雑記ブログは違います。「NaeNote」
ブログパーツの中にはamazon画像へのリンクやもしもアフィリエイトの使う計測用タグ（小さな画像）が含まれています。 これらを呼び出す部分がSSL対応（https化）したのが2016年11月頃。それ以前の記事はSSL未対応（http のまま）のブログパーツを使っている可能性が濃厚です。 仮にブログそのものがSSL対応していたとしても、古いブログパーツが残っていると「完全SSL化されてねーぞこのサイト」と表示されてしまいます。 これではWordPressで独自SSLを使っている意味がありません…… WordPressでSSL対応した人も再確認を！ なので、WordPressでSSLな人は下記記事を参考にダブルチェックをしてみることを強く推奨します。 カエレバ・ヨメレバだけでなくA8.netなど主要なサービスについても言及があります。 参考 はてなブログがSSL化（HTTPS化）するまでに準備
「WordPressに興味あるけど、使い勝手とかイメージしづらい……」 という疑問を解消したければ、実際にWordPressを触ってみるのが一番です。 そこで今回は、WordPressを無料でお試しする方法をまとめて紹介します。 先に結論をお伝えすると、一番のおすすめはエックスサーバーのお試しプログラムを使うこと。 使いやすさ、性能、そして実績も圧倒的。もちろん、このブログもエックスサーバーを使っています。 WordPressには2つの種類がある ひとことでWordPressといっても、「サービス型」と「インストール型」の2種類があります。 1. サービス型 サービス型とは、「はてなブログ」や「アメーバブログ」と同じような、WordPressベースのブログサービスです。 「WordPress.com」というサイト（英語）に登録すると使えます。 参考 WordPress.com: Creat
通常のスマホ版と同様、関連記事と少し広告が表示されていると思います。 カスタマイズの方法 では、具体的なカスタマイズ方法です。 お手元に関連コンテンツユニットの広告コードをご準備ください。 次のような感じになっていると思います。 <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display: block;" data-ad-format="autorelaxed" data-ad-client="ca-pub-XXXXX" data-ad-slot="XXXXX"> </ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); <
WordPressのブログで記事と記事の内部リンク構造を可視化するプラグインを作りましたので公開します。 内部リンクの最適化にお役立てください。 Show Article Mapができること Show Article Mapは、記事本文中に貼ってある内部リンクを解析し、記事および固定ページをノード、リンクをエッジとしたマップを自動生成します。 たとえば当ブログの場合、こんな↓マップが生成されます。 四角いノードは記事、つながり（エッジ）が内部リンク、色はカテゴリを指しています。 少し拡大するとこんなふうに見えます↓。 それぞれのノードに記事のスラッグが入っています。（後述するカスタマイズで記事タイトルに変更可能） 矢印はリンクの方向です。どの記事からどの記事にリンクが張ってあるかがわかります。 ノードはマウスホバーすると記事のタイトルが表示されます。ダブルクリックで当該記事にジャンプ可能で
書いたブログ記事が広まれば自然と出てくるのがネガコメ。 ぼくも先日、人生初のネガコメをいただきました。 しかし思いのほかノーダメージでした。 別にぼく自身ずぶといわけではありません。むしろ打たれ弱い部類だと思います。 にもかかわらず、なぜダメージが少なかったのか。 その理由を考えてみたところ、精神論に頼らない3つの柱に行き着きましたので共有したいと思います。 ポイントは、ブログと記事と自分の関係を明らかにすること、そしてコメントの種別を見極めることです。 自分とブログの関係を明確にすること まずはブログそのものについて。 自分とブログの関係、すなわち自分はどのようなブログを書いているのかが明確であることが一本目の柱です。 何のためにブログを書くか、つまりブログを書く目的は考えることは多いと思います。 一方、どのようなブログを書くか＝ブログそのものの位置づけはあまり突き詰めて考えられていない
ブロガーは誰しも「ブログが書けない病」を経験すると思います。 そんなときに考えたいのが、自分はどんな立場でモノを言っているのかという点です。 これさえ決まれば、どんなネタでもブログは書けます。 今回はもっともシンプルな「ブログネタの料理の仕方」について考えたことを書いていきたいと思います。 ブログが書けない病にかかる理由 「ブログが書けない病」が発症する理由はただ1つ。自縄自縛によってシンプルな本質を見失ってしまうからです。 ブログを書くとなると PVが気になる 収益も気になる 自分のブランディングをしたい 表現力を磨きたい 魅力的なコンテンツにしたい 画像や動画も使いたい SEOを気にしたい デザインをオシャレにしたい その他もろもろ・・・ など、気になることは多いですよね。 ブログは自由なプラットフォームですので、何をどこまでやるかは自分次第。逆に何をどこまでやればいいのか、誰も決めて
こんにちは、NAEです。 はてなブログのカスタマイズでほぼ手つかずな記事一覧（アーカイブ）ページ。 テーマを作る一部の人以外で、記事一覧ページの見た目やカスタマイズについて考えたことのある方はごく一部ではないでしょうか。 そんな記事一覧ページ、実はカスタマイズができます。その代表例として、記事の間にAdSenseの広告をよしなにはさみこむ方法をご紹介したいと思います。 ※ 本番ブログへ反映する前にテストブログで動作確認をお願いします 参考 テスト用ブログを作ろう！はてなブログでカスタマイズを安全に行う方法 はてなブログの記事一覧（アーカイブ）ページとは 記事一覧（アーカイブ）ページとは、URLに「archive」の含まれているページを指します。 たとえば、 全体の記事一覧 /archive カテゴリー内の記事一覧 /archive/category/%E3%83%96%E3%83%AD%E
SNSシェアボタンのコピペコード はてなブログのカスタマイズにおいていじる要素は主に3つです。 必要な外部ファイルの読み込み（Webフォントなど） 表示するものの定義（HTML） その装飾や動きの指定（CSS、Javascript） それぞれのいじり方を順番にご紹介します。 外部ファイルの読み込み 今回は、ボタンに表示する各種SNSマークの元ネタとしてFontAwesomeというWebフォントを利用しています。 なので、まずそのWebフォントを読み込ませます。 コピペコード <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"> コピペ場所 PC版：デザイン → カスタマイズ → ヘッダ → タイトル下 スマホ版（Pro向け）：デザイン → スマ
「役に立つかわからない記事ばかり書いてる雑記ブログだけど読んでくれたら嬉しいな」 ・・・的な自己紹介をしているブロガーさんをときどき見かけるんですが、意味がわかりません。 人に読んでもらう前提で文章を書いているのに「コンナモノデスガ」っていうのはないでしょう。 対面なら美徳とされる謙遜ですが、情報発信をするという文脈では果てしなく無意味だと思います。 個人ブログで謙遜する理由？ おそらく「コンナモノデスガ」系の自己紹介を書いている人は読者の期待値のハードルを下げに行ってるのでしょう。 具体的には、 書いている内容に自信がない（ブログをはじめてすぐ等） 自分に自身がない（自分みたいな人間が書いた文章なんて目に入れてもらえるだけでも等） 現実世界の習慣をブログでもやっている（「つまらないものですが」の精神） 「いい人」に見られたい ネガコメが怖い といったところでしょうか。 ぼくもブログを書き
次のページ
このページを最初にブックマークしてみませんか？
『bloglab.naenote.net』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
