CSSで実装できるシンプルな見出しデザインを21パターンご紹介します。汎用性が高くテイストに縛られず現場ですぐ使えるデザインなのでストックしておくと便利に使えます。あなたの現場でぜひご利用ください。 CSSのみで実装するシンプルな見出しデザイン21パターン蛍光ペンのような線をひいたCSS見出しデザイン HTML<h2 class="heading01">ラインを使ったCSS見出し</h2>CSS.heading01 { display: inline; font-size: 26px; background-image: linear-gradient(rgba(0,0,0,0) 70%, rgb(252,81,133) 70%); }蛍光ペンで線を引いたような見出しデザインです。display: inlineで複数行にも対応させています。 2色を重ねた線とCSS見出しデザイン HTML<
JAJAAAN代表です。このサイトの制作者です。趣味は、最近始めたアウトドア、最近始めた釣り、最近始めた格闘技です。尊敬する人はさかなくん。人生で学んだことは「女は怖い」ご連絡はメールかTwitterでDMください。 メール Twitter SEE MORE 今回はCSSのみで作れる見出しデザインについて100個サンプルを作ってみました。 見出しなどで使えるデザイン例についてどこよりも詳しく（おそらく..）紹介・解説しています。すべてCSSのみで実現しているものになりまります。 コピペしてそのまま使用していただいて構いません。デザイン例によって作成時のポイントや注意点も書いています。 CSSのみで作る見出しについて見出しについて、マークアップで使用されるHTMLタグはh1〜h6になるかと思います。サンプルのHTMLではh2を例にしていますが、hタグである必要はありません。ご自由なHTMLタ
はてなブログで記事を投稿する時のSEO対策まとめです。 ひと手間かけるだけでSEOに強い記事にすることができます。はてなブログは元々SEOが強いです。それでもやらないと損な簡単にできるSEO対策を紹介します。 はてなブログProで強いSEO効果が得られる設定方法についても解説します。 はてなブログの見出しをH2タグから始めるSEO対策 はてなブログの見出しがH3タグから始まる問題 はてなブログの3種類の記法（モード） マークダウン記法の書き方 見出しのデザインをCSSでカスタマイズする方法 キーワードを入れた見出しを書くことによるSEO効果 キーワードを入れた見出しのつけ方 アウトラインプロセッサーで階層構造を考えて書く 秀丸エディタのアウトライン機能の設定方法 目次を設定する 目次を設定するメリット Pandocを用いた目次作成 カスタムURLを設定するSEO対策 カスタムURLのメリッ
こんにちは。いつもブログを見ていただいてありがとうございます！ 今回はブログカスタマイズで、３つの囲み枠についてご紹介させていただきます。 私も使っているはてなブログのリンク用ブログカードを囲むおしゃれな枠になります。 こんな感じです。 参考にさせていただいたのは、サルワカさんのサイトです。 では、早速ご紹介していきます！ ブログカードをよりおしゃれに Font Awesomeのコード デザインCSSに貼るコード HTMLで貼り付けするコード さいごに ブログカードをよりおしゃれに ブログ記事を書いていく中で、自身のブログの過去記事を貼って内部リンクを作ったり、参考にしたブログの外部リンクを貼ったりすることはありませんか？ はてなブログで実装されているブログカードはこんな感じですが meipapa.info ここに、少しの作業を加えるだけでこのような感じになります。 いかがでしょうか？ 普
【はてなブログ】基本のカスタマイズまとめ＊テーマをUnderShirtにしました！ | まとまるデザイン
はてなブログを始めてすぐぶつかったのがカスタマイズの壁。 「難しいことはわからないけど、カスタマイズして自分らしいブログにしたい！」 と思い、いろいろ調べてやってみましたが思い描くようなイメージにはならず……。思い切ってテーマを変えることにしました。 カスタマイズも0からやり直しです。 この記事では、初心者の私ができる範囲で頑張ったカスタマイズ、参考にしたサイトなどをまとめていきます。（ほとんどUnderShirt以外のテーマでも使えるカスタマイズばかり） 記事の内容 テーマの選び方 トップページのカスタマイズ（ヘッダー、フッター、トップ他） 記事内のカスタマイズ（吹き出し、装飾、ボックス他） 定型文の使い方 こんな人におすすめ テーマ選びの仕方がわからない オリジナル性のあるブログにしたい 初心者にもできるカスタマイズをしたい Undershirtのカスタマイズがしたい 当ブログは202
「はてなブログ」でも使える無料デザインツール【Canva】このクオリティ使ってみるしかない！ | ワーキングノート
「Canva」とは そもそも、ボクは普段TOP画像は「illustrator」や「photoshop」で作成していますが、デザインをやっていない人にとってそういうデザインソフトは高く感じるし、ブログだけのためにわざわざデザインソフトを使うことはないと思います。 しかしながら、今回紹介する「Canva」は無料でブラウザ上やスマホアプリで簡単にオシャレなデザインができます。 これがあると誰でもデザイナーっぽいオシャレでカッコいいデザインが作れるという事で人気を集めています。 また、ポスターや名刺、インスタ用の画像など様々なサイズのデザインに対応しているので使い勝手もいいでしょう。 スポンサーリンク 「Canva」の使い方 それではボクも初めて使ってみたので、作りながら「Canva」の使い方を説明してしていきます。 （今回、諸事情でスマホで作ったのでスマホでの説明になります。PCでの利用はこちら
こんにちは、カワルンです。 みなさんは自分のサイトスピードをチェックしていますか？ さまざまなブログでも取り上げられることの多いこの話題。 今日はブログの表示速度を改善するために行った対処方法をまとめます。 ウェブページの表示速度 表示速度が遅いとどうなる？ 読者が離脱する 検索順位が下がる 表示速度を上げるための対処方法 シェアボタンをカスタマイズ はてなブックマークコメントの削除 不要な広告を削除 画像の圧縮・縮小 CSSとJavascriptの整理 モバイル版はよりシンプルに はてなスターの撤去は検討中 修正後のスコア まとめ <スポンサーリンク> ウェブページの表示速度 まずはウェブページが表示されるまでにかかる時間をチェックしてみましょう。 サイト「Page Speed Insights（ページスピードインサイト）」で表示速度を測ることができます。 速度はスコアで表示されます。
こんにちは。今さらながらではありますが、自分にとっての備忘録とはてなブログを始めたばかりの方のために、お問い合わせフォームの作り方を載せておきます。 お問い合わせフォームとは？ Googleフォーム formrun（フォームラン） はてなブログでの設定 リンクを貼る場合 埋め込み型の場合 さいごに お問い合わせフォームとは？ お問い合わせフォームは、読者の方が何か質問をしたい場合に質問を送ることができるブログパーツで、ブログを運営していく上で必要ではありませんが、あった方が良い機能です。 例えばコメント欄やはてなブックマークからでも意見を伝えることはできますが、その場合は他の方に見られてしまいます。 ブログの作者だけに伝えたい内緒の話？なんかは、このお問い合わせフォームが設置されていると読者の方は安心できると思います。 また、自分のメールアドレスをブログに載せてしまうと迷惑メールやいたずら
GPTのEmbeddingを利用してブログの投稿に対する近いものを探し出す - きしだのHatena
OpenAIでGPTを使ったAPIにembeddingというのがあって、これを使うと文章同士の距離がとれるので、近いエントリを取得したり文章から検索したりができるということで、試してみました。 思いのほかちゃんと動きました。おそらく、GPTで一番実用的なんじゃないでしょうか。 GPTで実際に一番出番がありそうなEmbeddingを使った、近いブログをとってきたり検索したりするやつ。 pic.twitter.com/Vzgy57a7ju— きしだൠ(K1S) (@kis) 2023年3月9日 embeddingとは なんか、文章の特徴を表す多次元のベクトルに変換してくれるらしい。 ようわからん。 OpenAIでは1500次元くらいのベクトルに変換します。 そして、このベクトルの距離が近ければ文章の内容も近いやろということで、似たエントリの抽出などができます。 しかし、テキストが要素数1500
【はてなブログ】記事をリライトする3つの方法 2020年8月11日 2020年9月26日 アフィリエイト, Googleアドセンス, ブログ 5view ブログを書く中で「記事をリライトする」という言葉をよく耳にするのではないでしょうか。 リライトとは既存記事の内容を新しく書き換えることです。 読み手にとって、より「読みやすい」「わかりやすい」記事に書き換えることが、SEO効果を高めることになります。 今回は「はてなブログ」での記事のリライト方法についてご紹介します。 大きく分けると3つの方法がありますので、メリット・デメリットも交えながら順を追って説明していきますので、ぜひ最後までご覧下さい。 はてなブログ記事をリライトする3つの方法既存記事を書き換えて更新する1番シンプルなリライト方法です。 【リライト方法】 [はてなブログ管理画面]↓ 記事の管理 ↓ リライトしたい記事の編集を選択
こんにちは。 最近のブログカスタマイズをご紹介していきたいと思います。 今回ご紹介するのはこれ！ 左の日付が記事を書いた日にち、右の日付が記事を更新した日にちになります。 更新とは記事をリライトしたり、カテゴリーを変更したりした日にちのことです。 あったら便利ですよね♪ それでは早速ご紹介していきます。 更新日時をお知らせ！ headに貼るコード Font Awesomeのコード jQuerry のコード 記事下に貼るコード デザインCSSに貼るコード さいごに 更新日時をお知らせ！ 私のブログはこの記事でちょうど６０記事目、まだまだビギナーだと思っています。 それでも以前に書いた記事や内容を更新した方がいい記事については、定期的に見直すようにしています。 そこで、自分の書いた記事がいつ新しい情報に更新されたのかをお知らせする機能があれば便利だなと思い、今回のカスタマイズを取り入れてみまし
こんにちは。みなさんはブログでアフィリエイトをされていますか？ 私はグーグルアドセンスと少しだけもしもアフィリエイトで物販アフィリエイトをやっています。 はてなブロガーさんのブログを拝見していると物販アフィリエイトをやっておられる方が多いですが、広告を出すときにこんな工夫をすれば、売り上げが少し上がるかもしれません。 今回は広告の心理学について豆知識をお話しします。 身の回りの広告 目を引く広告とはどのようなもの？ 色で売り上げをアップさせる？ さいごに 身の回りの広告 私たちの身の回りには様々な広告が存在します。 例えば、スーパーのチラシやテレビCMの広告、それ以外にブログでの広告やメール広告もあります。 広告は人に宣伝して、その商品を買って貰えるように分かりやすく表現しなければなりません。それぞれで宣伝方法は違ってきますが、共通して言えるのは目を引くことになります。 では、よく新聞に折
はてなブログの画像サイズの変更｜記事に貼り付けた写真の拡大縮小が自由自在に！ - ぴっぴのはてなブログでアフィリエイト
記事の種類 はてなブログの使い方 SEO対策 少し関係あり SXO対策 関係なし 難しさ 超かんたん 重要さ 少し重要 次のような方にオススメ！ はてなでブログを始めました 最近、画像の貼り付けられるようになって嬉しいです！ だけど貼り付けた画像のサイズの変え方が分かりません💦 どうすればいいですか？ ぴっぴ（@hiyoko_no_pippi）です！ ぴっぴも画像のサイズの変え方が分からなくて調べたことがあります💦 今は画像のサイズの変え方を覚えたので、画像の大きさをびよよ～んぼよよ～んて変えられるようになりました！ ということで今回の「ぴっぴのはてなブログでアフィリエイト」は、はてなブログの記事に貼り付けた画像のサイズ変更についてお話します。 見たまま HTML編集 はてな記法 markdown 記事を書いた人 ひよこブロガー ・ブログ開始69日で合計1万PV ・ブログ開始75日で収
どうも！フジグチです！ みなさんは先日はてなブログにリリースされた新機能【定型文貼り付け】機能使っていますか？ 記事をまたいで繰り返し使うあいさつや文章を登録しておけばクリックするだけですぐに挿入できるということで、記事の執筆がはかどりますね。 私もさっそく「どうも！フジグチです！」を登録しました。（笑） こんな便利な機能をさらに生かす使い方を思いついたので、今日はこれをシェアしたいと思います。 この記事を見てもらいたい人 コードを登録する 囲み枠の使い方 箇条書きリストとして使う場合 見たまま編集で使える囲み枠20選 デザインを変更したい方へ 背景色のみ 実線 実線角丸 二重線 二重線角丸 破線 破線-角丸 ステッチ風 ステッチ風-角丸 ドット ステッチ風-ドット うっすらと影付き くっきりとした影付き タイトルを枠線内側に配置 タイトルを枠線に重ねて配置 タイトルを枠線上部に配置してタ
みんなー！うしるだよー☆ 今回はねえ！はてなブログで「あわせて読みたい」みたいなリンクを強調する方法を紹介するの！ 刮目して見てね♡ リンクを強調させたいの！ リンク強調（あわせてよみたい）の導入 スマホ版（Pro限定）の設定方法 リンク強調の使用方法 複数リンクの場合 リンクによってボックスのデザインを変化させる方法 まとめ リンクを強調させたいの！ ブログの記事内であわせて読んで欲しい記事があって、リンクを貼り付けるなんてことがよくあると思います。しかし、そのまま貼り付けてしまうと▼のようにちょっと味気ない感じになってしまいます。 www.itjigoku.com ブログカード形式ならまだいいですが、文字だけだと、▼のように、ただただリンクを踏めるだけの文字になってしまいます。 クレヨンしんちゃんの舞台「春日部」を聖地巡礼してきたゾ！ 読んで欲しいリンクは目立たせてみましてみましょう。
※こちらの記事は次のような方に対して書きました°˖☆◝(⁰▿⁰)◜☆˖° ブログ初心者です ブログに貼り付けた画像にリンク埋め込められますか？ もしも埋め込められるなら画像にリンクを貼り付ける方法を教えてください ぴっぴ（@hiyoko_no_pippi）です！ 画像にリンクを埋め込めると便利ですよね！ ということで今回の「ぴっぴのはてなブログでアフィリエイト」は、はてなブログの画像にリンクを貼り最後までお読み頂いて、魅力的なブログ作りに挑戦してみてくださいね！ 付ける方法についてお話しすることにしました。はてなブログは４つの編集モード全てで画像にリンクを貼り付けられますよ。 見たまま HTML編集 はてな記法・markdown そして今回の記事では、これら全部の編集モードの画像にリンクを貼り付ける方法について全部分かるようにしました。 ところで、はてなブログの画像にリンクを貼り付ける方法
はてなブログでは、目次を簡単に挿入することができます。 デフォルトの目次もシンプルで良いのですが、もっと見やすくしたいと思い、細かいところのカスタマイズをおこないました。少し変えるだけでもグッと見やすくなります。
HTMLで画像の位置を中央や左右に固定する方法｜はてな記法とmarkdownのやり方も紹介 - ぴっぴのはてなブログでアフィリエイト
※こちらの記事は次のような方に対して書きました°˖☆◝(⁰▿⁰)◜☆˖° 画像の位置を変えたいブログ初心者です。画像の位置を変える方法を教えてください。お願い致します。 ぴっぴ（@hiyoko_no_pippi）です！ 小さくした写真を記事の真ん中や右に寄せたいですよね？ ぴっぴも写真の位置を固定したくてお勉強しました！ そしたらぴっぴにもできたんですよ、画像の位置の固定が！ 実はhtmlやはてな記法、markdownで画像の位置を変えるのはそれほど難しくありません。ぴっぴにできることなので本当です！ ちょこちょこっとコードを描けば画像を中央や左右に固定できますよ（もちろんはてな記法とmarkdownも！）。 ということで今回の「ぴっぴのはてなブログでアフィリエイト」はHTMLやはてな記法、markdownで画像の位置を中央や左右に固定する方法を書きました。 ちなみに今回の画像の位置を変え
自分でマストドンのシェアボタンを作ってみた。 <a href="#" class="js-mstdn-share-button">Share: {title} {}</a> <script defer src="https://github.com/windymelt/mastodon-share-button-scalajs/releases/latest/download/mstdn-share.js"></script> このコードを貼り付けるとテンプレートが展開されてシェアボタンになる。Share: {title} {}としている箇所は文言のテンプレートで、{}がURLで、{title}がタイトルで置換される。 初めてクリックするとポップアップが出てきて、自分のインスタンスがどこなのか教える必要があるけれど、一度使ったらLocalStorageに覚えてもらうようにした。一度設定した
HTMLで画像の横に文字をグルグル回り込みさせてブログ記事をオシャレにしない？ - ぴっぴのはてなブログでアフィリエイト
※こちらの記事は次のような方に対して書きました°˖☆◝(⁰▿⁰)◜☆˖° ブログ初心者です。小さくした画像の横に文字を回り込みさせて雑誌みたいなオシャレな記事にしたいんですけど、やり方が分かりません。誰か助けてください！ ぴっぴ（@hiyoko_no_pippi）です！ その気持ち、分かります！ だってこの２カ月間、ぴっぴも画像の横に文字をグルグル回り込みさせたかったんですもの！ そして、この２カ月間お勉強して練習したおかげで昨日やっとできるようになりました！ じゃじゃーん。 ね、ちゃんと画像の横に文字がグルグル回り込んでいるでしょ？ なかなかできなくて文字でなくて頭がグルグルしましたけど、なんとかできるようになりました💦 （スマホの場合、画像の大きさの都合で文字は回り込みません） ということで今回の「ぴっぴのブログでアフィリエイト」は、HTML で画像の横にグルグル文字文字を回り込みさ
こんにちは、夫婦で世界一周計画中のバロです！ 先日カテゴリー階層化に取り掛かり、分類化する事が出来ました！ 実は1ヶ月程前にも挑戦をしたのですが、 私のやり方が間違っていたようで上手くカテゴリーの階層化が出来ず、 その後放置してしまいました…（機械音痴の面倒くさがりが仇に） やっと重い腰を上げてカテゴリー階層化をする事が出来ましたが、 放置するんじゃなかった…という状態に陥ったので、 やるなら早い方が良いです！！！ 私はカテゴリーの分類をやり直した事もあり、数時間かかりました…！ 初心者なので、取り掛かりながらもたくさん調べました！！！ 一度この記事も完成！と思ったのですが、 想像より奥が深くやり直したりして記事の内容も追記をしました。 これから取り掛かる方がスムーズに、 そして自分の備忘録としても残しておきたいと思います。 一番重要なカテゴリー分類について、色々と書いているので、 そんな
『はてなブログ』でブロガーバトンをもらったら、テンプレートの自己紹介を作成する方法&ペイント３Ｄの使い方。 - lifelifehack.com
こんにちは、こんばんは、ニンジャです。 今回はブロガーバトンをもらった人が、そのブロガーバトンにどうやって書き込んだりするのかを画像付きで紹介します。 やり方はたくさんあると思いますので一例として、参考にしていただければ幸いです。 ブロガーバトン 紹介してくれた人の記事からテンプレートを保存 名前を付けて保存したテンプレート画像を開き、アイコンを貼る テンプレートに文字を入れる あとがき ブロガーバトン ブロガーバトンとは、ブロガーの@hiyapaさんが始められた『はてなブログ』のブロガーさんの自己紹介バトンのようです。 検索したところ、『廃墟ガールの廃ログ』というブログを書かれているブロガーさんのIDが「hiyapa」さん。 「hiyapa」さんの記事の「その２８９：店舗跡【バトンまわします】」とありました。 たくさんのブロガーさんのブログでブロガーバトンの記事を拝見させていただきました
「はてなスター」のアイコンを大きく表示させるカスタマイズ & はてなスターについて思う事 - カラーひよこのブログ
はてなスターの表示（見た目）をちょっと変えるカスタマイズをやってみた。はてなブログをやっていない人にはなんのこっちゃという話だが、ツイッターの「いいね」みたいな機能です。ブログを見たはてなユーザーが記事下のスターボタンを押すと星が付く仕組み。アイコンとユーザー名も表示されて誰がスターを付けてくれたのかが分かります。 はてなスターのアイコンを大きく表示させるカスタマイズ はてなスターの使い方とスターについて思う事 はてなスターのアイコンを大きく表示させるカスタマイズ 今回はこちらのブログさんの記事を参考に（っていうか丸々コピペ）しました。 ２例目の「星（スター）を吹き出し表示にしてプロフィール画像（アイコン）を丸く表示させる」をやってみました。下記の CSS をはてなブログの管理画面から「デザイン」→「カスタマイズ」の一番下の「デザイン CSS」に貼るだけです。 注意：CSS を修正する際に
どうも！フジグチです！ 今回はCappuccinoのデモサイトに設置している、プロフィールカードのカスタマイズを公開いたします。 「近日中に公開する」とデモサイトに書いていたのですが、まさかのテーマ２作目の製作をするという想定外のことが起きて、自分でそう書いていたことも忘れていました。（小声） せっかく公開するのならと、色々なプロフィールカードのパターンを作ったので、お好きなデザインを選んで使ってください。 この記事のカスタマイズの特徴を以下に挙げます。 この記事の特徴 入力フォームでコードを作成できる その場でプレビュー デザインを１０種類から選べる その場でカラーの変更が出来る ワンクリックでデザインの切り替え ワンクリックでコードのコピー このカスタマイズは、はてなブログに関わらずHTMLを入れることが出来るブログサービス（WordPressとか）であれば、お使いいただくことが出来る
スマホ版はてなブログの『ヘッダーの読者になるボタン』と『スクロール追従ブックマークボタン』を非表示させる方法を紹介しますの！ - 元IT土方の供述
みんなー！うしるだよー☆ スマホ版はてなブログの『スクロール追従ブックマークボタン』と『ヘッダーの読者になるボタン』を非表示させる方法を紹介するんだ！ 刮目して見てね♡ 仕様変更によって追加された『スクロール追従ブックマークボタン』と『ヘッダーの読者になるボタン』 ヘッダーの読者になるボタンを非表示にする方法 追従ブックマークボタンを非表示にする方法 仕様変更によって追加された『スクロール追従ブックマークボタン』と『ヘッダーの読者になるボタン』 ある日突然、「読者になるボタン」がブログタイトルとブログアイコンと共にヘッダーに表示されました。 2021年7月13日のはてなブログの仕様変更で追加されたようです。 そして、記事ページのヘッダーには記事タイトルが書かれた「ブックマークボタン」が表示され、スクロールするとストーカーの如く追従するようになりました。 こちらは2021年5月17日の仕様変
今回は無料で画像加工できる「canva」の使い方を紹介します。 目を引くオシャレなアイキャッチ画像にすればアクセスアップ間違いありません！ オシャレなアイキャッチ画像やヘッダー画像を作りたい方はぜひ参考にしてくださいね。 アイキャッチ画像とは より効果的なアイキャッチ画像とは canvaの使い方 １．会員登録 ２．デザイン作成を選択 ３．テンプレートを選択 ４．文字を編集 ５．背景画像を変更 ６．アイキャッチ画像を変更！ まとめ ＜スポンサーリンク＞ アイキャッチ画像とは ブログのアイキャッチ画像とは、記事の冒頭や記事の一覧ページに配置する画像のことです。 画像は当ブログのhome画面にある記事一覧の一部ですが、青〇で囲んだ画像がアイキャッチ画像ですね。 画像は文章よりも目を引きやすく、視覚的に情報が入ってきやすいものです。 アイキャッチ画像があることで読者の興味を引きやすくなるため、次の
本記事ははてなブログを利用しているブロガーさんに向けたカスタマイズ記事になります。 2021年7月13日に突然はてなブログのアップデート？があり、ブログタイトル部分の右上（ヘッダーの右下）に「読者になる」ボタンが表示されるようになりました。謎アプデ ブログによってはタイトルやメインビジュアルに被ってて邪魔になるかと思いますので、今回はこのボタンを非表示にする方法について解説していきます。 読者になるボタンを削除・非表示にする方法 そもそも読者になるボタンが追加されていないブログもある 読者になるボタンを削除・非表示にする方法 このボタンはデザインcssにたった1行コピペするだけで削除することができます。 デザインcssは編集画面のサイドメニュー内「デザイン」をクリック→サイドメニューのカスタマイズアイコンをクリック→「デザインCSS」から編集することができます。 ここに以下のコードをコピペ
ブログのカスタマイズ 自分の復習も兼ねて、私のはてなブログのカスタマイズをしていきます。これまでのデザインでは目がチカチカする感じがしていたので、今回はシンプルなものにしてみます。 なお、今回も自作ではなく、他のサイト様を参考にしたものが主となります。 今回行うカスタマイズ一覧 新しいブログの作り方 テーマの適用 新規機能の追加 グローバルナビゲーションバーの設定 ヘッダーにオススメ記事を設定 記事に「更新日時」の追加 吹き出し風ウィンドウの追加 ブログ要素のデザイン変更 見出し（h2,h3,h4)のカスタマイズ Innocentのブログデザインの見た目をカスタマイズ はてなブログのHTML構造 貼り付け画像に枠線をデフォルトでつける おわりに 今回行うカスタマイズ一覧 はてなブログのテーマの設定 グローバルナビゲーションバーの配置 見出し（H2,H3,H4のカスタマイズ） サイドバーの見
ブログにグローバルメニューを設置してみました。備忘録として今回のカスタマイズの仕方を載せときます。 「グローバルメニュー」とはなんぞや。このブログで説明すると、ブログタイトルとその下の広告の下部にある緑色の帯にあるリンクメニューです。「トップメニュー」のほうがしっくりくる。 ※ 「はてなブログ」でのカスタマイズになります ※ ブログの CSS を修正する際には復元できるようバックアップを取っておいてください グローバルメニューを作る（レスポンシブ対応） HTML と CSS コード スマホ表示がいまいちかも ブログのテーマによって「トグルメニュー」が有効にならない グローバルメニューを作る（レスポンシブ対応） 今回はこちらのブログさんの記事を参照してがんばってみました。 ちなみにこちらは以前、自前で作ったグローバルメニューもどき。HTML でリンクをヘッダーのタイトル下に貼り付けただけ。。
最近、ブログのお引越しをされる方をよく見かけます。 はてなブログからワードプレスへのお引越しが多いかな…という印象です。 ずっと同じブログサービスで仲良くしていたブロガーさんが、突然お引越しをされて、なんとなくさみしい気持ちになっている方もいるかもしれません。 わたしも、はてなブログからBloggerへ引越しを決めた時、正直迷いました。 今まで仲良くしていただいていたブロガーさんと、疎遠になってしまうんじゃないかな・・・って。 だけど、ブログの引越しって、実はぜんぜん「さよなら」じゃないんです。 そのことを知っている方は、ブログサービスの垣根をこえて、いろんなブロガーさんたちと繋がることができています。 今日は、「ブログの引越しについて思う事や、さよならはしなくても大丈夫な理由」をわたしなりにお話ししてみようと思います。 実際に引っ越した後にわたしがしている、効果的なブログ更新のお知らせ方
こんにちは。フィーニィです。 今日は英語ではなくて、ブログのスマホでの表示速度改善について。 CSSコードの囲み方と、画像圧縮です。 サーチコンソールやアナリティクスで「表示速度改善のための提案」を見ると、まったくわからない文ばかりなのですが、ひとつ気になったのが「HTML のずれ」というもの。 私と同じ悩みを抱えてるいる方がいらっしゃるのではないかな。( いや、いないかぁ…) ということで、２点を書きます。 スマホ版のコードは１つの場所では一括で囲む Tinypng とはてなフォトの設定で画像圧縮 Tinypng の使い方 はてなフォトの設定を変えて小さくする 速度が速くなりました！ スマホ版のコードは１つの場所では一括で囲む 「スマホ版には、コードを< style> </style> で囲むこと」 とよくありますよね、私はその囲み方を勘違いをしていました。 ブログの文字を大きくしたり、
超簡単？！はてなブログのトップ画面をタイル表示に変更する方法♪～お洒落なレイアウトのブログに大変身させよう～ - ゆるふわSEの日常♪
おはこんばんちは！！！ ゆるふわSEの「ゆるちょここ」です♪ 今回は、ブログのカスタマイズとして以前からちょっぴりだけやってみたかった「トップ画面のタイル表示」をやってみましたので、その備忘も兼ねて手順を大公開しちゃいまーす！ IT、ガジェット系特化のニュースサイトとして「GIGAZINE」っていうサイトがあるのですが、このサイトを以前結構みていて、、、 gigazine.net 「こういった見栄え（タイル、カード型）の記事一覧って見やすくて良きよねー♪」って思ってたので、このカスタマイズやってみたかったんですよねー(´・∀・｀)v サンプルのCSSコードをコピペで貼って、ちょちょいと自分好みに修正するだけで、できちゃうので、プログラムわかんなくてもわりかし簡単にできちゃうと思います！ 部屋の模様替えよろしく、ブログの模様替え的な気分転換に実施してみるのもいーかもしれませんね（何それ？！w
はてなブログ【スマホ表示のヘッダー】を非表示するCSS
スマホ表示 ヘッダー 非表示 こんにちは。 ４児パパです。 最近ブログを毎日更新していますが、習慣化され苦ではなくなりました。 はてなブログ 継続 28日 習慣化するのに人は21日間かかるみたいなのですが、かれこれもうすぐで一ヶ月を過ぎようとしています。さすがに毎日ブログを触るので、スマホ表示でのブログデザインをいじっていこうと思います。 はてなブログでは記事を書く事に専念してしまうので、あまりデザインにこだわりがないのですがスマホ画面でのヘッダーやフッターなどの、はてなさんのさり気ない広告が気になり初めて、とうとう触る事にしていきます。読みづらいので他のブロガーさんも読者さんの為に非表示にする事をおすすめ致します — ４児パパ (@ARTS_papa) 2019年7月9日 はてなブログをやられていない初心者の方でも、簡単に出来ますのでぜひカスタマイズしていきましょう。 Follow @a
★この記事は2022年10月1日に更新しました プログラミングに関しては、まったくのど素人、右も左もわからずにはてなブログをはじめたHANAです。 ブログを始めるとき、はてなブログに決めた理由の一つは、プログラミングがわからなくても始められる、ということ。 私は、はてなブログのHTML編集画面をみただけで、 ここは絶対に手を出してはいけない場所だ！ と思っていたんです。 でも触ったら、ブログが壊れてしまうんじゃないかって。 それくらい、何にも知らなかったんです。 でも、少し慣れてくると、HTML編集画面はいじっても大丈夫なんだ、ということがわかりました。 少しずつ、学んでいます。 また、私が使っているHaruniと同じテーマ(ブログデザイン）なのに、全く違うデザインに見えるブログを見つけると、ココはどうなってるの？と興味がわいてきたんです。 みんなカスタマイズしてるんだね そう、そのカスタ
夜中にしれっと変更しました！ - 満喫！わたしの自分時間
「はてなブックマークでコメントする」ボタンの設置 ずっと疑問だったのです。どうして私のブログには「はてなブックマークでコメントす る」ボタンがないのかと・・・(>_<) ブログデザインの「公式テーマ」によって、元々ついている種類とそうでないものとが あるんだ・・・くらいに思ってました。知らないって怖いですね💦 まっ、いっか！で始めた時からずっと過ごしてきたのですが、昨日やっぱり気になって ようやく重い腰を上げて調べてみたら、なんてことはない。 私自身で設定すればよかったのだということが分かりました。あらまぁ！ さっそくやってみたら、無事に出来ました～良かった(^^♪ とほっとしたのもつかの間、自分でブクマ（っていうらしいですね。なんか初心者なの で気恥ずかしくて使えません）を頑張ってしていた痕跡が丸わかりで恥ずかしいった らないのです・・・ たくさんブクマ（もう使ってる）されると、アクセ
どうもTOM夫婦の旦那です！ 今回は、我々が使っているグローバルメニュー（PC版）の設定の仕方を紹介します！ スマホ版は下記記事で紹介してます。 www.tomfamilyworld.com というのも、これが本当に要因だったかは不明ですが、グローバルメニューを設置した後のGoogleアドセンス審査に合格したので、効果があるかも！？ Googleアドセンスに関する記事はこちらから↓ 【アドセンス審査】グーグルアドセンスに3週間で合格した話 - TOM夫婦の世界の窓 1. そもそもグローバルメニューってなに？ 2. 記述コードの紹介 2-1. htmlコード 2-1-2. htmlコードをはてなブログに入力 2-2. CSSコード 2-2-1. CSSコードをはてなブログに入力 3.最後に 1. そもそもグローバルメニューってなに？ 言い方も色々あります。 ・グローバルメニュー ・グローバル
おはようございます、なべやすです。 ブログは、文字を使って読者に様々なことを伝えるツールですが、すべてを文字だけで伝えようとするのにも少し限界を感じております。 当ブログにおいても写真やイラストなどの画像を使ったり、時には表やグラフなどを使って記事を作成しないと、読者にうまく伝えられない内容もたくさんあります。 もはや、ブログに写真やイラストなどの画像を使うことは、すっかりスタンダードになっているのが現状です。 そして、写真やイラストではどうしても伝えにくいことに対して、最近では動画も取り入れるようになりました。 ブログに動画を取り入れる方法としては、誰もが知ってるYouTubeを使うのが簡単かつ手っ取り早いのでおすすめです。 今回は、YouTube以外にもブログに動画を取り込める方法がありますので、あわせてご紹介いたします。 ※当記事は、はてなブログに動画を載せる方法を記載しておりますが
ads.txtファイルの問題 ブログ運営費のためにGoogleアドセンスを利用しているのですが、本日以下のエラーを検出しました。 要注意 - 収益に重大な影響が出ないよう、ads.txt ファイルの問題を修正してください。 本件については、はてな社が言及しています。 はてなブログ - お問い合わせ - はてな 「要注意 - ads.txt ファイルが含まれていないサイトがあります。収益に重大な影響が出ないよう、この問題を今すぐ修正してください。」 というエラーが表示されるようになったというお問い合わせをいただいております。 現在のところ、はてなが提供しているドメイン ( *.hatenablog.com 等) か独自ドメインを設定しているブログかに関わらず、ads.txt を配信する機能は提供していません。 多くの方が利用されているGoogle AdSense ads.txtに関するヘルプ
おはこんばんちは！ ゆるふわSEの「ゆるちょここ」です♪ 皆さんははてなブログPROの民でしょーか？！ PROじゃない民でしょーか？！ たんにブログをカキカキしていく上ではPROじゃなくても普通に無料でできちゃうので、じぇーんじぇんそれでいーと思うのですが、PROならではのメリットを受けたいという場合はPROの契約をしている方が多いと思います☆彡 そんなPROも下記3種類のプランがあり、期間に応じてお得な価格で購入できるよぉになっているよーです！ ※価格は全て税込み！ ＜1か月コース（30日）＞ 1,008円 ＜1年コース（365日）＞ 12,096円⇒8,434円 ※30%OFF（3,662円お得） ＜2年コース（730日）＞ 24,192円⇒14,400円 ※40%OFF（9,792円お得） で、続くかどーかもわかんないしー(´・ω・｀) 長いコースはまとまった料金支払うの高いしー(´
【10周年っぽい】 デザイン超絶リニューアルで「すちゃらかぁん。」ついにレスポンシブ対応!! パソコンでもスマートフォンでもブログを楽しんでおくれえーっ!! - すちゃらかぁん。
歴代最長タイトル？ 分かんないけど長いね、どうもざれんですー。 ブログ「すちゃらかぁん。」は、2024年6月7日にいよいよ10周年を迎えます！ 大々的にイベントを開催したりだとか、特殊なことをしたりだとかはありませんが、タイトル通りブログデザインを一新しました！ 構想1年、開発3日(笑)！ サブブログを作った辺りから自作の気持ちがあったよね。始めるまでが遅いんだなぁ。 ということで、今回はそんなリニューアルした「すちゃらかぁん。」を眺めて参りましょう(笑)！ よろしくどうぞ！ ビフォー！ 見辛い。 左がパソコン、右がスマートフォン。 アフター!! あれ、肝心のスマートフォンは？ アップロード出来ませんでした……(サイズオーバー)。 えぇ……。 ええ、アフターはなうなんですから、その目で見よ！ というやつです(笑)！ しかしどうです？ めちゃくちゃ変化したでしょう？ 色味は可能な限り変えずに
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS見出しデザイン21選。現場ですぐ使える見出しデザインをご紹介 | BUILD Journal
CSS見出しデザイン参考100選！コピペ可！どこよりも詳しく解説！
はてなブログで記事投稿時にする最低限のSEO対策 - はるなぴログ
はてなブログのリンクカードを、簡単におしゃれに飾る３つの囲み枠をご紹介します。 - 雨のち晴れ
【はてなブログ】サイトの表示速度の改善方法 - 書く、走る。
はてなブログでのお問い合わせフォームの設置方法について。おすすめの無料フォーム２サイトをご紹介♪ - 雨のち晴れ
【はてなブログ】記事をリライトする3つの方法│あれこれライフ
更新日時を自動で表示させるカスタマイズをご紹介します。はてなブログでの設定方法をご説明します。 - 雨のち晴れ
アフィリエイトにとって重要なフレーズと色についてまとめました。 - 雨のち晴れ
コピペして定型文に登録するだけ！見たまま編集で使える囲み枠 - フジブロっ！
はてなブログで「あわせて読みたい」のようなリンクの強調方法を紹介しますの！ - 元IT土方の供述
はてなブログの画像にリンクを貼り付ける方法 - ぴっぴのはてなブログでアフィリエイト
はてなブログの目次カスタマイズ！シンプル・おしゃれ・コピペOK | やさしんぷるデザイン
マストドンのシェアボタンを自作した(追記あり)(今日から使えます) - Lambdaカクテル
【徹底解説】はてなブログでのカテゴリー階層化の手順と具体例！ - たびバロ
はてなブログ-プロフィールをおしゃれにカスタマイズするデザイン１０選 - フジブロっ！
アイキャッチ画像に文字を入れたい！canvaの使い方 - 書く、走る。
【はてなブログ】ヘッダー・タイトル右上の読者になるボタンを削除・非表示にする方法 - YUUU BroG
【初心者向け】はてなブログのデザインをカスタマイズ - オタクパパの日常
グローバルメニューを作ってみた【 ブログカスタマイズ 】 - カラーひよこのブログ
はてなブログからBloggerへ引越し＊効果的なブログ更新のお知らせ方法
はてなブログ 表示速度を改善するために初心者ができる２つのこと - fiiney と絵本で英語れんしゅう
【はてなブログ】ヘッダー画像の作成、スマホ画面に反映もコピペで！初心者にもできた！ - HANAのおと
【PC版 グローバルメニュー】コピペOK CSSで簡単作成 - はてなブログ - TOM夫婦の世界の窓
YouTubeだけじゃない！はてなブログに動画を貼り付ける方法！ - なべやすブログ
はてなブログPROでads.txtファイルの問題を修正した話 - orangeitems’s diary
長く使うならはてなブログPRO2年コースがお得！加入/切替手順をご紹介♪ - ゆるふわSEの日常♪
hanatara.hatenablog.com
gendai.media
yuyakekoyakeakatombo.hatenablog.com
umechan3150.hatenablog.com
kokomi.ag.ebb.jp
encount.press