freoの管理用テンプレートをBootstrap3でカスタマイズ

日	月	火	水	木	金	土
-	-	-	-	1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	-

エントリー

freoの管理用テンプレートをBootstrap3でカスタマイズ

2017/05/23 12:13更新
カテゴリー：管理画面, カスタムテンプレート
タグ：freoテンプレート, freo配布物

これまでいくつかfreoの管理画面のカスタマイズを紹介してきましたが、それを実装した管理画面のテンプレートを配布しようと以前から思っていましたが、どうせなら Bootstrap3 を使って更にカスタマイズしてみました。

表示のサンプルはこちら

※サンプルは以下のファイルのみです。

default.html（ステータス）
config.html（設定管理）
basis.html（設定管理 ⇒ 本体の設定 ⇒ 基本設定）
entry.html（エントリー管理）
entry_form.html（エントリー登録）
iframe_media.html（インラインフレームでのメディア管理）
iframe_media_form.html（インラインフレームでのメディア登録）
category.html（カテゴリー管理）

ダウンロード

管理者用テンプレート

【2017/5/22更新⇒5/23再更新】

・ユーザー登録/編集画面が正しく表示できないバグを修正
・Bootstrap関連のファイルを3.3.4⇒3.3.7にバージョンアップ
・Google Feed APIが使用中止になったので、freoの更新ニュース取得をYQL API に変更【5/23追加】

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

css/bootstrap.min.css
fonts/（丸ごとすべて）
js/admin.js
js/bootstrap.min.js
js/gAjax.js【5/23追加】
templates/internals/admin/header.html【5/23追加】
templates/internals/admin/user.html
templates/internals/admin/user_form.html

※js/admin.js の修正は、

//タブへのリンク
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
} 
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash;
})

を削除したのみです（削除しなくても特に動作に問題はありません）。

※templates/internals/admin/header.html の修正は、<head>～</head>内にある

<script src="https://www.google.com/jsapi"></script>

を削除したのみです（削除しなくても特に動作に問題はありません）。

【2016/1/24更新】

・ページの編集でフィルターの表示が出ないバグを修正（admin/page_form.htmlの392行目にあるを378行目の</div>の後に移動）

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

templates/internals/admin/page_form.html

【2015/3/21更新】

・プロフィール確認ボタンの修正
・freo公式の更新ニュースの分表示を0詰めに修正（参考）
・Bootstrap関連のファイルを3.3.2 ⇒ 3.3.4にバージョンアップ

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

css/bootstrap.min.css
fonts/（丸ごとすべて）
js/bootstrap.min.js
js/gAjax.js
templates/internals/admin/profile_form.html

【2015/2/26更新】

・タグクラウドを使わない状態でadmin.jsが機能しなかったのを修正
・ステータス画面に「エントリーを登録する」ボタンを設置
・Bootstrap関連のファイルを3.3.0 ⇒ 3.3.2にバージョンアップ
・上記バージョンアップに伴い、一部のグリフアイコンを変更
・上記バージョンアップに伴い、パンくずリストの配色を修正

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。
（アイコンがうまく表示されない場合は一旦ブラウザのキャッシュをクリアしてみて下さい）

css/admin.css
css/bootstrap.min.css
css/iframe.css←2015/2/27 21:17修正追加
fonts/（丸ごとすべて）
js/bootstrap.min.js
templates/internals/admin/category.html
templates/internals/admin/default.html
templates/internals/admin/header.html
templates/internals/admin/iframe_media.html
templates/internals/admin/media.html
templates/internals/admin/page.html

【2014/11/3更新】

・Bootstrap関連のファイルを3.2.0 ⇒ 3.3.0にバージョンアップ
・アップロードする画像ファイルを選択した際に画像をプレビュー表示
・「freoのエントリーのタグ投稿を楽にする方法」によりエントリー登録のタグ投稿の際にエントリータグクラウド一覧（ページ登録ではページタグクラウド一覧）を表示
※導入する場合は各自で libs/freo/plugins/config.entry_tagcloud.php のdisplayファイルの読み込み設定に「,admin/entry_form」（libs/freo/plugins/config.page_tagcloud.php の場合は「,admin/page_form」）を追加してください（すでに導入済みの場合はそのままでOK）。

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

css/bootstrap.min.css
fonts/（丸ごとすべて）
js/admin.js
js/bootstrap.min.js
js/iframe.js
js/jquery.iPreview.min.js（追加）
js/jQuery.jTagging.js（追加）
templates/internals/admin/entry_form.html
templates/internals/admin/header.html
templates/internals/admin/iframe_header.html
templates/internals/admin/iframe_media_form.html
templates/internals/admin/media_form.html
templates/internals/admin/page_form.html

【2014/8/31更新】

