浦和の小さなweb屋さん

Jimdoブログ機能をスタイルアップする

2017年3月30日にJimdoのブログ機能がリニューアルしました。
その際、

  • ブログ記事の公開・非公開の切り替え
  • タイトルの変更
  • 投稿日の変更

などが可能になりましたが、その際表示/非表示で設定可能な「ブログページ」と呼ばれるブログ一覧ページが、かなりシンプルな作りになってしまっており、aタグはテキストリンクになります。
TOPページにブログを配置する機能はなくなってしまったため、自サイトのブログもRSS表示で表示することが必要になってしまいましたが、その際UIが異なってしまいます。

RSSフィードで自サイトのブログを読み込んだ場合の表示

 

「ブログ」機能の「ブログページ」での表示

やりたいこと

トップページに配置したRSSによるブログ表示で、タイトルをテキストリンクにしたい。

「ブログページ」の「続きを読む」をボタンリンクにしたい

rssFeedで読み込んだブログのタイトルを消す

自サイトのブログも、TOPページにコンポーネントとして配置できれば良いのですが、2018年1月現在、それはできず、新着のお知らせを数件トップページに配置したい!となっても、
rssFeedとして自サイトのブログを読み込むしかありません。

その際に気になるのが、自サイトのRSSのタイトルが出てしまう箇所です。それを非表示にします。

/* blog style */
.rssFeed h3 {display:none;}

ちなみにJimdoのブログのRSSのURLは?
https://example.jimdo.com/rss/blog/
になります。


日付フォーマットを整形する

rssFeedで取得した記事の日付フォーマットは、
(金, 09 3月 2018) という形のフォーマットで出力されてきます・・・

しかも日付に対するマークアップはされておらず、<p>タグの中にぽろっと入っているイメージです。なかなかざっくりです!!

ですので、そのフォーマットをそのまま取得して.replaceで置き換えてしまいましょう。

// rssFeed date format
$(function(){    
    $('div.rssFeed').each(function(){
        var txt = $(this).html();
        $(this).html(
          txt.replace(/\(([日月火水木金土]).*?0*(\d+).*?(\d+).*?(\d+)\)/g, '$4年 $3月 $2日 \($1\)')
        );
    });

});

「ブログページ」のテキストリンク「続きを読む」をスタイルアップする

ブログページの「続きを読む」のテキストリンクを、ページ全体のUIと合わせて、ボタンにします。

※jQueryが必要です。

$(function(){
   //「続きを読む」のスタイルアップ
  $("a:contains('続きを読む')").addClass('j-calltoaction-link j-calltoaction-link-style-1').wrap('<div class="j-callToAction" />');
});

ここでは、「ボタン1」のスタイルを動的に充てています。なので、ボタン2のスタイルにしたい時は j-calltoaction-link-style-2、という風に変えてください。

その他の方法(ブログページのhtmlをそのまま取得し挿入する)

なるほど!と思ったのが以下の方法です。
ほしいページのhtmlをそのまま取得し、<div id=”blog”></div>内に挿入してしまうというもの。

cssでスタイリング自由なので、jQueryをすでに入れている場合にはよいかもしれません。ほんとは表示件数指定したいですけどね!

Jimdoのブログ表示がページ内に「10件」という仕様なので
(2019年1月現在)
10件表示されるということになります。

$(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();
        }
    });
});

参考サイト:
Jimdoのブログ表示に変わるものを実装してみた
フォルトゥナ東大阪市のホームページ制作・運用
https://www.color-fortuna.com/blog/web_development/show-jimdo-blog.html

共有
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Posts published: 48
Copyrights © idew. All Rights Reserved.