monoのメモ帳

HTMLとCSSを勉強しながらはてなブログをカスタマイズ中です。

見出しタグに日本語と英語を併記する場合のHTMLとCSSの書き方メモ

CSS

サイト作成をしているとたまに h2 や h3 の見出しタグに英字と日本語が併記されている場合があります。 そんな時、皆さんはどんなふうにコーディングされていらっしゃいますか? <h2> <span class="ja">ニュース</span> <span class="en">News</span> </h2> こんな風に見出しタグの中に spanタグを入れて日本語と英語そ…

Progateで学んだSassのまとめ

前回はjQueryを勉強したのですが、今回はCSSの上位互換ともいえるSassです。CSSの記述が簡単になるということで、ちょっと勉強してみました。 Sassとは、CSSを拡張して扱いやすくしたもので、書きやすく、見やすいと使い勝手がいいようです。Sassはそのまま…

Progateで学んだjQueryのまとめ

プログラミングの基礎が学べる『Progate』の有料会員(税込¥1,078/月)になったので、サイト制作に関連するプログラミングを学んでいます。 今回はjQueryをやってみたので、学んだことを自分用にまとめてみました。 jQueryとは JavaScriptのライブラリで、jQue…

プログラミングの基礎が学べるProgate[プロゲート]のHTML&CSSを試してみた

Twitterで見かけたProgate[プロゲート]というサイト。プログラミングの基礎が学べるオンラインプログラミング学習サービスサイトで、「初心者から、創れる人を生み出す」というコンセプトで運営されています。 わたしは学校に通って HTML や CSS や JavaScri…

Visual Studio Code(VScode)をインストールしてからやったことのメモ

HTMLやCSSやJavaScriptを独学で勉強中なのですが、コードエディタにVisual Studio Code(VScode)を使い始めました。 まだ触りだしてから数週間しか経っていないのでわからないことばかりです。 今までは昔からあるTeraPadを利用していたのですが、今の時代はV…

フォントファミリーの欧文フォントは何を選べばいいのか

CSS

フォントの世界も調べてみると奥が深くて本を買いました。 Amazon.co.jp: となりのヘルベチカ eBook : 芦谷國一, 山本政幸: 本 欧文フォントを個性豊かに擬人化した本で漫画になっているのでフォントのイメージがつかみやすいです。 欧文フォントについて歴…

はてなブログで記事のタイトルとURLをコピーするボタンを設置する方法の備忘録

※自分用の備忘録として記録している記事です。 WordPressを利用されている方のブログによく設置されている「記事のタイトルとURLをコピー」するボタン。 記事のタイトルとURLをコピーするボタン わたし個人はこのボタンを使い勝手がわからずに全く使っていな…

AI Programmer(日本語で指示を出すだけでコードを自動生成)がすごい

Twitterで話題になっていた日本語で指示を出すだけでコードを自動生成してくれる『AI Programmer』。 AI Programmer 現在プロトタイプが無料で公開されていて、言語を選択してAI Programmerに書かせたいコードの処理内容を入力するだけで、コードを自動生成…

游ゴシック体がWindowsで擦れる時のフォントファミリーの設定方法

CSS

ブログのフォントファミリーに「游ゴシック体」を使いたいと設定していたのですが、どうも、Windows の Chrome や Edge で閲覧すると文字が擦れて読みにくいので、対処法について考察してみました。 游ゴシックとは Windows の Chrome や Edge で文字が見に…

はてなブログのAmazon商品紹介のボタンの色を変える方法

はてなブログでは、Amazonアソシエイトに参加している人ならだれでも簡単に、Amazon商品紹介という機能を使ってAmazonの商品リンクをブログに貼ることができます。 はてなブログにAmazonアソシエイトの設定をしよう Amazonのブランドカラー はてなブログのAm…

はてなフォトライフで画像をアップロードする方法

はてなブログをカスタマイズしていると、ヘッダーに大きめの画像を使いたいときや、プロフィール欄の画像を大きくしたいときなどに、「はてなフォトライフ」に画像をアップロードする場合があります。 関連記事:【ツール】はてなブログのプロフィールをカス…

はてなブログのテーマづくり フッターの幅を100%にする

前回の続き 過去記事:はてなブログのテーマづくり 1カラムレイアウトにする - monoのメモ帳 フッターは横幅100%にしたいので、 501行目当たりのこの部分を /* container */ #container, #footer { padding-left: 10px; padding-right: 10px; } @media (min-…

はてなブログのテーマづくり 1カラムレイアウトにする

自分用のテーマを作ってみてテーマづくりがとても楽しかったので、ほかの人にも使ってもらえるようなテーマを作ろうと模索中です。 1カラムレイアウトにしてみる 公開するかどうかはわかりませんが、テーマづくりを進めていく履歴をメモ書きとして残しておこ…

【ツール】はてなブログのプロフィールをカスタマイズ

はてなブログのサイドバーにあるプロフィール欄をシンプルなデザインに変更したかったので、コピペで作成できるツールを作ってみました。 はてなブログのプロフィールをカスタマイズする手順 手順1 CSSを設定する 手順2 HTMLを設定する 入力項目について補足…

トップへ戻るのボタンをHTMLとCSSのシンプルなものに変更|はてなブログカスタマイズ

前回は、JavaScriptを使ってブログのトップへ戻るのボタンを作ったのですが、buttonタグを使ってトップへ戻るのボタンを作ると、buttonタグには文字が必要というエラーが出てきてしまうことに気づきました。 過去記事:トップへ戻るのボタンを作る|はてなブ…

記事下のSNSシェアボタンを作ってみた|はてなブログカスタマイズ