テンプレートの修正が完了したのでダウンロードを再開しました。
・スマホ画面ではTinyMCEを使わないようBootstrapのクラスで調整していたのをphpでPC以外はTinyMCEを使わないように調整に変更
・一部バグ修正

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

templates/internals/admin/entry_form.html
templates/internals/admin/information_form.html
templates/internals/admin/media_form.html
templates/internals/admin/page_form.html

ファイルの構成（※はBootstrap3.3.0のファイル）
admin_bootstrap
 ┃
 ┣ css ┳ admin.css （カスタマイズ済）
 ┃     ┣ bootstrap.min.css※
 ┃     ┗ iframe.css （カスタマイズ済）
 ┣ fonts※（以下（略））
 ┣ js ┳ admin.js（カスタマイズ済）
 ┃    ┣ bootstrap.min.js※
 ┃    ┣ gAjax.js（freo公式の更新情報表示用、独自にカスタマイズ済）
 ┃    ┣ iframe.js （カスタマイズ済）
 ┃    ┣ jquery.iPreview.min.js （アップロードする画像ファイルのプレビューを表示するため）
 ┃    ┣ jQuery.jTagging.js （タグ投稿を楽にするため）
 ┃    ┗ jquery.metadata.js （jquery.tablesorter.jsをメディア管理以外で使用するため）
 ┣ libs ┳ freo ━ internals ━ admin ━ config.php（設定管理の表示用にカスタマイズ済）
 ┃      ┗ smarty ━ plugins ━ modifier.date_select.php（日時整形プラグイン）
 ┗ templates ┳ internals ━ admin（以下（略））
              ┗ plugins  ┳ export ━ admin.html（エクスポートプラグイン）
                          ┗ import ━ admin.html（インポートプラグイン）

※templates/internals/admin/には entry_category.html、entry_form_category.html、entry_preview.html、entry_preview_category.html、information_preview.html、page_preview.html は含まれていません。
エントリー、インフォメーション、ページのプレビュー表示を、訪問者向けの表示とほぼ同じにしていない場合は freoの公式サイトからダウンロードしてお使いください。

markItUp!用追加ファイル（管理者用テンプレートに上書きしてください）

【2017/5/22更新⇒5/23再更新】

・ユーザー登録/編集画面が正しく表示できないバグを修正
・Google Feed APIが使用中止になったため、その部分の削除【5/23追加】

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

js/admin.js
templates/internals/admin/header.html【5/23追加】

※js/admin.jsの修正は、

//タブへのリンク
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
} 
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash;
})

を削除したのみです（削除しなくても特に動作に問題はありません）。

※templates/internals/admin/header.html の修正は、<head>～</head>内にある

<script src="https://www.google.com/jsapi"></script>

を削除したのみです（削除しなくても特に動作に問題はありません）。

【2015/2/26更新】

・タグクラウドを使わない状態でadmin.jsが機能しなかったのを修正
・Bootstrap関連のファイルを3.3.0 ⇒ 3.3.2にバージョンアップしたのに伴い、一部のグリフアイコンを変更

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

templates/internals/admin/header.html

【2014/11/3更新】

・アップロードする画像ファイルを選択した際にプレビュー画像を表示（参考）
・「freoのエントリーのタグ投稿を楽にする方法」によりエントリー登録のタグ投稿の際にエントリータグクラウド一覧（ページ登録ではページタグクラウド一覧）を表示

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。
※一旦「管理者用テンプレート」をバージョンアップしてから行ってください。

js/admin.js
templates/internals/admin/entry_form.html
templates/internals/admin/header.html
templates/internals/admin/media_form.html
templates/internals/admin/page_form.html

【2014/8/31更新】

テンプレートの修正しました。
・一部バグ修正

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

templates/internals/admin/entry_form.html
templates/internals/admin/page_form.html

ファイルの構成
admin_bootstrap_markitup
 ┃
 ┣ js ┳ admin.js（カスタマイズ済）
 ┃    ┗ iframe.js （カスタマイズ済）
 ┣ markitup ━ skins ━ simple ━ style.css（カスタマイズ済）
 ┗ templates ┳ internals ━ admin ┳ entry_form.html（エントリー登録/編集）
              ┃                    ┣ header.html（ヘッダ）
              ┃                    ┣ information_form.html（インフォメーション管理）
              ┃                    ┣ media_form.html（メディア登録/編集）
              ┃                    ┗ page_form.html（ページ登録/編集）
              ┗ plugins ━ clap ━ admin_thank_form.html（拍手送信プラグインの拍手お礼登録/編集）

TinyMCE4用追加ファイル（管理者用テンプレートに上書きしてください）
※TinyMCE4は添付していませんのでこちらを参考に各自でダウンロードしてください。

