googleアドセンスを はてなブログ の ブログ記事下 に配置したときのCSSメモです。 googleアドセンスでは、レスポンシブ用の広告が簡単に利用できるようになっているので、そちらを利用している方も多いかもしれません。私の場合は少し古い手法ですが、ブロ…

ProgeteのHTMLやCSSの学習が終わったので、今は「Codestep 」さんというサイトで模写コーディングをしながら勉強しています。 プロの方は何も見ずにスラスラとコードが書けるのが羨ましいと思いつつ、私の場合は、「どうして思ったようにうまく反映されない…

※独学で勉強している素人の記事なので間違いがありましたらコメント欄で教えていただけると嬉しいです。 CSSの勉強をしています。今日はFlexboxとGridを使ったときの上下中央揃えのサンプルコードをメモしておきます。 Flexboxを使った上下中央揃えのサンプ…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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