はてなブログでは、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を使ってよくある吹き出し風のデザインへ変更してみました。 枠を重ねて吹き出し風にする ↑目指す出来上がりはこんな感じ…

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

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

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

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

はてなブログのテーマを自作テーマにしようと現在奮闘しております。 皆さんこんにちわ、モノトーン好きのmonoです。 さて、タイトルの通り、今日もはてなブログのテーマをちまちまと作っておりますが、今回はページの次へ、前への表示のページャーです。 デ…

はてなブログのテーマを製作しているのですが、最初から躓いております。 みなさんこんにちわ、モノトーン好きのmonoです。 レスポンシブデザインのテーマを作成したくてCSSの本を購入したのですが、中古のCSSの本を購入したので情報が古くて使えませんでし…

今の時代はスマートフォンやスマホからの流入が多いので、サイトを作る際もモバイルファーストで、モバイルサイトから先に作るWebデザイナーさんも多いのだとか。 私も、はてなブログでテーマを作成するのであれば絶対にレスポンシブデザインがいいと思って…

HTMLもCSSも勉強したことがない素人が、はてなブログのテーマ製作にチャレンジしています。 一番最初に書いた方がいいと思うのは *, *:before, *:after { box-sizing: border-box } 全ての要素に、box-sizing: border-boxを設定しました。 box-sizing: borde…

今ご覧いただいているテーマは自分で作ったテーマです。HTMLもCSSもわからない普通の主婦が、本を片手に作ったものなのでまだまだ手直しが必要かもしれませんが、一応形になってきました。 自作のテーマを作るメリットとしては 自分の好きなデザインにできる…

はじめまして、monoのメモ帳にご訪問いただきありがとうございます。 このブログはHTMLもCSSもわからない超初心者が、はてなブログのテーマを作成していく過程を綴っていくブログです。 専門の学校に通ったこともなく、HTMLとCSSの本を手にしたのは1週間ほど…