ともちゃん.me

50㎏減量に成功して人生変わった人のただの趣味ブログです✧

パソコン初心者でもはてなブログをオシャレに読みやすく♪♪カスタマイズリンク集✧⁎⁺✧

スポンサーリンク

f:id:tomochan-me:20190804200314j:image

"no-img2″

今回のブログは、はてなブログのカスタマイズです♪♪

 

このブログを始めるまで、パソコン初心者だった私でも簡単に、ブログをオシャレにカスタマイズできた神リンク集を紹介させてください✧

 

現在、私がはてなブログで使用させてもらっているテーマは、元CAバンビさんの「Palette(パレット)」です✧⁎⁺

blog.hatena.ne.jp

 

 

 

カスタマイズその①グローバルナビゲーションメニューを設置

f:id:tomochan-me:20190804184935j:image☝︎こちらは、私のブログをパソコンで表示した際、画面のトップに固定されて表示されています♪♪

 

使用させてもらっている、はてなブログテーマ「Palette(パレット)」のカスタマイズで紹介されていました。

www.bambi.pro

 

  1. 1階層〜2階層のメニューが表示することが可能
  2. アイコン表示方法
  3. スマホ時はグローバルナビゲーションを表示させない方法

などが、コピペや、URLを書き加えたりするだけで簡単にグローバルナビゲーションメニューを設置することができました♡

 

カスタマイズその②スマホ用に固定ボトムナビゲーションを設置

f:id:tomochan-me:20190804185005j:image☝︎こちらは、私のブログをスマホで表示した際、画面の下に固定表示されているボトムナビゲーションメニューです✧

 

グローバルナビゲーション同様、私が使用させてもらっている、はてなブログテーマ「Palette(パレット)」のカスタマイズで紹介されていました♪♪

www.bambi.pro

 

グローバルナビゲーション同様、URLを書き加えたりするだけで簡単に、ボトムナビゲーションを設置することができました♡

☟このようにメニューを展開することができますよ✧

f:id:tomochan-me:20190804145637j:plain

 

カスタマイズその③カテゴリーをパンくずリストからのスッキリ階層化

パンくずリストは以前から設定していたのですが、カテゴリーがまとまり悪い感じだったのですが‥💦

☟こちらの記事を紹介してくださっているWorldWorldWorldさんのお陰で階層化ができて、カテゴリー欄がスッキリしました✧⁎⁺✧

blog.wackwack.net

 

カテゴリー欄の【▶︎】を押すと、子カテゴリーが展開されるようになりました!

f:id:tomochan-me:20190804162131j:image

 

また、公式パンくずリストが階層表示されるようになりました(^o^)f:id:tomochan-me:20190804162128j:image

 

カスタマイズその④カテゴリーの見出しを編集

カテゴリーの見出しは、カテゴリーのトップページを開いたときに表示される見出しのことです♪

例えばこんな☟感じです!

f:id:tomochan-me:20190804163404j:image
f:id:tomochan-me:20190804163401j:image

 

変更方法はとっても簡単です(^o^)

  1. ①カテゴリーを選択します。

f:id:tomochan-me:20190804163345j:image

  1. ②見出しを変えたいカテゴリーの編集をクリックします。

f:id:tomochan-me:20190804163356j:image

  1. ③見出しを記入して変更ボタンをクリックします。

f:id:tomochan-me:20190804163353j:image

以上です(^o^)

 

カスタマイズその⑤カテゴリーのページにメニューバーを設置

グローバルナビゲーション&ボトムナビゲーションを設置して、カテゴリーは階層化していますが、子カテゴリーを表示して見ていない人には、どんな記事があるのか、分からないんじゃないかと思ったんです。

せっかく、カテゴリーを選択して見てもらっても、新しい記事は見てもらえるかもしれませんが、スクロールして見ていかないと、古い記事はなかなか見てもらえないんじゃないかと…

 

それならば!カテゴリーのトップページに子カテゴリーが分かるような、メニューバーを表示すればいいんだ!と、思ったんです(*'▽'*)

f:id:tomochan-me:20190804184615j:image
f:id:tomochan-me:20190804184624j:image

 

☟こちらのサイトを参考にさせて頂きました!

ameblo.jp

☝︎アメブロのサイトなのですが、コピペできるHTMLが紹介されていて、リンク先を書き加えるだけで、設置することができました♪

 

それぞれのカテゴリーのページに設置する方法は、

  1. ①カテゴリーを選択します。

f:id:tomochan-me:20190804165916j:image

  1. ②メニューバーを設置したいカテゴリーの編集をクリックします。

f:id:tomochan-me:20190804170024j:image

  1. ③説明文内に、上記サイトで紹介されたHTMLに、表示したいサイトを書き加えたものを記入して変更ボタンをクリックします。

f:id:tomochan-me:20190804170545j:image

 

以上です(^o^)

 

カスタマイズその⑥吹き出しで会話♪♪

"no-img2″

こんな感じに、吹き出しで会話しているみたいにできちゃいます♪♪

☟こちらのサイトを参考にさせて頂きました✧

gcbgarden.com

fantastech.net

 

上記サイトでは、吹き出しの会話に使う画像下に、名前が入れられます♪♪

また、HTMLで名前と、画像の変更をすることができるので‥

 

"no-img2″
驚く私

わぁあああああ

"no-img2″
疑う私

えーーー

"no-img2″
困った私

えぇえええん

"no-img2″
にっこりな私

てへ

 

みたいな感じにできるんです😂😂

 

因みに、画像はココナラ で依頼しています✦

 

番外編*表を入れる

f:id:tomochan-me:20190804184653j:image

☟こちらのサイトのExcelから貼り付ける方法を参考にさせて頂きました!

www.itjigoku.com

 

ExcelをコピーしてエクセルシートをHTMLテーブルに変換しちゃう君 (ββ)で、コピーしたらブログ内に表を表示することができました♪♪ 

 

番外編*ボタンを可愛く♡

☟こんな感じのリンクボタンです!

 カーソルを合わせると色が変化するボタンができました♪♪

saruwakakun.com

 

終わりに*パソコン初心者でもはてなブログをオシャレに読みやすく♪♪カスタマイズリンク集✧⁎⁺✧

今回紹介したカスタマイズをおこなってから、直帰率が減少しました!=PV数が増加したのかもしれません(^^)まだまだですが‥

カスタマイズを紹介してくださっているブロガーの皆様!どうもありがとうございました♪♪

 

こちらもどうぞ♪♪

 

以上!パソコン初心者でもはてなブログをオシャレに読みやすく♪♪カスタマイズリンク集✧⁎⁺✧でした♪

最後までお読みいただきありがとうございました(*'▽')