本当に本が読みたくなる読書のブログ

読書好きのための本当に読みたい本が見つかる書評ブログです。小説、実用書、ビジネス書ジャンルを問わず紹介。読書にまつわる豆知識のお話、文章の書き方のお話もありますよ。

デザインテーマの変更とSNSシェアボタンの設置

ブログのデザインをリニューアル

f:id:jizi9:20190404105952j:plain


春の気分転換もかねて、ブログのデザインをリニューアルしました。

今回は「2カラムのテーマ」のインストール、「SNSシェアボタンの設置」の2つに取り組んでみましたよ。

参考にさせていただいたサイトもリンクしておきますので、これからデザインを変更される方はご利用下さいね。


2カラムのテーマ「Under shirt」に変更

f:id:jizi9:20200331151045j:plain

UnderShirt - テーマ ストア


気になる新しいテーマが多かった中、2カラムと呼ばれているデザインの「Under shirt」を選んでみました。

2カラムというのは、トップページで一覧表示をしたときに記事ページが2列に並ぶデザインです。

「Innocent」もシンプルで使いやすいテーマなのですが、記事数が多く表示される2カラムを使ってみたくなりインストール。

記事数の多いブログを見やすくする効果がありそうですね。


デスクトップ用

f:id:jizi9:20200331151115j:plain

ご覧のようにデスクトップ用のトップページは、記事が2列に並んでいます。


f:id:jizi9:20200331151138j:plain

記事ページは、今まで通りのデザインですね。


スマホ

f:id:jizi9:20200331151203j:plain

「Under shirt」は、横幅の狭いスマホでは今まで通り記事が1列で表示されるレスポンシブデザインです。

こちらは、前と大きく変わりません。



記事上にSNSシェアボタンの設置

f:id:jizi9:20200331151221j:plain


今さらではありますが、記事上のスペースにSNSシェアボタンを設置しました。

花水(hanami)はゼロからHTMLを書けないので、ゆきひー さん(id:ftmaccho)の記事を参考にさせていただきました。

www.yukihy.com


はてなブックマーク!」「Facebook」「Twitter」「Google +」「Pocket」「 LINE」のシェアボタンが並んでいて使いやすいかと思います。

はてなユーザーの方なら、はてなブックマークだけで記事をシェアできるのですが、他のSNSを利用されている読者さんも多いでしょう。

記事下には関連広告も表示されるので、元々のSNSシェアボタンまで見るのは不便そうと思ったのも理由の1つです。



メニューボタンをリメイク


「Under shirt」のテーマに合わせて、メニューボタンもリメイクしました。

こちらは、元々の「Innocent」用だったためか、レスポンシブ設定にするとメニューが表示されない不具合がありました。

そこで、以前のようにスマホ画面だけのメニューボタンを設置することにしています。

こちらも、ゆきひー さん(id:ftmaccho)の記事を参考にさせていただいております。

www.yukihy.com


今までのデザインや設定の記録はこちら

固定トップページの作成
www.yu-hanami.com


Twitterフォロワーボタンの設置
www.yu-hanami.com


feedlyボタンの設置
www.yu-hanami.com


HTTPS配信
www.yu-hanami.com


グローバルメニューバーの設置
www.yu-hanami.com


ブログ管理に役立つツール
www.yu-hanami.com




にほんブログ村 本ブログへ