【2017/5/22更新⇒5/23再更新】

・ユーザー登録/編集画面が正しく表示できないバグを修正
・Google Feed APIが使用中止になったため、その部分の削除【5/23追加】

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

js/admin.js
templates/internals/admin/header.html【5/23追加】

※js/admin.jsの修正は、

//タブへのリンク
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
} 
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash;
})

を削除したのみです（削除しなくても特に動作に問題はありません）。

※templates/internals/admin/header.html の修正は、<head>～</head>内にある

<script src="https://www.google.com/jsapi"></script>

を削除したのみです（削除しなくても特に動作に問題はありません）。

【2015/2/26更新】

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

templates/internals/admin/header.html

【2014/11/3更新】

js/admin.js
templates/internals/admin/header.html

ファイルの構成
admin_bootstrap_tinymce4
 ┃
 ┣ js ━ admin.js（カスタマイズ済）
 ┗ templates ━ internals ━ admin ━ header.html（ヘッダ）

TinyMCE4（CDN使用）用追加ファイル（管理者用テンプレートに上書きしてください）

【2017/5/22更新⇒5/23再更新】

・ユーザー登録/編集画面が正しく表示できないバグを修正
・Google Feed APIが使用中止になったため、その部分の削除【5/23追加】

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

js/admin.js
templates/internals/admin/header.html【5/23追加】

※js/admin.jsの修正は、

//タブへのリンク
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
} 
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash;
})

を削除したのみです（削除しなくても特に動作に問題はありません）。

※templates/internals/admin/header.html の修正は、<head>～</head>内にある

<script src="https://www.google.com/jsapi"></script>

を削除したのみです（削除しなくても特に動作に問題はありません）。

【2016/1/24更新】

・プラグインの翻訳ファイルを読み込めなかったのを修正
・翻訳ファイルを最新版に更新
・CDNファイルのURL表記のバグを修正

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

js/admin.js
js/tinymce/ja.js
templates/internals/admin/header.html

【2016/1/24更新】

・CDNファイルのURLを変更（これで恐らく常に最新のTinyMCE4が反映される模様）

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

templates/internals/admin/header.html

【2015/2/26更新】

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

templates/internals/admin/header.html

【2014/11/3更新】

js/admin.js
templates/internals/admin/header.html

ファイルの構成
admin_bootstrap_tinymce4cdn
 ┃
 ┣ js ┳ tinymce ━ ja.js（日本語変換ファイル）
 ┃    ┗ admin.js（カスタマイズ済）
 ┗ templates ━ internals ━ admin ━ header.html（ヘッダ）

プラグイン用テンプレート

【2014/8/31更新】

テンプレートの修正しました。
・スマホ画面ではTinyMCEを使わないようBootstrapのクラスで調整していたのをphpでPC以外はTinyMCEを使わないように調整に変更

以前ダウンロードされた方は以下のファイルを最新版付属のものに差し替えてください。

templates/plugins/clap/admin_thank_form.html（拍手送信プラグインの拍手お礼登録/編集）

ファイルの構成
admin_bootstrap_plugin
 ┃
templates
 ┃
plugins
 ┃
 ┣ bookmark（ブックマーク登録プラグイン）
 ┣ catalog（ショッピングカートプラグイン）
 ┣ catalog_order（注文管理プラグイン）※cancel_complete.html（注文キャンセル送信完了ファイル）も同梱
 ┣ circle（サークル管理プラグイン）
 ┣ clap（拍手送信プラグイン）
 ┣ count（カウンタプラグイン）
 ┣ entry_tagmanager（エントリータグ管理プラグイン）
 ┣ filemanager（ファイル管理プラグイン）
 ┣ form（フォーム管理プラグイン）
 ┣ media_comic（ブックマーク登録プラグイン）
 ┣ menu（メニュー登録プラグイン）
 ┣ message（メッセージ登録プラグイン）
 ┣ page_pid_update（ページ親ID一括変更プラグイン）
 ┣ page_tagmanager（ページタグ管理プラグイン）
 ┣ paint（イラスト投稿プラグイン）
 ┣ parts（ブログパーツ管理プラグイン）
 ┣ popularity（人気コンテンツプラグイン）
 ┣ profile（プロフィール管理プラグイン）
 ┣ riddle（なぞなぞ認証プラグイン）
 ┗ task（タスク登録プラグイン）

※freo.jpで配布されているプラグインの管理画面のみ（必要なプラグインのテンプレートを追加してください）

実装した管理画面のカスタマイズ

ナビゲーションバー

