Web
Analytics

SATOREPO BLOG

当ブログはアフィリエイトや広告で収入を得ておりません

VRoid Sitemap/VRoid記事のサイトマップ
「英語学習」の記事一覧
【2021年】NHK語学の音声教材のメリット、デメリットとDL費用を節約する方法
【2022年】これからブログで稼ぎたい方にブログ歴2年の私の実情を教えます

【はてなブログ/Minimalism】このブログでやったカスタマイズ

f:id:satorepo:20220122231823p:plain

※この記事は、はてなブログユーザー向けの内容です。

ここでは、2022年1月31日までにこのブログでやったカスタマイズを紹介します(詳しいやり方は出典元をご覧下さい)

制作環境

はてなブログのテーマ:Minimalism

Windows10

はてなブログProに加入していますが無料版でも使えるカスタマイズを紹介しています。

ブログカスタマイズの一覧

「これだけはやっておきたいブログのカスタマイズ5選」

2021年3月に「これだけはやっておきたいブログのカスタマイズ5選」という記事を公開しました。

satorepo.com

ブログ初心者向けに「見やすいブログにするために最低限必要なカスタマイズ」を5つに絞って紹介したものです。当ブログでは今もこの5つのカスタマイズを施しています。具体的には

  • グローバルメニュー(ブログタイトル下のメニュー)
  • 画面下のメニュー
  • 文字の大きさの変更(本文、目次)
  • スマホ版で太字が表示されるように設定

の5つです。

ブログタイトルのフォント(字体)の変更

このブログのタイトルはWindowsで見るとオシャレなフォントになっています。

詳しいやり方はこちら。私はfont-familyの後に「 'Segoe Print','Zapfino', sans-serif;」と書いています。

はてなブログでフォント変更カスタマイズ | くうかんしんぷるライフ (kurasitotonoe.com)

f:id:satorepo:20220122221437p:plain

SATOREPO BLOGのタイトルのフォント(Windows10)

目次を(手動の)開閉式にする

詳しいやり方はこちら。

はてなブログ目次をCSSだけで開閉式にする方法 コピペOK(目次の表示/非表示切り替え) - バンビの初心者ブログ教室 (bambi.pro)

CSSで全記事を(手動の)開閉式にする方法と、HTMLで特定記事だけ(手動の)開閉式にする方法が紹介されていますが、私はCSSの方法のみ取り入れています。

目次から中見出し(h4見出し)、小見出し(h5見出し)を消す

詳しいやり方はこちら。

はてなブログの公式目次機能にちょっとコードを足してグッと使いやすくするカスタム - Yukihy Life「見出しの一部を消す」

「この記事は約○分で読めます」を記事タイトル下に表示させる

詳しいやり方はこちら。

【はてなブログ】「この記事は、約○分で読めます。」を表示するようにしました - A Sky Blue Diary~想いをかたちに~ (hatenablog.com)

プロフィールにSNSのフォローボタンを設置

詳しいやり方はこちら。

はてなブログ-フォローボタンのカスタマイズ【Twitter、Pinterest、YouTubeにも対応】 - フジブロっ! (fuji-blo.com)

f:id:satorepo:20220122224722p:plain

サイドバーのプロフィールにフォローボタンを設置

ブログ管理画面→デザイン(パレットのアイコン)

→ペンチのアイコンをクリック→「サイドバー」

→プロフィールの「編集」をクリック→「自己紹介」のボックスにコードを貼り付ける、で完了です。

ブログのヘッダー下におすすめの記事のリンクを貼る

詳しいやり方はこちら。

【はてなブログ】ヘッダー下におすすめ記事やアイキャッチを並べて表示するカスタマイズ方法 - バンビの初心者ブログ教室 (bambi.pro)

f:id:satorepo:20220122224801p:plain

ヘッダー下におすすめ記事を設置

見出しに色を付ける、デザインを変える

