会員登録後、有料プランで広告を非表示に詳しくはこちら
メインカテゴリーを選択しなおす
先日から異変を感じていたのですが、原因が特定できず…ブログ村サポートチームに問い合わせまして発見がありました。 知ってる方からは「何を今更…」と云われてしまいそうですが、私は今まで知らなったので驚きでした。 今回はブログに「Bolgger」を利用している方向けの発信です。 ...
【WordPress】初心者でも簡単！Twitterの埋め込みのカスタマイズ
今回は、WordPressの投稿で「Twitterを埋め込む方法」について紹介していきたいと思います。やり方をマスターして、投稿に活用してみてください。 他の記事でもWordPressテーマのCocoonのカスタマイズ方法を紹介しています。
こんにちはです。あっちのそららです。今回は、HTMLとCSS（ウェブ制作などで使う言語）で、オリキャラを描画してみました。描いたのは、うちの子「ナムナムくん」。「Result」でイラストを確認できます（レスポンシブ対応済）。 See the Pen namunamu by あっちのそらら (@acchinosoraranocode) on CodePen. 単調なデザインと甘く見ていましたが、どっこい。パーツの多さもあり、頭が痛くなるコード量に。特に髪は、地味に複雑な形のため、なかなか思ったとおりにならず悩みました。髪と口は、複数の円を組み合わせ、一部分を消すことで、一つの線に見えるようにしま…
あ、お知らせするの遅くなりましたが、Ameba Pick、審査通りました！Pickていうところを押すだけで、商品のところにつながるそうです。簡単ですね。でも、…
アメブロやるついでに、アフィリエイトのAmeba Pickに申請してみました。特別本格的にやるつもりはないんですけど。あと、にほんブログ村にも登録してきました…
ホームページって言うのかな、企業とかでは無くて個人レベルだと、 ブログが中心で、自作でHTML、CSS、javascriptとか駆使して作ってとかって、 少なくてなった感じもする・・・・・・ でも、今はネットで沢山のアイデアとか、不都合での
これは、「浜崎あゆみ」さんの楽曲ランキングを作成改造して、 その関連で、現在作ってみてるヤツです。 英語での表現方法が「違うじゃね？」ってのも有るかもです・・・笑 あと、誤字脱字があるかもです。
浜崎あゆみ（ayumi hamasaki）さんが作詞（Lyrics）した楽曲を英語にしてみました。
サムネイル画像有りきで考えて画像は、webpにしてみたけど、 サムネイル画像が多い分どうなのか？ って問題も有るけど・・・・・まぁ、良いかぁ・・・笑 ヘッダーとフッターどちらか、固定した方が良いのかも？ カクカクした動きになる時も有るから・
【bloggerでステマ規制法対策】html編集で記事上に設定してみた
bloggerでステマ規制法対策として記事上に”アフィリエイト広告を利用しています”という文言を入れました。2023年10月1日からステマ法規制が導入。bloggerのhtml編集画面で簡単5分もかからず設定完了！
![はてなブログカスタマイズの記事まとめ（その5）[HTML、CSS、はてなブログ関連]](https://img.blogmura.com/sites/1251975/post-images/57017456.webp/crop/435x435)
はてなブログカスタマイズの記事まとめ（その5）[HTML、CSS、はてなブログ関連]
ブログカスタマイズに関する記事をいくつか投稿したので、まとめてみようと思います。 ちなみに、ブログカスタマイズの記事まとめは5回目です。これまでのまとめ記事はこちら。 これまでのブログカスタマイズ まとめ記事 ブログカスタマイズの記事まとめ（その1）[CSS/JavaScript/デザインテーマ] ブログカスタマイズの記事まとめ（その2）[CSS/はてなブログ関連/デザインテーマ] ブログカスタマイズの記事まとめ（その3）[CSS/HTML/JavaScript] ブログカスタマイズの記事まとめ（その4）[CSS、HTML、JavaScript、はてなブログ関連] ということで、投稿した記事を…
【はてなブログ-カスタマイズ】HOMEボタンをページに固定表示する
数日前から適用していますが、HOMEボタンを配置してみました。 ページの右下に常に表示されているボタンです。以前も「トップへ戻る」ボタンを配置しており、そこに縦に並ぶ形で「HOME」ボタンも配置してみました。関連記事【はてなブログ-カスタマイズ】「トップへ戻る」ボタンをページに固定表示する「HOME」のページに戻りたい時が多いので、せっかくなら右下に固定表示してしまおうと思った次第です。今回の対応で「トップへ戻る」ボタンも微調整しているので、その件も含めて書いていきます。
8月が終わりましたねぇ…(=ω=)ブログを開設して2ヶ月半。8月1日には念願の女装完全復活！そして8月は計5回の変身！われながら頑張ったなぁ…このくっそ暑い中w これからも無理のないペースで活動していきたいです。応援よろしくね♡あと、もう少し気楽にブログ書きたいかなぁ。なんかいろいろ考え過ぎてしまう…ぼくの悪い癖。ま、性格だから直んないけどw話は変わって… トップページの配信サイトへのリンクのバナーを4つに増やし...
こんにちはです。あっちのそららです。今回は、HTMLとCSS（ウェブ制作などで使う言語）で、夏にピッタリなひまわりの花を作ってみました。「Result」でイラストを確認できます（レスポンシブ対応済）。 See the Pen Sunflower by あっちのそらら (@acchinosoraranocode) on CodePen. 今年、CSSで三角関数がサポートされたので、試しに花びらの部分に取り入れました。三角関数の表現のひとつとして、要素を円周上に並べることができます。以下、今回の三角関数の工程をざっくり解説します。まずHTMLで、花びらの数に応じた番号を付与します。今回は10個なの…
ブログにコメントが書けない、表示されないのは？HTMLがわからない私のために
先日のブログでコメントが書けないと指摘がありました！ コメント見れない、表示されてない などと言う指摘もあり・・・ 何がどうなってるのって思ったわけです。こういう時は検索すると解決方法がみつかるんだよ。 どのサイトを見たのかは忘れちゃったけど 私でも、あっさり解決できた。 問題のブログはこちら （すでに修正済み） ⇩ fatbottomgirl.hatenablog.com 何かが変 修正 誤りを見つけるには スマホのスクショでごめん さいごに 何かが変 ブログのコメントが 書けない 見れない 表示されてない などの指摘があった。指摘されては無いけど サイドバーが白紙状態で あるはずのプロフィ…
ブログカスタマイズの記事などで適用手順を書くことが多いため、ステップバーを導入してみました。ステップバーを導入する前は①、②、③・・・といった書き方でした。 それがステップバーの導入により、CSSでデザインされた見た目に変わりました。今回の対応により、手順を書いている感じがパッと見で表現できるのが良いなと思っています。使い方がちょっと独特なので、その辺も含めて書いていきます。
</> <div style="text-align: center;">〜ここにHTML〜</div> お疲れ様でした！
![はてなブログカスタマイズの記事まとめ（その4）[CSS、HTML、JavaScript、はてなブログ関連]](https://img.blogmura.com/sites/1251975/post-images/55364187.webp/crop/435x435)
はてなブログカスタマイズの記事まとめ（その4）[CSS、HTML、JavaScript、はてなブログ関連]
ブログカスタマイズに関する記事をいくつか投稿したので、まとめてみようと思います。 ちなみにブログカスタマイズの記事まとめは4回目です。これまでのまとめ記事はこちら。 これまでのブログカスタマイズ まとめ記事 ブログカスタマイズの記事まとめ（その1）[CSS/JavaScript/デザインテーマ] ブログカスタマイズの記事まとめ（その2）[CSS/はてなブログ関連/デザインテーマ] ブログカスタマイズの記事まとめ（その3）[CSS/HTML/JavaScript] 直近のブログカスタマイズはCSS、HTML、JavaScriptと、多岐にわたる感じになりました。 ということで、投稿した記事をまと…
【はてなブログ-カスタマイズ】スマホ版のグローバルナビゲーションを変更してみる
数日前から、スマホ版のグローバルナビゲーションを変更しています。 前はヘッダーに配置していたのですが、フッターに移動しました。これはCSS、HTML、JavaScriptを追加適用することで実現しています。なんとなく、スマホを手で持った時の親指の位置的に、フッターにメニューがあった方が操作しやすいなと思っています。なのでネットで調べて、自分のブログにも適用してみました。今回はその適用内容や手順について、アレコレ書いていきます。
2022年秋の課題「自転車サイト」をHTML=テキストで表わすと・・・長い文でしかありません？！
2022年秋の課題「自転車サイト」をテストUPは失敗!？⇒画像🚲で再現します。サイト（HP）もブラウザ＝chrome や インターネットエクスプローラー や …
【初心者向け】CSSのbackgroundプロパティの基本backgroundは、CSSのプロパティであり、要素の背景に関連する設定を行います。Webデザインにおいて、背景の設定は非常に重要な役割を担っています。その中でもCSSプロパティの
display:flex; フレックスボックスを使ったWebデザインの基本
フレックスボックス(display: flex;)は、Webデザインにおいて広く用いられているレイアウト方式です。極めて自由度が高く、様々なレイアウトを実現できるため、多くのデザイナーにとってなくてはならない技術の一つと言えます。しかし、初
「DOM」という言葉を聞いたことのあるWEBエンジニアの方も多いはずです。それは、DOMがウェブの動的なコンテンツを生成する上で非常に重要な役割を担っているからです。しかし、初心者の方にとっては、「DOM」という言葉だけでも、かなり意味不明
合格発表 今日は先日受験した学校の合格発表。受験前からかなり否定的というか難しいと言われていた。能力的なところもあると思うが一番は年齢だった。ハローワークからは年齢的に合格する可能性は極めて低いから受けても無駄、どうしてもというなら出願書類
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思っていたより簡単に配置できました。 ということで、使い方や適用手順などを書いていきます。