ログインユーザーの表示とプロフィール編集（プロフィール管理を導入している場合はそちらへリンク）、パスワード変更、ログアウトのドロップダウンメニューを設置
freoのプロフィールやコメントでGravatarのアバターを表示する方法 ⇒ ログインユーザー（プロフィール管理プラグインを導入している場合は登録イメージを表示）やユーザー管理、プロフィール管理で表示
freoの管理画面に「未承認」のデータがあることを表示させる ⇒ ステータス画面のみ、管理者のみ

メニューバー

項目ごとに折りたたみ
メニューバーと各画面は別々にスクロール
スマホで使用の場合はスライドボタンで表示
設定管理とサイト確認のリンクを上部に
サイト確認は同タブと別タブでの確認が可能
プロフィール管理プラグインを導入している場合、プロフィール編集はプラグインの方を使用
freo.jpなどへのリンクを設置

各画面共通

ページタイトルを設置してブラウザで表示（タイトル設定プラグインで表示タイトルを設定している場合はそちらが優先）
パンくずリストボタンを設置
エントリー管理等のページ送りの部分は「«前1...3456789...20次»」のように表示
編集画面では「編集」や「削除」などはタブで切り替え
フォームの入力フィールドにプレースホルダ（説明文）を設定

ステータス

・エントリー登録ボタンを設置【2015/2/26追加】

freoのセットアップの実行ボタンを設置（管理者のみ）
freo公式の更新情報を管理画面に表示する

設定管理

設定管理の項目を折りたたみメニューで表示
各種設定の表示を下ではなく右側に配置（スマホで使用の場合は下側に配置）

エントリーとページの管理

freoのエントリーとページの管理画面の状態のカスタマイズ
freoのエントリーとページの管理画面に閲覧制限情報を表示する
エントリーの登録/編集/承認後にエントリー一覧ヘのリンクボタンを設置
エントリーとページの編集後に編集した記事またはページヘのリンクボタンを設置
エントリーとページの承認後に承認した記事またはページヘのリンクボタンを設置

エントリーとページの登録/編集

現在の状態を表示（「公開」のものを編集する時を除く）
エントリーとページの登録/編集の日時欄をセレクトボックスにし、現在日時を一括入力するボタンを設置
一部の項目を右側に配置して折りたたみで表示（スマホ・タブレット画面では下側に配置）
freoのエントリーとページの編集画面で添付ファイルとイメージの画像を表示する方法
freoのエントリーとページの編集画面でオプションの画像を表示する方法
freoのエントリー(ページ)の公開終了日時の登録をセレクトボックスにする
freoのインラインフレームのメディア管理で常に更新日時の新しいファイルを上に表示させる方法
アップロードする画像ファイルを選択した際に画像をプレビュー表示
freoのエントリーのタグ投稿を楽にする方法 ⇒ エントリー登録のタグ投稿の際にエントリータグクラウド一覧（ページ登録ではページタグクラウド一覧）を表示 ※導入する場合は各自で libs/freo/plugins/config.entry_tagcloud.php のdisplayファイルの読み込み設定に「,admin/entry_form」（libs/freo/plugins/config.page_tagcloud.php の場合は「,admin/page_form」）を追加してください（すでに導入済みの場合はそのままでOK）。

コミュニティ

freoのコメント管理画面に投稿先とコメントを表示する ⇒ common.php を編集しない場合は投稿先はエントリーNo.またはページIDでの表示
トラックバック管理画面に投稿先を表示 ⇒ common.php を編集しない場合は投稿先はエントリーNo.またはページIDでの表示
コメントした者が登録ユーザーの場合はコメント管理の名前の欄にユーザーのアイコンを表示

ユーザー

システム

freoのメディア管理のファイル書き換えでTinyMCEを導入する（markItUp!用追加ファイルでmarkItUp!にも対応）
複数メディアのアップロードはfreo独自のファイル選択欄を追加する方法ではなく、参照したフォルダで複数の選択が可能
メディア登録/編集でアップロードする画像ファイルを選択した際に画像をプレビュー表示
メディア管理の一覧でディレクトリ名にも開くリンクを設置
インフォメーション管理はインフォメーションを利用しない（＝非表示）時でも編集できる

プラグイン

...など

補足【2014/8/16追記】

エントリー・ページによって利用するオプションを切り替えるで templates/internals/admin/entry_form.html にコードを追加する場合は、96～98行目あたりの

<dl>
<!--{foreach from=$options|smarty:nodefaults item='option'}-->
	<dt>{$option.name}<!--{if $option.required == 'yes'}--> <span class="label label-danger" title="入力必須">*</span><!--{/if}--></dt>

の部分を

<dl>
	<dt>使用するオプション</dt>
		<dd>
			<select name="entry[option_set]" class="form-control" id="article_option_set">
				<option value="">選択してください</option>
				<option value="diary_">日記</option>
				<option value="illust_">イラスト</option>
				<option value="novel_">小説</option>
			</select>
		</dd>
