monoのメモ帳

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

はてなブログテーマ作り

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

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

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

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

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

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

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

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

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

皆さんこんにちわ、モノトーンとシンプルなものが好きな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のカウンター…

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

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

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

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

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

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

はてなブログテーマ製作|ページャーを作るのに一苦労

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

はてなブログのテーマ作成で一番最初に書いたCSS

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

はてなブログの自作テーマを作る手順を振り返る

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

ご挨拶

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