はてなブログの「Minimalism」で、イラスト画像付きの吹き出しを表示させるカスタマイズ方法
はてなブログのデザイン「Minimalism」を使用しているこのブログ。
そのカスタマイズに関するこちらの記事が、私のブログの中では一番読まれているようで。
↓
こちらの記事を言及してくださったり、読者登録してくださる方もいて、ありがとうございますm(_ _)m
で、今回、久しぶりにブログのデザインのカスタマイズを一つ入れました。
それは、イラスト画像付きの吹き出しを表示させるためのカスタマイズです。
↑ こんな感じのやつです！
ということで、今回のカスタマイズ法をご紹介します。(^ ^)
イラスト画像付きの吹き出しを表示させるカスタマイズについて
ブログを読みやすくするために、LINEのトーク画面のように、吹き出し形式で会話しているような表示方法があります。
吹き出しだけでなく、誰が喋っているのかイラスト付きだとイメージもわきやすくて、サクサク読めますよね。
今回ご紹介するイラスト画像付き吹き出しのデザイン
で、どうやってカスタマイズすればいいのか、ググっていく中で。
「イラスト付きの吹き出し」といっても、色々バリエーションがあるんだな、と気づき。
まずは、自分のブログで使いたいイラスト付き吹き出しのデザインの条件を決めた方がいいな、と思いまして。
以下の条件のイラスト付き吹き出しになるよう、カスタマイズすることにしました。
・イラスト画像は円形で、縁取りの線がないもの
・LINEのトーク画面のような対話形式で表示できるように、「イラスト＋その右横に吹き出し文字」と、「吹き出し文字＋左横にイラスト」の2パターンのカスタマイズができるもの
ということで、この条件が叶うように、カスタマイズをしていきます。
参考サイト
まず、元となるCSSとHTMLをこちらから使わせていただきました。↓
【コピペOK】CSSで会話形式の吹き出しを作る方法 | SHIOMISC(シオミスク)
そして、画像を円形にするための無料ツールサイトがこちら。↓
円形トリミング・画像を丸く切り取る加工 | 無料オンラインフリーソフト
ということで、以下から、カスタマイズ方法の手順をご紹介します。
イラスト付き吹き出しを表示させるカスタマイズ方法
カスタマイズの流れ
今回のカスタマイズの手順は、以下のステップで行いました。
カスタマイズ手順
① イラスト画像の用意、吹き出しの色を決める
② CSSとHTMLの編集をして、はてなブログに設定
①イラスト画像の用意、吹き出しの色を決める
まず、下準備をします。
吹き出し横のイラスト画像の準備
おしゃべりしている登場人物のキャラクター画像の準備です。
会話形式で使うので、キャラクター画像を2種類用意すればいいのですが。
私のブログの場合は、とりあえず記事の冒頭で、自分の気持ちを表現する時に使おうかな、という程度なので。
今回は、プロフィール画像としても使っている、カフェラテの写真を使って、1種類だけ準備します。
まず、使用したい画像のサイズを、縦横比を同じにして正方形のサイズに編集しておきます。
スマホでなら、写真アプリの編集機能を使って。
PCなら、「ペイント」などの簡易ソフトで。
イラスト画像の背景が白色なら、この正方形のままでOKなんですが。
私が今回使う画像は背景が黒で、四角形より円形にした方が可愛らしいので、画像を円形にくり抜く加工をします。
参考サイトで紹介したこちらのサイトに行って、↓
円形トリミング・画像を丸く切り取る加工 | 無料オンラインフリーソフト
「画像を選択する」 で、画像を選びます。
そして、「画像を加工する」をクリック。
すると、選択した画像が表示され、その上に、ドラッグするマークがあるので、どう切り取るのか、ドラッグしながら選択して。
「現在の位置で円形に切り取る」をクリック。
すると、円形に切り取られた画面に切り替わるので、それでよければ「保存」をクリック。
すると、ダウンロード先を求めてくると思うので、保存場所を選んで保存します。
保存した画像を開いて、余白部分をできるだけ除いて、また正方形のサイズに修正しておきます。
イラスト画像の準備ができたら、この画像をはてなブログの新規記事を立ち上げて、「写真を投稿 」からアップロードします。
そして、その画像を記事中に貼り付けます。
記事の表示をHTML編集に切り替えて、画像のタグである<img src= ・・・ />の部分をコピーして、メモ帳などに貼り付けて控えておきます。
※ ↑の最初の<p>とか、最後の</p>は要りません。
画像のタグをメモ帳に控えたら、このブログ記事は不要なので、保存せずに閉じておきます。
吹き出しの背景色の準備
次に、吹き出しの背景色を何色にするかを決めて、そのカラーコードを調べておきます。
カラーコードとは、 #の後に6桁の英数字、で表されるものです。
こちらから、自分が使いたい色を見つけて、そのカラーコードを調べることができます。↓
私の場合は、このブログのテーマカラーであるベージュ色「#f5deb3」にします。
これを、メモ帳などに控えておきます。
② CSSとHTMLの編集
イラスト画像と吹き出しの背景色のカラーコードが準備できたら、CSSコードやHTMLタグを 参考サイトからお借りして、編集していきます。
1）デザインCSSの編集
まず、上記 参考サイトの「CSSで吹き出しのデザインを作る」にある、以下のコードをコピーさせてもらい、メモ帳に貼り付けて保存します。
| /* ------------------------- */ |
| /* -------- 吹き出し -------- */ |
| /* ------------------------- */ |
| .balloon{ |
| display: flex; |
| margin: 0 0 1.5em 0; |
| } |
| .balloonR{ |
| flex-direction: row-reverse; |
| } |
| .balloon-img{ |
| width: 80px; |
| height: auto; |
| flex-shrink: 0; |
| } |
| .balloon-text{ |
| padding: 1em; |
| border-radius: 6px; |
| position: relative; |
| display: flex; |
| } |
| .balloon-text-inner{ |
| margin: auto; |
| } |
| .balloon-text::before,.balloon-text::after{ |
| content: ''; |
| position: absolute; |
| top: 19px; |
| font-size: 0; |
| border-top: 10px solid transparent; |
| border-bottom: 10px solid transparent; |
| } |
| .balloonL .balloon-text{ |
| margin: 0 0 0 15px; |
| background: #ddbcff; |
| } |
| .balloonR .balloon-text{ |
| margin: 0 15px 0; |
| background: #dbffb7; |
| } |
| .balloonL .balloon-text::before{ |
| left: -16px; |
| border-right: 16px solid #ddbcff; |
| } |
| .balloonR .balloon-text::before{ |
| right: -16px; |
| border-left: 16px solid #dbffb7; |
| } |
このコードの中の、ピンクマーカー部分がカラーコードで、ここを自分が選んだ色のコードに変更します。
変更する箇所の、上から１つ目と３つ目が、イラストの右横にくる吹き出しの背景色。
上から２つ目と４つ目が、イラストの左横にくる吹き出しの背景色です。
私は、今回はとりあえずどちらも同じ色にしておきます。
メモ帳でのカラーコードの書き換えができたら、このコードをまるっとコピーして。
はてなブログの、管理画面→デザイン→工具マーク→｛｝デザインCSSの、1番下に貼り付けて、上部にある「変更を保存する」をクリックします。
2）HTMLの編集
次に、上記 参考サイトの「記事に吹き出しを入れる」にある、以下のタグをコピーさせてもらい、メモ帳に貼り付けて保存します。
| <div class="balloon balloonL"> |
| <div class="balloon-img"><img src="ここにアイコン画像のURLを設定するよ！" /></div> |
| <div class="balloon-text"><div class="balloon-text-inner"> |
| ここに吹き出しに入れたい内容を入れるよ！ |
| </div></div> |
| </div> |
そして、ピンクマーカー部分を、準備しておいた自分のイラスト画像のタグに置き換えます。
これが、左側にイラスト画像があって、その右横に吹き出しがくる時のHTMLタグになります。
次に、この画像タグを置き換えた上記のタグをまるっとコピペして、1行目の最後の大文字の「L」を「R」に書き換えます。
すると、右側にイラスト画像があって、その左横に吹き出しがくるパターンができあがります。
これで、カスタマイズは終了です。(´ｰ｀)
この２つのパターンのHTMLタグは、メモ帳とか、ブログ記事に下書き保存したりして、保管しておきましょう。
そして、記事の中で使いたくなったら、このタグをコピーして記事中に貼り付けて使います。
その方法を、以下で。↓
イラスト付き吹き出しの表示の確認
では、これでちゃんとイラスト付き吹き出しが表示されるかの確認をしていきます。
はてなブログの新規記事をまた立ち上げて。
HTML編集のタブに切り替えて。
「2）HTMLの編集」で作った、２つのパターンのHTMLタグをコピーして、ブログの編集画面に貼り付けます。
そして、プレビュー表示に切り替えると…、
こんな感じで、ちゃんとできました！ヽ(´▽｀)/
ちなみに、「編集見たまま」画面に切り替えると、イラスト画像がアップしたサイズのままの大きさで表示されてますが、それは気にせず。
画像のすぐ下の文字をお好きに編集すればOKです。
ということで、早速使ってみます。↓
以上、イラスト画像付きの吹き出しを表示させるカスタマイズ方法でした！
kayoko＠おうちcafe
はてなブログのデザインテーマ「Minimalism」のインストールからカスタマイズまでの実践集 ↓
はてなブログからワードプレスに移行、ってどうやるの？ 調べてみました。
色々訳あって、「はてなブログからワードプレスにブログを移行しようかな」と最近思ってまして。
ググって調べてみました。
- 自力でやるか？誰かにやってもらうか？
- はてなブログからワードプレスへの移行、自分で全部やる場合の全行程
自力でやるか？誰かにやってもらうか？
そもそもですが、はてなブログからワードプレスに移行する作業自体を、
✳︎ 誰かにやってもらうのか？
✳︎ 自力でするのか？
の、2つの方法に大きく分かれるようです。
誰かにやってもらう方法
誰かに移行をやってもらう方法としては：
✳︎ ココナラで代行サービスをしている人に、お金を払ってやってもらう
✳︎ 羽田空港サーバーさんに無料で移行作業してもらう
という方法があるようです。
自力でやる方法
自分で移行作業を全てやるとすると、以下のステップを行う必要があるようです。
はてなブログからワードプレスへの移行の流れ
１ はてな側での移行の準備をする（データのダウンロード）
２ 移行先のサーバーの準備をする
３ 移行先のサーバーにワードプレスを設置する
４ hostsファイルの書き換えをする
５ ワードプレスの「テーマ」をインポートする
６ パーマリンクの設定をする
７ １でダウンロードした、はてなのデータをワードプレスにインポートする
８ ワードプレスで細かい修正
９ サーバー切り替え作業
10 画像データの移行
この手順は、こちらのサイトを参考にさせていただきました。↓
こちらのサイト、はてなブログからワードプレスに移行する手順と、それぞれの手順での具体的な作業の仕方が、とてもわかりやすく説明されています。(^ ^)
また、画像データの移行については、こちらのサイトを参考にさせていただきました。↓
【Wordpress】はてなフォトライフから画像ファイルを一括移行する（記事中で利用されている画像ファイルのみ） - 踊るびあほりっく
今回は、もし自力で移行する場合の
✳︎ はてなからWPへのブログ移行の全体のイメージを掴むこと
✳︎ 実際にどういう作業をすることになるのか？のシミュレーション
を目的に、書いておきたいと思います。
はてなブログからワードプレスへの移行、自分で全部やる場合の全行程
１ はてな側での準備をする（データのダウンロード）
まず、はてなブログの管理画面で、移行のための準備をします。
ここで行う作業は3つです。
（1）SNSの連携をしている場合は、解除する
はてなブログと、TwitterやInstagram、FacebookなどのSNSを連携させているなら、すべての連携を解除しておきます。
連携の解除方法
はてなブログの管理画面→アカウント設定→外部サービス連携→連携させているSNSの「連携を解除する」
（2）キーワードリンクを設定しているままなら、解除する
これは、有料の「はてなブログPro」に契約している場合の作業です。
キーワードリンクとは、はてなブログの独自機能？で。
はてなブログの記事中の言葉に、うっすら下線が引かれている部分をクリックすると、その言葉の意味とかを解説しているページにリンクされる、辞書機能のようなものです。
はてなブログを無料で利用している場合は、このキーワードリンクが最初から設定されていますが。
はてなブログProを利用している人は、このキーワードリンクの設定を解除することができます。
ワードプレスに移行する場合は、このキーワードリンクを設定したままになってると、この設定も引き連れて移行することになるらしく。
これは、SEO的に良くないんですって。
なので、もしキーワードリンクが設定されたままの場合は、解除しておきます。
キーワードリンクの解除
はてなブログの管理画面→設定→詳細設定→「キーワードリンクPRO」
ここの「記事にキーワードリンクを付与しない」にチェックを入れて、ページ下部の「変更する」ボタンをクリック。
（3）データのエクスポート＆ダウンロードをする
上記の(1)と(2)ができたら、最後に、はてなブログのデータをエクスポートしてダウンロードします。
はてなブログのデータのエクスポート＆ダウンロード方法
はてなブログの管理画面→設定→詳細設定→「エクスポート」の「記事のバックアップと製本サービス」からエクスポートし、ダウンロードします。
ダウンロードしたデータは、パソコンの分かりやすい所に保管しておきます。
記事中に目次機能を使っている場合は、はてなブログの目次機能では不具合なので、削除しておきます。
（ワードプレスのプラグインで目次を設定します）
その場合は、ダウンロードしたデータをメモ帳などで開いて、［:contents］と検索し、 それを全て消していきます。
ちなみに、画像データはこの段階ではまだ移行しません。
画像の移行は、最後の最後に行います。
これで、はてなブログ側の準備は終了です。
２ 移行先のサーバーの準備をする（エックスサーバーで紹介）
次に、ブログの引越し先となる新たなサーバーを準備します。
ここで決めておかなければいけないことが、どのサーバーを契約するのか？ということ。
多くの方が、エックスサーバーを利用しているみたいですね。
他にも、サクラとかロリポップなどを利用している、という方も。
ここでは、エックスサーバーを新たに契約する場合にすることを書いておきます。
エックスサーバーの準備の仕方
1．プランと費用の確認
プランは「X10」で十分のようです。
契約時に必要な費用の支払いは、初期費用＋月額料です。
詳しくはこちら↓
X10プラン - 料金 | レンタルサーバー【エックスサーバー】
2．エックスサーバーの申し込み手続き
エックスサーバーを契約するなら、A8.netからセルフバックで申し込むとお得ですね。
申し込み完了のメールが来ると、そこに管理ツールへのログイン情報などが書かれてあるので、大事に保管しておきます。
3．エックスサーバーにログインして、ドメイン設定
申し込み完了メールが届くので、そこに書かれてあるログイン情報で、エックスサーバーにログインします。
エックスサーバーの管理画面→サーバー→サーバー管理→ドメイン→ドメイン設定へと進み。
ドメイン名の欄に、自分のブログのドメインを入力します。
これで、ブログ移行先のサーバーがエックスサーバーの場合の、サーバー準備は終了です。
以降も、移行先のサーバーがエックスサーバーの場合で、説明します。
３ 移行先のサーバーにワードプレスを設置する
ワードプレス初心者からすると、「そもそもワードプレスって、どういうものなの？」って感じなんですが。（笑）
ワードプレスは、サーバーに設置するもの、らしいです。
なので、エックスサーバー内に、ワードプレスを設置する作業を行います。
エックスサーバーにワードプレスを設置する方法
エックスサーバーの管理画面→サーバー→サーバー管理→WordPress→簡単インストール
と進み、ワードプレスを利用する際のユーザー名やパスワードを決めて入力すれば、インストールが完了。
これで、ワードプレスの管理画面にログインできるようになります。
ちなみに、ワードプレスの管理画面にログインする時のURLは、自分のブログのURLの後に、「/wp-admin/」を付け足したものなんですって。
ですが、この時点では、このワードプレスの管理画面のURLにログインしても、まだ自分のブログ情報が入っていないので、いじることはできません。
というのも、手順８でワードプレスで細かい設定をしてから、手順９でDNSサーバー（ネームサーバー）の切り替えっていうのをするんですけど。
そのDNSサーバーっていうのは、あなたのブログのドメイン名とあなたが新たに契約したサーバー（のIPアドレス）を結びつけて、ブログを表示させるためのサーバーらしくて。
このDNSサーバーを、はてなのサーバーから移行先のエックスサーバーに切り替えるのは、手順９での、まだ先の作業なんです。
だから、あなたのブログはまだこの時点では、はてなのサーバーからじゃないと表示させられない、ということのようで。
（意味分かります？(^^;) というか、私のこの説明、正しいのかな？）
だけど、自分のパソコンからは、エックスサーバーに設置したワードプレス上で、自分のブログを表示させて操作できるようにしたい！
そこで、必要になってくるのが、次の作業です。
４ hostsファイルの書き換えをする
hostsファイルは、あなたのブログのドメイン名をIPアドレスに変換するものらしくて。
つまり、あなたのブログのドメイン名を、移行先のエックスサーバーのIPアドレスに変換してくれるもの、になります。
このhostsファイルは、DNSより先に参照されるものなので。
たとえDNSサーバーの設定では、あなたのブログがまだ、はてなサーバーとつながって表示されているとしても。
あなたのパソコンでは、このhostsファイルのおかげで、エックスサーバーとつながってブログを表示させることができる。
ということのようです。
ちなみに、hostsファイルは、あなたのパソコンの中にあります。
それを見つけて、書き換えます。
hostsファイルを書き換える方法
1．エックスサーバーのIPアドレスを調べておく
エックスサーバーのサーバーパネル→サーバー情報→IPアドレスが分かります
2．自分のパソコンからhostsファイルを見つける
私が参考にさせて頂いた参考サイトには、Macのパソコンでの方法が詳しく書かれています。↓
はてなブログからWordPressへ移行完全マニュアル！画像付で全て公開｜BLOGのメモ帳
パソコンがWindows10の方は、こちらのページを参考にします。↓
Windows10 hostsファイルを更新して保存する方法 | ITSakura
3．hostsファイルを書き換え
hostsファイルが保管されてある場所では、このファイルは開けないので。
コピーしてデスクトップに貼り付けてから開きます。
このファイルの中の一番下に、「エックスサーバーのIPアドレス＋半角スペース＋あなたのブログのドメイン名」を入力して保存します。
これをコピーして、元の場所に貼り付けて更新します。
警告が出ますけど、そのまま貼り付け続行します。
これで、hostsファイルの書き換えは終了。
ワードプレスにログインすると、自分のブログが表示され、操作できるようになります。
５ ワードプレスの「テーマ」をインポートする
次に決めるのが、移行先のブログのデザインテーマです。
この「テーマの決定」がまた悩みどころですよね。(^^;)
色々あるワードプレスのデザインテーマ。
無料のもの、有料のものがあります。
アフィリエイトに適したもの、とか、操作しやすいもの、とか、色々考えどころがあります。
私がググってみているところでは、有料テーマの「JIN」を使っている人が多いみたい。
目的によって、だと思うので、「ワードプレス おすすめ テーマ」なんかで調べたりして、自分の目的に合ったものを選ぶといいですね。
ワードプレスのテーマのインポートの方法
使いたいテーマを決めたら、そのテーマをインポートします。
有料だと、そのテーマのページから購入手続きをして、テーマをダウンロードをし、zipファイルのままパソコンに保存しておきます。
そして、ワードプレスの管理画面にログインして、外観→新規追加へと進み。
ダウンロードしたテーマのzipファイルをアップロードして、インポートします。
６ パーマリンクの設定をする
私は、「パーマリンクって何？」ってところからなんですけど。（笑）
パーマリンクとは、ブログの各記事のURLのことです。
なので、「パーマリンクの設定」=「ブログの各記事のURL」の設定のことです。
ここでは、ワードプレス上で、ブログの各記事のURLの設定をします。
ですが、その前に、あなたがはてなブログで記事を上げる時に、その記事のURLをどのように設定していたのかを確認しておく必要があります。
はてなブログの各記事のURLは、「ドメイン名/entry/・・・」という構造になってます。
で、最後の「・・・」の部分の設定の仕方を、はてなブログの時にどうしてましたか？ ということです。
はてなブログProの方は、記事を書く度にこの「・・・」を自分で決められる「カスタムURL」にしている方もいると思います。
私は、すべての記事でカスタムURLにしました。
一方、無料ではてなを使っていた方や、カスタムURLの設定をしてこなかった場合は、「・・・」の部分は、記事を書いた日付の数字になっています。
これを「標準フォーマット」とします。
カスタムURLの場合と、標準フォーマットの場合では、ワードプレスでパーマリンク設定をする時の入力内容が異なります。
パーマリンクの設定方法
ワードプレスの管理画面→設定→パーマリンク設定 と進み、「カスタム構造」の入力欄に、以下を入力。
カスタムURLの場合：「/entry/%postname%」と入力。
標準フォーマットの場合：「/entry/%year%/%monthnum%/%day%/%hour%%minute%%second%」と入力。
どちらのパターンも混ざっている、という場合は、多い方のパターンで設定して、少ない方の記事のURLは、手順８で手動で修正します。
これで、ブログの各記事のURLの設定は終了です。
７ 手順１でダウンロードした、はてなのデータをワードプレスにインポートする
やっと、はてなブログのデータをワードプレスにインポートします。
インポートの際には、インポートするためのプラグインっていうのが必要なんですって。
「MovableType・TypePad」っていうプラグインです。
で、私は「プラグインって何よ？」ってなるのですが。
要は「ツール」みたいなものですよね。（適当）
インポートのためのプラグインのインストール方法
ワードプレスの管理画面→プラグイン→新規追加 と進み。
ここで、「キーワード」というところに「MovableType・TypePad」と入力して検索します。
すると、「MovableType・TypePad」が表示されるので、「今すぐインストール」をクリック。
次に、いよいよ、はてなのデータをインポートします。
はてなブログをワードプレスにインポートする方法
ワードプレスの管理画面→ツール→インポート と進み、「MovableType・TypePad」と表示されているので、その下の「インポーターの実行」をクリック。
自分のパソコンのデスクトップに保存していた、はてなのデータのテキストファイルを選んで、アップロードしてインポートします。
これでデータ移行ができました。
次は、ワードプレスでの新たなブログでちゃんと表示されるように、修正していく作業になります。
８ ワードプレスで細かい修正
ここからいよいよ、ワードプレス内でブログの編集なんかをしていくことになるのですが。
プラグイン「Classic Editor」をインストール
ワードプレスのバージョン？として、かつてのClassic Editor っていうバージョンが操作がしやすいようなので。
編集に入る前に、「Classic Editor」というプラグインをインストールしておくと良いようです。
その上で、以下の修正を行います。
見出しのhタグを一括変更
修正することの1つめが、見出しの設定の変更です。
はてなブログで記事を書いている方は、たいてい「大見出し・中見出し・小見出し」を使っていると思うのですが。
はてなブログでは、大見出し＝h3、中見出し＝h4、小見出し＝h5、となってまして。
そして、なぜかh2は使ってないみたい。
（ちなみに、h1は記事のタイトルです。）
だけど、h2を使わずに、っていうのは、SEO的によろしくないようで。
なので、ワードプレスでは、ちゃんとh2を使うように設定します。
つまり、ワードプレスでは、大見出し＝h2、中見出し＝h3、小見出し＝h4、と、タグの数字を繰り上げる、ということです。
このhタグの設定を一括で変更するプラグインがあって。
（プラグイン、色々ありますね。^ ^）
それが、「Search Regex」というプラグイン。
このプラグインを検索して、インストールして。
「ツール」というところにあるので、変換作業をします。
変換の仕方の具体的な説明が、こちらの参考サイトに詳しく書かれています。↓
はてなブログからWordPressへ移行完全マニュアル！画像付で全て公開｜BLOGのメモ帳
目次の設定
次に、目次の設定です。
手順１で、はてなブログのデータをダウンロードした後、目次機能を記事中に使っている人はこの段階で、目次の設定を削除しておくわけですけど。
その後、ここで、ワードプレスのプラグインを使って、新たに目次を設定します。
目次を設定するプラグインは色々あるみたいですが。
WordPressで目次を作成する方法 【プラグインあり・なし】｜ferret
によると、
✳︎ Table of Contents Plus
✳︎ Easy Table of Contents
この2つが定番のプラグインのようです。
目次機能を使ってなかった人。
または、はてなブログのデータをダウンロードした時に、目次の設定を削除して、ワードプレスで目次機能を入れるのは後でもいい、っていう方。
この目次の設定は後回しにしてもいいと思います。
アイキャッチ画像
はてなブログのデータを移行した直後の状態では、記事内の写真はちゃんと表示されるのですが。
アイキャッチ画像を設定していた場合は、移行直後はワードプレスではアイキャッチ画像が設定されていない状態になります。
そこで、アイキャッチ画像を設定するのですが、これまた、そのためのプラグインがありまして。↓
WordPressのアイキャッチ画像おすすめプラグイン5選 – FOXWP
プラグインで一括でアイキャッチ画像設定ができるようです。
それでもうまく表示されてない記事は、記事編集画面から、記事ごとに、手動でアイキャッチ画像を設定するみたいです。
これでワードプレスに移行した新ブログが、ある程度見られるところまでに整うと思います。
そこで、やっと最後の手順、サーバーの切り替え作業に入ります。
９ サーバー切り替え作業
データは、新サーバ内のワードプレスに移行できたけど。
Web上の公開状態は、まだはてなサーバー経由になっているので、ここで新サーバからブログを表示させるために、サーバーの切り替え作業を行います。
ネームサーバーの切り替え
まずは、ネームサーバーの切り替え。
はてなブログProの方は、独自ドメインを取得している方だと思うので、ドメインを取得したところで、設定をします。
例えば、私はお名前.comで取得したので、お名前.comを例に説明すると。
お名前.comでのネームサーバーの切り替え方法
お名前.comにログイン→ネームサーバー変更、に進み。
ネームサーバーの変更→その他→「その他のネームサーバーを使う」に、エックスサーバー5つを入力。
（5つのネームサーバーは、エックスサーバー契約後に届くメールに記載されています。）
DNSレコードの切り替え
こちらもドメインを取得したところでの設定です。
お名前.comを例に説明すると。
お名前.comでのDNSレコードの切り替え方法
お名前.comにログイン→ドメイン機能一覧→DNS関連機能の設定、へと進み。
DNSレコード設定を利用する→登録済み→「hatenablog.com」がある欄の「削除」にチェックを入れる→確認して完了。
これでいよいよ新サーバーとドメインがつながりますが、完全移行には1日〜最大72時間ほどかかるようです。
hostsファイルの変更
手順４でhostsファイルに追加した情報を消して、元に戻します。
はてなのリダイレクト
新ブログがはてなから新サーバに移行できたので、はてなブログProの契約を解約できます。
解約すると、有料にしていたブログは無料の時のURL（はてなのドメイン）に戻ります。
この無料の時のURLが、新サーバでのURL（独自ドメイン）と同じであることを設定するのが、リダイレクト（転送）設定です。
このリダイレクト設定をしておかないと、「同じ内容の記事が2つある」という判断になって、SEO的にまずいんですって。
なので、はてなブログの管理画面からリダイレクト設定をします。
はてなブログでのリダイレクト設定の方法
管理画面→デザイン→工具マーク→ヘッダ→タイトル下へと進み。
こちらの記事の「［4］はてなのリダイレクト」にあるタグをコピーしてから、必要な箇所を自分のブログのURLに書き替えて貼り付けて。↓。
はてなブログ移行後にWordPressで行う修正マニュアル｜BLOGのメモ帳
「変更を保存する」をクリック。
次に、設定→詳細設定→「検索エンジンに登録させない」にチェックを入れて、変更を保存。
これで、はてなブログでの設定が終了です。
これでひとまず新サーバでのワードプレスによる新ブログは稼働できます。
が、画像データが、まだ「はてなフォトライフ」に保存されたまま。
これでも、画像はちゃんと表示されるので、画像データを新サーバに移す作業は急ぎではないのですが。
文字のデータは新サーバに保管されているのに、画像データは「はてなフォトライフ」に保存されている状態です。
なので、画像データも新サーバに移す作業を最後に行い、これで完全移行になります。
10 画像データの移行
画像データのお引越し。
調べてみたら、これまたひと仕事ですね。(^_^;)
具体的な作業内容は、こちらのサイトを参考に。↓
【Wordpress】はてなフォトライフから画像ファイルを一括移行する（記事中で利用されている画像ファイルのみ） - 踊るびあほりっく
ここでは、どんなことをするのか、ざっくり把握する程度の説明を。
画像データの移行の流れ
1．事前準備
2．はてなフォトライフにある画像ファイルの一括ダウンロード
3．画像ファイルの一括アップロード
4．画像ファイルのURLを一括変更
1．事前準備
パソコンに画像データを保存する為のフォルダを作っておきます。
そして、パソコンに以下３つの無料ソフトをインストールしておきます。
FFFTP ／ DS Downloader ／ サクラエディタ
次に、ワードプレスのFTPサーバーとアカウント情報をメモしておきます。
エックスサーバーの場合は：
サーバーパネル→FTPアカウント設定→FTPソフト設定
にあります。
最後に、以下のワードプレスのプラグインをインストールしておきます。
Add from Server ／ Search Regex
（後者の方は、手順８でインストールしたものです）
これで事前準備が完了です。
2．はてなフォトライフにある画像ファイルの一括ダウンロード
手順１でダウンロードした、はてなのデータ、上記の無料ソフト「サクラエディタ」で開き、画像ファイルのURLをリスト化します。
次に、上記の無料ソフト「DS Downloader」で、画像ファイルのリストを一括でダウンロードします。
最後に、事前準備で作成した保管用のフォルダに、画像ファイルを仕分けて整理します。
3．画像ファイルの一括アップロード
上記の無料ソフト「FFFTP」で、画像ファイルをワードプレスのサーバーにアップロードします。
はてなブログの画像保管場所が「はてなフォトライフ」だったのに対し、ワードプレスの画像保管場所は「メディアライブラリ」になります。
上記のワードプレスのプラグイン「Add from Server」を使って、アップロードした画像をメディアライフラリに認識させます。
4．画像ファイルのURLを一括変更
記事中の画像ファイルのURLは、まだ「はてなフォトライフ」から参照しているURLのままなので。
ワードプレスの「メディアライブラリ」からのURLに切り替えます。
上記のワードプレスのプラグイン「Search Regex」を使って、画像のURLの書き換えをします。
これで、画像データも新サーバに移行され、ブログの記事内の画像URLも、新サーバー情報に切り替えられました！
さいごに
いやー、はてなブログからワードプレスに移行、って一言で言っても、実際の作業はこれだけあるんですね…。＿|￣|○
ウェブに詳しい人なら、そんなに難しくないのかもしれませんけど。
素人が、初めて、移行作業を自力でやるとなると、なかなかですね。(^_^;)
しかも、すでに収益化できているブログの場合は、アクセス数とか収益にも影響してくるので、慎重に行いたいものですね。
そうでなくても、作業工程の中で何かしら不具合があったり、思ったようにうまくいかなかったりすると、その解決も自力でやっていかないといけないので。
そう考えると、最初に紹介したような、有料・無料での移行の代行サービスも、一案だと思います。
ということで、はてなブログからワードプレスに移行する、ってどうやるのか？
下調べしてシミュレーションしてみました。
kayoko＠Subway cafe
感謝♡ ブログノウハウ部門10位に＠にほんブログ村ランキング
はてなブログの「Minimalism」というデザインテーマを使用させてもらっているこのブログ。
色々とカスタマイズしてきた実践を、記事にして書き残してきたのですが。
その一覧はこちら↓
先日、ランキングに参加しているブログ村から、自分のブログのランキングを見てみたら。
ブログノウハウ部門で10位にランクインされてまして。↓
この部門は、そもそもランキングに参加している数が多くはないので(^^;)、単純には喜べませんが。
素人の私が、10位まで行けたので、単純に嬉しいです。(^ ^)
最近、Google検索やYahoo検索からも見ていただけるようになってきて。
この「Minimalism」カスタマイズまとめ記事が、このブログの中ではアクセス数第2位なんです。
ちなみに、どのカスタマイズ方法がよく見られているのか、ランキングで紹介したいと思います。
はてなブログでニーズの高いカスタマイズ内容10選
第1位 目次を表示・非表示させる方法
これは、私自身、見つけて実装するのに、最も時間がかかったものでした。(T-T)
はてなブログには目次を表示させる機能が備わっているので、記事編集画面のボタンをワンクリックすればいいのですが。
デザインがシンプル過ぎるので、変更したかったのと。
見出しの数が多い記事になると、目次の表示だけで、画面いっぱい占領するのがイヤで。
シンプルかわいいデザインにしつつ、目次は表示させたり隠したりすることができるようにした、カスタマイズ方法になります。
第2位 トップページの記事一覧をカード型表示にする方法
Minimalismのトップページは、記事一覧が下に下に…と1行ずつ、表示されるような形なのですが。
カード型の表示にすると見た目かわいい感じがして、思わず記事を選んでクリックしたくなるような感じになるので、カスタマイズしました。
第3位 サイドバーのカスタマイズ
サイドバーのカスタマイズは、基本的なことですが。
ブログの回遊率を上げるために最低限必要な、4つの項目の設定の仕方を紹介しています。
第4位 ページの先頭に戻るボタンの設置方法
記事本文が長くなると、ページの先頭に戻って、記事の目次を見返したり、ヘッダーのメニューバーに行きたくなったりすることがありますよね。
ページを見ている人のそんなニーズに応えるのが、ページの先頭にすーっと上がって戻るためのボタンの設置です。
第5位 サイドバーのカテゴリーを階層化して表示させる方法
記事に設定しているカテゴリーの種類が多くなってくると、サイドバーのカテゴリ別の表示もずらーっと表示されて、何だかすっきりしないですよね。(^^;)
そんな時は、たくさんできたカテゴリーをいくつかに分類して、親カテゴリーを作って、カテゴリーを階層化するのがオススメです。
そして、サイドバーにカテゴリ別の項目を表示させる時も、親カテゴリーだけ表示させるとスッキリします。
かつ、親カテゴリーをクリックすれば、その下のカテゴリーも表示されるなら、バッチリですよね。
そんなカスタマイズ方法です。
第6位 見出しデザインを変更する方法
ブログは「見出し」を付けて書くと、読みやすくなりますよね。
はてなブログでは、ワンクリックで大・中・小の見出しを選ぶことができますが。
デザインがシンプル過ぎるので、もっと目立つような見出しにしたり、素敵なデザインの見出しにしたいものです。
そこで、こちらの記事では、大・中・小の見出しのデザインを設定するカスタマイズ方法を紹介しています。
第7位 記事中の画像サイズを一定のサイズに設定する方法
個人的に、この画像サイズの設定は、かなり苦心しました。＿|￣|○
ネットで検索しても、なかなかお目当ての記事に出会わなかったからです。
そんな試行錯誤の末に見出した、画像サイズの設定方法。
記事中に挿入する画像のサイズを：
ヨコ長の画像は、横幅が640pxで表示されるように設定して。
タテ長の画像は、記事中で画像全体が一目で見れるぐらい小さく表示されるように。
そんな設定方法です。
タテ長の画像の時だけ、html編集でひと手間加えますが、それもコピペで設定できます。
記事中に挿入する画像は、大半がヨコ長のものだと思うので、これで良しとしています。
第8位 ナビゲーションメニューの背景色を変える方法
これは基本のカスタマイズ方法だと思いますが、なぜかこのブログにたどり着く人がいるんですね。(^^;)
第9位 シェアボタンを設置する方法
こちらも基本のカスタマイズ方法です。
第10位 ブログタイトルのフォントを「ふい字」に変更する方法
これは、かわいい系のブログを運営している方におススメです。(^ ^)
「ふい字」っていう、かわいい手書き風のフォントで、ブログのタイトルとブログの説明文を表示させるためのカスタマイズ方法です。
ということで、ブログ村ランキング10位ランクイン記念に、はてなブログのMinimalimで私が実践したカスタマイズ方法の中から、人気のカスタマイズ法10選をご紹介しました！
kayoko＠スタバcafe
【初心者】はてなブログのデザイン「Minimalism」への変更とカスタマイズしたこと一覧
はてなブログを使い始めた頃は、ブログの編集画面にある「デザイン」から「Life」というデザインテーマを選んで使っていましたが。
そろそろホームページ風？みたいになるようにデザインを変更したいなーと思いまして。
そこで、はてなブログのおしゃれなデザインが揃っている「テーマストア」から、「Minimalism」というデザインテーマに変更して、ホームページ風にカスタマイズしてみたので、その実践をこちらでご紹介しています。
ちなみに、ブログのカスタマイズというと、CSSやHTMLなどの知識を使うんですけど。
私は、HTMLは少しだけ分かるけど、CSSはさっぱり分からない、ど素人です。
こちらで紹介しているカスタマイズ法は、そんな私でも実践できたやり方で、基本コピペでできるものです。
この中から、あなたのお役に立てれるものがあれば幸いです。↓
- インストール＆全体のデザインの設定
- ブログのヘッダー部分関連のカスタマイズ
- ブログタイトルの下のナビゲーション（グローバル）メニューのカスタマイズ
- トップページの表示
- 記事中に関するカスタマイズ
- サイドバーのカスタマイズ関連
インストール＆全体のデザインの設定
まずは無料でインストール！
はてなブログのデザイン「Minimalism」のインストール方法
「レスポンシブデザイン」に設定！
PC・タブレット・スマホからでも型崩れせず見やすくなります。
ブログのヘッダー部分関連のカスタマイズ
ブログのタイトルをかわいい自体に！
ブログのタイトルの字体と、ブログの説明文を、可愛らしい・ほっこり系フォントの「ふい字」にする方法です。
ブログタイトルの下のナビゲーション（グローバル）メニューのカスタマイズ
ナビゲーションメニューを設置して、カテゴリー別に見られるようにする！
↑こちらは、デザインテーマ「Minimalism」の設定の方法に沿ったやり方です。
メニューに載せるカテゴリーの種類が3〜5個ほどなら、これで十分かと。
ナビゲーションメニューを階層化してプルダウンで表示させる方法！
ナビゲーションメニューを階層化して、プルダウン表示させる方法
↑こちらはカテゴリーの種類が多くなってきて、「大カテゴリ＞小カテゴリ」とカテゴリーを階層化している場合にオススメのカスタマイズ法です。
サイドバーのカテゴリーを階層化して表示させる方法と合わせて設定するとスムーズです。
トップページの表示
トップページの記事一覧を「カード型表示」に変更！
記事中に関するカスタマイズ
記事中の、文字のサイズと行間調整！
記事中の、ヨコ長・タテ長の画像もいいサイズ感で表示させる設定！
記事内の見出し3種（大見出し・中見出し・小見出し）のデザインを変更！
記事内に、タイトル付きのボックスを入れて、重要ポイントを見やすくする！
記事内に、イラスト付き吹き出しを入れて、会話風に表示させる！
蛍光ペン風のアンダーラインがワンクリックで簡単に引ける！
はてなブログのデザイン「Minimalism」で、蛍光ペン風のアンダーラインを設定する方法 - いちcafe日記
記事の右下に、「ページの先頭に戻る」ボタンを設置！
目次を作って、表示・非表示できるようにする！
記事を色んなSNSから簡単にシェアしてもらうためのボタン設置！
無料でお問い合わせフォームを作成＆メニューに載せる！
サイドバーのカスタマイズ関連
サイドバーにプロフィール・人気記事コーナー・フォローボタンを設置！
サイドバーのカテゴリーを階層化して表示させる！
kayoko＠おうちcafe
はてなブログの「Minimalism」で、タイトル下のナビゲーションメニューを階層化して、プルダウン表示させるカスタマイズ方法
はてなブログのデザイン「Minimalism」を使用しているこのブログ。
最近、ブログのデザインを集中的にカスタマイズしています。
今回は、ブログのタイトルのすぐ下に設置しているナビゲーションメニューを改装。
最初にナビゲーションメニューを設置した時は、Minimalismのカスタマイズ方法で紹介されていた方法で行い、カスタマイズしたのですが。↓
記事数とともにカテゴリーの種類も増えたことをきっかけに、カテゴリーを階層化して、サイドバーにあるカテゴリー欄も、階層化させて表示したので。
それに合わせて、ナビゲーションメニューでも階層化して表示できるようにしたいと思いまして。
で、そのカスタマイズ方法をググって実践してみました。
↑今回のカスタマイズで、完成した階層化されたナビゲーションメニューがこれです！
ナビゲーションメニューを階層化させて表示させるカスタマイズについて
ブログのタイトル下に設置するメニュー。
ナビゲーションメニューとか、グローバルメニューって、言われているようです。
今までは、ここのメニューには、「ホーム」「ABOUT」「CONTACT」以外に、メインとなるカテゴリーを3つだけ載せていました。
ですが、そのメイン以外のカテゴリーの記事も増えてきて。
全てのカテゴリーをナビゲーションメニューからアクセスできるようにしたいと思って。
そこで、メインのカテゴリーを「親カテゴリー」にして、それ以外のカテゴリーを「子カテゴリー」に位置付けて、カテゴリーを階層化しました。
それを、ブログのサイドバーに設置したカテゴリー欄に表示させています。
その方法はこちら。↓
このサイドバーでは、大分類した親カテゴリーが4つだけ表示されていて、▶︎をタップすれば、小カテゴリーも表示されるようになっています。
全てのカテゴリーがズラーっと表示されるよりは、この方が見た目がスッキリしていると思います。
で、これと同じような表示になるように、ナビゲーションメニューの表示もカスタマイズしようと思ったわけです。
ナビゲーションメニューの場合は、親カテゴリーがまず表示されていて、各メニュー名をタップすると、その小カテゴリーがプルダウン形式で表示される、という形にカスタマイズしたいな、と。
参考サイト
その方法を探してググったところ、こちらの記事が大変分かりやすかったので、参考にさせていただきました。↓
CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life
注意点
このナビゲーションメニューのカスタマイズ自体は、おかげさまで簡単にできたのですが。
私のブログの場合、ここで一つ問題が出てきまして。
それは、トップページでの表示の不具合です。
このブログのトップページ、記事数を一覧で表示させているのですが。
その表示形式をカード型にカスタマイズしています。↓
このカード型の表示では、画像の上に、その記事のカテゴリー名がラベル表示されるように設定していました。
そこで、今回の、ナビゲーションメニューを階層化させて表示させるカスタマイズを行ったところ。
トップページで、ナビゲーションメニューから子カテゴリーをプルダウン形式で表示させた時に、その子カテゴリーの表示が、記事一覧のカテゴリーラベルの下に表示されて読めない、という不具合が起きたのです。
CSSが全くわかっていない私ですが、解決の糸口はどうも「z-index」という、表示が重なる時の順番を指定するコードにあるのでは？、というところまでは分かった（つもりな）のですが。
どう直していいのやら分からなかったので＿|￣|○、発想を変えて。
「トップページの記事一覧での、画像の上に表示されるカテゴリーラベルを消しちゃえ！」という妥協気味の解決策で対応しました。(^^;)
なので、もし、ブログのトップページをカード型の一覧表示にしている方で、同じような不具合が出たら。
表示の順番を、ナビゲーションメニューのプルダウンして表示させた部分が、1番上に表示されるようにCSSで設定するか。
または、プルダウンしたメニューよりも上に表示されてしまう、カテゴリーラベルの表示を消すか。
で、対応すると、表示の順番の不具合が解消されると思います。
ということで、以下から、ナビゲーションメニューのカスタマイズ方法の実践をご紹介します。
カテゴリーを階層化して、ナビゲーションメニューを表示させるカスタマイズ方法
カスタマイズの流れ
今回のカスタマイズの手順は、以下のステップで行いました。
カテゴリー階層化＆サイドバー表示の流れ
① 親と子カテゴリー名、リンク先、メニューバーの色と文字の色を決める
② CSSとHTMLの編集をして、はてなブログに設定
① 親と子カテゴリー名、リンク先、メニューバーの背景色と文字の色を決める
まず、下準備をします。
親カテゴリーと小カテゴリーの名称
親カテゴリー名を、ナビゲーションメニューに表示させるメニュー名にします。
小カテゴリー名は、メニュー名をタップした時に、下にずらっと表示されるメニュー名です。
リンク先
メニュー（親カテゴリー）やプルダウンして表示させたメニュー（子カテゴリー）をタップした時に、どのページにリンクさせるのか、そのリンク先を決めておきます。
特定の記事だったり、そのカテゴリーの記事一覧ページだったりすると思いますが。
そのリンク先のURLを準備しておきます。
私は、親カテゴリーのリンク先は、そのカテゴリーの「まとめ記事」を作っていたので、その記事のURLにしています。
小カテゴリーのリンク先は、そのカテゴリーの記事一覧ページのURLにしました。
カテゴリーの記事一覧ページをリンク先のURLにする場合は。
自分のブログのサイドバーに設置しているカテゴリー欄のカテゴリー名をタップすると、そのカテゴリーで書かれた記事一覧ページが表示されます。
その時のURLを使います。
メニューバーの背景色と文字の色
メニューバーのデザインを、自分の好みの色合いにしたい場合は、6桁の英数字のカラーコードが必要になります。
こちらから、自分が使いたい色を見つけて、そのカラーコードを調べることができます。↓
今回のカスタマイズでは、素人でも細かく色指定ができるようにコードが作られているのですが。
最低限必要なのは、「文字の色」と「メニューバーの背景色」の2種類です。
まずはこれだけ決めて、カラーコードを準備しておきます。
② CSSとHTMLの編集
下準備ができたら、CSSコードやHTMLタグを参考サイトからお借りして、編集していきます。
1）デザインCSSの編集
まず、上記参考サイトの「カスタマイズ CSS」にある、以下のコードをコピーさせてもらい、メモ帳に貼り付けて保存します。
↑ 参考サイトには、この続きに、「トグルメニュー」のコードもあるのですが、今回はトグルメニューは使わないので、ここまでをコピーさせていただきました。
このコードの中の、青い字で書かれた、/*7*/のように数字が書かれてある行が、変更する部分です。
まず、メニューバーの背景色を自分の好みの色に変更するために、数字の7、8、9、11、13、15、17の数字がある行を見つけます。
その行の、＃以下の3桁の数字や英字を、自分の好みの色のカラーコード（英数字６桁）に書き換えます。
次に、メニュー名の文字の色を自分の好みの色に変更するために、数字の10、12、14、16、18の数字がある行を見つけます。
その行の、＃以下の3桁の数字や英字を、自分の好みの色のカラーコード（英数字６桁）に書き換えます。
メモ帳での書き換えができたら、このコードをまるっとコピーして。
管理画面→デザイン→工具マーク→｛｝デザインCSSの、1番下に貼り付けて、上部にある「変更を保存する」をクリックします。
2）HTMLの編集
次に、上記参考サイトの「カスタマイズ HTML&jQuery」にある、以下のコードをコピーさせてもらい、メモ帳に貼り付けて保存します。
↑ 参考サイトにあるHTMLタグから、2つ目以降のカテゴリ部分を削除して、こちらに掲載しています。
ここで編集するのは、メニュー名（親カテゴリーと子カテゴリー）の書き換えと、そのリンク先URLの貼り付けです。
まず、メニューバーに載せるメニュー1つ分を編集してみます。
こちらが、コピーしてきたタグの中の、メニュー1つ分のタグ部分になります。↓
✳︎ 「カテゴリ１」＝親カテゴリー名に書き換え
✳︎ 「1階層目のリンク」＝その親カテゴリーのリンク先URLに書き換え
✳︎ 「カテゴリ１ー１」＝子カテゴリー名の1つ目に書き換え
✳︎ 「カテゴリ１ー１」の横の「2階層目のリンク」＝その子カテゴリーのリンク先URLに書き換え
✳︎ 同様に、小カテゴリー2つ目以降のカテゴリー名とURLを書き換え
✳︎ 子カテゴリーが5つ以上あるなら、小カテゴリー4つ目の<li>〜</li>までをコピーして、その下の行に貼り付けて足して、書き換える
✳︎ 子カテゴリーが4つもなければ、書き換える必要のない小カテゴリーの行の<li>〜</li>までを削除する
これで、メニューバーに表示させるメニュー1つ目の設定ができました。
2つ目以降のメニューは、上記のメニュー1つ目のタグ部分をコピーして、その下の行に貼り付けてから、同様の編集をしていきます。
あるいは、参考サイトの「カスタマイズ HTML&jQuery」にあるHTMLタグを全てコピーして、「カテゴリ２」以降を編集していき、書き換えの必要のないカテゴリ部分を削除します。
ちなみに、このブログでは、「HOME」や「CONTACT」といった、子カテゴリーのないメニューには、メニュー名横の記号（下向き矢印？）を消しています。
記号を消すには、「カテゴリ1 」など、親カテゴリー名のすぐ後にある
を消します。
メモ帳での編集ができたら、そのタグをまるっとコピーして。
管理画面→デザイン→工具マーク→ヘッダ→「タイトル下」の入力スペースをクリックして、その1番下に貼り付けます。
そして、上部にある「変更を保存する」をクリック。
これで、カスタマイズは終了です。(´ｰ｀)
ナビゲーションメニューバーの表示の確認
これで、メニューバーがどのように表示されるかというと…。↓
こんな感じです！
メニュー名をタップすれば、プルダウン式に、子カテゴリーが下にずらっと表示されます。
ということで、ブログのナビゲーションメニューを階層化して表示させるためのカスタマイズ方法でした！
kayoko＠おうちcafe
はてなブログのデザインテーマ「Minimalism」のインストールからカスタマイズまでの実践集 ↓
はてなブログの「Minimalism」で、サイドバーのカテゴリーを階層化して表示させるカスタマイズ方法
はてなブログのデザイン「Minimalism」を使用しているこのブログ。
最近、ブログのデザインを集中的にカスタマイズしています。
今回は、多くなったカテゴリーの種類を仕分けして、サイドバーに表示しているカテゴリーを階層化して表示する方法について、ググって実践してみました。
↑今回のカスタマイズで、完成したカテゴリー欄がこれです！
はてなブログのカテゴリー別表示について
ブログの記事数が多くなってくると、カテゴリーもまぁまぁ多くなりますよね。
そうなると、ブログのサイドバーにカテゴリーの表示をさせていたら、カテゴリーの種類の表示だけでズラーっと画面を占領してしまいます。
カテゴリー件数を限定して表示する方法
で、カテゴリー欄の表示をスッキリさせるために、カテゴリーの表示件数を限定する、という方法もあります。↓
この場合は、上の画像のように、まず、管理画面→工具マーク→サイドバー→カテゴリと行って。
カテゴリーの編集画面内にある：
「並び替え順」を「記事が多い順」に
「表示件数」を「○件まで表示」に
変更して保存する、という方法です。
こうすると、メインで書いている記事数の多いカテゴリーを数種類だけ、サイドバーのカテゴリー欄に表示させるようになるので、まぁスッキリはします。
ですが、その他のカテゴリーに分類している記事は、このカテゴリー欄からリーチされることがなくなるので、閲覧されるチャンスを逃してしまう記事が増えてしまうんじゃないかと思います。
カテゴリーを大きく分類して、表示させる
そこで、全部の記事を、このカテゴリー欄からリーチできるようにするためにも。
カテゴリーを大分類して（親カテゴリー）、その中にさらにカテゴリーを作って（子カテゴリー）。
初期設定では親カテゴリーだけを表示させて、そのカテゴリーをクリックすれば、その中にある子カテゴリーも見れる。
っていう「カテゴリーの階層化」をした上での表示にすると、見た目スッキリして、カテゴリー分類された全ての記事を見ることができるので、いいのではないかと。
はてなブログには「カテゴリーの階層化」という機能がない
ところが、はてなブログには、カテゴリーの下にカテゴリーを作る、っていう機能がありません。（ ; ; ）
つまり、カテゴリーの階層化ができない。
なので、カテゴリーを階層化させて表示できるように、カスタマイズをする必要があります。
参考サイト
そこで、今回参考にさせていただいたのは、こちらの記事です。↓
【はてなブログ】カテゴリーの階層化でパンくずリスト＆サイドバーの表示をスッキリ改善 - アラフォーママの雑記ブログ
【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました - 小さな星がほらひとつ
カテゴリーを階層化して、サイドバーのカテゴリー表示をスッキリさせるカスタマイズ方法
ということで、上記サイトを参考にして、私が実践した内容をご紹介します！
カスタマイズの流れ
今回のカスタマイズの手順は、以下のステップで行いました。
カテゴリー階層化＆サイドバー表示の流れ
① ブログのカテゴリーの構成を決める
② カテゴリー名の編集
③ CSSとHTMLの設定
① ブログのカテゴリーの構成を決める
たくさんできてしまったカテゴリーは、横並び状態なので。
まず、既存のカテゴリーの中で、親カテゴリーをどれにするか、いくつか決めます。
（新たに親カテゴリー名を決めてもいいかと思いますが、設定が面倒になります。^^;）
ちなみに、このブログの場合だと、「ブログノウハウ」「ミニマリスト」「ライフスタイル」「高知」の4つを親カテゴリーにしました。
そして、親カテゴリー以外の残りのカテゴリーを、どの親カテゴリーの下につけるか振り分けて、小カテゴリーとします。
例えば、私のブログの場合。
親カテゴリー → 「ミニマリスト」
その小カテゴリー →「メルカリ」「キャッシュレス決済」「ファッション・美容」
このように、これまで横並びにカテゴリーが羅列されていた状態を、「親カテゴリーとその子カテゴリー」という2階層にして、構成を決めておきます。
② カテゴリー名の編集
カテゴリーの構成が決まったら、階層化させるためにカテゴリー名を編集していきます。
どういう風にカテゴリー名を編集するのかというと。
例えば、上記で出した例のうように、親カテゴリーが「ミニマリスト」で、その子カテゴリーに「メルカリ」を持ってきたい場合。
親カテゴリー名 → 「ミニマリスト」
小カテゴリー名 →「メルカリ」というカテゴリー名を「ミニマリスト-メルカリ」に変更
というように、子カテゴリーを「親カテゴリー名＋半角のハイフン＋子カテゴリー名」にするわけです。
で、カテゴリー名を編集するには。
まず、ブログの編集画面の「カテゴリー」をクリックして、カテゴリー一覧を表示させます。↓
親カテゴリーの名称だけを書き換えたい場合は。
編集したいカテゴリーの「編集」をクリックして、カテゴリー名を書き換え、「変更する」をクリック。
子カテゴリーにしたいカテゴリーの編集は。
「編集」をクリックして、上記の画像のようにカテゴリー名を「親カテゴリー名＋半角のハイフン＋小カテゴリー名」に書き換え、「変更する」をクリック。
これで、既存のカテゴリー名の編集は完了です。
カテゴリー名の設定の仕方は、上記参考サイトの「設定手順 2．カテゴリーの階層化」という項目に詳しく書かれてあります。(^ ^)
③ CSSとHTMLの設定
最後に、親と子の2階層に分類したカテゴリーがブログのサイドバーに表示されるように、CSSとHTMLの設定をします。
先に紹介した参考サイトにあったコードを使わせていただきました。
設定は4ヶ所ありますが、全て簡単操作なので、すぐに終わります。(^ ^)
1）パンくずリストの表示
管理画面→デザイン→工具マーク→記事→「パンくずリスト」にある、「記事ページにパンくずリストを表示する」にチェックを入れ、上部にある「変更を保存する」をクリックします。
2）カテゴリー表示設定
管理画面→デザイン→工具マーク→サイドバー→ カテゴリーの「編集」をクリック。
カテゴリーの編集画面にある：
タイトル → 「カテゴリー」などお好みのタイトルを。
並び替え順 → アルファベット順に設定
表示件数 → 全て表示
にして、「適用」をクリックし、上部にある「変更を保存する」をクリック。
3）HTMLタグを入力
管理画面→デザイン→工具マーク→「フッタ」の入力スペースをクリック。↓
ここに、下記のHTMLタグをまるっとコピーして、貼り付けます。↓
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://hatena.wackwack.net/v1.1/js/breadcrumb.min.js"></script> <script src="https://hatena.wackwack.net/v1.1/js/category_archive.min.js"></script>
貼り付けたら、上部にある「変更を保存する」をクリック。
4）CSSの入力
管理画面→工具マーク→ヘッダ→「タイトル下」の入力スペースをクリック。↓
ここに、下記のコードをまるっとコピーして、貼り付けます。↓
<link type="text/css" rel="stylesheet" href="https://hatena.wackwack.net/v1.1/css/fulldisplay.min.css"/>
貼り付けたら、上部にある「変更を保存する」をクリック。
これで、カテゴリーを表示させるための設定は終了です。(´ｰ｀)
カテゴリーの表示の確認
これで、サイドバーのカテゴリー欄がどのように表示されるかというと…。↓
こんな感じです！
最初の表示は、親カテゴリーだけが表示されているので、4カテゴリーのみで、とてもスッキリしました。
子カテゴリーの表示は「▶︎」をクリック
私は、「カテゴリー」という項目名の横に、「「▶︎」から子カテゴリー表示されます」という言葉を付け加えています。
これは、私が、このようにカテゴリーが階層化されている他の人のブログを拝見していて、ちょっと操作が分からなかったからなんですけど。(^^;)
というのも、「▶︎」の部分をクリックしないと、小カテゴリーがプルダウン式に表示されないんです。
カテゴリー名をクリックしてしまうと、小カテゴリーは表示されず、その親カテゴリーの記事一覧ページに移動してしまうんですね。
表示させた子カテゴリーは、「▼」をクリックすると隠れます。
ということで、サイドバーのカテゴリーを階層化して表示させるためのカスタマイズ方法でした！
kayoko＠おうちcafe
はてなブログのデザインテーマ「Minimalism」のインストールからカスタマイズまでの実践集 ↓
はてなブログ有料版は、自己アフィリエイトでお得に申し込めます！
はてなブログを有料版にしようかなーと思っている方に。
普通に有料版を申し込むのではなく、「自己アフィリエイト」で申し込むことで、報酬をもらえる方法があるって、ご存知でしたか？
今回はその方法をお伝えします。
はてなブログの無料版と有料版について
はてなブログって、無料版と有料版がありますよね。
「ブログが書けたらそれで十分」とか、「ブログにお金はかけたくない」という方でしたら、無料版で十分だと思います。
しかし、「ブログで収入を得たい」とか、「広告を消したい」なんて思うようになると、有料版を検討するようになると思います。
ちなみに、はてなブログの有料版は「はてなブログPro」と呼ばれていますね。
本格的にブログをやりたい方にとっては、有料版のはてなブログProには申し込みしたいメリットがいくつかあります。
メリットについて、詳しくはこちらのはてなブログProのページで ↓
で、通常なら、このページから申し込みをするんですが。
「それではもったいない！」と思える申し込み方法があります。
それが、自己アフィリエイトによる申し込み。
普通に申し込むと、契約コースの料金を支払うだけで手続きが終わりますが。
この自己アフィリエイトによる申し込みをすれば、いくらかの報酬がもらえます。
なので、同じ申し込みをするなら、自己アフィリエイトを通して申し込みした方が、節約になります！
「自己アフィリエイトって何？」という方もいらっしゃるかもしれませんが。
ここでは、その説明はバサッと省かせていただきます。(^^;)
「もしもアフィリエイト」で、はてなブログProの自己アフィリエイトができる！
どこのASPで、はてなブログProの自己アフィリエイトができるのかというと。
「もしもアフィリエイト」です。↓
ということで、さっそくこの「もしもアフィリエイト」で、はてなブログProの申し込みをするまでの実践をご紹介したいと思います！
「もしもアフィリエイト」から「はてなブログPro」をお得に申し込む方法
もしもフィリエイトの会員登録
まずは、「もしもアフィリエイト」のサイトに行きます。
こちらの画像をタップすると、すぐに行けます。↓
そして、「メディア・ブロガーの方 会員登録する（無料）」をタップ。
すると、仮登録ページが表示されるので、メールアドレスを入力して、「確認メールを送信」をタップ。
登録したメルアドに、すぐにメールが届くので。
それを開いて、本文の中にある、本登録用のURLをタップします。
すると、会員登録ページが開くので、フォームに沿って入力していきます。
「アカウント情報」「ユーザー情報入力」のそれぞれの項目を入力をして。
「入力内容確認」で間違いがないか確認をし、利用規約に目を通して、オレンジ色の「利用規約に同意して登録する」をタップ。
これでもしもアフィリエイトの会員登録は完了です！(´ｰ｀)
もしもアフィリエイトで、「はてなブログPro」を探して申し込み
会員登録ができたら、次は、もしもアフィリエイトにログインして、「はてなブログPro申し込み」案件を探します。
登録完了後すぐ表示されるページにある「ログイン」をタップ。
すると、もしもアフィリエイトのトップページが表示されます。
検索バーに「はてなブログ」と入力して、検索します。
検索結果が表示されます。
「はてなブログPro」の案件が表示されます。
で、詳細を確認します。
はてなブログの有料版には3つのコースがありまして。↓
はてなブログの有料版の3つのコース
① 1ヶ月ずつ区切って支払いをする「1ヶ月コース」¥1008/月
② 1年分をまとめて支払う「1年コース」¥8434/年
③ 2年分をまとめて支払う「2年コース」¥14400/2年
それぞれのコースを「もしもアフィリエイト」での自己アフィリエイトで申し込んだ場合の報酬額は、
はてなブログの有料版の報酬額
①「1ヶ月コース」を申し込むと¥300
②「1年コース」を申し込むと¥700
③「2年コース」を申し込むと¥1200
となっています。
ということで、申し込むコースが決まったら、オレンジ色の「自分で申し込む」をタップします。
すると、この記事の最初に紹介した、はてなブログProのページが新規ページとして表示されます。
はてなブログProの申し込み
あとは、この「はてなブログPro」のページ上にある、「はてなブログProに登録する」をタップして、はてなブログProの申し込み手続きを進めていきます。
はてなブログProの申し込みについては、特に難しいことはないので、ここでは説明を省きます。
ポイ活をやっている方なら、ポイントサイト経由で商品などを購入するのと同じ流れなので、そんなに難しく感じることもないと思います。(^ ^)
はてなブログProの申し込みが完了したら、これで「もしもアフィリエイト」からの自己アフィリエイトで、はてなブログProに申込む手続きは完了です！(´ｰ｀)
ちなみに、「報酬」というより「割引」という感覚で、この自己アフィリエイトを行うといいかなと思います。
2年契約だと1200円も割引できる、ということなので、この自己アフィリエイトを通さずに普通に申し込むなんて、本当にもったいない！と思うわけです。
というわけで、「はてなブログProに申し込みたい」と思った時には。
もしもアフィリエイトでの自己アフィリエイトで、お得にコース契約してみてはいかがでしょうか？
自己アフィリエイトはめんどくさいな…という方は、直接「はてなブログPro」のページに行って、申し込みされると良いと思います。(^^;) ↓
kayoko＠おうちcafe
ブログや記事作成のノウハウあれこれ ↓
はてなブログの「Minimalism」で、目次を表示・非表示（隠す）できるカスタマイズ方法
はてなブログのデザイン「Minimalism」を使用しているこのブログ。
最近、ブログのデザインを集中的にカスタマイズしています。
今回は、目次のカスタマイズ方法について、ググって実践してみました。
↑今回の目次のカスタマイズで、完成した目次がこれです！
はてなブログの目次機能について
ブログ記事の分量が多くなってくると、見出しもまぁまぁ多くなりますよね。
そんな時は、大見出し・中見出し・小見出しの3種類ぐらいを使って、階層化しながら記事を読みやすくまとめると思うんです。
で、この見出しが記事中に一覧で表示できるのが、目次表示機能です。
はてなブログの初期設定の目次表示機能
私は、今まで記事中にこの目次を表示させたことがなかったのですが。
はてなブログでは、ボタン一つで簡単に目次を表示させることができるんですよね。
その方法は、上の画像のように、まず、記事作成画面で記事内に見出しをつけておいて。
記事中の目次を表示させたい場所に、ツールバーにある小さな赤枠の「目次ボタン」をポンと押すと、［:contents］って表示されます。
そして、プレビュー画面に切り替えると、グレーの背景色の目次が表示されると思います。
もちろん、それぞれの見出しをクリックすると、記事中のその見出しの所までワープできます。
デザイン変えたい！＆目次を隠したい！
この、はてなブログの初期設定の目次。
うーん…(ｰ ｰ;)、って感じに思いまして。
まずは、デザインを変えたい！と。
そして、見出しが3階層まで、しかも見出しが多めにある記事だと、この目次の表示だけで、記事のトップ部分を埋め尽くしてしまいます。
なので、最初は、目次の内容は非表示になっていて、見たい時だけ目次の中身を表示させて、また目次を隠す。
ってことができるようにしたいな、と。
はてなブログの目次のカスタマイズ内容
ということで、今回ご紹介する目次のカスタマイズ内容は、以下の目的の方におすすめです。
目次のカスタマイズ内容
✳︎ 目次を表示したり隠したりできるようにしたい
✳︎ 目次のデザインをシンプルでいい感じにしたい
✳︎ 目次は、大見出し・中見出し・小見出しとも表示させたい
目次カスタマイズの参考サイト
今回の目次のカスタマイズでは、以下のサイトを参考にさせていただきました。
目次のデザイン関係では：
目次の表示・非表示の設定では：
『目次』をカスタム！【表示】【隠す】機能を追加する方法 - 人生RPG
目次の表示・非表示の設定ができなかった原因：
https://pagain.hatenablog.com/entry/2019/05/14/175812
実は、今回。
「目次を表示・非表示にする設定」が、他サイトを参考にしてもちゃんと再現されなくて。
目次自体が表示されない、というところで1週間もつまづいていました。＿|￣|○
もし、目次の表示・非表示の設定が参考サイト通りにやってもうまくいかない場合は、ぜひ上記3つめの参考サイトをご覧ください！
目次をシンプルなデザインにして、表示・非表示できるようにカスタマイズする方法
では、カスタマイズ方法です！
① CSSで、デザインと表示/非表示の設定をする
今回は、上記のデザインについての参考サイトにある、以下の「目次デザイン」と「隠れる目次のデザイン」のCSSをベースに使わせていただきました。↓
/*はてな目次のデザイン*/ ul.table-of-contents { border: 1px solid #ccc; padding: 1.2em 1em 1em 2em; margin: 0.5em 0 2em 0; position: relative; background-color: #fff; border-radius: 3px; } ul.table-of-contents:before { content: "Index"; display: inline-block; position: absolute; top: -0.6em; left: 0.5em; background: #fff; padding: 0 0.5em; font-weight: 700; color: #ccc; } .table-of-contents ul ul{ display: none;/*3階層以降を消す*/ } .table-of-contents li, .table-of-contents ul{ list-style-type: none;/*表示一時的に消す*/ } ul.table-of-contents li:before { content: "▼"; /*記号に変更*/ color: #b0d7fd; padding-right: 0.5em; font-size: 80%; vertical-align: text-top; } } .table-of-contents ul{ font-size: 95%;/*h3以降小さく*/ } .table-of-contents a{ color:#444; text-decoration: none; } .table-of-contents a:hover { color: #ccc ;/* リンクにマウスを重ねた時の色 */ text-decoration: underline; }
/*隠れる目次のデザイン*/ .table-of-contents{ display: none; } .show-area{ display: inline-block; font-size:0.7em; padding: 10px; border-radius: 5px; cursor: pointer; margin-bottom: 0; color: #4f96f6; }
そして、まずこのコードの
.table-of-contents ul ul{
display: none;/*3階層以降を消す*/
}
という部分を削除しました。
これは、小見出し（h3）以下の見出しは表示させない、という意味だと思いますが。
今回のカスタマイズでは、見出し自体を隠すことができるように設定するので。
目次を表示させた時には、ちゃんと小見出しまで全部表示された方がいいかな、と思って、このようにしました。
そして、
ul.table-of-contents li:before {
content: "▼"; /*記号に変更*/
color: #b0d7fd;
の「▼」を「▶︎」に変更して。（マイナーチェンジ笑）
＃以下の6桁のカラーコードの数字を「ffb6c1」に変更しました。
ちなみに、カラーコードは、こちらから見つけられます。↓
で、この変更したコードをまるっとコピーします。
それを、ブログ編集画面→デザイン→工具マーク→「｛｝デザインCSS」の1番下に貼り付けます。
最後に「変更を保存する」をクリック。
これで、目次のデザインの設定は完了です！
②目次の表示/非表示の機能のHTMLを設定
次に、目次の表示/非表示をさせるHTML設定をします。
先に紹介した、表示・非表示の設定についての参考サイトにある、以下のHTMLをコピーします。↓
そして、1番上にある
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">
の「http」のすぐ後に、「s」を付け足します。
（この「s」の1文字がなかっただけで、目次自体がまったく表示されません！）
これをまるっとコピーして、ブログ編集画面→デザイン→工具マーク→「フッタ」の1番下に貼り付けます。
最後に「変更を保存する」をクリック。
これで、目次のデザインと表示/非表示の設定は完了です！(´ｰ｀)
kayoko＠おうちcafe
はてなブログのデザインテーマ「Minimalism」のインストールからカスタマイズまでの実践集 ↓
はてなブログの「Minimalism」で、記事中にタイトル付きのボックスを入れるカスタマイズ方法
はてなブログのデザイン「Minimalism」を使用しているこのブログ。
最近、ブログのデザインを集中的にカスタマイズしています。
今回は、記事中にタイトル付きのボックスを入れる方法について、ググって実践してみました。
タイトル付きのボックスについて
ブログ記事を書いていて、大事なポイントや要点なんかを書くときに、今までは、単に箇条書きスタイルで書いていたのですが。
色んな方のブログを見ると、囲みデザインで見やすくしている記事をよく見かけます。
私もそれができるようになりたいなーと思い、今回、その方法を実践してみました。
これまで、色々とはてなブログのカスタマイズをしてきた中で、「サルワカ」というサイトのことを覚えてまして。
こちらのサイトに行き、サイト内検索で、タイトル付きのボックスデザインのページを見つけたので、↓
この中から、使ってみたいデザインのCSSコードを参考にさせていただき、カラーの設定だけ変えてみる感じで、カスタマイズしてみました。
結果、こんな感じになりました！↓
記事にタイトル付きのボックスを入れる方法
では、設定方法です！
① CSSでデザインの設定をする
今回は、上記の参考サイトの「27. ラベルをつけたようなデザイン」を使わせていただこうと思います。
まず、そのデザインの下にある「＋コードを表示」をタップし、CSSと書かれてある部分の、以下のコードをコピーします。
それを、ブログ編集画面→デザイン→工具マーク→「｛｝デザインCSS」の1番下に貼り付けます。
次に、上記コードの中にある、赤字の6桁の数字のカラーコード「#62c1ce」を、お好みの色のカラーコードに変更します。
ちなみに、私のブログは、「#ffb6c1」というピンク系のカラーコードです。
カラーコードは、こちらから見つけられます。↓
最後に「変更を保存する」をクリック。
これで、デザインの設定は完了です！
② 記事作成時にhtmlでボックスを作る
記事を書いている時に、このタイトル付きボックスを使いたいなーとなったら。
まず、上記の参考サイトにある「HTML」の方の、以下のタグをコピーします。
（このタグは、メモ帳などに貼り付けて保管しておくと、次回以降使う時に便利です。）
HTML
そして、はてなブログの記事作成画面を「HTML編集」に切り替えて、ボックスを入れたい部分に、コピーしたタグを貼り付けます。
そして、「プレビュー」に切り替えて、確認してみます。
すると、このように、CSSで設定したデザインで表示されます。↓
あとは、編集画面を「HTML編集」画面に戻して。
「ここにタイトル」と「ここに文章」という文字を消して、文字を入力していきます。
※「編集見たまま」モードで文字を消したり入力すると、貼り付けたタグの一部を消してしまう可能性があって、デザインが崩れることがあります。
これで、記事の中に、タイトル付きのボックスを作成できました！(´ｰ｀)
以上です！
kayoko＠おうちcafe
はてなブログのデザインテーマ「Minimalism」のインストールからカスタマイズまでの実践集 ↓
【はてなブログ】ブログ村の登録方法、ランキング参加方法を詳しく解説！
はてなブログを始めた頃は、Googleなどの検索エンジンからのアクセスがまずないので。
（本当に、なかったです（笑）。）
アクセスを集めるための一つの方法である、「ブログランキングサイトへの登録」というのをやってみようと思いまして。
そこで、ググってみて、こちらのサイトを参考に取り掛かってみました。↓
ブログ開設直後は「にほんブログ村」に登録してアクセス数を増やすのがオススメ | 初心者がお小遣いサイトで稼ぐんだ！と頑張ってみる
こちらのサイトによると、ランキングサイトならどれでも、とりあえず登録…なんてことはしない方が良いらしく。
今回は、最もメジャーなランキングサイトである「にほんブログ村」に登録してみました。
ブログ村の登録、ランキング参加のための手順
登録とか設定とか、やることがなかなかあったので、その概要をざっと書くと：
✳︎ にほんブログ村に無料の新規会員登録をする
✳︎ にほんブログ村に、自分のはてなブログの登録をする
✳︎ にほんブログ村のランキングに参加し、自分のブログにブログ村のバナーを貼る
✳︎ 自分のブログの更新をにほんブログ村に通知するための、自動Ping送信の設定をする
ー↑ここまでが初期設定ー
✳︎ 日々のブログ活動で行うこと
となります。
にほんブログ村への会員登録方法
まずは、会員登録から。
こちらが、にほんブログ村のサイト。↓
まず、こちらのサイトにアクセスして、「新規会員登録」をタップ。
次に、「ブロガーとして登録する」の方の、「メールアドレスで登録する」をタップ。
登録ページが表示され、メルアド・パスワード・利用規約にチェックを入れ、登録をタップ。
これで会員登録完了です。
（後で、本登録完了のメールも届きます。）
ブログ村に、自分のブログを登録する方法
次に、ブログの登録をします。
会員登録後すぐの画面が、ログインした状態でのマイページに切り替わっていると思います。
そのページにある「ブログをお持ちの方へ」の「ブログ登録（追加）する」をタップ。
ブログ登録画面になるので、ハンドル名以下、必須の項目を入力し、「確認画面へ」をタップ。
確認画面で内容を確認して、「登録」をタップ。
これでブログの登録は完了です。(´ｰ｀)
すると、マイページに戻り、ランキングやポイントの一覧表が表示されます。
ちなみに、その一覧の中にある：
✳︎ INポイント＝自分のブログ→ブログ村へ行った、というポイント
✳︎ OUTポイント＝ブログ村→自分のブログへ行った、というポイント
というのを知っておいて。
INポイントが増える＝アクセスが増えている、ということになるようです。
ブログランキングに参加し、「ブログ村のバナー」を自分のブログに貼る
次は、ブログランキングに参加して、ブログ村のバナーを自分のブログに貼る、という作業を行います。
今回は、バナーを記事下に貼るのではなく、サイドバーに貼る方法を紹介します。
（記事下はあまりおススメではないようで。サイドバーでも十分効果はあるそうです。）
まず、ブログ村のマイページにある、「ランキング参加」から、「（INポイント）ランキングバナー」をタップします。
すると、バナーのデザインがいくつか表示されるので、自分のブログに貼りたいバナーを選びます。
そのバナーのタグを全て選択して、コピーします。
次に、自分のはてなブログの管理画面を開きます。
デザイン→工具マーク→サイドバーをタップ。
そして、「＋モジュールを追加」をタップ。
すると、モジュール追加画面が表示されます。
項目の中にある「＜/＞HTML」をタップします。
＜p＞…＜/p＞と入力されている広いスペースに、先ほどコピーしたタグを貼り付けます。
その上には、サイドバーに新たに追加するこの項目のタイトルを入力します。
（ちなみに私は、「ブログランキングに参加しています」にしました。）
そして、「適用」をタップします。
すると、元のサイドバー編集画面に戻ります。
このままだと、このブログ村のバナーの項目は、サイドバーの1番下に表示されます。
そこで、サイドバーのどの位置に表示させるのか、お好みの位置まで移動させて、「変更を保存する」をタップします。
これで、サイドバーにバナーを貼る作業が完成です！(´ｰ｀)
自分のブログのサイドバーを確認してみると…↓
このように、表示されています。(^ ^)
ブログ更新の通知をブログ村に自動で通知する設定
ブログ村に関する初期設定作業も、これで最後になります！
が、この最後が、ブログ村初心者の私にはなかなか手強かった…。＿|￣|○
まず、ブログを更新したら、更新したことをブログ村に通知する作業を「Ping送信」というそうです。
そして、そのPing送信というのは、たいていのブログサービスでは自動送信できるよう設定ができるのに、はてなブログにはPingの自動送信機能がないんですって。
そこで、はてなブログでブログ更新した時に、ブログ村に通知する方法は、大きく2種類あって：
✳︎ 記事を更新する度に、手動でPing送信の操作をする
✳︎ Ping送信と同じ働きをしてくれるツール（IFTTT）を使って、自動でPing送信できるよう、設定する
となると、毎回手動で…は、なかなか手間がかかるので。
今回は、がんばって、ツールを使って自動でPing送信できる設定をしようと思います。
そこまでしてまでPing送信は必要なのかい？って思ったけど。
調べていくうちに、ブログランキングに参加するならPing送信は必須なので、ぜひともここは自動送信できるように設定をしておこう！と。
で、ググっていく中で見つけた、こちらの記事を参考に実践してみました。↓
ブログ村のPing送信（更新通知）をIFTTTで自動化する方法 | 3分ニュース: にゃんぷん
Ping自動送信のためのIFTTTというツールは英語で書かれてあるのですが、上記の参考サイトの通りに行って、問題なく設定できました。(´ｰ｀)
ありがとうございます♡
この設定後にブログ更新した後に、ちゃんと自動Ping送信がされているかどうかを確認する方法も、上記の参考サイトに載っています。
また、この「はてなブログへのPing送信設定」をいつか解除する場合も、その方法が載っているので、安心です。
日々のブログ活動で行うこと
ブログ村の活用って、 単に、初期設定したら終わり、というわけではないらしく。
こちらのサイトの↓
https://blog-support.jp/hatenablog-blogmura/
「新ブログ村の活用方法 ランキングの上げ方」というところで、詳しく書かれていたので、今後、実践しようと思います。
というわけで、ブログ村の初期設定だけでも、調べて理解して設定して…、って、初めてのことばかりだったので、なかかな時間がかかりました。(^^;)
しかも、今後もブログ村の活用法を実践していく必要がありそうなので、イヤにならない程度に、やっていきたいと思います。
kayoko＠コメダ珈琲
ブログや記事作成のノウハウあれこれ ↓
