バージョン2.1.0公開

機能追加

AMP

AMP対応しました。
AMPページ用のタイトルロゴ画像を設定されたい方は、600*60px までの画像サイズでお送りください。
高さは60px が最適です。横幅は600px まででしたら特に問題ありません。

サイトアイコン

サイトアイコンは以下のような場所に表示されます。
・1FrameWorks管理画面やウェブサイトのファビコン
・スマホやタブレットなどでホームにショートカットを置いた場合
・Windowsのタイル
・リンクカードのアイコン
など。

512*512px のPNG形式で画像をお送りいただければ設定いたします。透過処理しておくとキレイになります。

cat-posts-foot

前回のバージョンアップにより、カテゴリー編集画面の「cat-posts-foot」フィールドを入力することで
カテゴリーページ（entrytextレイアウトのみ）の各々「投稿」の下部ごとに一括表示できるようになりました。

追加として今回のバージョンアップにて「cat-posts-foot」が単体の投稿ページ下部にも表示されるようになりました。
カテゴリーごとに、「カテゴリーページの投稿ごとの下部」「投稿ページ下部」に一括で何かを入れたい場合にはこの機能をお使いください。

リンクチェッカー導入

内部リンク・外部リンクで404エラー（ページが見つからない）となる場合に通知されるようにしました。

アコーディオンレイアウト

下記のようなアコーディオンレイアウトを追加しました。

以下コード例：

ここをクリックしてオープン・クローズド


リスト
リスト
リスト

上記例ではオープン時の内部はリストになっていますが
特に規定はありませんので「画像」でも「ボックス」でも「表」でも何でも入れることが可能です。

次の例は、複数のアコーディオンを並べる場合です。

このように複数並べてメニューリストのようなものを作る事も出来ます。

以下コード例：

ここをクリックしてオープン・クローズド


リスト
リスト
リスト





ここをクリックしてオープン・クローズド


リスト
リスト
リスト





ここをクリックしてオープン・クローズド


リスト
リスト
リスト

スマホでは画面が小さいので項目などをクローズドにしておくことはユーザーのメリットが大きいと思いますが
いくつかのリスクがありますので以下のような仕様になっています。

基本的な仕様として
・PCの場合は最初からオープン
・スマホの場合は最初からクローズド
となります。

これはGoogle推奨の方法です。
初期からコンテンツクローズドすることはSEO上もGoogleの方針としてもよくありません。
最悪の場合、「隠しコンテンツ（テキスト）spam」としてペナルティーを受けることがあります。

しかし、PCレイアウトでのみ初期オープンにしておくことで
Googleクローラーが正しくコンテンツを読み込み spam になる可能性を最大限回避しています。

PCでも初期クローズドにしたい場合は「pc-close」という命令を使うことが出来ます。

下記のように「pc-close」を追加すれば、そのアコーディオンレイアウトはPCでもスマホでも初期クローズドになります。

例：

複数アコーディオンを並べる場合は、以下のように一括指定も可能です。

例：

是非ご活用ください。

機能の微調整

目次

目次（Contents）のレイアウトを調整しました。
数字のみ黒字にし、行間をとることで読みやすくなりました。

ボタン

ボタンレイアウトにてクリックできない箇所がある問題を修正しました。
ボタン部分のどこでもクリック（またはタップ）でリンク先にジャンプするようになりました。

スマホレイアウト見出し

スマホレイアウト時の h2, h3, h4 の余白などを調整し読みやすくしました。

Facebookシェア / Twitter　ボタン

Facebookシェア / Twitter　ボタンをクリックまたはタップしやすいよう
クリック位置のレイアウト微調整を行ないました。

改行

以前の仕様では、入力した改行がスマホレイアウト時に無視されるようにしていました。
そこで、下記のコードを入れることでスマホ時でも改行が出来るようになっていました。
＜br class=”spbr” /＞

しかし、使いづらいところもあり、入力が面倒で忘れることもありましたから
今回、以下のように改行の仕様変更を行ないました。

「スマホレイアウト時に改行を無視したい箇所がある場合にだけコードを入れる」

（詳細）
PC・スマホレイアウト共に自動改行を「改行」として認識します。
スマホ時のみ自動改行をOFFにしたい場合にだけ、spbr-off というクラスで命令します。
例えば

文章
続きの文章

とすることで、
PCでは、見た目通りの自動改行が入り
スマホでは、改行が無視されて「文章 続きの文章」となります。

大きな箇所に指定したいときは大枠を

コンテンツ

と囲ってやることでその範囲が全てスマホ時に自動改行OFFとなります。

今まで spbr を使っていた箇所は特に修正しなくても影響が出ないようにしています。
もし意図した通りのレイアウトにならない、改行位置がおかしくなった、などの場合は個別にご連絡いただけると助かります。

なお、以前よりスマホ時に自動改行を無視した際に半角スペースが入ることがありますが
HTML構文の仕様上削除することが難しいためそのままにしてあります。
特殊な書き方をすることで回避も可能ですがHTML構文としての「正確な文法」を重視したいと考えております。

不具合の修正

table レイアウトで一部レイアウト崩れがありましたので修正しました。