<!--{foreach from=$options|smarty:nodefaults item='option'}-->
	<dt id="article_option_{$option.id}" title="{$input.entry_associate.option[$option.id]}">{$option.name}<!--{if $option.required == 'yes'}--> <span class="label label-danger" title="入力必須">*</span><!--{/if}--></dt>

に変更（赤字の部分を追加、元々の追加部分よりピンク字部分を追加）してください。

エントリー・ページによって利用するオプションを切り替えるで templates/internals/admin/page_form.html にコードを追加する場合は、122～124行目あたりの

<dl>
<!--{foreach from=$options|smarty:nodefaults item='option'}-->
	<dt>{$option.name}<!--{if $option.required == 'yes'}--> <span class="label label-danger" title="入力必須">*</span><!--{/if}--></dt>

の部分を

<dl>
	<dt>使用するオプション</dt>
		<dd>
			<select name="page[option_set]" class="form-control" id="article_option_set">
				<option value="">選択してください</option>
				<option value="diary_">日記</option>
				<option value="illust_">イラスト</option>
				<option value="novel_">小説</option>
			</select>
		</dd>
<!--{foreach from=$options|smarty:nodefaults item='option'}-->
	<dt id="article_option_{$option.id}" title="{$input.page_associate.option[$option.id]}">{$option.name}<!--{if $option.required == 'yes'}--> <span class="label label-danger" title="入力必須">*</span><!--{/if}--></dt>

に変更（赤字の部分を追加、元々の追加部分よりピンク字部分を追加）してください。

エントリーの登録ユーザーを変更する方法で templates/internals/admin/entry_form.html にコードを追加する場合は、88行目あたりの

<div class="col-md-4 panel-group" id="accordion">

の下に

<!--{if $freo.user.authority == 'root'}-->
	<dl>
			<dt>登録ユーザー変更</dt>
					<dd>
							<select name="entry[user_id]" class="form-control">
							<!--{foreach from=$users|smarty:nodefaults item='user'}-->
									<option value="{$user.id}"{if $user.id == $input.entry.user_id}	selected="selected"{/if}>{$user.id}</option>
							<!--{/foreach}-->
							</select>
					</dd>
			</dt>
	</dl>
<!--{/if}-->

を追加（元々の追加部分より<h3>登録ユーザー</h3>を削除しピンク字部分を追加）してください。

freoの更新ping プラグイン（機能拡張版）を導入して templates/internals/admin/entry_form.html にコードを追加する場合は、88行目あたりの

<div class="col-md-4 panel-group" id="accordion">

の下に

	 <dl>
		<dt>更新ping</dt>
			<dd>
				<select name="plugin_sendping[enable]" class="form-control">
					<option value="OFF" {if $plugin_sendping.enable == Off} selected="selected"{/if}>送信しない</option>
					<option value="On"	 {if $plugin_sendping.enable == On}	 selected="selected"{/if}>送信する</option>
				</select>
			</dd>
	</dl>

を追加（元々の追加部分よりピンク字部分を追加）し、同じく441行目あたりの

<button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span>削除する</button>

の下に

	 <dl>
		<dt>更新ping</dt>
			<dd>
				<select name="plugin_sendping[enable]" class="form-control">
					<option value="Off" {if $plugin_sendping.enable == Off} selected="selected"{/if}>送信しない</option>
					<option value="On"	 {if $plugin_sendping.enable == On}	 selected="selected"{/if}>送信する</option>
				</select>
			</dd>
	</dl>

を追加（元々の追加部分よりピンク字部分を追加）してください。

ページ移動

ジェネ

いつも便利な機能ありがとうございます！
今回もBootstrap3使わせて頂きました┏○ﾍﾟｺ

導入したのですが、こちらの
「freoのエントリーのタグ投稿を楽にする方法」
https://cccabinet.jpn.org/view/69
も便利で使わせて頂いておりましたが、今回ので元に戻っちゃいましたね・・・

どうすればよろしいでしょうか～？！

-------------------

あっ・・。
同じようにすれば候補の表示はできたのですが～
クリックしても入力はされないようで・・・。

URL
2014/10/29 14:43:00

ジェネ

たびたびすいません！

画像登録で複数可とは書いてるのですが、できないのですが・・・･･･(；´Д｀)ｳｳｯ…

以前のでは1枚選択すると自動で下に選択欄が出てきたのですが、今回でません！
firefoxがダメなのかな？

URL
2014/10/29 22:30:00

ccc

「freoのエントリーのタグ投稿を楽にする方法」はconfig.entry_tagcloud.phpを編集する必要があるので敢えて導入しませんでしたm(__)m
タグは元記事を参考にすれば導入できるはずです（個人的には導入しています）。

