はてなブログで標準で使えるアイコンフォント（Webフォント）とその使い方を紹介します。 ↓↓これぜんぶ！ダウンロードしなくても使えます！！ グローバルメニューや、ブログ中のちょっとしたポイントなどを示したい時にアイコンを使うと目立ちますよね。 ポイントを目立たせたい時 ↓↓ ポイント スマホのボトムメニュー ↓↓（ボトムメニューのCSSはこちら） SNSのシェアボタンなどをつくるのにも使えます！ この記事では、上記のようなWebアイコンをはてなブログの中で使う方法やコピペでできるコード、また上手く表示されない場合の対処法などを紹介しますので、ぜひご参考にしてください。 アイコンは、Font Awesome などを外部から読み込む方法もありますが、はてなブログでは120種類ほどのオリジナルのWEBフォントをデフォルトで読み込んでいます。 これらのフォントであれば、外部から読み込むよりページが

原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ

JavaScript はクライアント側で実行されるオブジェクト指向型のスクリプト言語です。 JavaScript を用いることで、動的にWebページの内容を書き換えたりフォームに入力された内容をクライアント側でチェックしたりできます。ここでは JavaScript の使い方として JavaScript のプログラミングの方法をサンプルを用いて解説していきます。

全くの素人がテーマを作成して公開するまでに色々とお世話になったサイトたちです❤︎ テーマを作りながら、その都度、参考にしたページを追加しているので、基本的なこと〜マニアックなことまで、きちんと整理ができていなくて、キーワードの羅列など少し読みにくいかも知れませんが、これからテーマを作る方やカスタマイズをされる方には、めちゃためになるサイトばかりです！ テーマ制作に関して はてなブログのテーマは、CSSで組み立てて行くのですが、私のような素人がゼロからCSSを勉強して組み立てて行くのは、ちょっと難しそうです...^^; そこで、はてなブログでは、とても親切なことに自作テーマの元になる基本のテーマ「boilerplate.css」と言うのを用意していてくれているんです。 実はこのテーマをただ単にCSSの部分にコピペするだけでも、とてもシンプルなテーマとして使用することもできるくらい普通にブログ

こんにちは、サクです。 今日は、はてなブログで使われているテーマを調べる方法をご紹介します。 はてなブログのテーマとは テーマを調べる方法 「このブログのテーマを見る」から調べる ページのソースからテーマを調べる テーマを使っていない場合もある まとめ はてなブログのテーマとは どんなブログを作ろうと思っても まずは、ブログを作成したら基本的に テーマというものを決めなければなりません。 テーマとはそのブログのデザインを決めるもので どのテーマを選ぶかでブログのイメージが全く違ってきます。 色々なはてなブログを読み漁っていると このブログのデザイン綺麗で読みやすい！ テーマは何を使っているんだろう。 と思うことも多々ありますよね。 今日はそんな方のために はてなブログで使われているテーマを調べる方法を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]と入力する） 簡単説明 手順１　いつも通り記事を描く まず、いつも通りブログに書きたい文章を書きます！ みたまま編集で書くとこんな感じですよね この文章は説明のために適当に書

この記事ではサーチコンソールに新たなプロパティ（サイト）を追加する方法を解説します。 登録時には「ドメイン」と「URLプレフィックス」の2種類がありますが、どちらをどのような視点で選べばよいか迷う場合もあるのではないでしょうか。 そもそもどこから行えばいいかわからない！という方にもわかりやすく解説します。 対策キーワードで1位を狙いませんか？ 貴社コンテンツを徹底的に分析し、1位にするための改善案を無料でご提案します！ まずはサクラサクのコンサルタントにご相談ください。 無料相談はこちら サーチコンソールのプロパティタイプは2種類ある そもそもサーチコンソールのプロパティとは、サーチコンソール内で管理されるサイトリストのことです。ドメイン単位やディレクトリ単位のプロパティを複数作成することができます。 まずはGoogleアカウントでログインしてサーチコンソールにアクセスします。 https

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