このブログの一番大きな見出しは角が丸い紺色の四角に白い文字、2番目に大きな見出しは紺色の文字にしています(この記事でもそうなっています。文字色のコードは #364e96 )

詳しいやり方はこちら。様々な見出しデザインのCSSが掲載されています。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選 (saruwakakun.com)

ブログ管理画面→デザイン(パレットのアイコン)→ペンチのアイコンをクリック→CSSをクリック→CSSを貼り付け、で完了です。

 

Twitterみたいにはてなブログタグを検索するには

f:id:satorepo:20220116114329p:plain

Twitterにはホーム画面の分かりやすい位置に虫眼鏡のボタンがあって、それをタップしてハッシュタグ(#が付かない単語でもOK)を入力すれば、そのハッシュタグが含まれているツイートを検索できます。

同じことを「はてなブログタグ」でもやりたかったのですが、この1年ずっとやり方が分かりませんでした。

例えば「VRoid」について他の人はどんなことをブログに書いているんだろうと思ってタグを検索したくてもできませんでした。

しかし、偶然やり方を発見しました。

 

はてなブログタグを検索するには

以下のURLではてなブログタグを検索できます。

 

https://d.hatena.ne.jp/keyword/(検索したい単語)

 

例えば「はてなブログ」というタグが付いているはてなブログを検索したければ「(検索したい単語)」を「はてなブログ」に置き換えて下さい。

「#はてなブログ」が付いているはてなブログ一覧が表示されます。

 

思いの外簡単だったので試してみて下さい。

 

このブログについて

このブログでは、はてなブログの使い方やブログ運営に役立つ記事も掲載しています。

ブロガー必見!無料で簡単にアニメ風顔アイコンを作るには【VRoidStudio正式版使用】 - SATOREPO BLOG

satorepo.com

イラストが描けない人でも無料で簡単にアニメ風顔アイコンを作れます。VRoidStudioは3Dモデル作成ソフトですが、顔だけ撮影すればアイコンにできます。

 

【2021年1月】実録・WordPressからはてなブログへの移転手順(独自ドメイン引き継がず) - SATOREPO BLOG

satorepo.com

(この記事の時点から)ちょうど1年前の記事ですが結構アクセスをいただいています。ありがとうございます。移転大変だったなぁw

1年間はてなブログProを続けていますが使いやすいしセキュリティとかSEO対策とかをはてなブログ運営会社がやってくれて助かるので、このまま使い続けたいです。(宣伝っぽい流れですが)はてなブログProの利用料金を節約する裏技も紹介しています。

もしもアフィリエイト経由ではてなブログProに申し込むとキャッシュバックが受けられます - SATOREPO BLOG

(2022年1月時点の条件も明記しています)

satorepo.com

 

【はてなブログMinimalism用】初心者でも簡単!これだけはやっておきたいブログのカスタマイズ5選 - SATOREPO BLOG

satorepo.com

この当時使っていたMinimalismというはてなブログテーマは2022年1月現在も使っています。「これだけはやっておきたいカスタマイズ5選」も未だ現役です。

 

【前編】真似OK!CanvaとMedibang Paint使用。はてなブログ(テーマ:Minimalism)のアイキャッチの具体的な作り方 - SATOREPO BLOG

satorepo.com

CanvaとMedibang Paintで無料で簡単にアイキャッチを作る方法を紹介しました。後編はこちら:【後編】真似OK!CanvaとMedibang Paint使用。はてなブログ(テーマ:Minimalism)のアイキャッチの具体的な作り方 - SATOREPO BLOG

 

バリューコマースともしもアフィリエイトは物販アフィリエイトに最もおすすめのASPです - SATOREPO BLOG

satorepo.com

はてなブログは商用利用が可能で、アフィリエイトは無料版でも使えます。

ブロガー必見!無料で簡単にアニメ風顔アイコンを作るには【VRoidStudio正式版使用】

f:id:satorepo:20220102133804p:plain

この記事ではブロガーをはじめオリジナルのSNSアイコンを欲しい方に向けて「VRoidStudioを使って無料で簡単にアニメ風の顔アイコンを作る方法」を解説しています。

ブロガーじゃなくてもTwitter, LINE, Instagram, YouTubeなどで使うアイコンが欲しい方も是非お読み下さい。

VRoidStudioとは

VTuberなどに使える3Dモデルの人体を簡単に作れる無料ソフトです。

公式サイト:VRoid Studio

2018年8月にベータ版が公開される。2021年10月31日に正式版(v.1.0.0以降)がリリースされる。ここで紹介するのは正式版です。

ベータ版ではある程度の技術力や知識がないと3Dモデル(アバター)が作れませんでしたが、正式版では何の知識も技術もなくても簡単に3Dモデルを作れるようになりました。

そういうわけで、VTuberになるつもりがなくても、SNS用の顔アイコンだけが欲しくてもVRoidStudioは使えます。

今後VTuberデビュー、バーチャルSNSデビューするかもしれないのでVRoidで顔アイコン、いや3Dモデルを作っておくと後々得するかもしれません。

(ただし今回はあくまでも「顔アイコンのみを作る目的」なので体型はいじりません)

制作した3Dモデルは商用利用可能

VRoid公式ヘルプにあるように、VRoidStudio正式版で自分で作ったモデルは商用利用が可能です。そういうわけでVRoidをアイコンにしたブログやSNSでアフィリエイトをやったりしても問題にはなりません。

VRoid Studio正式版で作成したモデルは商用利用できますか? – VRoid ヘルプ (pixiv.help)

事前準備

・VRoidStudioのダウンロード

こちらからダウンロードできます。

VRoidStudio公式サイト

vroid.com

詳しい手順は割愛します。Windows版とMac版があります。SteamからダウンロードできるバージョンもあるのでSteamを既にお使いの方はそちらがおすすめです。

ちなみに私はWindows版を使っています(Steamをインストールしたら元々動作が重いのにさらに重くなったのでアンインストールしてしまいました・・・)。

・3Dモデル(アバター)の保存先のフォルダを作る

正式版では自分の作った3Dモデルの保存先を自由に設定できます。これ自体はいいのですが自分でフォルダを作成しておかないといざ保存っていうときに保存先に迷うようになりました。

そういうわけでデスクトップにVRoid専用フォルダを作っておいて下さい。もちろんデスクトップ以外のお好きな場所でも構いません。

今回の作業環境

・VRoidStudio v.1.2.0

・Windows10 (64bit)

VRoidStudio正式版で顔アイコンを作る方法

今回はこのような男性アバターを作ってみます。もちろん女性も作れます。性別を問わず顔の作り方は同じです。

f:id:satorepo:20220101001736p:plain

試作品(SATOREPO・作)

(1)男性アバターを新規作成する

 

(1-1)新規作成の「+」ボタンを押す

f:id:satorepo:20220102125828p:plain

 

(1-2)性別を選ぶ画面が出てくるので「男性」を選択する

女性の顔を作りたいときは女性アバターを選んで下さい。

f:id:satorepo:20220102125904p:plain

(2)男性アバターが表示される

f:id:satorepo:20220102125952p:plain

マウスホイールを前に転がすとアバターが拡大されます。

また、Shiftボタンを押しながらマウスを左クリックして動かすと、アバターを上下左右に動かせます。

f:id:satorepo:20220102130007p:plain

(3)顔のパラメーターをいじって好きな顔を作る

目、鼻や口のパラメーターをスライダーで自由に設定できます。知識要らずで好きな顔を作れます。今回はこのような顔を作ってみました。

f:id:satorepo:20220102130031p:plain

パラメーター一覧

  • 目の横幅:0.115
  • 目の縦幅:-0.485
  • 目の距離:-0.608
  • 目全体を回転:-0.238
  • 目じりの高さ:0.211
  • 瞳の縦幅:0.260
  • まゆげの傾き:-0.062
  • まゆげの高さ:0.185
  • まゆげの距離:0.648
  • まゆげの縦幅:0.273
  • 鼻の高さ:0.172
  • 口の横幅:-0.211
  • 口の高さ:-0.233
  • 顔の形状(男性):1.000
  • その他のパラメーターはすべて0.000

(4)髪型を選ぶ

VRoidStudio正式版では髪型の選択肢がいくつかあります。髪型を作る技術がなくても簡単に髪型をアバターにセットできます(ベータ版にはこういうのがありませんでした)。

なお、今回の髪型選択や編集はあくまでも一例です。皆さんはVRoidStudioをいじりながらお好きな髪型をお選び下さい。

(4-1)「髪型」タブを選択

画面の上のメニューから「髪型」をクリックします。

f:id:satorepo:20220102130108p:plain

 

(4-2)「髪セット」の一番下までスクロール

上の方には女性の髪型しかないので、男性の髪型(あるいは女性のショートヘア)を選ぶには一番下までスクロールします。

f:id:satorepo:20220102130233p:plain

(4-3)一番下のショートヘアを選ぶ

ハネた毛が多い髪型を選びました。このまま使ってもいいのですが簡単にアレンジできます。次で解説します。

f:id:satorepo:20220102130257p:plain

f:id:satorepo:20220102131020p:plain

f:id:satorepo:20220102131034p:plain

f:id:satorepo:20220102131046p:plain

 

(4-4)左端のメニューから「前髪」を選択

f:id:satorepo:20220102130319p:plain

(4-5)「プリセット」から一番上の前髪を選択

今回は試しにこういう前髪を選んでみました。

f:id:satorepo:20220102130350p:plain

 

(4-6)左端のメニューから「後髪」を選択

f:id:satorepo:20220102134638p:plain

 

(4-7)好きな後ろ髪を選択

今回はこんな風にしてみました。

f:id:satorepo:20220102135127p:plain

f:id:satorepo:20220102135141p:plain

f:id:satorepo:20220102135150p:plain

f:id:satorepo:20220102135201p:plain

 

(4-8)右側の「髪型を編集」を選択する

後ろ髪の編集ができるようになります。

f:id:satorepo:20220102135713p:plain

 

(4-9)頭上のハネた毛を消す(一部のみ)

画像では分かりづらいのですが頭上にはハネた毛があります。

本当は全部消したかったのですがやり方が分からなかったので一部のみ消しました。

f:id:satorepo:20220102140253p:plain

 

(4-9-1)一番下の「手描きグループ1」を選択

f:id:satorepo:20220102140836p:plain

 

(4-9-2)右クリック→非表示をクリックする

f:id:satorepo:20220102141723p:plain

 

(4-10)編集した後ろ髪を保存する

「×」ボタンをクリックすると保存ボタンが出るので、「新規アイテムとして保存する」を選択します。

f:id:satorepo:20220102142942p:plain

f:id:satorepo:20220102142843p:plain

f:id:satorepo:20220102143250p:plain

髪型が「カスタムアイテム」として保存された。

これで髪型は完成です。

(5)眼鏡をかける(任意)

今回は眼鏡男子のアイコンを作りたいので眼鏡を作ります。ベータ版では髪型製作機能を使うしか眼鏡を作る方法がなかったのですが、正式版では簡単に眼鏡を作れます。

(5ー1)上のメニューから「アクセサリー」を選択

f:id:satorepo:20220102145315p:plain

 

(5-2)「アクセサリーを追加」をクリック

f:id:satorepo:20220102145114p:plain



(5-3)「眼鏡(厚みあり)」を選択

f:id:satorepo:20220102145411p:plain

(5-4)位置を選ぶ

眼鏡の位置を調節します。

上向きの矢印に沿うと眼鏡を上下に動かせます。同じように左向きの矢印に沿うと眼鏡を左右に動かせます。

f:id:satorepo:20220102145430p:plain

(5-5)フレームの色を選ぶ

黒い●を選択し、カラーパレットで好きな色を選ぶと色が変わります。

f:id:satorepo:20220102151033p:plain

今回は灰色のフレームにしてみました。パレット以外のどこかをクリックするとパレットが消えます。

f:id:satorepo:20220102151051p:plain

(5-6)パラメーターをいじって眼鏡の形状を作る

パラメーターをいじって好きな眼鏡のデザインを作って下さい。

f:id:satorepo:20220102151110p:plain

今回のパラメーター一覧

  • フレーム形状1:100
  • フレーム形状2:36.123
  • フレーム形状3:100
  • フレーム形状5:30.837
  • フレーム形状6:100.000
  • 前に伸ばす:70.485
  • フレームを細く:100.000
  • フレームを厚く:50.000
  • その他のパラメーターはすべて0.000

(6)服装を選ぶ

VRoidStudio正式版には服装のメニューもあります。ベータ版と比べたら遥かにバリエーション豊富なので、服を作れなくてもアバターを素敵にコーディネートできます。

(6-1)上のメニューから「衣装」をクリック

f:id:satorepo:20220102154339p:plain

(6-2)左のメニューからトップス、ボトムス、靴を選ぶ

「全身セット」から選ぶこともできますが、今回は別々に選びました。

(6-2-1)トップスの選び方

f:id:satorepo:20220102154427p:plain

(6-2-2)ボトムスの選び方

f:id:satorepo:20220102154504p:plain

(6-2-3)靴の選び方

f:id:satorepo:20220102154536p:plain

(7)表情を作り写真(画像)を撮る

いよいよ表情を決めて写真(画像)を撮ります。この画像をブログやSNSのアイコンに設定できます。

(7-1)上のメニューの「顔」をクリックする

f:id:satorepo:20220102160259p:plain

(7-2)左のメニューの一番下の「表情」をクリックする

マウスホイールを回転させると「表情」が表示されます。

f:id:satorepo:20220102160455p:plain

(7-3)「表情編集」とパラメーターを設定する

「NEUTRAL(標準)」を選択

パラメーターの「まゆげ(男性)」の「楽しい」を43.172に、「口(男性)」の「楽しい」を92.511にする。

f:id:satorepo:20220102160519p:plain

(7-4)カメラボタンを押す

f:id:satorepo:20220102161127p:plain

私のPCのメモリが4GB(推奨値の半分)しかないからか読み込みに時間がかかりました。

しばらく待つとこういう画面に切り替わります。

f:id:satorepo:20220102162016p:plain

(7-5)まばたきを外す&表情のパラメーターを設定する

写真を撮るとき(スクショを撮るとき)に目をつぶっちゃうといけないのでまばたきは外します。

f:id:satorepo:20220102162747p:plain

パラメーターは口の「通常」を100にした以外はいじっていません。

f:id:satorepo:20220102162728p:plain

(7-6)「撮影サイズ」をクリックして撮影サイズ(横幅と高さのpx)を設定

初期設定では横幅774px、高さ656px、プリセットサイズは「ウィンドウに合わせる」になっているのでそのまま使います。

f:id:satorepo:20220102163148p:plain

(7-7)カメラボタンを押して撮影する

PNGファイルの保存画面が出るので名前を付けて保存します。

f:id:satorepo:20220102163251p:plain

f:id:satorepo:20220102163714p:plain

(8)3Dモデルをパソコンに保存する

キーボードでCtrlとSを同時に押すと次のような画面が出てきます。

「事前準備」で作ったフォルダにモデルの名前を付けて保存して下さい。

f:id:satorepo:20220102154129p:plain

完成(撮影した写真はこちら)

完成しました!私の重いパソコンでも2時間ぐらいでできました。

(ブログ書きながら作ったので2時間もかかりましたが、VRoidだけに集中すればもっと早いはずです)

f:id:satorepo:20220101001736p:plain

VRoid試作品(SATOREPO・作)

アレンジ(1)髪の色を変える

上のメニュー「髪型」→「メインカラー」の茶色い●をクリック→カラーパレットで色を変更する。

まゆげのいろも同じ色(または似た色)に変えて下さい。

f:id:satorepo:20220102164403p:plain

まゆげの色の変え方

上のメニュー「顔」→左のメニュー「まゆげ」→「カラー」の茶色い●をクリック→カラーパレットで色を選択

f:id:satorepo:20220102164433p:plain

アレンジ(2)瞳の色を変える

「顔」→左のメニュー「瞳」→「カラー」の「両目」を選択→茶色い●をクリック→カラーパレットで色を選択

f:id:satorepo:20220102164614p:plain

おわりに

このようにVRoidStudioでは3DモデルだけでなくSNS用のアニメ風顔アイコンも簡単に作れます。

是非使ってみて下さい。

このブログについて

このブログではVRoidについての記事も掲載しています。未だに多くがベータ版時代の物ですが、正式版にコンバート(移行)する際にこちらの記事は役立つかと思います。

【VRoidベータ版】BOOTHでDLした髪型を自分のモデル(アバター)に着用させるには - SATOREPO BLOG

satorepo.com

 

【VRoidベータ版】服・靴をインポートするには(服を着せる、靴を履かせるには) - SATOREPO BLOG

satorepo.com

 

このブログでは、はてなブログの使い方やブログ運営に役立つ記事も掲載しています。

【2021年1月】実録・WordPressからはてなブログへの移転手順(独自ドメイン引き継がず) - SATOREPO BLOG

satorepo.com

(この記事の時点から)ちょうど1年前の記事ですが結構アクセスをいただいています。ありがとうございます。移転大変だったなぁw

1年間はてなブログProを続けていますが使いやすいしセキュリティとかSEO対策とかをはてなブログ運営会社がやってくれて助かるので、このまま使い続けたいです。(宣伝っぽい流れですが)はてなブログProの利用料金を節約する裏技も紹介しています。

もしもアフィリエイト経由ではてなブログProに申し込むとキャッシュバックが受けられます - SATOREPO BLOG

(2022年1月時点の条件も明記しています)

satorepo.com

 

【はてなブログMinimalism用】初心者でも簡単!これだけはやっておきたいブログのカスタマイズ5選 - SATOREPO BLOG

satorepo.com

この当時使っていたMinimalismというはてなブログテーマは2022年1月現在も使っています。「これだけはやっておきたいカスタマイズ5選」も未だ現役です。

【はてなブログMinimalism用】初心者でも簡単!これだけはやっておきたいブログのカスタマイズ5選

f:id:satorepo:20210328013236j:plain

※この記事は、はてなブログのユーザー向けの内容です

 

この記事では、初心者向け「見やすいブログにするために最低限これだけはやっておきたい、はてなブログのカスタマイズ」を解説しています。

 

おことわり

この記事の内容は特に断りのない限り2021年4月時点のものです。

制作環境

OS:Windows10

はてなブログのテーマ:Minimalism

はてなブログProに加入(無料版でも使えるカスタマイズを紹介していますが、一部の機能はPro限定になります)

 

※この記事で紹介するカスタマイズはテーマ「Minimalism」で使うことを前提にしています。他のテーマではカスタマイズが上手くいかない可能性があります(試していません)

 

最低限これだけはやっておきたいカスタマイズ

「事前準備」以外は他の解説ブログに頼りました。詳しいやり方はリンク先をご覧下さい。

完成図

今回の目標は、以下のような見た目のブログにすることです。

(見本ブログはアクセス不可、URL非公表です)

f:id:satorepo:20210327234549p:plain

PC版 完成図

f:id:satorepo:20210327233554j:plain


 

事前準備

「レスポンシブ」を設定する

ブログ管理画面→デザイン→スマホのマーク→詳細設定→「レスポンシブデザイン」にチェックを入れる

f:id:satorepo:20210327235500j:plain

(1)管理画面の「デザイン」をクリック

f:id:satorepo:20210328001122j:plain

(2)スマホのマークをクリック

f:id:satorepo:20210328001157j:plain

(3)詳細設定をクリック

f:id:satorepo:20210328001241j:plain

(4)レスポンシブデザインにチェックを入れる

(Proのみ)「ブログ表示」を「一覧形式」にする

ブログ管理画面→設定→詳細設定→スクロールして「ブログ表示」のコーナーの「一覧形式」を選択する

f:id:satorepo:20210328002006j:plain

(1)設定をクリック

f:id:satorepo:20210328002136j:plain

(2)詳細設定

f:id:satorepo:20210328002327j:plain

(3)一覧表示

パソコンでの、トップページの表示形式が「タイトル+記事概要」の一覧になり見やすくなります。

残念ながら無料版では使えません。

今回はレスポンシブデザインなので、無料版だとパソコンでもスマホでも同じように表示されます。

つまり「スマホでも『タイトルの一覧表』にならない」ということです。読者には見づらくなります。

f:id:satorepo:20210328002953j:plain

無料版 スマホではこう表示される


「無料版でもスマホから見やすいブログを作りたい」という方は、記事でサイトマップを作り、その記事をトップに固定させて読者を案内するのがお勧めです。

 

(既に書いてある場合)CSSとHTMLのバックアップを取る

 

特にCSSはテーマを変えると消えるので、事前にメモ帳などにコピペして下さい。

 

(1)タイトル下のメニュー(グローバルメニュー)を作る

f:id:satorepo:20210328003632j:plain

グローバルメニュー

「グローバルメニュー」とは上の画像の四角で囲んだ部分です。

 

詳しいやり方はこちら。

www.kayoko-cafe.com

 

www.kayoko-cafe.com

(2)画面下のメニューを作る

ホームボタン、カテゴリーの一覧、上に戻るボタンが揃ったメニューを画面の下に設置します。

f:id:satorepo:20210328011708j:plain

PC版 画面下のメニュー

f:id:satorepo:20210328012515j:plain

スマホ版 画面下のメニュー

詳しいやり方はこちら。

「レスポンシブ設定の方はできません」と書かれていますが、現に私はレスポンシブ設定です。

(2021年8月9日追記。「設定」→「詳細設定」→「headに要素を追加」にJQueryを書かないと機能しません。※レスポンシブ設定時。

私が書いたJQueryはこちら)

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

出典:【はてなブログ】「この記事は、約○分で読めます。」を表示するようにしました - A Sky Blue Diary~想いをかたちに~ (hatenablog.com)

 

パソコンでもスマホでもこのメニューを表示できています。

www.yukihy.com

 

このメニュー、本当に便利なんですよ。

レスポンシブにすればPCでもスマホでも表示されるだけでなく

「上に戻るボタン(何て言うんだろう)」も「カテゴリ一覧を表示させられるボタン(カテゴリーじゃなくて特定記事や固定ページのリンクを貼ることも可能です)」もホームボタンも揃っているのですから。

 

(3)文字の大きさを変更する

Minimalismはデフォルトの文字サイズが小さめなので、CSSで文字の大きさを変更することをお勧めします。

詳しいやり方はこちら。

www.karochoa.com

 

私は18pxにしています。

 

(4)目次の文字の大きさを変更する

目次の文字の大きさを変更するには、(3)とは別にCSSを書く必要があります。

詳しいやり方はこちら。

www.tomomore.com

(5)スマホ版で太字が表示されるようにする

スマホ版では太字(strongタグ)が太字として表示されない場合があるとのことなのでCSSを書きました。詳しいやり方はこちら。

www.kurasitotonoe.com

 

おわりに「本当に必要最低限のカスタマイズを紹介しました」

私もそうだったのですが、ブログを始めたばかりの頃ってカスタマイズに凝りたくなりませんか?

特定の部分の色を変えたり、タイトルに画像を設定したり、特定の部分のフォントを変えたり、シェアボタンのデザインを変えたりとか・・・?

 

それらが悪いとは思いません。現に私もやりたいです(やれていませんが)。

ですが、カスタマイズって終わりがないんですよ。

終わりがないから、いつまでも記事を書き始められないんです。

ブログを始めた当初の目的をいつまでも果たせなくなるんです。

 

ですが、全くカスタマイズをしないと初めてブログにアクセスしてくれた方々に不親切なブログになるんですよね。

グローバルメニューがないと「このブログは主に何が書かれているのか」が分からない

「上に戻るボタン」がないと(特にスマホだと)「上に戻るのに時間がかかりすぎる。もう面倒くさい!見るのやめた!」ってなってしまいます。

 

せっかく有益な記事、面白い記事を書いても読者が増えないので、ある程度カスタマイズが必要なんですよね。

 

そういうわけで、初心者向けに「(読者が見やすいように)最低限これだけはやっておきたいカスタマイズ」を紹介しました。

だから、色やフォント関係などのカスタマイズは紹介しませんでした。

 

「そういうあなたのこのブログ、どこに何があるのか分からないし見づらいですよ」って思われたら申し訳ありません。私の実力不足、知識不足です。

最後になりましたが、リンク先のブログの管理人の皆さんにはこの場を借りてお礼を申し上げます。

 

【2022年2月に続編をUPしました】【はてなブログ/Minimalism】このブログでやったカスタマイズ - SATOREPO BLOG

satorepo.com