今回は、JIMDOクリエイターで作成したサイトのブログフィードの日付表示バグを修正する方法を解説します。
ブログフィードを設定してみたけれど、
日付の表示が不揃いでカッコ悪いので直したい！
また、
- URLの入ったタイトルを消したい！
- 投稿日をタイトル記事の後に横並びに表示したい！
- ボタンの位置を変えたい！
細かい部分だけど、こんな気になる箇所を改善したいという方もいると思います。
誰でも簡単に解決できるよう記事後半にコピペできるコードを掲載してますので、ブログフィードを導入している方は是非活用してみて下さい。
日付表示バグの原因は？
私が最初に気がついたのは、クライアントさんからの要望でフィードを導入した時でした。
最初は、記事の設定を間違えたのかな？と、自分がミスで不具合が起きている可能性を考えたのですが、どこを確認しても設定ミスは見当たらず・・・
検証用のサイトで記事の設定を色々試した結果、元々の仕様がバグっていると判明しました。
しかし、ユーザーが見れる範囲のソースコード上では明確な不具合の原因がわからず、JIMDOも特に原因などを公表しているわけではないので迷宮入りとなっている状態でした。
JIMDO公式は修正しないの？
疑問に思って一応問い合わせしたのですが、現状修正の予定はないそうです。
私の知る限りではかれこれ3年以上放置されているバグなので、公式の修正を待つよりは自分で直してしまったほうが早いだろうという結論に至りました。
事前準備
この記事はブログフィードを既にサイトへ設定している方向けの内容です。
ブログフィードの導入がまだの場合は、こちらの記事で詳細を解説してますので、確認しながら導入して見て下さい。
修正はJIMDOの管理画面から行いますので、まずはJIMDOアカウントにログインしてダッシュボードからサイト編集画面を開いておきましょう。
この記事でできること
今回はJIMDOのブログフィードの日付表記バグの修正と、ついでに以下の表示周りのレイアウト調整も合わせて解説します。
- フィードの1件目と2件目以降の日付表示が統一されないバグを修正し日本式表記に統一する。
- おまけ①：フィードタイトルを非表示にする
- おまけ②：記事タイトルと投稿日を横並びで表示する
- おまけ③：続きを読むボタンの位置を右寄せに調整する
実際の画面だとこんな感じに修正されます。
修正方法の仕組み
今回は、ヘッダー編集機能と、Jquery、Javascriptを使用して修正を行います。
このバグ修正の仕組みとしては、サイト読み込み時にブログフィードの読み込みが先に行われた後、先ほどコピペしたコードが読み込まれ表示バグを修正するという2回の読み込みを行います。
そのため、サイト読み込み時に一瞬だけ表記バグが映りますが、読み込みが完了すれば日本式の日付表示になります。
また、設定完了後の管理画面ではコードの実行がされないため時があるので、その場合はF5キー等で画面を更新すると表示が修正されます。
日付表記だけを修正したい方はSTEP3まで、おまけの部分も合わせて修正したい方はSTEP5までを順に進めれば大丈夫です。
STEP１：ヘッダー編集を開く
管理メニューから「基本設定」→「ヘッダー編集」→「ホームページ全体」を開きます。
ヘッダー編集を開いたら、上記のコードを全てコピーして、ヘッダー編集の中に貼り付けましょう。
STEP２：jQueryとJavaScriptコードをコピペする
See the Pen Jimdo Creator fix blog feed date format by Sachi Fukuzawa (@Sachi-Fukuzawa) on CodePen.
※既にヘッダー編集に何かしらのコードを記載している場合は、貼り付ける位置が重要になります。
| コードの貼り付け位置 | |
| CSSを使用している場合 | CSSコードより上にコピペ |
| Googleタグを設置している場合 | Googleタグの下にコピペ |
| 他のJavascriptを使用している場合 | 他のJavascriptより上にコピペ ※既存コードの性質により順番を変える必要があります。 |
| 他のVersionのJqueryを使用している場合 | Jqueryコードの上 ※互換性の問題によって動作しない場合があるため必ずバックアップを取得してから試して下さい。 |
コードを貼り付けたら、画面右下の「保存」ボタンを押して設定完了となります。
設定後、実際のサイトを開いて確認しましょう。
STEP３：ブログフィードのレイアウトを修正する
ブログフィードの日付表示のバグが修正できたら、ついでにフィードのレイアウトやモヤモヤする邪魔な要素も合わせて修正してしまいましょう。
今回は以下の3つを修正します。
おまけ②と③については、必要ないという方もいると思いますので、その場合はおまけ①のコードだけ貼り付ければ大丈夫です。
おまけ①：フィードタイトルを非表示にする
ブログフィードを追加すると「{サイトURL} BLOG FEED」というURLが表示されますよね。
正直いって、このタイトルをもっと分かりやすいものに変えるか、消してしまいたいというのが本音だと思います。
そこで今回はCSSを使用してこの見出しを非表示にする方法を紹介します。
「CSSって何？」「プログラミングよくわからないよ」って思った方、安心して下さい。
こちらもコピペするだけなので先程より簡単です。
まずは先程使った「ヘッダー編集」を開きましょう。
ヘッダー編集を開いたら以下のコードをコピペします。
※CSSを既に使用している方は、スタイル指定のタグ内にCSSコード部分だけ貼り付ければ大丈夫です。
See the Pen
Jimdo Creator Blog Feed disable h3 title by Sachi Fukuzawa (@Sachi-Fukuzawa)
on CodePen.
コードを追加したら「保存」して設定完了となります。
おまけ②：記事タイトルと投稿日を横並びで表示する
ブログフィードを表示する位置によっては、無駄な余白が沢山できてしまい、少し見栄えが悪く感じてしまいますよね。
その原因は、ブログフィードのコンテンツが要素ごとに改行されてしまい縦並びに表示されるしくみと、記事タイトルの長さが関係しています。
記事タイトルが長い場合は余白も最小限になりそこまで気にならないことが多いですが、短いときは結構余白が目立ってしまいます。
特に短いタイトルの記事が連続で表示されると、投稿日と続きを読むボタンの改行が合わさって余計に余白が目立ってしまいます。
そこで、今回は投稿日を改行させず、記事タイトルの後ろに表示するように調整する方法を紹介します。
こちらもCSSを使用しますが、おまけ①同様コードをコピペするだけなのでとても簡単ですので、早速調整していきましょう。
ヘッダー編集を開いたら以下のコードをコピペします。
コードを追加したら「保存」して設定完了となります。
See the Pen
Jimdo Creator Blog Feed inline title & date by Sachi Fukuzawa (@Sachi-Fukuzawa)
on CodePen.
おまけ③：続きを読むボタンの位置を左寄せに調整する
おまけ②でも書きましたが、続きを読むボタンの位置も、ブログフィードのレイアウト構成の一部となっています。
とはいえ、背景色の付いているボタンを同様に横並びにしてしまうと、レイアウトがガタガタしてしまい返って見栄えが悪くなってしまい兼ねません。
そこで、続きを読むボタンの配置を、コンテンツの左寄せから右寄せに位置調整します。
ヘッダー編集を開いたら以下のコードをコピペします。
コードを追加したら「保存」して設定完了となります。
See the Pen
Jimdo Creator Blog Feed btn floating by Sachi Fukuzawa (@Sachi-Fukuzawa)
on CodePen.
おまけ要素の一括設定
お料理番組の「既に出来上がった料理はこちら」ではないですが、おまけ①～③のコードをまとめたコードも貼っておきますので、合わせて設定したい方は以下のコードをコピペして下さい。
See the Pen
Jimdo Creator Blog Feed disable h3 title by Sachi Fukuzawa (@Sachi-Fukuzawa)
on CodePen.
まとめとビフォー・アフター
ここまでの設定を一通り行った実際のJIMDOクリエイターサイトのサンプルを2つ用意しました。
それぞれ並べて表示がどうなっているか確認してみて下さい。
おわりに
今回はJIMDOクリエイターサイトで作成したブログフィードの日付表示バグとレイアウト調整の方法をまとめて解説しました。
バグをきっかけに投稿日表記を諦めていた方でもこの方法なら表示の問題を解決できると思いますので、是非参考にして見て下さい。
修正のご相談
自分でやってみたけど上手く修正できなかった、PCやプログラミングはアレルギーが・・・って方は、姉妹サービス「WEB SACHI LABO」で修正代行を受付しております。
ココナラ（Coconala）経由でご依頼頂けますので希望される方はこちらから気軽にご相談下さい！