はてなブログでは、記事下にSNSボタンが管理画面から簡単に設定できますが、オリジナルのものに変えてみました。 出来上がりのイメージ やりたいこと はてなのwebアイコンを使って軽くしたい カウント数の読み込みは不要 関連記事とSNSボタンの位置を変更 デ…

adobeで購入しようとしたらクレジットカードと郵便番号を入力してもエラーになる件

adobeでXDの体験版を試してみようとインストールしたときのことです。 XDの体験版は7日間無料で利用できるのですが、7日間を過ぎると自動的に本契約に移行するようになっていて、体験版のインストール時にクレジットカードの登録が必要です。 そのクレジット…

ブログのCTAのサンプルを作ってみた|はてなブログカスタマイズ

最近、ブログ記事の下の方にCTAを設置している方をお見かけしました。 CTAというのは行動喚起を意味して、ブログに来てもらった方に、何かを宣伝したいときに使います。 わかりやすいボタンを設置して、リンクをクリックしてもらえるように工夫している方が…

ブログのプロフィールアイコンを書いてもらいました

皆さんこんにちわ、モノトーンとシンプルなものが好きなmonoです。 いつもご訪問いただきありがとうございます。 さて、皆さんは、ブログやSNSのアイコンの画像はどうされていらっしゃいますか? 私は、今まで適当な画像を用意して利用していたのですが、今…

サイドバーのプロフィール欄にSNSのアイコンを作る

前回の続きです。 過去記事:はてなブログのプロフィール欄をシンプルなデザインに変えてみる - monoのメモ帳 この前、ブログのサイドバーのプロフィール欄を自分で作ったものに変更したのですが、SNSのボタンもつけたいと思って、簡単にSNSのボタンが作れる…

はてなブログのプロフィール欄をシンプルなデザインに変えてみる

はてなブログのサイドバーにあるプロフィール欄ですが、少し画像を大きくしたいと思って簡単にHTMLが吐き出せるツールを作ってみました。 出来上がりのイメージ 手順1 スタイルシートをコピペする スタイルシートのサンプルはこちら 「管理画面」→「 デザイ…

トップへ戻るのボタンを作る|はてなブログカスタマイズ

トップへ戻るのボタン はてなブログをカスタマイズしたくてHTMLとCSSの勉強をはじめたのですが、JavaScriptを覚えるともっといろんなことができるみたいで、JavaScriptの本も買いました。 はじめてのJavaScriptなので、まだ右も左もわかりませんが、ちょっと…

CSSで三角形を作る ーチートー

ブログのテーマを制作していると三角形をCSSで書く場面が度々でてくるので、チートとして記録しておきます。 下向き三角 下向き三角 .sankaku p:before{ content: ""; position: absolute; width: 0; height: 0; margin: 100px; border-style: solid; border…

注目記事にランキング番号を付ける|はてなブログカスタマイズ

出来上がりイメージ いろんなサイトで、人気記事に順番が振ってあるのを見るので、はてなブログの人気記事にも番号がつけられないかやってみました。 CSSのカウンターを利用して番号をつける 人気記事ランキングに番号を付ける サンプルCSS CSSのカウンター…

できるだけ綺麗な画質でヘッダーの画像を作りたい|はてなブログカスタマイズ

自作のテーマを作るきっかけの1つに、大きな画像のヘッダーを利用したいというのがありました。 はてなブログのデフォルトの推奨画像サイズは1000px × 200pxとなっています。 「管理画面」→「 デザイン」→「 カスタマイズ」 →「ヘッダ」で、ヘッダー画像を…

はてなブログカスタマイズ|コメント欄をCSSで吹き出し風にしてみた

コメント欄を吹き出し風のデザインに HTMLもCSSも全くの初心者のmonoです。皆さんこんにちわ♪ 今日は、はてなブログのコメント欄をCSSを使ってよくある吹き出し風のデザインへ変更してみました。 枠を重ねて吹き出し風にする ↑目指す出来上がりはこんな感じ…

グローバルナビゲーションを作る

ブログのグローバルナビゲーションを作ったのでその過程を備忘録として残しておこうと思います。 グローバルナビゲーションを作るにあたって、どんな風にしようかと考えたのですが、カテゴリをたくさんグローバルナビゲーションに置いても大丈夫なようにする…

はてなブログのテーマでレスポンシブ対応を選んでいるのにスマホで表示されない時の対処法

はてなブログのテーマでレスポンシブ対応のテーマを選んでいるのに、スマホで見るとパソコン画面をただ単に小さくしただけの表示がされてしまうという方をお見掛けしたので対処法を書いておきます。 はてなブログのテーマでレスポンシブ対応を選んでいるのに…

はてなブログのテーマが完成|パソコン・タブレット・スマホのはめ込み画像を作ってみた

自作のテーマ 自作テーマの形ができてきたので、WEBデザイナーさんみたいなことがやりたくて、モックアップというのを作ってみました。 テーマが完成したらパソコン・タブレット・スマホのはめ込み画像を作ってみよう Placeitでモックアップを作ってみたよ P…

よく使うはてなブログのWebアイコンフォント

はてなブログでは、独自のWebアイコンフォントが用意されています。 Webアイコンフォントで有名なのが Font Awesome ですが、アイコンの種類はとても豊富にありますが、サイトが若干重くなってしまいます。はてなブログのWebアイコンフォントは120種類以上あ…

掲載しているコードについて

当ブログでは、カスタマイズを行なっていく上で、HTMLやCSSなどのコードを掲載しています。 自由にコピペしてご利用いただいても構わないのですが、利用しているテーマなどによってはうまくいかない場合もございます。 また、コードを利用して不具合が生じた場合でも一切の責任は負いかねますので、その点はご理解、ご了承いただきますようよろしくお願いいたします。