ブログ記事の最後にぜひバナーを貼ってくださいね！ いつもはてなブログをご利用いただきありがとうございます。はてなブログ プロデューサーの永田です。 はてなブログお知らせレター第10回目のおわりに、ちょこっとだけ先出しでお伝えしていましたが、グループに新機能が登場です！ このたび、はてなブログの「グループ」に、新しく「ランキング」機能ができました！グループに入っているブログの中で、どのブログが人気か、ひと目でわかる機能です。 今回のお知らせでは、ランキング機能の使い方や活用方法、開発の背景などをお話しします。ぜひランキング機能を使ってみてくださいね！ 「グループ」機能の使い方については、前回のお知らせレターで詳しく紹介していますので、ぜひこちらをご覧ください。 blog.hatenablog.com 「ランキング」に参加する方法 「ランキング」に参加するには グループのランキングを見てみよう

不要になったINAX ( LIXIL ) のジェットバスは施工業者に依頼して取り外して吸水口や吹き出し口を全て塞いでもらいました。 しかし、ジェットバスのスイッチだけは訳あって取り残されていました。 この唯一残っていたジェットバスのスイッチを今回DIYで取り外して浴槽の穴を塞いでみました。 【 目 次 】 ジェットバスのスイッチ 固定部分のチェックと情報確認 浴槽裏から確認 調査結果から ジェットバスのスイッチの取り外し 浴槽の穴塞ぎ部材の選定 穴塞ぎ部材の取り付け まとめ あとがき ジェットバスのスイッチ ▼ ジェットバスのスイッチ このスイッチ、高さもあるので風呂ふたを使う時に邪魔なんです。 位置的に風呂ふたが乗ってしまい隙間が出来てしまうので。 ジェットバスを取り外したので何の役にも立ちませんし・・・。 一応工事の請負元の家電量販店に「吸水口の工事のついでに取り外し出来ないか？」と伝

浴槽の穴を塞ぐ部品 ( 商品 ) である「ツバ大座金」「バスキャップ」「浴槽化粧フタ (外締め) 」の施工例をご紹介します。※「バス用化粧蓋」とも呼ばれます。 INAX ( LIXIL ) のジェットバスでの工事を例にしています。 給湯器やジャグジー等の不要な浴槽の穴でお困りの方の参考にもなるかも知れません。 【 目 次 】 浴槽の穴を塞ぐ部材の施工例 「バスキャップ」＋「ツバ大座金」 バスキャップ ( 内締め ) 浴槽化粧フタ ( 外締め ) まとめ あとがき 浴槽の穴を塞ぐ部材の施工例 「ツバ大座金」「バスキャップ」「浴槽化粧フタ (外締め) 」の施工例です。 「バスキャップ」＋「ツバ大座金」 この施工例では「バスキャップ」と 「ツバ大座金」の120ミリを組み合わせて使用しています。 「バスキャップ」は「バス用化粧蓋」「浴槽化粧フタ」「バスメクラキャップ」とも呼ばれます。 「バスキャッ

idとclassの違いと使い分け！スタイルシート(CSS)適用法idとclassの違いと、使い分け方法をご紹介いたします。HTMLにスタイルシート(CSS)を適用する方法には、class属性を使う方法と、id属性を使う方法があります。この「class」と「id」は明確に役割が異なります。全部にclass属性を使っている場合は問題ありませんが、全部にid属性を使っている場合は問題がある可能性があります。 スタイルシート(CSS)を記述する際、「特定の要素すべて」を一括して装飾するのではなく、「特定の要素のうち一部だけ」を装飾したい場合、HTMLに付加できる属性は2種類ありますね。class属性と、id属性です。この「class」と「id」を、正しく使い分けられていますか？ この「class」と「id」は、どちらでもよい方法が2種類用意されているわけではなく、明確に役割が異なります。そこで今回

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