いろいろブログカスタマイズメモ

はてなブログのカスタマイズ、書き方などのメモ、チートシートです。/※本サイトはアフィリエイトプログラムによる収益を得ています。ページ内のリンクがアフィリエイトリンクの場合があります。

めちゃ便利機能「リアルタイムプレビュー」に気づいた

これ。今まで気づいてませんでしたいつの間に増えたんだ… 画面二分割してプレビュー表示してくれる 画像やツイッター埋め込みなんかもリアルタイムで出てくれる 商品リンクなどの埋め込みはレンダリングしてくれないっぽい すぐ確認できて便利 「いつの間に…

記事のプレビュー表示が突然おかしくなった場合はもしかしたら文字数

結論:文字数。 はてなブログの記事には文字数上限があるっぽい そのときの症状1: 「Amazon商品紹介」の画像がでなくなる その時の症状2: 記事が最後まで表示されない 対応は文字数を減らす 意外とすぐ越えてしまう文字数 リンクを短縮文字に置き換える 項目…

記事編集画面に「定型文」が保存して使い回せるめっちゃ便利機能が追加されてた!

staff.hatenablog.com めっちゃ! 便利! 特定の文章を保存して貼り付けることができる 言ってしまえばコピーした内容をブログごとに保存しておいてペーストできるような感じです。 ブログ編集画面の右メニューの「+」アイコンを開くと、下の方に「定型文貼…

はてなブログの「タグ」ってなんだ? って思ったけど個人的にはまだあんまり使えないみたい

去年の11月くらいに出てきていた「タグ」って機能、そういえばと思って確認してみました。 staff.hatenablog.com d.hatena.ne.jp ただ現時点ではまだ思ったような機能になってなかったみたい。 「はてなキーワード」の名前が変わっただけ 現時点ではどうも、…

公開した記事の「編集」をするためのブックマーク作ってみました

やっほうみなさん。唐突ですがはてなブログで公開した記事を修正するときに「編集」ボタン出すのってめんどくさくないですか? タイトルの当たりをふらふらマウスオーバーしてて出たり出なかったりしていませんか? ぼくはめんどくさいです。 なので開いてい…

Markdownで参照リンクを設定する / URLリンクを定義して使い回す方法

Markdownでは普通にURLでリンクを貼る以外に、URLを別に定義して整理することができます。 参照リンクを使うと、記事中に長いURLを埋め込まなくてもよくなったり、同じURLを何度もコピペしなくても良くなったりします。 普通のURLリンク 参照リンクを作成す…

ヨメレバでブログパーツが作成されなかった時の対処法

なんかずっとこの画面で止まってしまったときの話です。 最初はネットワークの都合で読み込めてない(割とよくある)だけかなと思っていたのですが、一向に終わらないので調べてみたら違いました。 ebookjapanの読み込みが引っかかっていた Ctrl+Shift+iでChro…

独自ドメインのはてなブログのサイトをHTTPからHTTPSにしてみましたときのメモ

はてなブログで独自ドメインのサイトもHTTPS対応してたのでウチも変更してみました。 設定変更で修了 ボタンを押す前に選択されてるブログを確認しよう 今後作成するブログは自動的にHTTPSとなる HTTPのURLからは301リダイレクトしてくれている 証明書はLet'…

記事のURLを変更したときなどに新しい記事URLへリダイレクトする方法

URLを間違えてつけてしまったり、変更したいときなどはあると思います。 そういうときにただカスタムURLを変更すると、旧URLはリンク切れとなってしまうので困ります。 そこで、せめて旧URLにきたものを転送したい場合の方法をメモしておきます。 headのJava…

Markdownで画像にリンクを貼る

Markdownで書いているときに、挿入した画像にリンクを貼る方法です。 ブログに画像を貼り付けるとはてなフォトライフ経由のfotolife記法になる 画像URLを拾ってHTTP記法を使う ブログに画像を貼り付けるとはてなフォトライフ経由のfotolife記法になる はてな…

Amazonアソシエイトの画像リンクを自動的にセンタリングする

Amazonアソシエイトの画像をそのまま貼り付けると左寄せになってしまいます。 それを自動的にセンタリングするCSSを作ってみました。 imgタグをブロック要素にしてセンタリングする 解除する場合 imgタグをブロック要素にしてセンタリングする 画像リンクを…

Amazonアソシエイトのバナーを自動的にセンタリングする

Amazonアソシエイトのバナーを貼り付けるときに、そのままだと左に寄っているのを自動的にセンタリングするCSSです。 アソシエイトのiframeを指定してセンタリング センタリングを解除する場合 style属性で指定する ブロック要素で囲う アソシエイトのiframe…

Markdown記法はdivなどのブロック要素内では動作しない

Markdown記法を使用していて、divタグなどで囲うと無効化されてしまいます。どうやらこれはMarkdownの仕様のようです。 Markdownをブロック要素に書いてみる はてな記法は有効 ブロック要素で無効化されるのはMarkdownの仕様 インライン要素の中では使用でき…

ブログでのチェックポイントや関連記事を枠で囲いわかりやすくする

所謂、よく見るこういうものです。 ・チェック例です CSSの修正 適用範囲を広げる Markdownを使用できるようにブロック要素にする 種類を増やす 最終的なCSS 設置 記事で使用する こういったカスタマイズははてな記法やMarkdownが便利 CSSの修正 ベースとな…

はてなブログのMarkdownでコードやスクリプトを表記する