またHTML5では普通に画像の複数選択ができるのでfreoオリジナルの複数選択方法は導入していません。
firefoxなら画像はctrlキーを押しながら画像を選択すると複数選択ができます。

URL
2014/10/29 22:46:00

ジェネ

そうですか～ありがとうございますぅ！

URL
2014/10/30 09:46:00

ジェネ

タグ投稿のうpありがとうございますぅ！
さっそく実装してみました┏○ﾍﾟｺ

後、投稿記事中のエンターですが<p></p>になって・・・
シフト押しながらエンターで開業になるようですが(；´･ω･)

http://freo.jp/document/function/newline.html
の公式の記事を試したのですがうまくできませんでしたゥﾜｧ─(ﾟ｀Д´ﾟ)─ｧｧﾝ!!

URL
2014/11/05 10:02:00

natsu

お世話になります。freo初心者ですが、こちらの最新テンプレート、大変見やすく便利に管理していけそうだと思い今から気合が入っております。
一点質問です。エントリー/ページ投稿画面の「メディア管理」「メディア登録」を押しても、きちんとインラインフレームで表示されず、正しく画像を挿入出来ません。ブラウザとの相性もあるかと思いfirefox,google clome各最新で試しましたが同様でした。
こちらのテンプレートを導入する前のデフォルトの状態では問題なくインラインで表示されます。
他に同様の報告はありませんでしょうか？お手数ですがご確認頂ければ幸いです。

2015/02/07 11:16:00

ccc

お返事が遅くなって申し訳ありません。

お話の状況ですが、正常にインラインフレームで表示される場合とそうでない場合（admin.jsファイルが機能しない）と両方あるようでして、ファイルの違いでもなくブラウザの違いでもなく、理由がさっぱりわかりませんm(__)m

インラインフレームをやめてBootstrapのモーダル表示も検討してみましたが、修正が膨大すぎて手が掛かりそうだし...(^_^;)

もう少し調べては見ますが、時間がかかりそうです。

URL
2015/02/22 16:20:00

mai

すごく使いやすい！！と思い実装してみました。
が、上記の方のおっしゃる通り、いくつか正常に機能しない点がありますね。

インラインフレームでの表示がやはり出来ません…。

現在日時のボタンも機能しません…最初に入力される時間は８時間遅れ。

以下個人的な意見…
PC以外はtinymceを使わない設定のようですが、それを使うようにする設定も教えてほしい…。

数少ないfreoの管理者用テンプレートでとても高機能・見やすいものなので、今後も期待しています！！

2015/02/23 15:06:00

mai

自己解決です。
admin.js

//タグ入力
$("#tag").jTagging($("#taglist"), ",");

を削除したら、インラインフレームも日時入力も可能になりました。

タグ入力補助を使ってないときは消しましょうってことですかね？
上記natsuさんもそうなのかな？

2015/02/23 15:29:00

ccc

maiさん、わざわざ調べてくださってありがとうございます。

どうもjQuery.jTagging.jsが邪魔してるっていうことに気づきませんでした(^_^;)
そもそもheader.htmlでタグクラウドを使わない場合はjQuery.jTagging.jsを読まないようにしてたので、これを常時読むようにすれば回避できます。

近々に手直ししたものをUPします。
ご迷惑をお掛けしまして申し訳ありませんでしたm(__)m

P.S.

PC以外はtinymceを使わない設定のようですが、それを使うようにする設定も教えてほしい…。

entry_form.htmlの場合
77行目の

<!--{if $freo.agent.type == 'pc'}-->

を削除し、さらに79行目から81行目の

<!--{else}-->
 <dd><textarea name="entry[text]" class="form-control" rows="10">{$input.entry.text}</textarea></dd>
<!--{/if}-->

を削除して下さい。
ただし、freoデフォルトのTinyMCE3だとレスポンシブに対応しておらず、モバイルだと画面から思いっきりはみ出るのでTinyMCE4をお使い下さい。
※この場合、freoの携帯・iPhone入力用の変換機能ファイルは削除する必要があると思います。
http://freo.jp/document/function/mobile_text.html

2015/02/24 20:23:00

ari

いつも便利に使わせていただいています。
こちら上記のインラインフレーム、現在日時、メディア管理画面からの「挿入」は最新版を導入すれば解決していますか？
最新版を導入したのですが、メディア管理画面から画像を挿入してもプレビューが表示されるだけで
挿入出来ません（こちらで見るサンプルのようにインラインフレームにもなりません）
「freoのエントリーのタグ投稿を楽にする方法」を導入していますが、ためしに
admin.jsの該当箇所を削除しても改善されませんでした。
画像は毎回使うので出来れば使いたい機能なのですが、あとはどのあたりを確認すれば良いでしょうか
win7 firefoxです。
ちなみにIE11では上記にくわえ「HTMLを編集」で開くと何も書かれていませんでした。

