読者です 読者をやめる 読者になる 読者になる

♡旅好き女子 ママになる♡

海外生活を経て日本に帰国。 2015年夏、ママになった28歳。 それでも旅行大好き。 ママになっても旅に出たい。 そんな旅好き女子のブログです。

スポンサーリンク

はてなブログProでデザインを楽しむ!当ブログで行ってきたカスタマイズまとめ!

ブログ運営

f:id:MumLovesTraveling:20160913183031j:plain

 

こんにちは。旅好きママブロガーのナナミ(@mumlovestravel) です。

 

最近、記事を書かずにブログのデザインをちょくちょく変えていました。そこで、備忘録も兼ねて当ブログで行ってきたデザインカスタマイズをまとめます! 

 

 

 

 

当ブログで行ってきたカスタマイズまとめ!

Blog
Blog / christophe.benoit74

 

当ブログは、はてなブログPro版を利用しています。Proにするとカスタマイズできる幅が大幅に広がります!

 

最近、デザインをいろいろとカスタマイズしてきたので、簡単にできるカスタマイズをご紹介します! 

 

 

PC・スマホ共通

PC・スマホ共通でのカスタマイズは以下の項目を変更しています。

  • 目次
  • 見出し
  • シェアボタン
  • フォローボタン
  • パンくずリスト
  • カエレバ 
  • リンクボタン
  • 参考・関連記事

 

 

目次

はてなブログの場合、[:contents]と記入することでそこに目次が入ります。

 

参考:

www.yukihy.com

ゆきひーさんのブログにははてなブログでカスタムできる情報がたくさんあり、よく使わせて頂いています!

上記のコードを足して目次をアレンジしています。

ただ、上記のコードだとスマホ版でうまくいかなかったため、スマホ版では下記も参考にさせて頂きました!

 

参考:

gist.github.com

 

 

見出し

大見出しは吹き出しを利用しています^^

 

参考:

shiromatakumi.hatenablog.com

 

 

シェアボタン

参考:

www.yukihy.com

 

 

フォローボタン

参考:

www.yukihy.com

 

ゆきひーさんのブログには、他にもたくさん使える情報が掲載されています!

www.yukihy.com

 

 

パンくずリスト

参考:

wepli-dot2.hatenablog.com

 

 

カエレバ

アマゾン、楽天などのアフィリエイトを貼る際に便利なカエレバ!

 

参考:

akiueo.hatenablog.com

 

 

リンクボタン 

参考:

harv-tech.hatenablog.com

 

www.hp-stylelink.com

 

www.nishishi.com

 

 

参考・関連記事

記事内で参考記事や関連記事、記事下のおすすめ記事のURL前の文字を強調してわかりやすくしました。

 

⇩こんなやつです。

おすすめ記事寄稿、記事広告の執筆依頼募集中!バナー広告も受付中!

 

下記の記事の内容とは違うのですが、紹介されているコードを使用しました!

shiromatakumi.hatenablog.com

 

 

PC版

PC版のみは以下の項目を変更しています。 

  • おすすめ記事リスト
  • ナビゲーションバー
  • 合わせて読みたい
  • トップへ戻るボタン
  • 続きを読むボタン
  • サイドバー固定

 

 

おすすめ記事リスト(画像付き)

当ブログはブログテーマInnocentを利用させて頂いているんですが、こちらで利用できるおすすめ記事リストを導入しました!

見た目がオシャレに見えて気に入っています!

 

参考:

moonnote.hateblo.jp

 

 

ナビゲーションバー

参考:

moonnote.hateblo.jp

 

 

合わせて読みたい

参考:

bulldra.hatenablog.com

 

 

トップへ戻るボタン

参考:

mmman.hatenablog.jp

 

 

続きを読むボタン

参考:

akiueo.hatenablog.com

 

 

サイドバー固定

サイドバーのプロフィールをスクロールしても固定するようにしました^^

blog.yutorigoto.com

 

 

スマホ版

スマホ版は以下の項目を変更しています。

  • 追尾ヘッダの削除
  • タイトル文字
  • ナビゲーションバー
  • 固定メニューバー
  • 記事一覧の日付・画像
  • おすすめ記事の囲み枠

 

追尾ヘッダの削除

追尾ヘッダ以外も削除している部分があります。

 

参考:

bulldra.hatenablog.com

 

 

タイトル文字

cssの.blog-title内に指定したいフォントタイプを追加しました。

 

参考:

bulldra.hatenablog.com

 

  

ナビゲーションバー

参考:

akiueo.hatenablog.com

 

固定メニューバー 

参考:

www.yukihy.com

 

記事一覧の日付・画像

参考:

tsukuruiroiro.hatenablog.com

 

 

おすすめ記事の囲み枠

フッダに表示しています。3つのおすすめ記事を囲みました!

 

参考:

michiko-70554148.hatenablog.com

  

 

  

最後に

blog-long
blog-long / Xiaobin Liu

 

参考にさせて頂いた皆様、ありがとうございました^^ 

 

おすすめ他の「ブログ運営」カテゴリ記事も見てみる

 

急げ!新ドメインは早いもの勝ち!