アップデート情報

1FrameWorksシステムのPHPバージョンを最新版にしました。

ウェブサイトによっては処理速度が2倍ほどになり、ページ表示や管理画面内の表示・実行速度も速くなったと思います。

動作については十分検証しておりますが、万が一不具合などございましたら運営までご連絡ください。
よろしくお願いします。

機能追加

listショートコード追加

【カテゴリー（記事数）】スラッグ順■

• コラム(2)
• お知らせ(1)
• アップデート情報(29)
• お客様の声(3)

【カテゴリー（記事数）】id順■

• アップデート情報(29)
• お客様の声(3)
• お知らせ(1)
• コラム(2)

【カテゴリー（記事数）】name順■

• お客様の声(3)
• お知らせ(1)
• アップデート情報(29)
• コラム(2)

【カテゴリー（記事数）】description順■

• アップデート情報(29)
• コラム(2)
• お客様の声(3)
• お知らせ(1)

【アーカイブ（記事数）】■

ページ内リンクの指定を簡略化

設定しやすくし、ページ内リンクのスクロールを入れました。
使い方は、aタグの属性に href=”#faq1” のようにページ内リンクを貼るだけ。
対応した id=”faq1” に移動します。

余白調整機能の追加

mt12 などと今まで余白設定していましたが
pt12 などの内部余白（padding）による余白設定を大幅に増やしました。

スマホ・PCでの配置設定

段落Pにおいて、
PCのときだけ右寄 、PCのときだけ左寄、PCのときだけセンター、と出来るようになりました。
それぞれ、txt-r-pc、txt-l-pc、center-pc と記述します。

機能の微調整

固定ページの基本フォントサイズを16px としました。

masonry の内部コードを最適化しました。よりキビキビ動くようになりました。

ytplayerの走査線のような画像を白系に変更しました。

.boxp レイアウトを大幅に追加しました。10～90％まで5％区切りで指定できます。
.boxp50spv のような短縮版も追加しました。（例）PCだと50％表示。スマホだと縦並びになります。

プラグイン関係を整理しました。

ナビゲーションの横幅指定の範囲を広げました。
今までnavi25 までだが
navi26以降、navi30 まで作成済。

検索結果ページに noindex の処理を入れました。

サイドバーなどで使うリストマークに cat05 アイコンを追加しました。

SIDE3 での新着リストの余白調整を行ないました。

toc（目次）の余白を少し広げました。

ビジュアルエディタ機能を使えるようにしました。

h3の余白を調整しました。

不具合の修正

CSSファイルがメディアにアップロードできなくなった問題を対応しました。

フォーム内でボタンを画像にした場合の縦横比率が崩れる問題を修正しました。
同様に、「どこでもカラーミー」などでカートタグを貼り付けた場合に起こっていたボタン画像の崩れも解消しました。
また、ラジオボタンとチェックボックスのサイズも調整済です。

機能追加

背景動画を使う場合の背景画像（img）の入れ方を解説しています。
スマホ・タブレットでは動画再生されませんから、背景画像を入れておくことをオススメします。

実例、使い方は下記をご覧下さい。

ytplayerの使い方。背景にて動画（YouTube）を再生

ytplayerをメインバナーに配置してみた

Lazy Load

Lazy Load に対応しました。

画像を遅れて読み込むことで、ページ表示の体感速度を大幅に向上できます。
使い方、使用上の注意など下記にまとめています。

Lazy Load の使い方

ボタンレイアウト追加

btn-size90, btn-size100 を追加しました。
余白も調整済です。

ボタン作成の流れ

機能の微調整

LOGO横のオブジェクトを縦センターできるようにしました。

下記のように、ロゴ画像に class=”img-m” をつけ、横にテキストまたは画像を配置してください。

 ロゴの右に置いたオブジェクトを縦中央寄せに

機能追加

背景にYouTubeを流せるようになりました。
メインバナーの背景で動画を自動再生したり、特定のボックスの背景で再生したりと。
もちろん、重ねてテキストが画像やスライドバナーも配置できます。

ドロップメニュー追加。
カーソルオンで下にスラスラとメニューを開くことができます。

機能の微調整

TOPの横幅を 972px にしました。
ロゴ画像を配置したときの左の余白がなくなりました。

JPG画像の圧縮率を上げました。
JPG画像をメディアアップロードした際に、今までかなり小さく変換していましたが、圧縮率を上げることである程度のクオリティを確保しました。アップロードした写真もほとんど劣化しないようになります。

サポート

背景でYouTube再生設定方法

ytplayerの使い方。背景にて動画（YouTube）を再生

ytplayerをメインバナーに配置するテスト

ドロップメニューの使い方

ドロップメニュー（dropmenu）

機能の微調整

リスト関係のの余白を再調整しました。
調整箇所は以下の通りです。
・パンくずリスト
・コメント欄
・listdate
・listrank2

ボタン小の余白を調整しました。
サポートサイト内にボタン例とコード例を掲載しました。

機能の微調整

円型ボタンの余白を調整しました。

リストの余白を調整しました。

サポート

動画マニュアルを公開しています。

簡単な説明用の動画は一般公開されています。

サポートサイトにて
「アイコン」「ボタン」「写真エフェクト」「文字の装飾」など、
多くのページを公開しています。

機能追加

写真エフェクトを追加しました。
スマホレイアウト時に中央を起点に大きく表示させることが出来ます。

例）

.pht-sptrim240、.pht-sptrim360、.pht-sptrim480、.pht-sptrim600
がそれぞれ使えます。
使い方は img タグを div で囲んで上記classを適用させるだけ。
末尾の３桁の数字は、ボックスの高さになります。スマホで大きく表示させる際には pht-sptrim480 などを使うと良いと思います。

機能の微調整

FNAVI内でもショートコードが使えるようにしました。

FNAVI内でリンクリストアイコンを簡単挿入できるようにしました。

1カラムページの段落（Pタグ、文章）の余白を調整しました。

引用（blockquote）のレイアウトを調整しました。
同様にコメント欄のレイアウトも調整しました。

不具合の修正

地図（GoogleMap）の表示の不具合が出ていたものが修正されました。

機能追加

検索結果画面

検索結果画面を新しく使いやすくしました。

小さなボタン

btnレイアウトの、小さいボタン用レイアウトを追加しました。
以下のクラスを追加することで、ボタン内部の文言の余白が小さくなり小さなボタンでも使えます。
.btn-small

余白調整class追加

以下の余白調整用クラスを追加しました。
.mt06, .mb06

機能の微調整

スライドバナーのレイアウト・余白など再調整しました。
メインバナーの場合は、ページャーがバナー内部の下部に表示されるようになります。

1カラムページ（LP）の余白調整を行ないました。
また、タグボタンの動作で挿入されるコードもよりシンプルにしています。

他に、タグボタン挿入コードを最適化しました。

機能追加

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 レイアウトで一部レイアウト崩れがありましたので修正しました。