2015/06/05 14:21:00

ccc

少し返事が遅くなって申し訳ありません。

最新版導入後、インラインフレームが表示できない場合
1)ブラウザのキャッシュをクリアする
2)freoのtemplates_cディレクトリの中の.htaccess以外のファイルを削除する
は試されたでしょうか？

ちなみにIE11では上記にくわえ「HTMLを編集」で開くと何も書かれていませんでした。

そもそもTinyMCE3ではIE11でHTMLソースが表示されないというバグがあるようです。
freoのサポートで以前書いたものがあるので、それを参考にTinyMCE3の最新版（現在は3.5.11）を導入してみてください（導入したのに表示できない場合は、windowsのインターネットオプションでインターネット一時ファイル削除を行って下さい）。
http://freo.jp/support/view/1067

2015/06/09 14:25:00

ari

ありがとうございます。
1),2)ともにやったつもりでしたが改めて今確認してみましたが
やはりインラインフレームになりませんでした。

IEの件理解しました。丁寧にありがとうございます。

2015/06/09 18:09:00

ccc

>やはりインラインフレームになりませんでした。
でしたら、jsディレクトリにすべてのjsファイルはアップされていますでしょうか？
特に
gAjax.js
jquery.iPreview.min.js
jQuery.jTagging.js
jquery.metadata.js
とかは使わないからアップしていないとかってありませんか？
それか他にカスタマイズしたのに忘れているとか？

admin.jsにJavascriptのコードが記載されているのに、該当のjsファイルがアップされていないとインラインフレームが動作しないのでご確認下さい。
そういえば最新版の修正の理由もこれでした(^_^;)

URL
2015/06/09 20:30:00

ジェネ

ariさんは無事解決なされたでしょうか？

私はテンプレートを新しくするために、データベースを共有して新しく設置しました。

TinyMCE色々と不具合が出て大変でした(´-∀-｀；)

まずは、共有する時は
http://freo.jp/support/view/830#article_833で
templates/internals/admin/header.htmlとcontent_css: freo_path + 'css/common.css',の直リンクに変更しました。

TinyMCEツールバー表示されたと思ったら、今度はariさんと同じようにメディア管理画面から画像を挿入してもプレビューが表示されるだけで挿入できなくなりました。

色々試してみると、今度はTinyMCE自体が表示されなくなり三日ほど色々検索したりと・・・もう大変ｗ

ふと古い方のfreoフォルダを眺めていると、markItUp！
って入ってないな・・・

そもそもmarkItUp!って何？！って感じなのですが、TinyMCEを使うかmarkItUp!を使うかなのかなと思い、新しいほうのmarkItUp!を削除と言うか抜きで試して見たところ無事動きました(；´･ω･)

一緒にいれちゃ駄目なのかな？

素人にはよくわかりませんが、正常な物を入れれば、ちゃんと動くようです・・・。

ariさんも頑張ってください！

URL
2015/06/11 09:30:00

ari

何度も丁寧にありがとうございます
昨日は時間がとれなかったので今日いろいろ確認してみたのですが.js類は全て入っていました。markItUp！関連ファイルは無さそうでした。

>それか他にカスタマイズしたのに忘れているとか？

「freoにTinyMCE4を導入する」を導入した時に、admin/header.htmlを書き換えたらテキスト入力部分が真っ白になってしまったので
元に戻したまま js/admin.jsを書き換えて(2014/8/31 TinyMCE4用追加ファイルを入れてない状態)という
めちゃくちゃな状態になっていました(こちらでご相談する以前の問題でした。申し訳ありません)。
なので、他に何かいじった時に変更を忘れているような気がします。
admin_bootstrapを入れ直し、上記を直してもインラインフレームになってくれないので、時間をおいてひとつひとつ確認してみます

データベースは共有していないのですが上の階層に置いて直リンクも試してみましたが、
今度はtinymceの入力欄に画像が表示されない（ソース）状態になってしまったのであきらめました

管理画面自体は本当に便利で是非使わせていただきたいので、画像を挿入するときは右クリでアドレスコピペして
貼りつつ、日を置いてまた確認してみます
お時間を割いていただき、申し訳ありません。ありがとうございました
これからも、他カスタマイズ等お世話になります。

2015/06/11 16:41:00

muro

どちらからご連絡したらよいかわからなかったため、記事にコメントという形で失礼します。
問題があれば当コメントを削除してください

以下のページをよく参考にさせて頂いていたのですが、

Bootstrap3移行ガイド
https://cccabinet.jpn.org/bootstrap3/

