大変だこれ
機能の概要
BASEは初期状態ではブログの機能がない。
拡張機能に「Blog」があるので、それを使うことになる。
新着情報を作りたい場合はこれを使うことになる。Blogが設置できるのは1個だけなので、新着情報に代用するとBlogは諦めようねってことになる。
記事作成について
タイトルと本文の記入だけ、シンプルな内容。
機能やら装飾は7種類で、htmlタグを入力すると文字列として出力される。
詳細は紹介ページを見るのが手っ取り早い。要するにできることは限られてる。
記事のタイトルは<h2>、本文中の見出しタグは<h3>になってる。
仕様自体は結構怪しくて、Wordみたいに、EnterとCtrl+Enterで段落変更と改行の使い分けがある。先頭段落から段落変更すると、以降は<p>じゃなくて何故か<div>になる。
Youtubeを埋め込むと<div>の中にiframeが挿入される。
リッチテキストをコピペすると装飾をそのまま引っ張れてしまう。
できることは少ないはずなのに、できることが多い。謎仕様がすごい。
タグの解説
ベースのソースコードを見たら済むんだけどね。
条件分岐
//プラグインをインストールしてたら表示
{block:AppsBlog}
{/block:AppsBlog}
//Blogページだったら表示（一覧・詳細共通）
{block:BlogPage}
{/block:BlogPage}Feed
<link href="{BlogFeedPageURL}" rel="alternate" type="application/rss+xml" title="Blog | {ShopName}">
https://【ドメイン】/blog/feed記事一覧URL
<a class="mainHeaderNavColor" href="{BlogPageURL}">BLOG</a>Blogコンテンツ
{block:BlogPage}
{BlogContentsTag}
{/block:BlogPage}{BlogContentsTag}で記事一覧と記事詳細の両方を出力する。
出力形式
記事一覧も記事詳細も地味に構造化タグが入ってる。
<link rel="stylesheet" type="text/css" href="https://cf-baseassets.thebase.in/2812c2e40699188736ee6f2ab66239f9/asset/shop/blog/blog_list-4a3d4e47e1a3da526086.css">
<div class="main">
<div id="about" itemscope="" itemtype="http://schema.org/Article" class="blogListMain">
︙
<div class="blog_inner">
<div class="blog_title">
<h2 itemprop="name"><a href="【記事URL】">【タイトル】</a></h2>
</div>
<div class="blog_publish">
<p class="publish_date" itemprop="dateModified" content="2022/11/28 11:42">2022/11/28 11:42</p>
</div>
<div class="blog_head_image hide">
<a href="【記事URL】"><img src="【画像１枚目】" alt="【タイトル】"></a>
</div>
<div class="blog_contents">
<div class="blog_body" itemprop="description">
<p class="text">【抜粋 ※120文字】</p>
</div>
<div class="read_more">
<a href="【記事URL】">続きを読む</a>
</div>
</div>
</div>
︙
<div class="paginate-wrp clearfix">
<ul class="paginate">
<li class="current"><a>1</a></li>
<li><a href="/blog?page=2">2</a></li>
<li class="next"><a href="/blog?page=2" rel="next">次 >></a></li>
</ul>
</div>
</div>
</div>記事内のタイトルに同ページのリンクを付ける意味ってあるんですか。
サムネイルは記事内の最初の画像が自動配置される。画像がない場合は「https://thebase.in/i/testpro1.png」が挿入される。有無により親要素に.hideの切り替えがある（デフォだとcssで非表示）。
本文に画像なし
<div class="blog_head_image hide">
<a href="https://thebase.in/i/testpro1.png】"><img src="【画像１枚目】" alt="【タイトル】"></a>
</div>
本文に画像あり
<div class="blog_head_image">
<a href="【記事URL】"><img src="【画像１枚目】" alt="【タイトル】"></a>
</div>1ページにつき15件表示、16件以降でページネーションが表示される。ページネーションがない場合は以下の形。
<div class="paginate-wrp clearfix">
<ul class="paginate">
</ul>
</div>記事詳細は<body>内にcssも読ませる形になる。
<link rel="stylesheet" type="text/css" href="https://cf-baseassets.thebase.in/2812c2e40699188736ee6f2ab66239f9/asset/shop/blog/blog_detail-a6feb25a196b70912943.css"><script type="text/javascript" src="https://cf-baseassets.thebase.in/2812c2e40699188736ee6f2ab66239f9/asset/shop/blog/link-tracking-bd141defc4b67be13c1f.js"></script>
<div class="main">
<div id="about" class="blogDetail">
<div class="blog_inner">
<div class="blog_contents">
<div class="blog_title">
<h2 itemprop="name"><a href="【ブログ記事URL】">【タイトル】</a></h2>
</div>
<div class="blog_publish">
<p class="publish_date" itemprop="dateModified" content="2022/10/11 10:41">2022/10/11 10:41</p>
</div>
<div class="blog_body" itemprop="description">
※中身
</div>
<div class="social">
<ul class="clearfix">
<li>
<a href="***" rel="nofollow" target="_blank">
<img src="/img/shop/fbicon.png" height="30" width="30">
</a>
</li>
<li class="tw">
<a href="***" target="_blank" data-lang="ja"><img src="/img/shop/twicon.png" height="30" width="30"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>cssファイルは必ず読み込まれるので、デザインを変えたければ親要素を追加して指定するとか、!importantを使うとかして上書きする。
固定表示
{block:AppsBlogArticleIsPinned}
<div class="pinnedBlog">
<p class="pinnedBlog_title mainHeaderNavColor">
<a href="{AppsBlogArticlePageURL}">{AppsBlogArticleTitle}</a>
</p>
</div>
{/block:AppsBlogArticleIsPinned}<div class="pinnedBlog">
<p class="pinnedBlog_title mainHeaderNavColor">
<a href="【ブログ記事URL】">【タイトル】</a>
</p>
</div>固定した記事を表示する。blockが条件分岐になってるので、固定記事がなければ諸々は表示されない。
注意点
プラグイン形式のコンテンツなので、使う前提でも万が一削除したときのことを考えて、表示・非表示が切り替わるように条件分岐のブロックでメニューとかを囲う。
本来のBLOG用途でない場合、つまり新着情報にとかに代用する場合、<title>は「BLOG」になってるのでjsで置換する。でもurlにはblogって書いてあるままなので微妙。
一覧、詳細共に#aboutが含まれるので自作テーマを作る場合は注意。
本文中の一番最初にある画像がサムネイルになる。画像の配置場所は関係なく、「記事内で一番最初にある画像」が引っ張られるのでそれを前提にした文面を構成する必要がある。
サムネイルは元画像がそのまま書き出されるので縦横比の統一をしたいとか幅を統一したいとか、そうなると画像に注意するとか、cssでトリミングして調整するとかで対応。ガタガタになるとダサい。あと、画像データがでかいとしんどい。BASE側でサムネ用のリサイズ画像を出力してくれないので、一覧だと15枚分を読み込むので処理が重くなる。非表示にしたところで読み込みは必ず発生するから注意。
vimeoは公式からレスポンシブコードを引っ張れるんだけど、BASEは仕様上、貼った動画urlから自動挿入する仕組みしか使えないのでレスポンシブが活かせない。自分でそういう組み方をしなきゃいけない。
おまけ：埋め込み動画のレスポンシブ化
レスポンシブ化自体はもう珍しくないことなので解説と方法。以下の2つをやるだけ。
- jsでiframeの親にclassをつける
- cssでレスポンシブにする
複数貼ったときを見越して.each()を使ってこんなかんじにして
if($('.blogDetail iframe.embed').length){
$('iframe.embed').each(function(){
$(this).parent('div').addClass('embed_wrap');
})
}16:9前提だとこうする。
.blogDetail .embed_wrap{
width: 100%;
height: 0;
padding-top: 56.25%;
position: relative;
}
.blogDetail .embed_wrap iframe.embed{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}.embedで拾ってるからyoutubeだろうがvimeoだろうが関係なくやれる。
問題があるとすると16:9じゃない動画を貼った場合に画面いっぱいじゃなくなったりする。
コメント