メインカテゴリーを選択しなおす
Cocoonでは、テーブル（表）のブロックを追加することができます。ですが、エクセルのように簡単にセルを結合することができません。プラグインなどを利用せずにセルを結合したい場合は、HTMLで入力すれば結合することができます！こちらの記事では、実際のHTMLを実例に解説しています。
![はてなブログカスタマイズの記事まとめ（その3）[CSS、HTML、JavaScript]](https://img.blogmura.com/sites/1251975/post-images/54581311.webp/crop/435x435)
はてなブログカスタマイズの記事まとめ（その3）[CSS、HTML、JavaScript]
ブログカスタマイズに関する記事をいくつか投稿したのでまとめて見ようと思います。 ちなみにブログカスタマイズの記事まとめは3回目です。これまでのまとめ記事はこちら。 これまでのブログカスタマイズ まとめ記事 ブログカスタマイズの記事まとめ（その1）[CSS/JavaScript/デザインテーマ] ブログカスタマイズの記事まとめ（その2）[CSS/はてなブログ関連/デザインテーマ] 直近のブログカスタマイズはCSS関連が多くなりました。 本来なら、けっこうな時間を要するカスタマイズもあったのですが、参考サイトがあることでかなり時間短縮できました。ありがたい。 ということで、投稿した記事をまとめてい…
【HTML】meta description（メタディスクリプション）とは？設定方法、書き方、文字数等を解説！
本記事では、meta descriptionの設定方法や書き方、文字数を解説します。また、テンプレートや反映されない場合の対処方法も併せてご紹介します。meta descriptionについて詳しく知りたい方は必見です。
数日前から適用しているのですが、記事ページに「更新日」を追加表示しています。これはJavaScriptとCSSを追加適用することで実現しています。たまに自分のブログの過去記事を見返すのですが、少し古くなった内容や、表現がイマイチだったものを見直して更新しています。ですが、更新日を表示していなかったので記事ページからは更新した旨が分からない状態でした。更新日を表示しているサイトにはちょくちょく遭遇していました。 なので自分のブログでも更新日を表示したいなと思い、対応してみました。ということで、変更内容や適用手順について書いていきます。
【ブログカスタマイズ】サイドバーの各項目にアイコンを設定してみる
数日前から適用しているのですが、サイドバーの各項目にアイコンを設定しています。これはCSSを追加適用することで実現しています。サイドバーの項目の中でも特に「関連記事」「注目記事」「最新記事」の3つは表示内容が似通っています。これをパッと見で、どれがどれか分かるようにするためにはアイコンを設定するのが良いかなと思った次第です。それでは、どんな対応をしたか書いていきます。
【HTML】「mailto:」とは？起動しない時の対処法や注意点も解説！
WEBサイト上に、クリックするだけでメールを送信する機能をつけたい場合「mailto:」を使う方法があります。
【ブログカスタマイズ】トップへ戻るボタンのホバー／箇条書きが出来る囲み枠
以前ブログカスタマイズした内容に対して、少し変更してみました。 今回の記事では、その辺りに関して書いてみようと思います。変更は以下2つです。 トップへ戻るボタンのホバー 箇条書きが出来る囲み枠 1つずつだとそんなにボリュームがないので、1つの記事にまとめてみようと思います。では、どんな対応をしたか書いていきます。
数日前から適用していますが、見出しを少しカスタマイズしてみました。今回のカスタマイズは既存のデザイン（デザインテーマ）に変更が入っています。実はこれまで記事にしてきたブログカスタマイズは 囲み枠の設定 トップへ戻るボタン テキストを蛍光ペンで強調 など、既存のデザイン変更というよりは、パーツ追加というか、付け加える感じのカスタマイズが多かったです。 ※カテゴリーリンクのデザイン変更は既存デザインの変更ですが、小さな変化でした。ということで今回の見出しカスタマイズはちょっと抵抗があったのですが、試しにデザイン変更してみたら、やっぱり適用してみたくなりました。とはいえ大きくデザイン変更したわけでは…
![ブログカスタマイズの記事まとめ（その2）[CSS、はてなブログ関連、デザインテーマ]](https://img.blogmura.com/sites/1251975/post-images/53448657.webp/crop/435x435)
ブログカスタマイズの記事まとめ（その2）[CSS、はてなブログ関連、デザインテーマ]
ブログカスタマイズに関する記事をいくつか投稿したのでまとめて見ようと思います。 ちなみにブログカスタマイズまとめは2回目です。1回目の記事はこちら。 1回目の記事 ブログカスタマイズの記事まとめ（CSS、JavaScript、デザインテーマ） 1回目のまとめ記事で「カスタマイズ熱が落ち着いてきたので、一区切りとしてまとめてみました。」みたいなことを書いたのですが、結局そこからまた色々とカスタマイズをしていました。 やはりカスタマイズの目線が入った状態で様々なブログを見てると、自分のブログへのヒントとなるようなカスタマイズがたくさん見つかりますね。 ということで、投稿した記事をまとめていきます。
これのこと HTML <button type="button">Button</button> ボタン部分 button { background-color: #fff; width: 200px; display: block; padding: 10px 0; border: 1px solid #000; position: relative; z-index: 1; } button:hover { color: #fff; } ボタン背景部分 button::before { position: absolute; top: 0; right: 0; bottom: 0; lef…
See the Pen text underline slide by miyata (@m1y474) on CodePen. 要点 通常時は疑似要素のborder-bottom: 1px solid #000; を指定したまま width: 0%; にしておく hoverしたときにwidth: 100%; にする
記事下にフォローボタンを設置してみました。 前にも一度記事にしたのですが、デザインテーマのカスタマイズ案内に従ってフォローボタンを簡単に設置できました。 以前書いた記事 デザインテーマって意外と簡単にカスタマイズできるんですね 実は以前からひっそりと記事下に「読者になる」ボタンはあったのですが、全然目立たないところにありました。 今回はもう少し目立つように色々と調整してみたので、その辺りも含めてアレコレ書いていきます。
Reactでcanvas扱ってたときに正円を描画したいのに楕円になったときの備忘録 canvas描画部分 const ctx = this.canvas.current?.getContext('2d'); if (!ctx) { return; } ctx.fillStyle = "black"; ctx.fillRect(30, 0, 290, 450); ctx.fillStyle = "orange"; ctx.beginPath(); ctx.arc(100, 50, 15, 0, 2 * Math.PI); ctx.fill(); 修正前 <canvas style={{ widt…
やりたいこと canvasにdrawImage()で貼り付けた画像を正円で表示させたい（丸型にトリミングされたように表示させたい） やるまでは「quadraticCurveTo()でベジェ曲線使ってやらなかん感じ〜！？！？！？！数学できないよ〜！！」（数学関係あるかもわからない）って思ってたけど全然使わなかった 実装 一部抜粋 const image = new Image(); image.src = "表示したい画像"; image.onload = () => { ctx.beginPath(); // 半径40pxの正円 ctx.arc(50, 50, 40, 0, 2 * Math.…
やりたいこと canvasを使った文字の描画で、特定の幅で文字を折り返して表示したかった。 何も処理しないと↓みたいに文字が詰まって表示される 実装 ①文字を任意の文字数ごとに分割して配列に入れていく // 表示したいテキスト const src = "あ".repeat(30); const results = []; let tmp = ""; src.split("").map((row) => { tmp = tmp + row; // 16文字の場合に配列に入れる if (tmp.length === 16) { results.push(tmp); // 文字カウント用の変数をクリ…
【HTML】段落を表すpタグの使い方のご紹介！改行を作るbrタグとの違いも解説!
HTMLで、段落を表すには、pタグを使います。 pタグは、文章に段落を作成する事が出来るので文章を読みやすくし
数日前から適用しているのですが、所々で囲み枠を適用しています。以前、強調したいテキストを蛍光ペンみたいな感じにする対応をしました。 今回の対応はそれに似ています。以前のはテキストですが、今回は「強調したいブロックを枠で囲む」対応です。 強調したいブロック全体を蛍光ペンにするわけにもいかないので、枠で囲んで強調させます。ただなんでもかんでも囲み枠で強調するとポイントが散らかるので、最低限の使用に気を付けつつ。（これは蛍光ペンの時と同様ですね。）ではどんな対応をしたか書いていきます。
数日前から適用していますが、「トップへ戻る」ボタンを配置してみました。 ページの右下に常に表示されているボタンです。この「トップへ戻る」ボタン、けっこう色々なサイトに配置されていますよね。 自分はけっこうクリックすることが多いです。なので自分のブログにも配置してみることにしました。今回の対応は以下のサイトを参考にさせて頂きました。 ありがとうございます。 ちなみに以下のサイトでは3種類のデザインを紹介されています。 私はその中で「追従するボタン」を参考にさせて頂きました。 www.fuji-blo.com思っていたより簡単に配置できました。 ということで、使い方や適用手順などを書いていきます。
せっかくHTML5の資格を取得したので、JavaScriptを追加して外部リンクを別タブで開く対応をしてみようと思います。 ※HTML5の資格、”HTML”と言いつつレベル2はほぼJavaScriptなのです。ちなみに今回の対応、Google検索すると既にいくつか記事がヒットします。 なのでそれらの記事からのコピペ対応でもおそらく対応できたのですが、せっかくなので自力でJavaScriptを書いてみました。なお、HTML5の合格体験記は投稿済みです。こちらも良ければぜひ。 ※JavaScriptはどちらかというとレベル2の領域です。 【合格体験記】HTML5プロフェッショナル認定 レベル1 V…
せっかくHTML5の資格を取得したので、CSSを追加適用してカテゴリーリンクのデザインを変更してみようと思います。今使っているデザインテーマ気に入っているのであまりデザインいじりたくはないのですが、、ちょっとお試しです。 今使っているデザインテーマはSilenceというテーマです。お気に入りです。ちなみにHTML5の合格体験記は投稿済みです。こちらも良ければぜひ。 なお、CSSはどちらかというとレベル1の領域です。 【合格体験記】HTML5プロフェッショナル認定 レベル1 Ver2.5 【合格体験記】HTML5プロフェッショナル認定 レベル2 Ver2.5 ではどんな変更をしたか書いていきます…
特定のカテゴリのみ抽出したHTMLサイトマップ（記事一覧）の作り方
サイトマップは以下の2種類があり、まったく別の機能です。 サイトマップの種類 HTMLサイトマップ ユーザーがサイト内の自分が欲するページへのアクセスを補助するページ。「カテゴリ」に似ていますが、もう少しユーザビリティが良くなったものです。
特定のカテゴリのみ抽出したHTMLサイトマップ（記事一覧）の作り方
サイトマップは以下の2種類があり、まったく別の機能です。 サイトマップの種類 HTMLサイトマップ ユーザーがサイト内の自分が欲するページへのアクセスを補助するページ。「カテゴリ」に似ていますが、もう少しユーザビリティが良くなったものです。
【わかりやすく解説/初心者用コピペ】横スクロールで画像をスライドさせる方法
✅実装例 HTML？CSS？わからない～ こんにちわ！（ゆう）です。 本日は「横スクロールで画像をスライドさせ
【HTML】全てのタグの意味、使い方を覚える必要はあるのか？現役WEBコーダーが考えてみた。
HTMLを勉強し始めの頃は、謎の文字列が沢山並んでいる画面を見る事になるので、目がチカチカする方もいらっしゃる
【HTML】言語指定に使うlang属性とは？必要性や各国の一覧もご紹介！
サイトの主要の言語を指定する際に使う、lang属性。 今回は、どうやって指定するのか、そもそも指定する必要性が
任意のページのジャンプ（リンク）先には HTML アンカー（id属性）を設定し、ジャンプ（リンク）元には、その HTML アンカーを含む URL をリンク先に指定するのです。
【HTML】ページのタイトルを設定する時に！titleタグの使い方のご紹介！SEOの視点から解説も！
WEBサイトで、ページのタイトルを指定するには、HTMLタグのtitleタグを使用します。 こちらで指定した文
【HTML】略語を表す時に使用！abbrタグの使い方のご紹介！サンプル付き！
会話や、WEBサイト上で、たまに使う機会がある「略語」。 例えば、「RT」と言われて何を連想しますか？一般的に
【HTML】ふりがな（ルビ）を振りたい時に！rubyタグの使い方のご紹介！サンプル付き！
普段、WEBサイトや本を読んでいるとたまに遭遇する、読み方がよくわからない文字列。 そんな時に役に立つのが「ふ
【Web開発】HTML/CSS/Javascriptを使った初心者向けのサイト制作入門
Web開発では、HTML、CSS、そしてJavascriptが重要な役割を果たしています。これらの技術を使って、ウェブサイトを作成することができます。初心者の方でも、簡単なサイトを作ることはできますので、まずは基本的な使い方をマスターしまし
【HTML】上付き、下付き文字を付ける時に！supタグ、subタグの使い方のご紹介！サンプル付き！
「上付き文字」「下付き文字」と聞いただけでは、何の文字のことを指しているのかピンと来ない方もいらっしゃるかもし
【サンプルあり】強調したい時に！HTMLのemタグ、strongタグの使い方のご紹介！
文中の特定の箇所を強調したいというシーンありますよね？ そんな時、HTMLでは、emタグやstrongタグを使
【サンプルあり】引用時に！HTMLタグのqタグ、blockquoteタグの違い、使い方のご紹介！
WEBサイト上で、他人の著作を引用したいシーンありますよね？ そんな時、HTMLでは、qタグ、blockquo
【サンプルあり】HTMLのh1〜h6タグの使い方のご紹介！使用する際の注意点も解説！
HTMLでは、コンテンツに見出しをつけたい時、h1〜h6タグを使用します。 今回は、このh1〜h6タグについて
【サンプルあり】HTMLのbrタグの使い方のご紹介！改行されない（効かない）場合の対処法もご紹介！
HTMLでは、段落内で改行をしたい場合、brタグを使用します。 今回は、このbrタグの使い方を徹底解説します。
お疲れ様です ひなみです HTMLの勉強会です 前回↓ hinami-log.hatenablog.com 最初から読む↓ hinami-log.hatenablog.com ↓教材 wa3.i-3-i.info お願いの種類だよ ホームページの話で出てくるよ 「GET」とか「POST」とかのことだよ 前回のブログで「HTTPリクエスト≒サイゼの紙」という答えが出た私。 今回はそのサイゼの紙にもいろいろあるというお話になりそう。 サイゼではごはんを注文できたり、お会計をお願いできたり、トイレの場所を聞いたり、お皿をさげてもらったりできる。 まあ多分そういう種類のことだ。HTTPリクエストメソッ…
お疲れ様です ひなみです HTML5の勉強会です 過去ブログ↓ hinami-log.hatenablog.com hinami-log.hatenablog.com 今回は「HTTPリクエスト」について！ ↓教材 wa3.i-3-i.info 「このページをちょうだい」なお願いだよ ホームページの話で出てくるよ おさらい HTTPとは、インターネット上のホームページのファイルを受け渡しするときに使う、みんなで守るお約束の一つ。 の、リクエスト。 もう少し噛み砕いて書くと ホームページを見るときに ホームページを見るときに使うソフト（ウェブブラウザ）から ホームページのファイルが置いてあるコン…
お疲れ様です ひなみです HTML5の勉強会です 前回↓ hinami-log.hatenablog.com 今回は「HTMLとHTTPSの違い」です！ 教科書にしているサイト↓ HTTPが少し安全になったのがHTTPSです。使いどころは同じです。 HTTPは丸裸のインターネット上のホームページのファイルを受け渡しするときに使う、みんなで守るお約束の一つ。他人から見たらパンツ丸出し。 それを隠して安全にしたのがHTTPS。 HTTPSのSは「Secure=安全な、保障された」 なるほどなるほど、全裸かそうじゃないかだな。 ってそんなのHTTPSの方がいいに決まっている。なんでHTTPがあるんだ…
お疲れ様ですひなみですHTML5の勉強会です 自分のまとめノートのようなものなので、気軽に書いていきます！ wa3.i-3-i.info 通信するときのお約束事だよ ホームページのファイルを受け渡しするときに使うよ 「HyperText Transfer Protocol」の略だよ インターネット弱者の私にとって、この方の説明が一番スッと入ってきやすいです。おすすめサイトです。 このサイトを教科書にして勉強していきます。 まず言葉について HTTP＝HyperText Transfer Protocol(ハイパーテキスト・トランスファー・プロトコル) HyperText≒ホームページのファイル…