先日から、スタイルシートが適用されていないのか、レイアウトが崩れていたり、リンクを踏むと文字化けしてしまい大変見づらい状態となっております。
こちらに掲載されている情報はBootstrap3を学習する上でたいへん参考になっていたため、可能であれば修正していただけると幸いです。

よろしくお願いします。

メールアドレス
2015/08/27 09:19:00

ccc

muroさんご連絡ありがとうございます。
先日一部修正した際にどういうわけかページのヘッダ部分が空になっていたので、「Bootstrap3移行ガイドについて」のレイアウトが崩れた状態になっておりました。
修正しましたのでご確認お願いしますm(__)m

2015/08/27 21:21:00

maki

申し訳ありません。
freoの最新版Ver1.19.3をサーバーにアップロードし、動作確認後にこちらの管理画面テンプレートを導入させて頂いたのですが、ページ登録画面のみ、フィルター機能部分が折りたたみは開くけれども項目が何も表示されない状態です。
エントリー登録画面では正常に表示されているのですが、原因が分からず、お手数ですがご助言頂けないでしょうか。よろしくお願いします。

2016/01/21 10:58:00

ccc

makiさん遅くなってすみません。
freo.jpのサポート掲示板（http://freo.jp/support/view/1471）にも書いたのですが、どうもの位置がズレていたようで、検証してからアップしようと思ってたのですが、ココのところの寒さでPCに向かっていなかったのでまだ修正できていませんでした。
とりあえず修正したものをアップしてみたのでお試しいただけませんでしょうか。

URL
2016/01/24 20:16:00

yama2211

管理画面のテンプレートを導入させてもらったんですが、なんかおかしいです。(スクショ: ttps://gyazo.com/09943ebbf38588e55b0228206c5e1276 )
何度が入れなおしをしてみたんですが、何度やってもこうなってしまいます。
どうすればよいでしょうか...

スクショでは、サイト名とユーザー名を伏せてます。

2016/05/28 15:20:00

ccc

yama2211さんすみませんm(__)m
スクリーンショットだけでは判断できかねますが、お使いのサーバーで自動的に広告が入るとかだとCSSが狂ってしまうことがありますが、そのようなことはありませんか?

ないようでしたら他に原因が思いつきません。申し訳ありませんm(__)m

URL
2016/06/09 20:45:00

yama2211

cccさん

さっき入れてみたら、ちゃんと表示されました!!
お騒がせしました...

2016/06/19 10:48:00

コメント登録

コメントを入力してください。
一旦登録したコメントは、あとで編集できませんのでご注意下さい。

Web Liberty&freoカスタマイズ集

メニュー

ユーティリティ

2018年11月

カテゴリー

タグクラウド

キーワード検索

ページ

リンク

ユーザー

新着画像

新着/更新エントリー

新着コメント

過去ログ

人気コンテンツ

ブログパーツ

Feed

エントリー

freoの管理用テンプレートをBootstrap3でカスタマイズ

ダウンロード

管理者用テンプレート

【2017/5/22更新⇒5/23再更新】

【2016/1/24更新】

【2015/3/21更新】

【2015/2/26更新】

【2014/11/3更新】

【2014/8/31更新】

markItUp!用追加ファイル（管理者用テンプレートに上書きしてください）

【2017/5/22更新⇒5/23再更新】

【2015/2/26更新】

【2014/11/3更新】

【2014/8/31更新】

TinyMCE4用追加ファイル（管理者用テンプレートに上書きしてください） ※TinyMCE4は添付していませんので こちら を参考に各自でダウンロードしてください。

【2017/5/22更新⇒5/23再更新】

【2015/2/26更新】

【2014/11/3更新】

TinyMCE4（CDN使用）用追加ファイル（管理者用テンプレートに上書きしてください）

【2017/5/22更新⇒5/23再更新】

【2016/1/24更新】

【2016/1/24更新】

【2015/2/26更新】

【2014/11/3更新】

【2014/8/31更新】

実装した管理画面のカスタマイズ

ナビゲーションバー

メニューバー

各画面共通

ステータス

設定管理

エントリーとページの管理

エントリーとページの登録/編集

コミュニティ

ユーザー

システム

プラグイン

補足【2014/8/16追記】

ページ移動

関連エントリー

コメント

ジェネ

ジェネ

ccc

ジェネ

ジェネ

natsu

ccc

mai

インラインフレームでの表示がやはり出来ません…。

現在日時のボタンも機能しません…最初に入力される時間は８時間遅れ。

mai

ccc

ari

ccc

ari

ccc

ジェネ

ari

muro

ccc

maki

TinyMCE4用追加ファイル（管理者用テンプレートに上書きしてください）
※TinyMCE4は添付していませんのでこちらを参考に各自でダウンロードしてください。