みずー工房

気ままライフを綴るブログです

ブログ開発記

【はてなブログPro】グループを作る

はてなブログのグループを作ってみましょう。 はてなブログPro限定の機能です。 グループって 作れるんだね!

【はてなPro】ブログメンバーと一緒に記事を書く

はてなブログPro(有料会員)の場合は、所持しているブログを他のユーザと共有して、記事を書く事ができます。 このブログメンバー機能を実際に使ってみて、いろいろまとめてみました。 この記事も ブログメンバー機能を使って書いてるよー

【はてなブログ】詳細設定をいじる(Pro限定編)

今回は、詳細設定の中で ”はてなブログPro限定” で変更できる設定をいじってみましょう! はてなブログPro...?

【はてなブログ】詳細設定をいじる(後編)

はてなブログでいじれる詳細設定についてまとめておこうと思います。 今回は、head内タグの設定や高度な設定などについて書いてます。 JavaScriptの読み込みとかを ここのheadに 記述できるよー

【はてなブログPro】固定ページを作る

はてなブログPro(有料会員)限定で作成できる固定ページについて、まとめておきます。 固定ページは、自己紹介で利用する ”aboutページ” のように静的なコンテンツになります。 ...? ”静的なコンテンツ” って何?

【はてなブログ】詳細設定をいじる(前編)

今回は、詳細設定をいじってみましょう。 主に記事のデフォルト設定や外部の解析ツールの設定について触れていきます。 はてなブログに 外部の解析ツールを 設定できるんだ...!

はてなブログテーマストアの説明欄の文字色を変える

はてなブログテーマストアの説明欄の文字色を変更してみましょう。 style属性が利用できないので、以下のようにfontタグを使います。 fontタグは以下のように利用します。この例では文字色を赤に変更します。 HTML <font color="red">ここの部分が赤になります</font> <font color="#ff0000">もちろん、カラ</font>…

【Canva】記事のアイキャッチ画像を作る

Canvaを利用して記事のアイキャッチ(サムネイル)画像を作ってみましょう。 最近の更新で、はてなブログ記事の編集画面にも追加されましたねー

【CSS】自作マーカーリストを作る(フォント編)

前回は画像を使ってリストを作ってみました。 今回は左のようにアイコンフォントを利用した自作のリストを作ってみましょう! .my-list { list-style: none; } .my-list li { position: relative; left: 1.2em; width: calc(100% - 1.2em); } .my-list li::b…

はてなブログの自作テーマをストアに投稿する

はてなブログの自作テーマを作って公開したので、投稿時の注意とかを備忘録としてまとめておきます。

はてなブログで Google Fonts を使う

はてなブログで Google Fonts が使えるように設定してみましょう。 今回は例として、私がよく利用している「M PLUS 1p」を設定してみます! フォントを選ぶ こちらのページからフォントを選択しましょう。日本語フォントについては私が見た時は9種類ありまし…

ブログテーマ「るーずりーふ」について

本日2月10日に、みずーが作成したはてなブログテーマをリリースしました。 はてなブログで利用できるテーマの「るーずりーふ」を紹介します!ぜひお使いください。

はてなブログの携帯レイアウトをパソコンと同じにする

はてなブログモバイル版のレイアウトをパソコン版と同じにしてみましょう。 「デザイン」の設定項目の「スマートフォン」から設定が可能です。 モバイル対応版(レスポンシブデザイン)のテーマ はてなブログで使用しているテーマによって、この設定の向き不向…

【CSS】スクロールバーを設置する

このようにスクロールバーを設定してみましょう。 幅や高さに制限がある時などに設置すると、とても効果的です。 コンパクトにしたい時も良いですね!

はてなブログの記事にアニメPNGを貼る

はてなフォトライフで利用できないアニメーションPNG(APNG)を記事に貼り付けてみましょう。 たぶん、おそらく、ひょっとしたら、ブログのオリジナリティが増すかもしれません! アニメGIFはフォトライフに対応しているので全く問題ないんですけど、 アニメPN…

【HTML】GoogleDriveの画像を記事に貼る