MarkdownでプログラムやHTMLなどのコードやスクリプトを表記する方法です。 「```」(バッククォートの3連続した行」で囲む 「```」(バッククォートの3連続した行」で囲むと、そこがコードの表記とされます。 例えば次のような表記だと、 ``` <html> <head> <title>テストページ</tite> </head> <body></body>…

シンプルなメニューバーをつけてみる

各カテゴリへのシンプルなメニューバーをつけてみました。 こういうやつです。 ブラウザのサイズがメニューより小さくなるとスクロールに切り替わります。(主にスマホ向け) 設置方法 ゆきひーさんの以下のスクリプトを使用させていただきました。ありがとう…

Googleさんから「Chrome のセキュリティ警告を表示します」と通知が届いた

じわじわとHTTPS化へのプレッシャーが高まっています。 テキスト入力フィールドがあるHTTPのサイトは警告対象となるみたい? Google Search Consoleさんからこんなお手紙が届いていました。 2017 年 10 月より、ユーザーが Chrome(バージョン 62)で HTTP …

(Proのみ) ブログのトップページを一覧形式にする

staff.hatenablog.com より。ブログのトップページを一覧形式にできるようになったみたいです。 だいぶ待ち望まれていた機能ですね。そしてProのみ。 一覧表示とはつまり「月別アーカイブ」 具体的にどういった表示かといいますと、「月別アーカイブ」で見え…

目次を折りたたんで表示する

はてなブログの目次を折りたたんで表示する方法です。 …といっても、すでにだいぶ広まっているものなので自分メモみたいなリンク。 目次を折りたたむ はてなブログでは「[:contents]」と記述することで、目次を自動生成してくれる機能があります。 しかし項…

はてなブログの画像、Amazon商品画像を自動的にセンタリングする方法

はてなブログで使用した画像を自動的にセンタリングする方法です。 画像が左に寄ってしまっているのはずっと気になっていて、またCSSでなんとかできるだろうなあと漠然と考えていたのですが結局放置してしまっていましたけれど、いろいろ見直すなかでやって…

「見たままモード」で書いた記事を「はてな記法」や「Markdown」に変更する方法

「見たままモード」から「はてな記法」や「Markdown」へ、またはその逆など、はてなブログの編集モードを後から変更するための方法です。 といってもコンバート (自動変換) をすることはできません。別の記事を新しい編集モードで書いて、URLを入れ替える方…

WordPressでもOK! 自分のサイトのブクマでAmazonアフィリエイトが紹介できるらしい「はてなブックマークプラス」を使ってみた

ちょっと最近書いた記事がちょっと人気になってちょっと浮かれて眺めていたところ、ふと気がついたこのリンク。 えっそうなの? はてなブックマークプラス…そういうのもあるのか… というわけで、申し込んでみることにしました。 気になるお値段は初月無料、…

はてなブログのAMPでAdSenseを表示させてみた

はてなブログはAMPにしてもAdSenseが表示できないという話がずっとあったのですが、ふとしたところから実は表示できるのでは、という話があったので対応してみました。 AdSenseのAMP対応 参考にした記事は以下の二つ。 www.weblog-life.net 30cm.xyz あと、G…

はてなブログ以外のブログに書いたエントリでタイトルなどを変更したことを「はてなブックマーク」に反映させたいときに設定すること

watto.hatenablog.com こちらの記事を読んで。ブックマークされた記事のタイトルとかは、向こうにキャッシュされているから変更されないんだよなあって思っていたのですがこれは気づかなかった。 で、私ははてなブログ以外のブログも運営していて、そちらの…

カテゴリ格差、あるいは「読書ブログは儲からない」

AdSenseのトップページが変わってドメインごとの収益が表示されるようになったわけで表示されてた今月分(10月分)を見てみたらば。 ドメイン 見積もり PV クリック数 scriptlife.hacca.jp ¥4,000 1.77万 125 tsundoku-diary.scriptlife.jp ¥1,700 1.98万 11…

Markdownのコード配色を変更する

はてなブログのMarkdown記法で使っているソースコードの配色を変えます。 デフォルトでは背景黒のものなのですけど、個人的には白が好みなのです。 CSSの変更をする 例えば変更前はJavaだとこんな感じ。 こちらのサイトを参考にしてCSSを変更していきます。 …

アプリ広告バナーをランダム表示するスクリプトを作ってみました

Zucksアフィリエイトなど、アプリの広告をサイトに掲載するときに使用するためのスクリプトです。 設定した内容からランダムでひとつ選んで表示するだけの簡単なものではありますが。 内容 設置方法 スクリプトの設置 バナーを表示させるための要素を設置 表…

(Proのみ) はてなブログでAMP対応してみた結果、一時的に下がったもののすぐ戻りましたという話

まずはこちらのグラフをご覧下さい。これはうちのAdSense全体の16日から22日のグラフです(数字は割愛) AMP適用したのが15日です。その後16日は上向いたものの、やはり下がっています。 下降するのは一時的? ですがその後、2日くらい下降した状態なのが続い…

(Proのみ) はてなブログでAMP対応する

AMPというページ表示の高速化について s-supporter.hatenablog.jp という記事を見かけまして、ちょっと試してみようと思いました。 AMPとは Accelerated Mobile Pages (AMP) とは、文字通りモバイル向けの高速ページ表示のプロジェクトです。 https://www.am…

Markdownでテーブルを表現する方法

データなどを纏めていると必要になってくるのがテーブルの表記。 Markdownでの簡易表記 一部をセンタリングしたい 複雑なテーブル構成 Markdownでの簡易表記 簡単なテーブル構成であれば、Markdownの表記がわかりやすい。 これは簡単で、「|」で区切るだけ。…