はてなブログMinimalismで更新日を入れた際シェアボタンが消えてしまうときの対処法

はてなブログの人気デザイン『Minimalism』をベースに、リライトしたときの更新日を自動的にブログに表示できたら便利ですよね。

今回私も更新した際に自動で新しい日にちが出るようにブログのカスタマイズを行いました。

しかし…

記事上と記事下のシェアボタンの一部のアイコンが表示されずに困ったので、解決方法をブログにまとめました。

・Minimalismで更新日を入れるとシェアボタンが消えてしまう方
・便利な更新日をブログに入れたい方
向けの記事です。

リライトした日にちがわかるカスタマイズ

記事をよりよくするため、リライトした際に新しい更新日を毎回入力していくのってとても大変ですよね。

今回、ブログの日にちの横に更新日を表示できるようにブログのカスタマイズを行いました。

左：投稿日　右：更新日

投稿日は変わりませんが、記事を新しく更新した際に自動的に右側の更新日が変わっていきます。

こちらの２ブログ様を参照させていただきました。

この２サイト様の流れの通りカスタマイズを行っていくと、どうしてもシェアボタンが消えてしまうという事態に遭遇しました。
TwitterとFeedのアイコンは残っているのに、真ん中の３つだけが消えてしまっている状態です。

しかし、クリックするとシェアするための投稿ページに飛ぶことができているためおそらくアイコン関係のトラブルだと思いました。

シェアボタンをMinimalismのカスタマイズ集からコピペして使用している方で、私と同じように更新日カスタマイズを行うとシェアボタンが消えてしまってうまくいかないという方には今回のやり方は効果があるかもしれません。

①「jQuery」と「Font Awesome」の挿入

ここがうまく表示されない原因でした。

Minimalismのカスタマイズ集には、シェアボタンのスタイルが標準で記述されているとの記載があります。

つまり、このFont Awesomeを読み込むための挿入は必要ないのではないかと考察を立てました。

Font Awesome：様々アイコンをCSSを使ってWEBで読み込んで利用できるサイト。

MinimalismではこのFont Awesomeの中からアイコンを選んでCSSでアイコン名を書き換えるだけで簡単にカスタマイズできます。

例）このブログのメニューは元々のアイコンを下記のサイトからハートに変えたもの

②好きな色にカラー変更

更新日の背景、文字色は変更可能なので、ブログに合わせて背景は白・文字は黒に変更しました。

① <!–「jQuery」参照URL–>～のみを「headに要素を追加」に貼り付ける

<!–「Font Awesome」参照URL–>～の部分はカットして大丈夫です。

②参照ページ通りに①以外を貼り付けていく

参照：【表示の不具合に対応】はてなブログで記事の最終更新日を自動表示させる方法を紹介しますの！ – 元IT土方の供述

①のheadの設定が終わったら、あとは②の参照ページに載っているタグをそのまま順番に貼っていきます。

③完成

そうすると投稿日、更新日、シェアボタンがすべて表示されている形となります。

上が投稿日・下が更新日です。

スマホのようにアイコンが表示されていません。

今の段階では今回の参考ブログの通りにやってもできませんでした。

もし、スマホでも表示ができそうでしたらまたブログにアップしたいと思います。

シェアボタンが消えてしまう場合はFont Awesome読み取り用のタグ消してみるのもひとつの方法です。

それ以外は参考ページ通りでOK！

タグはひとつ違っただけでも、表示されたりされなかったりと本当に難しいですよね。

今回は無事に完成させることができたのでほっとしています。

場合によっては、これでもうまく表示されないということもあるかもしれませんが、もし同じような状況の方がいたら試してみてくださいね。