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

はてなブログMinimalismで更新日を入れた際シェアボタンが消えてしまうときの対処法ブログ
この記事は約4分で読めます。

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

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

しかし…

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

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

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

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

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

左:投稿日 右:更新日

更新日表示 

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

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

シェアボタンが消えてしまう謎

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

更新日写真

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

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

参考:シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 – ひつじの雑記帳

カスタマイズする上で修正した点

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

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

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

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

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

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

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

Font Awesome:https://fontawesome.com/?from=io

②好きな色にカラー変更 

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

カスタマイズ方法

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

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

参照:「はてなブログ」でリライトした記事の『更新日時』を自動表示させました。【はてなブログ】 – CAITO GAME INCEPTION WORK

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

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

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

③完成

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

更新日入りカスタマイズ

ちなみに…

更新日モバイル

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

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

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

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

まとめ

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

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

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

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

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

コメント

タイトルとURLをコピーしました