こんにちは、サクです。 今日は、はてなブログで使われているテーマを調べる方法をご紹介します。 はてなブログのテーマとは テーマを調べる方法 「このブログのテーマを見る」から調べる ページのソースからテーマを調べる テーマを使っていない場合もある まとめ はてなブログのテーマとは どんなブログを作ろうと思っても まずは、ブログを作成したら基本的に テーマというものを決めなければなりません。 テーマとはそのブログのデザインを決めるもので どのテーマを選ぶかでブログのイメージが全く違ってきます。 色々なはてなブログを読み漁っていると このブログのデザイン綺麗で読みやすい！ テーマは何を使っているんだろう。 と思うことも多々ありますよね。 今日はそんな方のために はてなブログで使われているテーマを調べる方法を2種類ご紹介します。 テーマを調べる方法 「このブログのテーマを見る」から調べる では、ま

最近は「ネタ切れ」で他の方の記事を見る事が増えたのですが・・・ はてなブログのデフォルト設定のままで記事を書いている方が意外に多く「もったいないなぁ・・・」と思う事が多いので少し書いてみました。 設定は「PC版」の方でやる事が多いので・・・ スマホのみでやっている私にはスクリーンショットを付ける事が難しく文字だけの説明になってしまい分かりづらいでしょうけど・・・(^^; 参考になるでしょうか？ ※スマホから自分のブログを見るとデザインが違う人もいます。その原因の説明もあります。 【 目 次 】 デザイン設定画面で設定する項目 「パンくずリスト」の表示 「関連記事」の表示 サイドバーの表示項目の設定 「サムネイル画像」の表示 「カテゴリー」の表示 「グループ」と「リンク」 注 意 事 項 記事の編集中に設定する項目 「続きを読む」の設定 「目次」の設定 まとめ レスポンシブデザイン対応 デザ

はてなブログのデザインテーマ 【Brooklyn】に更新日を表示するカスタマイズコードを「元CAバンビ」さんと「ACC-DNTST」さんのコードを組み合わせて作ってみました。 【 特 徴 】 jQueryを使用してsitemap_index.xmlから更新日の取得をしない 自分のブログのサイトマップを指定するコードの手直し不要 FontAwesome ( 外部フォント ) を使わない もっと簡単に言うと 『コードをそのまま1ヶ所にコピペするだけでOK』 と言う事です。 ※【Brooklyn】 以外のデザインテーマをお使いの方が利用したい場合の「手っ取り早いコードの手直し方法」は『コメント欄』の方に書いてあります(^^; 【 目 次 】 更新日を表示したい 更新日表示の記事検索 カスタマイズコードの違い カスタマイズコードの合体 更新日表示コード 更新日表示・アイコン版 更新日表示・アイコン

↑デザインセンス０、いや「マイナス50」のブログサポート６０の石黒でも、CANVAでこんなキレイなアイキャッチ画像を作ることができました。 「はてなブログのキレイなアイキャッチ画像が作れない。」 「はてなブログの『ヘッダー画像』を作ってもううにもお金がかかる。」 「画像作成とかって難しそう。。。」 こんなことで困っていませんか。 CANVAを使えば、はてなブログのアイキャッチ画像とヘッダー画像の問題の解決ができます。 CANVAは、無料でとても簡単です。 2021年2月に、はてなブログ内でCANVAの機能が使えるようになりました。 「はてなブログでCANVAをもっと昔から使っていればよかった。」と後悔しています。 CANVAは、プロが作ったようなアイキャッチ画像も作れます。 わたしは、アイキャッチ画像に手を抜いていました。 「だって、めんどくさくいんだもん！」 そんな過去の自分に、喝をいれ

記事の種類 はてなブログの使い方、はてなブログの書き方 SEO対策 関係あり SXO対策 関係あり 難しさ 超かんたん 重要さ 重要 ※こちらの記事は次のような方に対して書きました°˖☆◝(⁰▿⁰)◜☆˖° はてなブログの続きを読むができないので困っている はてなブログの続きを読むを設定したい はてなブログを上手に使いたい はてなブログの続きを読むを設置したのに、記事を分割できなくて困る方は多いみたいです。 実は、ぴっぴ（@hiyoko_no_pippi）もそんな一人でした💦 ところがピッピてアイコンを押すだけでトップページの記事を分割表示できるんですよ。 そのような訳で今回は、続きを読むの使い方を紹介します。 内容は、図解を見るだけで分かるようにしました。 はてなブログの続きを読むの使い方が分からなくて、あちこち検索する時間のない方にオススメです。 ひとつお願いがあります。 記事を読ん

こんにちは 今回ははてなブログでの目次の作り方です こういうのですね！ 僕は最初目次の作り方が分からなくて、調べてみても上手くできなくて、僕の理解力がなかったのかな？仕組みを理解するのに1時間以上かかってしまいました でも、仕組みを理解してしまえば、なんでこんなのに1時間以上苦しめられてたんだろうって思っちゃうぐらい簡単でした！ こんな人が僕以外にもいるかもしれないのでその人たちに向けて書いていきます！ 僕はみたまま編集をしているので みたまま編集で説明させていただきます。 目次 手順１　いつも通り記事を描く 手順２　目次の項目にしたい文章を選び見出しにする 手順３　目次のアイコンをクリックする（[:contents]と入力する） 簡単説明 手順１　いつも通り記事を描く まず、いつも通りブログに書きたい文章を書きます！ みたまま編集で書くとこんな感じですよね この文章は説明のために適当に書

適用しているデザインテーマは Minimalism 。 これからBrooklynへ変更予定。 いつものことながら、先人たちお知恵をお借りしてもすぐには表示されず、あとで原因調査、と思っていたらいつのまにか表示されてる！！！ 「記事の管理」から「記事を見る」と反映されない。 URLを直接入力して確認するとちゃんと反映されている。 サイトマップの登録 参考にしたサイト FontAwesome JQuery 動きの定義 [更新日] 取得【時刻を消す】 デザイン定義 [更新日] 表示 追記：サイトマップを読み込めませんでした サイトマップの登録 カスタマイズの前に、サイトマップが必要。 サイトマップの登録は次の２つサイトを参照。 www.future-nova.com www.tkd-wanderer.com サイトマップ名には 'sitemap.xml' 説と 'sitemap_index.xm

どうも！フジグチです！ つい先日テーマの乗換えをお手伝いする時に、ヒアリングした印象から【Brooklyn】をおススメしました。 はてなブログのテーマでも常にトップを争っているテーマであり、2016年から使用され約4万インストールもされている実績もあるので、安心しておススメできるテーマとして提案しました。 実際にサイトにインストールして、デザインの確認をしてみると･･･ 「えっ!？めっちゃデザイン崩れてるんですけどっっっ！！！」 ということに気付き、修正方法を検索してみたりデモサイトに情報が載ってないか確認してみましたが、見つからなかったので自分で修正しました。 現状、このコードを入れて修正しないとBrooklynはデザイン崩れが起きています。 デザイン崩れの該当箇所 デザイン崩れの検証 デザイン崩れを修正するCSS テーマで使用出来るグローバルナビゲーションを使っている場合 まとめ デザ

大すぎる画像を使うとブログの表示速度が遅くなるってホント？ 本当です。小さすぎる画像は見づらいし、必要以上に大きな画像はブログが重くなりますよ。画像は最適なサイズのものを使いましょう。 最適な画像サイズってどのくらい？ あなたのブログの横幅にピッタリハマるサイズがいいですね。だから、最適なサイズは人によって違うのよ。 ブログの横幅の測り方なんてわからない〜！ 画像サイズをどうやって変えればいいのかわからない〜！ どちらもとても簡単です。この記事でわかりやすく説明しますね。 ■この記事でわかること■ あなたのブログに最適な画像サイズの測り方 はてなフォトライフにアップロードされる画像サイズ 画像サイズの変更の仕方 この記事を読んであなたもブログの画像サイズを最適化してね！ ブログに最適な画像サイズ ブログの横幅の測り方 はてなフォトライフの画像サイズ はてなフォトのデフォルトは800px は

記事の種類 はてなブログの使い方、はてなブログの書き方 SEO対策 関係あり SXO対策 やや関係あり 難しさ 超かんたん 重要さ 超重要 次のような方にオススメ！ はてなブログの引用を使いたい はてなブログの引用の使い方を知りたい はてなブログの引用て、どんな機能？ ぴっぴ（@hiyoko_no_pippi）も、はてなブログの引用の使い方が全然わかりませんでした💦 そんなぴっぴもはてなブログの引用を使えるようになり、今では自他共に認める「はてなブログ使い」になりました。 そのような訳で今回は、はてなブログの引用の使い方について紹介します。 引用機能を使うと、次のようなメリットを期待できますよ！ 引用機能に期待できること トラブル回避 リンクの増加 重複コンテンツの回避 こんなメリットを期待できるので、今回の記事は清く正しくブログ運営をしたい方や少しでも検索流入を増やしたい方はにオススメ

「はてなブログで報酬得る」ための情報を、初心者向けに７ステップでまとめました。「はてなブログの初心者の始め方」～「はてなブログの商品紹介のやり方」まで学べる構成になっています。はてなブログ初心者の方が、収入を得るための「やることの全体像」を把握しておくと成長も早いです。やることが明確になるからです。はてなブログで稼ぐには、はてなブログを使いこなすことと具体的な商品紹介のやり方を学ぶ必要があります。この記事では、2014年からはてなブログを始めて、ブログで生活ができるようになったノウハウをまとめて... 【初心者必見】はてなブログ２つの書き方 はてなブログの具体的な使い方を知りたい方は、以下の内容は飛ばしてください。 はてなブログ初心者の方は２つの書き方からどちらかを選ぶ はてなブログ初心者の方の書き方以下２つの書き方から、どちらかを選ぶと書きやすいです。 書きやすいことから書く 検索キーワ

2021年9月1日更新 はてなブログには、初期設定するところがたくさんあります。 どこを変更したらいいかわからないですよね? はてなブログをやり始めたばかり方であればなおさらです。 この記事では、はてなブログのおすすめの初期設定について「画像」と「長編動画」と「ショート動画」で分かりやすく解説しています。 今回は、はてなブログ初心者のかたのために、「初期設定は、このおすすめだけやっておけば大丈夫！」というものを厳選してお伝えします。 きちんとおすすめの初期設定をするだけで、アクセスがめちゃくちゃ上がります。 読者の流出も減ります。 このおすすめの初期設定をやっておかないと損です。 そして、はてなブログで稼ぎたいかた向けに以下２つのおすすめツールの設定の解説動画を撮りました。 Googleアナリティクスの登録と設定 Googleサーチコンソールの登録とサイトマップの送信 ２つ合わせても１０分

はてなブログにGoogle Search Console(グーグルサーチコンソール)を導入する方法を画像付きで紹介します。 グーグルサーチコンソールにブログを登録 はてなブログにHTMLタグを貼る サイトマップを送信する 検出されたURLがゼロになったら グーグルサーチコンソールにブログを登録 Google Search Console ↑上のリンクから、サーチコンソールのトップページに飛び「今すぐ開始」をクリック。 右の「URLプレフィックス」をクリック選択してください。 URL(アドレス)入力欄に、自分のブログのURLを入力して「続行」をクリックします。 次にブログの所有権の確認をします。 赤枠の「HTMLタグ」をクリックしてください。 ↑画像の赤線部分(モザイク処理してある部分)をコピーします。 content="XXXXX" "～"内のXXXXX部分(英数字の文字列)だけを全てコピ

こんにちはkeiです。 ブログデザインを変更したら元に戻せなくなったって経験ないですか？ 私は、設定でチェック入れてるのにフォローボタンが表示されない、アーカイブにツリーが表示されない等々、様々なトラブルが発生し？？？になりました。 結局、最後は同じデザインテーマのブログを追加で作成し元の構文等を参照しながら、直しました。 私のように大変な目に合わないためにテストブログを作ってメインブログ丸ごとコピー（複製）した非公開ブログ作ろうって話です。 テストブログをつくろう！「手順の流れ」 テストブログを勧める理由 非公開で新しいブログ「テストブログの作り方」 デザインテーマのインストール メインブログの複製を作成する エクスポート（バックアップ）のやり方 インポートのやり方 バックアップとして再度新しいファイルをインポートする場合 デザインカスタマイズ、各設定を復元しよう 新しいブログでカスタマ

サーチコンソールにはてなブログを登録したら 「ページのインデックス登録の問題が検出されました」「 見つかりませんでした（404）」 と言うメールが「Google Search Console Team」から届きました・・・(^^; 「blog_user」と「blog_sp_footer_rectangle」と言うページでした。 ※はてなブログの公式サイトマップ情報が記事の中にあります。 私と同じ超初心者の方の所にも同じメールが届いて慌てる事があるかもしれませんので分かる範囲で情報をまとめて記事にしてみました。 「根本的な原因の解決策」ではなく「集められた情報」と「対処法」になってしまいますが(^^; ※同様のメールが届いた方やこの件に詳しい方は情報をお寄せ下さい。 【 目 次 】 インデックス登録の問題 サーチコンソールに登録 ページのインデックス登録の問題が検出されました ページのインデ

「pythonとtkinterでグラフィック・アート」のページで初めてpythonのスクリプトを掲載しました。その時に使わせて貰った便利なサイトを紹介します。 WEBページにソースコード（プログラムやHTML、CSS等）を単純にページに貼り付けると予期しない結果になります。その原因はブラウザがそのページのHTMLとCSSを解釈するときに、貼り付けられたソースの中身まで解釈しようとすることから起きます。 なので、ソースの中でブラウザに解釈されないように幾つかの文字について別の表現に置き換える必要が有ります。このように置き換えることをエスケープ処理と言います。 該当する文字と置き換え文字列の例を挙げますと <　　&lt; >　　&gt; "　　&quot; &　　&amp;　等があります。 またHTMLの連続した半角空白は1つの半角空白に置き換えられて表示されますので、半角空白でレイアウトして

ブログカスタマイズは、公開しているものの基本的に自分用メモとして運用しているのですが、今回は「月の剣」様からの依頼による記事です。 適用デザインテーマは Brooklyn です。 j2b3.hatenablog.com 私のブログは、サイトマップから更新日情報を取得して表示していますが、この記事はサイトマップを参照しないバージョンです。 account-it-dentist.hatenablog.com ご依頼内容 カスタマイズ前提 デザイン定義 [更新日] の表示 ご依頼内容 元CAバンビさんが公表している「sitemap.xmlを使用せずに更新日を表示する方法」をBrooklyn対応にしてほしい、というものです。 その記事はこちらになります。 www.bambi.pro そのため、以下に記述するコードのオリジナルはこちらであり、私のオリジナルではありません。 カスタマイズ前提 このカス

最終更新日を追加するコードはこちら↓ コードに関してのお願い 簡単にコード解説 CSS JavaScript このブログについて ↓↓ はてなブログに標準の機能としてこちらが搭載されました！ （2023-08-01より） はてなブログに最終更新日を追加する機能がないので、以前からjQueryやJavaScriptを使ったやり方をいろ〜んな方が色々と説明してくださっています。 ↓↓これね。 様々なコードがあり、私のブログではこれまでは、 →はてなブログの記事の最終更新日を取得 - はしくれエンジニアもどきのメモ こちらの方のコードをアレンジしたものを利用していました。 sitemap.xml から最終更新日を取得してくるというコード。 （↑↓この辺、わからない人は読み飛ばしてOK） ところが、最近自分の「はてなブログ」のソースを見ていて気づいたのですが、AMP対応していなくても <head>

Site will be available soon. Thank you for your patience!