Googleドライブに保存されている画像を直接はてなブログの記事に貼る方法です。 はてなフォトライフの容量制限回避やフォトライフ非対応形式の画像を掲載したい場合に役に立ちます。 ”Googleフォト”ではなく、”Googleドライブ”です。

【HTML】検索ボタンにアイコンを設定する

こんな感じの検索ボックスを作ってみましょう。 検索ボタンは、FontAwesomeのアイコンを設定しています。 いい感じにCSSでデザインをいじって、このようにHTMLを設定すると表示できます。 フォーム全体を”search-form”、入力フォームを”search-input”、ボタ…

【CSS】自作マーカーリストを作る(画像編)

”HTMLでリストを使おう!” では、リストを作ってみました。 その時に紹介した方法だと、左側のマーカーのデザインは数が少なく限定的でした。 CSSを使えば、こんな感じに華やかな(?)リストを生成することができます。 画像を使ったリストの作成方法です。 .…

【はてなブログ】埋め込み下のURLを消す

Markdownやはてな記法でリンクを埋め込んだ時に、このように下にURLも一緒に添付されます。 Markdown [https://3z1k.hatenablog.com/:embed:cite] Result 実際にボックス内をクリックすればサイトには飛ぶことができるので、必要ないと感じるかもしれません…

【Web】アイコンを使う(Font Awesome編)

前回 は「 はてな」が提供するアイコンを利用する方法を紹介しました。 今回は無料でも1600個以上のアイコンが使える「 Font Awesome 5」を紹介します。 こんな感じでさまざまなアイコンが利用できますよ!

【はてなブログ】自作デザインを確認する

自分で作成したブログデザイン(デザインCSS)を確認してみましょう。 ブログをすでに公開されている方は、確認用のブログを作ることをおすすめします。

【はてな】レスポンシブデザインとは?

レスポンシブデザインを利用すると、画面サイズによってブログの要素の配置やデザインを切り替えられます。 設定しておくと、PCやスマホなど画面サイズが異なっていてもきれいに表示できます。 試しにPCの方はウィンドウを小さくしたり、大きくしたりしてみ…

【HTML】表を使おう!

前回はリストを使ったので、今回は表を使ってみましょう。 こちらも情報が整理されて見やすくなりますよー。これは2021年3月までの国民の祝日一覧です。 国民の祝日日付 元日1月1日(金) 成人の日1月11日(月) 建国記念の日2月11日(木) 天皇誕生日2月23日(火) …

【はてな】boilerplate.cssのなかみ(逆引)

前回「 boilerplate.cssのなかみ 」では、はてなブログ側が定義しているclassやidの多くが書かれている、 「boilerplate.css」についての内容をまとめました。 今回は、変更したい要素からclassやidがわかる逆引きのまとめを書こうと思います。

【はてなブログ】はてな市民制度とは?

はてな市民制度について紹介します。簡単に言えばステータスになります。 以前は「読者機能」の記事と一緒に掲載していましたが、分割しました。

【HTML】リストを使おう!

リストを使うと、情報が整理されて見やすくなります。 こんな感じで、記事の中でリストを使ってみましょう。

【HTML】ストリートビューを埋め込む

はてなブログの記事に、Googleストリートビューを埋め込んでみましょう。 画像と違って動かせるので、周辺の状況もよくわかります。

【はてなブログ】boilerplate.cssのなかみ

前々回の「オリジナルなブログにする」では、自分のはてなブログを1からデザインできることがわかりました。 その際に紹介した「boilerplate.css」に書かれていることについて、まとめておこうと思います。 私の備忘録用でもあります。

【Web】デザインとCSSの対応を調べる

前回の オリジナルなブログにしよう では、CSSを使えばテーマを自作できることがわかりました。 今回は、どのデザインと設定が対応しているのか、「要素を検証」を使って調べる方法を紹介します。

【はてなブログ】YouTubeの動画を埋め込む

はてなブログの記事に、こんな感じにYouTubeの動画を埋め込んでみましょう。 横幅も高さの設定も自由自在にできます!