大阪のホームページ制作事務所 フォルトゥナのブログ

Jimdoのブログ表示に変わるものを実装してみた

Jimdoには以前「ブログ表示」という機能があって、ブログの記事を一覧で貼り付ける機能があったのですが、2017年10月5日に機能提供が終了してしまいました。

以前から使っている人はまだ使えると思いますが、それ以降に新たにJimdoでサイトを作った人には使えません。代わりに「RSSフィード」を使えということだと思うのですが、いまいち上手くできなかったので、代わりにjQueryを使って、トップページにブログ記事を表示させてみました。

既に新しいブログページを使っていることが前提になります。

1. ブログを表示させたい部分にdiv要素を追加

ブログ記事を表示したい部分に「コンテンツを追加」から「ウィジェット / HTML」にこの1行だけを追加します。

<div id="blog"></div>

ブログ記事を表示させたい部分に「ウィジェット / HTML」で<div id="blog"></div>を挿入

大きなボックスに1行だけ記述

2. コードをヘッダー部分に追加

JavaScriptのコードをヘッダー部分に貼り付けます。

サイドメニューの「基本設定」→「ヘッダー編集」と進んでいくと、入力欄が出てくるので、以下のコードを貼り付けてください。

【ブログページのURL】の部分を自分のブログページのURLに変えるのを忘れないでくださいね。

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<script type="text/javascript">
//<![CDATA[
$(function() {
    $.ajax({
        url: '【ブログページのURL】',
        cache: false,
        success: function(html){
        $(html).find('#content_area').each(function(){
            $('#blog').html($(this).html());
            return false;
        });
        $('.j-blogarticle > div:gt(2)').remove();
        }
    });
});
//]]>
</script>

トップページだけに表示するのであれば、「各ページ」のタブを選んで、「ホーム」のところにだけ貼り付ければオッケーです。


ヘッダー編集の入力欄にコードを貼り付ける

トップページだけに表示させたいなら、「ホーム」を指定して貼り付け

以上で完了です。

編集中は表示されませんが、正規のURLで見るとブログが表示されているはずです。 後は見た目の問題ですので、CSSを追記してください。

ブログページのHTMLをそのまま引っこ抜いてくるだけですので、デザインの調整はしやすいと思いますが、このためにわざわざjQueryを読み込まないといけないのかーとかいろいろと考えたりします。

Jimdoということを考えると、あまりやりたくないタイプのカスタマイズですが、多分必要な人も多いのではないかと思うので、一応ご紹介しておきます。


著者・坂本邦夫のプロフィール

大阪府東大阪市のウェブ制作事務所フォルトゥナの代表をしています。ウェブ配色やa-blog cms、ユーザビリティや小規模店舗のウェブ活用を得意としています。

最近の記事

カテゴリー一覧