はてなブログでは、はてなブログの有料ユーザー(Pro, Business, for Devblog)を対象として、新しく記事本文末尾のデザイン設定(以下 記事本文末尾枠)を利用可能になりました。この設定により、ユーザーが記事本文末尾に自由に要素を置けるようになります。 この枠はより多くの人にブログが読まれるために有益な場所です。この枠の価値と活用方法についてSEOの専門家、辻正浩さん(id:t-w-o)の寄稿で解説します。 SEO専門家の辻正浩です。 私は十数年、はてなブログなどのWebサービスや企業サイトのSEOをサポートをしています。様々なタイプのWebサイトをより多く検索されるための改善を行い続けていますが、記事を中心としたWebサイトの改善で最も重要なことの一つとして優先的に取り組むのは「記事直下動線」です。 記事本文が終わった直後、ソーシャルボタンや関連記事などが表示される前に置
はてなブログをGoogle AdSenseで収益化！審査から広告設置まで詳しく解説【公式！はてなブログでアフィリエイトのすすめ第3回】 - 週刊はてなブログ
はてなブログでは、2019年10月から個人営利利用が解禁*1になり、ブログでアフィリエイトができるようになりました。 そこで、はてなブログ編集部では、「公式！はてなブログでアフィリエイトのすすめ」と題し、はてなブログでのアフィリエイトに必要な前準備やルールを解説しています。 多種多様なアフィリエイト広告サービスがありますが、その中でもお問い合わせが多いのが「Google AdSense（Googleアドセンス）」についてです。 第3回となる今回は、はてなブログにおけるGoogle AdSenseの申請・設置方法について解説します！ そもそもGoogle AdSenseとは？ Google AdSense申請の前にはてなブログでの前準備 Google AdSenseに申請に必須の項目 プライバシーポリシーの設置 固定ページでプライバシーポリシーを作成する（はてなブログPro） サイドバーにプ
「はてなブログ」のアクセス数・PVを増やすWebデザイン「ブログカスタマイズ」方法まとめ - redoブログ
「はてなブログ」のデザインやレイアウトを整えたいと考えている方へ向けて、今まで私が紹介してきたWebデザインの「ブログカスタマイズ集」をまとめました。 ブログのサイトの見た目は「ユーザーの滞在率」や「直帰率」などにも影響し、SEOの観点からもとても大切です。 「デザインCSS」と「HTML」を制する者がサイトレイアウトを制します。色や配置、形、文字など工夫次第で色々な設定ができ、コードの内容がわかってくると楽しいものです。 今回ご紹介するカスタマイズ方法はすべて無料で実装可能なカスタマイズです。中でも厳選して、「HTML」「CSS」のプログラミングコードを使用するものを中心にまとめています。 私は大学院時代にはプログラミングで「Fortran」や「C」などを使っていたので、割と抵抗はない方なのですが、プログラミングに抵抗がある人へ向けて、初心者でもコピペでできるようにコードを紹介しています
はてなブログの見出しにはｈ２がない？ 気づいたのは、ブログを収益化して運営を始めたばかりの頃でした。 当時のわたしには、なんのこっちゃ？？でしたよ。 何度かｈ２という文字は見かけたものの、難し過ぎてスルーしていたのです。 わたしも分からない…と思っている方、分かりやすく説明します！ 今はWordPressを使用しているものの、このサイトははてなブログで運営していました。 今もはてなブログで運営しているサイトもあり、はてな歴は4年目です。 見出し、どうしてつけるの？はてなでブログを書きだしてからの一年間は、見出しの存在さえ知りませんでした。 SEOについて分かっていてブログを始める人のほうが少ないはず。 このブログは収益化のために新しく立ち上げたサイトなので、それなりに勉強して始めた…つもりでした。 ちゃんと見出しもつけるようになって、大きな成長だと思っていたのです。 はてなブログの編集画面
はてなブログのカスタマイズ～デザインのタイトル下・記事上・記事下・ページャ下・フッタが反映する位置は？まとめ - さくさくの日常
こんにちは、さくさくです。 はてなブログのカスタマイズ、やってますか？ 「あの人のブログでみた、あのパーツを追加したい」 「アドセンスに合格したから広告を貼りたい」 「アドセンス広告の位置や種類を変更したい」 そんな時、カスタマイズのヘッダ・記事・サイドバー・フッタ、どこを変更すればいいか迷うことはありませんか。 ページャ下とフッタって、どう違うんでしょうね💧 図で示して、ご説明します。 PC表示画面のカスタマイズ ヘッダ タイトル画像 タイトル下 記事 記事ページをプレビュー ソーシャルパーツ 関連記事 記事上下のカスタマイズ パンくずリスト サイドバー フッタ {}デザインCSS スマートフォン表示画面のカスタマイズ ブログのデザイン設定を確認 テーマがレスポンシブデザイン対応か レスポンシブデザインモードを確認 敢えてPC版とスマホ版別々にカスタマイズ ヘッダ ブログアイコン タイ
はてなブログのテーマ「Minimalism」のカスタマイズまとめ こちらがはてなブログのテーマ「Minimalism」で作成したトップページです。 トップページ おこなったカスタマイズを、早速紹介していきます。 Minimalismのスマホ版で太字が表示されない問題を解決するCSS Minimalismをお使いの方で、スマホで太字が表示されていないことにお悩みの方は、ぜひ参考にしてもらえたら嬉しいです。 意外とスマホで太字が表示されていないことに気付いていない方もいます。 Minimalismのみの現象かと考えていますが、ブログの閲覧ユーザーはほとんどモバイル端末からなので直しておいた方が良いです。 太字のない文章は、単調になり読みづらいので。
【利用規約違反】無料版はてなブログでトップページを記事一覧にする - スキゾイドな「ウサキさん」の思考
「記事修正」はてなサポート窓口から警告あり（申し訳ありませんでした…） はてなブログのトップページの表示を「全文形式」から「一覧形式」にするには、有料のＰｒｏに登録すると出来ます！！ カスタマイズでアーカイブページにリダイレクトさせる方法は「無料版では広告が表示されなくなるので、利用規約違反」になります。 無料版で設定されてる方は元に戻すよう、お願い致します！！ ※有料版ではOKとのことです 本当に申し訳ございませんでした。。 「記事修正」はてなサポート窓口から警告あり（申し訳ありませんでした…） 設定を元に戻す コピペしたコード（一部削除） 利用違反をしないように注意！！ 有料版に移行しようか迷っている方へ 設定を元に戻す 管理画面 → 設定 → 詳細設定 → 検索エンジン最適化 → headに要素を追加 → コピペしたのを削除する コピペしたコード（一部削除） <script type
どうも！フジグチです！ 今回はCappuccinoのデモサイトに設置している、プロフィールカードのカスタマイズを公開いたします。 「近日中に公開する」とデモサイトに書いていたのですが、まさかのテーマ２作目の製作をするという想定外のことが起きて、自分でそう書いていたことも忘れていました。（小声） せっかく公開するのならと、色々なプロフィールカードのパターンを作ったので、お好きなデザインを選んで使ってください。 この記事のカスタマイズの特徴を以下に挙げます。 この記事の特徴 入力フォームでコードを作成できる その場でプレビュー デザインを１０種類から選べる その場でカラーの変更が出来る ワンクリックでデザインの切り替え ワンクリックでコードのコピー このカスタマイズは、はてなブログに関わらずHTMLを入れることが出来るブログサービス（WordPressとか）であれば、お使いいただくことが出来る
はてなブログをスマホで更新しているあなた！こんな悩みはありませんか？ 過去記事を紹介したいけど、ブログカードの埋め込みができない～！ YouTubeの貼り付けってどうやるの？？ そう…はてなブログってスマホからリンクを貼るとみ～んなタイトル名のテキストリンクになっちゃうのよね。 でも少し工夫するだけで、スマホからもきれいなブログカードが埋め込めるんです。 この方法を使えばYouTubeの埋め込みもカンタン！ お気に入りの動画をブログで紹介できちゃうよ。 ■この記事でわかること■ はてなブログにスマホから・・・ ブログカードを埋め込む方法 YouTubeを埋め込む方法 選択したテキストにリンクを埋め込む方法 画像リンクを作成する方法←オマケ はてなブログで貼れるリンクの形式 スマホからリンクを貼る方法（URL・タイトル形式） 埋め込み形式（ブログカード）を表示させる方法 スマホからYouTu
整理収納・ゲーム・プログラミングが好きな40代専業主婦。小学生兄妹と夫の4人家族。 小さなおうちに引っ越して収納が減っちゃった！少しずつ物を減らしているゆるミニマリストでもあります。
【ブログ運営】Googleのおすすめ記事を私ようにカスタマイズする！（ライフハック生活） - greenの日記
こんにちはgreenです。グーグル砲がキタ――(ﾟ∀ﾟ)――!! でも、私のスマートフォンには表示されません。なぜ、私が一番見たい人なのに。 ということで、Googleのおすすめ記事に表示するカテゴリを設定する方法を確認します。私の場合は、「株主優待」と「Google Adsense」の記事がおすすめ記事に表示される設定に変更します。 設定しても、グーグル砲がこなければ、greenの日記はおすすめで見れないよ！ 分かってるよ、「株主優待」と「Google Adsense」の記事が読みたいだけ😅 グーグル砲狙ってるくせして👶 まずは、グーグルさんにGoogleのおすすめ記事の設定方法を確認してます。その後、その手順に従い、設定変更をしたいと思います。 この記事がGoogleのおすすめ記事に表示したいカテゴリがある人の参考になればと思います。 記事の内容は、Googleのおすすめ記事の設定
こんにちは、ミニマリスト主婦のくうかです。 はてなブログの見た目でずーっと気になっていた部分があります。 「記事の幅」です。 はてなブログのデザインテーマ、Minimalismを使用していた頃は気にならなかったのですが、UnderShirtは少々幅が狭いと感じています。 特にスマホから見た時の固定ページの狭さが気になり過ぎて、修正に取り組み、やっと改善できたので記事にしておこうと思います。
はてなブログでブログを運営していて、 ■ワードプレスのブログのようなカスタマイズをしてみたい ■もっと記事を読みやすくしたい ■ブログ内での回遊率を上げたい こんな思いはありませんか？ 私ははてなブログの短所と言われる「カスタマイズに限界がある」を克服すべく、はてなブログで色々なカスタマイズに挑戦してきました。 この記事に書いてあるカスタマイズを上から順番に全てやっていけば、ワードプレスにも負けない見やすくておしゃれなブログが完成しますよ！ 基本はコードをコピペすればOKなので、初心者でも簡単にできます。 「自分でやるのは面倒！」「時間がないので早く済ませたい！」というあなたは記事を読まなくて大丈夫。 ＼こちらからご依頼くだされば設定を代行します／ はてなブログのカスタマイズをお手伝いします 初心者歓迎！カスタマイズより記事の執筆に時間をかけませんか？ ▼この記事を読んでわかること HTM
【改訂版】1クリックで導入できる超見やすいGoogle Analytics画面 配布します【3年ぶり】 - とまじ庵
以前公開させていただいた多大な反響をいただきましたこの記事。 tomag.hatenablog.com すごく高機能なのに逆に「高機能すぎて何をどうしていいかわかない」って人も多いGoogle Analyticsを少しでも見やすくするために「マイレポートの共有」という機能でレイアウトを共有した記事となっております。 おかげさまで1000ブクマを超え、たくさんのみなさまに便利に使っていただいている事をこの場を借りてお礼申し上げます♪ しかしなんだかんだ言って、この記事を書いたのが3年以上前。 あれからネット事情も変わった あの頃いなかったはてなブロガーさんも増えた ということで、3年前の記事から少しだけレイアウトをいじったマイレポートと補足説明を加えたものを【改訂版】として配布いたします。 公開当時からの主な修正点は 流入 DirectにGoogle砲を含む このくらいかな？ 3年前にまだは
【ステマ規制】はてなブログの具体的な広告・PR表示の対応方法【アフィリエイト】 - Simple Life Navi
はてなブログのステマ規制対応 こんにちは、シンプルライフ ナビです。 世間で話題の「ステマ規制」が2023年10月1日からスタート。 アフィリエイト広告を利用している人はステマ規制への対応が必須です。あなたは対応済み？ 👉ステルスマーケティングは景品表示法違反｜消費者庁 ステマ規制の実施まで残り１カ月ですが、対応できているサイトはまだまだ少ない模様。 ただし、ステマ規制への対策が十分にできている企業は少ないものの、企業のステマ規制対策への意識は高い傾向との分析結果が公表されています。 👉ステマ規制に必要な対策ができているのはわずか13.3%！ステマ規制対策に関する企業実態調査結果を発表。 じゃあブロガーはどう対応してるの？？ 話題のこれ、出来るだけ記事に影響なく実装したいよね カテゴリーとかタグで「PR」みたいなの作るとかで回避できんのかな 結局あかんって言われそうだし、ヘッダーにそれ
今回は主にはてなブロガーさん向けのカスタマイズ記事になります。 突然ですが、みなさんはどんなSNSを利用しているでしょうか。 ブログを運営するにあたって、SNSというのはとても大事なツールです。 ブログの更新をお知らせしたり、情報収集に活用してみたり。また自分の記事SNSを通して拡散され、多くの人に読んでもらえることもあります。 また自分のプロフィールにSNSへのリンクや、フォローボタンを設置しておくことで、交流の機会ができたりします。 そこで今回は、ブログのサイドバーに『Twitter』『Instagram』のフォローボタンを簡単に追加する方法をまとめてみました。 SNSフォローボタンの追加方法 四角形のボタン＋アイコン＋テキスト HTML Twitter Instagram はてな読者登録ボタン デザインcss 円形のボタン＋アイコン HTML デザインCSS 色背景ボタン SNSフォ
【簡単コピペCSS】グローバルメニューを設置して、はてなブログをカスタマイズ！【PC・スマホ兼用】 - 30分集中のすゝめ
はてなブログユーザーの皆さん、CSSやHTMLって活用していますか？？ 難しそうなイメージがあって敬遠していた方、もったいないです！ 簡単に、コピペするだけでブログのデザインと機能性をグンと向上させられるものを紹介するので、是非この機会にチャレンジしてみてください！ 今回は、ブログのカテゴリーやトップに飛ぶことのできるグローバルメニューをご紹介します♪ グローバルメニューの表示させ方 これで終了です！ グローバルメニューの表示させ方 サイトのトップに表示されるこれですね！ これを表示させるだけでかなり見栄えと機能性が良くなるので、まだの方は是非追加してみてください♪ HTMLの編集 まずは、以下をコピーしてください。 「飛ばしたいURL」と「タイトル」はそれぞれご自身のブログのものに変更してくださいね！ <ul class="global-nav"> <li><a href="飛ばしたいU
はてなブログ｜アンダーライン（下線）の蛍光ペン風カスタマイズ｜簡単コピペ - Simple Life Navi
こんにちは。シンプルライフ ナビです。 この記事では、ブログの記事に蛍光ペン風のアンダーライン（下線）を引く方法をご紹介します。簡単ですよ！ 好きな色、好きなデザインの下線を作って、あなたのブログにも取り入れてみましょう！ 記事中の「CSSコード」や「HTMLコード」をコピペして（無料版でも）使うこともできます。*1 ブログの記事本文でアンダーライン（下線）を引く方法 はてなブログ標準のアンダーライン（下線） 蛍光ペン風のアンダーライン（下線） 蛍光ペン風のアンダーライン（下線）を使えるように設定する｜コードのコピペ利用もOK ブログ全体に共通の蛍光ペンのアンダーラインを使えるようにする 記事ごとに蛍光ペンのアンダーラインを設定する（CSS不要。超初心者向き） 蛍光ペンの色や太さのカスタマイズや多色展開の方法 蛍光ペンのアンダーラインの色や太さをカスタマイズする方法 アンダーライン（下線）
【はてなブログ】画像をクリックしたら目的のURLにジャンプ出来る画像リンクの作り方×2種類！ - 白い平屋の家を建てました
こんばんは、4つのブログを書いているたよらこです。 このブログのはてなブログから引っ越してWordPressで書いています（2020年4月）が、庭ブログは今もはてなブログで書いています。 はてなブログで3サイトを書いているとき、各ブログから他のブログに入れるドア（＝画像リンク）をつけたいなぁと思いました。 わたしが使った画像リンクを貼るための方法2種類について説明します。 どっちがお勧め？ わたしは①を試してから②を知ったのですが、②のほうが簡単かもしれません。 最初から②に行きたいかたは目次で飛んで下さい。 ①はてなフォトライフを経由した画像URLを使う画像をクリックすることで、目的のURLにジャンプする機能です。 文字をクリックするよりも、ジャンプ先のイメージが持ちやすいのがメリット。そして何だかオシャレ。 サブブログを持っていない方も、自己紹介記事へのリンクなどに使えます。 準備する
【はてなブログ】ブログアイコン、Webフォント一覧（124種類）使い方、表示されない時の対処法 - バンビの初心者ブログ教室
はてなブログで標準で使えるアイコンフォント（Webフォント）とその使い方を紹介します。 ↓↓これぜんぶ！ダウンロードしなくても使えます！！ グローバルメニューや、ブログ中のちょっとしたポイントなどを示したい時にアイコンを使うと目立ちますよね。 ポイントを目立たせたい時 ↓↓ ポイント スマホのボトムメニュー ↓↓（ボトムメニューのCSSはこちら） SNSのシェアボタンなどをつくるのにも使えます！ この記事では、上記のようなWebアイコンをはてなブログの中で使う方法やコピペでできるコード、また上手く表示されない場合の対処法などを紹介しますので、ぜひご参考にしてください。 アイコンは、Font Awesome などを外部から読み込む方法もありますが、はてなブログでは120種類ほどのオリジナルのWEBフォントをデフォルトで読み込んでいます。 これらのフォントであれば、外部から読み込むよりページが
はてなブログで上に戻るボタンを設置し、さらに常時表示のリンクボタンをカスタマイズする方法【iPhone対策済み最新版】 - Simple Life Navi
はてなブログの記事を読んでいると、ページのトップに戻りたい場合がありますよね。 この記事では、記事の途中でページトップに戻るボタン（以下「上に戻る」）を設置する方法をご紹介します😃 画面を少しスクロースすると常時表示される、最新の「上に戻る」ボタンの設置方法と、そのカスタマイズの方法です。 この記事はこんな方に読んでほしい はてなブログユーザーでブログのカスタマイズに関心のある方 はてなブログで「上に戻る」「ページトップに戻る」ボタンを設置したい方 好みのリンク先を指定して、常設のリンクボタンを設定したい方 はてなブログで「上に戻る」（ページのトップに移動）ボタンを設置する方法 はてなブログに「上に戻る」ボタンを設定する方法 上に戻るボタンのHTMLコードの記述場所と記述内容 上に戻るボタンのCSSコードの記述場所と記述内容 はてなブログの上に戻るボタンの色をカスタマイズする方法 ブログ
この記事は「オカン はてな wordpress」で検索すると辿り着けます！ はてなブログのカスマタイズ記事を調べても紹介しているブログのようなデザインにならないのはなぜかしら？ 元はてなブロガーがWordPressブログに引っ越してその記事が上位表示されている可能性が高いよ。 このページでは「現役はてなブロガーが紹介するブログカスタマイズ」を中心に紹介。 繰り返しますが、今もはてなブログを利用していますのでどのカスタマイズもはてなで実現可能です。 教えるのはこんな人 おかぺー(@DemoOkan) この記事をおすすめしたい人 はてなブログでカスタマイズを楽しみたい WordPressが気になっているはてなブロガー はてなを調べているのにWordPressが上位表示されてがっかり はじめに 【問題】はてなのカスタマイズ記事なのにWordPressブログが多い トレンドは大きく分けて二つ トレ
他人のブログを見ている時に、トップページの記事一覧がタイル状に表示されるように設定してあり、「おしゃれでいいなぁ～」と思ったことはありませんか？ 今回はそんな人のために、cssの記述だけで簡単にトップ画面の記事一覧をタイル状に変更する方法をご紹介したいと思います。 コピペで設定できるようにしているため、とても簡単に設定可能です！ 注意 今回の方法は「はてなブログpro」である事が前提となります。 トップ一覧をカードタイプからタイル状に変更する方法 CSSの記述内容 プレビュー スマートフォン表示は通常にしたい場合 CSSの記述内容 CSSが反映されない場合の対処法 最後に トップ一覧をカードタイプからタイル状に変更する方法 まずは、はてなブログの「設定＞詳細設定」の中にあるトップページの表示形式を一覧形式に変更してください。 CSSの記述内容 CSS /*-----------------
はてなブログのサイドバーに設置できる 「注目記事」の一覧に順位を表示してみます。 完成のイメージは下のような形になります。 注目記事の順位表示 CSSの編集 順位を表示するCSS 順位のカウンタ 順位の表示 バッジ型の順位表示にする まとめ CSSの編集 今回設定が必要なのは、CSSのみです。 はてなブログでは、 「管理画面」→「デザイン」→「カスタマイズ」→「デザインCSS」で CSSの編集ができます。 cssの編集 順位を表示するCSS デザインCSSの欄に以下のコードを追記します。 /* ranking */ .entries-access-ranking{ counter-reset: rank 0; } .entries-access-ranking-item:before{ counter-increment: rank 1; content: counter(rank) "
【後編】はてなブログの過去記事のURLを変えたときに、新しいURLに行く仕組み（設定編） - 『７回目の出直し🌻』
無いなら作ろうシリーズ 第1弾 昨日書いた記事は、自分でも長くて読めなかった。 ということで、記事数ドーピング 設置・設定に特化した部分をこの記事として分離しました。 この記事は はてなブログで「404 Not Foundになったときの表示をカスタマイズして、新記事にリダイレクトする仕掛け」をブログに設定する手順の説明です。なんでこんなことをやったかの背景は前編に書いてあります。 この記事の前編はこちらです。 kanaxx.hatenablog.jp さっそく、設定方法を書いていきます。 設定方法 エンジニア経験のない人には、ちょっと大変かもしれません。長い戦いになりますので、ついてきてください。 手順は１～６まであります。 基本的には自己責任ですので、修正する前にバックアップするなど自衛の方法をとってください。 １．プログラムのファイル まず、Javascriptで書かれたファイルを持っ
ブログの記事を読んでいると、サイドバーや記事下のプロフィールがとてもおしゃれで、自分も同じように好みのプロフィールにしてみたいと思うことってありませんか？ 今回は、CSSを使ってプロフィールを自分好みにカスタマイズする方法をご紹介していきたいと思います。 はてなブログでのプロフィール編集のご紹介となりますが、記述する場所さえわかればその他のブログでも応用が利くので是非参考にしてみてください！ 注意今回は、はてなブログPROを使用している人を想定して作成されています。 まだ、「はてなブログPRO」を使用していない人は是非おすすめなので、「はてなブログpro」を検討してみて下さい はてなブログproはこちらから！ ドメイン所得がまだの方で取得に迷っている方は是非こちらの記事も参考にしてみてください！ www.rablifes.com 自分好みにのプロフィール作成方法 画像の準備 HTML記述内
【簡単コピペCSS】スクロールしても着いてくる追尾型メニューで、はてなブログを快適に♪【無料版でもOK】 - 30分集中のすゝめ
今回はCSS第二弾です！ 前回のグローバルメニューはもう設置できましたか？ できていない方はそちらからやってみてください。 focuson30min.hateblo.jp 前回のグローバルメニューは、ヘッダー 部分に表示されるものでした。 でも、記事を読んでいる時にもメニューが追尾してきたら、便利じゃないですか？ 長い記事なんかだと上まで戻るのって大変ですからね。。 今回紹介する「追尾型メニュー」はこちらです！ スクロールしてもついてきます。 今回も前回と同じくらい簡単なので、是非試してみてください♪ HTMLの編集 まずは、以下をコピーしてください。 赤文字には自分のブログの飛ばしたいURLを、青文字には表示したい名前をそれぞれ入れてください！ <ul class="navi-top"> <li><a href="ブログのトップページ URL">ホーム</a></li> <li><a h
はてなブログ公式の『コメントを書くボタン』は、記事の最下部に表示されるため目立ちません。 記事本文⇒執筆者名⇒関連記事⇒SNSボタンのさらに下です😿 これでは、『ぜひお気軽にコメントしてください！』と書いたところで、ほとんどの方がボタンを見つけられないでしょう。 ということで、記事本文の中に『コメントを書くボタン』を設置できないか試してみた所、思いのほか簡単に実現できました。 せっかくですので、その方法をシェアします。 コメントを書くボタンを目次の上に設置した記事 結論：はてなブログの『コメントを書く』ボタンは好きな位置に設置できるはてなブログの『コメントを書く』ボタンは、投稿記事本文中の好きな位置に設置することができます。 方法も非常に簡単で、投稿画面を開いたらHTML編集画面に切り替えて、設置したい場所にコードを一行追加するだけでOKです。 『コメントを書くボタン』のコード<a cl
元来飽きっぽい性格なのになぜか長年続いているこのブログですが、飽きっぽい性格が治った訳ではないので定期的に「デザインを変えたい‥…」という衝動に駆られます。 で。 前回デザイン変更をしたのが2019年の7月。 ringosuki.hateblo.jp ちょこちょこと手入れをしながら過ごしましたが半年ちょっとで飽きちゃった、笑 追記：KENRANには私のスキルでは解決できない表示上の不具合が散見されたため2020年6月17日にKENRANを諦めテーマをUnderShirtに変更しました。 採用したテーマ 今回使用させていただいたのはktrw3200さんによる "絢爛（KENRAN）"。 blog.hatena.ne.jp テーマタイトルは絢爛ですが、基本構造はシンプルで落ち着きがあるので使い易そうと思ったのも採用の理由のひとつ。 トップページがカード形式になっているテーマは今回が初採用ですが
https://www.blackcatcafe2020.info/entry/2020/09/25/190029
See related links to what you are looking for.
はてなブログで記事を書く時に、いつも使う文言ってありますよね？ 僕の場合だと毎回記事の最後に ”最後まで読んでいただきありがとうございます。 よろしければ読者登録よろしくお願いします。” という記事最後にむすび的な文言があります。 また、記事内に差し込んでいるGoogleアドセンスの記事内広告や、読者登録ボタンもその都度HTML編集で書き込んでいるととても面倒くさくて大変です。 そこで今回は、始めからはてなブログに備わっている”定型文の貼り付け”を使って簡単に定型文を作る方法を紹介していきたいと思います。 はてなブログで定型文の作成方法 ステップ１ ステップ２ 定型文の使い方 作成した定型文を編集したい場合 さいごに スポンサーリンク はてなブログで定型文の作成方法 一度作ってしまえば必要な時に何度でも使えるので非常に便利です。 まだ定型文を使ったことが無い方は、是非この機会にやってみてく
フリーデザインソフト「Canva」を使用して、無料でタイトルロゴを作成しました。 Canvaを使えば楽々かんたん！にロゴデザインがつくれます。 Canvaでタイトル文字を作成 ログイン デザイン新規作成 Canvaにロゴマークをアップロード Canvaでタイトルロゴを編集 タイトルロゴファイルを透過型PNG形式に変換 前回は、テーマ「Innocent」をカスタマイズして、メニューの色を変えました。 rubirubi.hateblo.jp ひき続いて、今回はタイトルロゴを自作するのにチャレンジします！ Canvaでタイトル文字を作成 どんなデザインがいいかな・・と悩んでいたところ、こちらでみつけた「ニコモジ＋」がかわいい！と思ったので、これをそのまま活かしたデザインにしてみました！ 丸文字「ニコモジ・プラス」（漢字付きフォント・ver.2）ダウンロード｜丸文字フォント（ニコ文字）配布所 ちな
ヨメレバ・カエレバを可愛いデザインにカスタマイズ！レスポンシブ対応！ - SPARKCLIP - 雑記 WEBLOG
レスポンシブにも対応出来る「ヨメレバ・カエレバ」の可愛いデザイン作りましたー。 沈黙のWebライティングposted with ヨメレバ松尾茂起/上野高史 エムディエヌコーポレーション 2016年11月 楽天ブックス楽天koboAmazonKindle Amazonアソシエイトや楽天、もしもアフィリエイトの商品紹介に「ヨメレバ」や「カエレバ」を利用している方も多いのではないでしょうか？ 今回はその「ヨメレバ」または「カエレバ」のデザインを可愛くカスタマイズできるCSSをご用意いたしました！コピペで簡単に出来ますのでよろしければ使ってみてくださいね。 ヨメレバ・カエレバのデザインをカスタマイズする方法 ヨメレバ・カエレバ側の設定 基本設定 ボタン色の設定 リンク周りの点線を消したい場合の設定 おわりに ヨメレバ・カエレバのデザインをカスタマイズする方法 記事にした場合、こんな感じでデザインさ
【はてなブログMinimalism用】初心者でも簡単！これだけはやっておきたいブログのカスタマイズ５選 - SATOREPO BLOG
※この記事は、はてなブログのユーザー向けの内容です この記事では、初心者向けに「見やすいブログにするために最低限これだけはやっておきたい、はてなブログのカスタマイズ」を解説しています。 おことわり 制作環境 最低限これだけはやっておきたいカスタマイズ 完成図 事前準備 「レスポンシブ」を設定する （Proのみ）「ブログ表示」を「一覧形式」にする (既に書いてある場合)CSSとHTMLのバックアップを取る （１）タイトル下のメニュー（グローバルメニュー）を作る （２）画面下のメニューを作る （３）文字の大きさを変更する （４）目次の文字の大きさを変更する （５）スマホ版で太字が表示されるようにする おわりに「本当に必要最低限のカスタマイズを紹介しました」 このブログについて おことわり この記事の内容は特に断りのない限り2021年4月時点のものです。 制作環境 OS：Windows10 はて
【初心者向け】はてなブログ無料版のカスタマイズまとめ - Free Life Kyoka Blog
私の備忘録も兼ねて、はてなブログ無料版でもできるカスタマイズ方法をまとめました。ブログを始めて2週間（記事投稿現在）の私が、最初の10日間にやったカスタマイズです。いろんなブロガーさんの記事を参考にしましたので、リンクをたくさん貼っています（笑） デザイン変更 記事全体のデザインを変更する プロフィール プロフィールの画像を大きくする プロフィール内容を編集する フォントサイズを変える 記事に蛍光ペン風の線を引く 読了時間を表示する 上に戻る・下に進むボタンを設置する 目次のデザインを変更する モチベーション維持のためにすること twitterと連携する にほんブログ村に登録する にほんブログ村のランキングに参加する アフィリエイトのためにすること グーグルアナリティクスに登録する A8.netに登録する もしもアフィリエイトに登録 楽天、アマゾン、ヤフーショッピングに提携申請 お問い合わ
はてなブログにWebサイトを移植した話【趣味でつくるWebサイト】 - 週刊とっしーぱんち
おはよーございます。 以前こちらの記事で紹介したパスワードを作るWebサイトをはてなブログ内に移植できないかな？と思いたちまして実際にやってみた話です。 はてなブログ上で、簡単なWebサイトを作ってみたい！という方や、ブログ記事に少し動きをつけたい！といった方向けに多少は役立てるかな？と思いまして、移植作業の方法を紹介します。 ひとつ注意点として、はてなブログProの機能を利用していますので、無料版で動かない可能性があります。 まず、前提として今回の移植に使用したサイトの主な要素は以下の通りです。 Bootstrap Vue.js Webサイト本体はGitHubPagesにアップ済み。 これらの要素を踏まえつつ以下のような作業を行いました。 はてなブログに記事を作る BootStrapとVue.jsを設定する。 JSファイルの読み込み追加 表示と動作を確認してみる まとめ はてなブログに記
こんにちは。YoFuです。 今回は『はてなブログ カテゴリーの階層化・サブカテゴリーを作る方法』をお送りします。 記事が増えてきたら困るのが『カテゴリー分け』ではないでしょうか。 カテゴリーの数を増やしすぎると見にくくなる。かといって、一つのカテゴリーに記事を増やしすぎると過去の記事を見てもらえなくなる。カテゴリー分けは意外と難しいものです。 そんな人にオススメなのが、カテゴリーの階層化・サブカテゴリーの作成です。 階層化させることで、カテゴリーがぐっと見やすくなります。 簡単にできるので、試してみてください。以下で手順を解説していきます。 手順1.パンくずリストにチェックを入れる 手順2.ヘッダの設定 手順3.フッタの設定 手順4.カテゴリーの表示設定 手順5.カテゴリーの階層化(サブカテゴリーの設定) あとがき ちなみに、階層化させるとこんな感じになります。 カテゴリーの左側の三角をク
気が向いたのでブログを色々模様替えしました。 テンプレートも変えてみました。 今回選んだのはこちら！ hitsuzi.hatenablog.com 人気ナンバーワンのにしただけじゃんって？ そうなんだけど、せっかくだからもっとシンプルな感じにしたかったので、ワンカラムテンプレートにカスタマイズしてみました。 サイドバーの内容は下部分に表示されます。 書いたコードも出しておくので、使いたい方はコピペしてダッシュボードからデザイン→スパナアイコン（カスタマイズ）→デザインCSS で貼り付けてくださいね。 #content{ padding:0 15px; } #main,#box2{ float:none; width:100%; margin-top:60px; } #box2-inner{ display:flex; flex-wrap:wrap; } #box2-inner > div{
はてなブログでJavaScript/HTMLコードを記述する方法-スマホ対応版 | はてなブログカスタマイズ方法 - IT the Best
はてなブログをカスタマイズするのに必要な作業として、HTMLコードの記述があります。 この作業は特に難しくはありませんが、スマホからはてなブログをカスタマイズする方法は、PCとは違うのでまとめてみました。 PC PCからは、ダッシュボード ＞ 設定 ＞ 詳細設定 ＞ 検索エンジン最適化 ＞ headに要素を追加から記述が可能です。 または、ダッシュボード ＞ デザイン ＞ カスタマイズ(スパナアイコン)のヘッダ、記事、サイドバー、フッタからHTMLコードを記述することができます。 サイドバーからは、 モジュールを追加 ＞ </> HTMLから記述可能です。 スマホ スマホのブラウザからもheadに要素を追加にHTMLコードを記述する手順は同じですが、デザインからHTMLコードを記述するには、PC版表示にする必要があります。 はてなブログのダッシュボードからページ下部のPC版をタップします。
当ブログで使っている「Naked」テーマは、通常右にサイドバーが来ています。 しかし、サイドバーを左に移動させる事も簡単にできます。 今回は、サイドバーを左に移す方法を紹介したいと思います。 デザインCSSに追記する場合 「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」の欄に下記のコードを追記して下さい。 追記後は「変更を保存する」をお忘れなく！ #wrapper { float: right; } #box2 { float: left; } デザインCSSを直接上書きする場合 「Naked」のCSSをimportのリンクではなく、直接全て「デザインCSS」にコピペしている方向けのカスタマイズ方法です。 「デザインCSS」の中の下記のコードを見つけて下さい。 #wrapper { width: 100%; -webkit-box-sizing: border-box
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてなブログの記事本文末尾枠とそのSEO的価値について (寄稿:辻正浩) - はてなブログ開発ブログ
はてなブログ初心者｜見出しのｈ2とは？目次を入れる理由とリライト方法 - 白い平屋の家を建てました
はてなブログのテーマMinimalismカスタマイズまとめ | やさしんぷるデザイン
はてなブログ-プロフィールをおしゃれにカスタマイズするデザイン１０選 - フジブロっ！
【はてなブログリンクの貼り方/スマホ編】ブログカードもYouTubeも埋め込みOK - キラッとはてログ
はてなブログでおすすめピックアップ記事・not foundカスタマイズ | くうかんしんぷるライフ
はてなブログの記事横幅・固定ページ横幅の変更カスタマイズ | くうかんしんぷるライフ
【コピペOK】はてなブログのカスタマイズを初心者にもわかりやすく徹底解説！ - こったんママの育児日記
【ブログカスタマイズ】サイドバーにSNSフォローボタンを追加！インスタ、ツイッターなど - YUUU BroG
現役はてなブログカスタマイズ9選！トレンドはSWELL風デザインとSNS連携？ - オカンTECH
【はてなブログ】記事一覧をCSSの設定だけでタイル表示にする方法 - うさぎ日和
はてなブログで注目記事の順位を表示する方法 - クイックノート
【はてなブログ】プロフィールをCSSを使って自分好みに作成する方法 - うさぎ日和
はてなブログの『コメントを書く』ボタンを任意の場所に設置する方法｜つゆきのこ（露木 啓）
【お知らせ】ブログデザインをKENRANに変更しました - りんごが好きなのでぃす
【はてなブログ】便利な定型文の作成方法 - ちゃちゃの備忘録的なブログ
無料ソフトCanvaで楽々かんたん！タイトルロゴのデザイン作成 - hatebcustom
はてなブログ カテゴリーの階層化・サブカテゴリーを作る方法 - YoFu’s Taravel Blog
はてなブログテンプレート「Minimalism」をワンカラムにカスタマイズ - 377番の独白
【はてなブログ】サイドバーを左に表示させる方法！ - 黒木ノ水岩