CMS「すぐ使えるCGI」の開発者がご質問にお答えします

 

画像途中挿入が可能なレスポンシブWebデザインのプログラムのダウンロードについて (No. 1592)

回答日: 2014-12-02

質問

レスポンシブのお知らせ用タイプと、
目次+詳細ページ用の2つを利用する予定でおります。

「スマホ対応 レスポンシブWebデザインの CMS」
http://sugutsukaeru.jp/support/325/
このページからダウンロードするこの2つのタイプは
設置してみますと、文中に画像を挿入するタイプになっておりません。
(投稿の入力欄で右クリックしても挿入位置の選択は表示されない)

「アップロードした画像やファイルを本文内に挿入する方法」
http://sugutsukaeru.jp/support/376/
このページにそって作業をしてみても
レスポンシブのためか例にあるコード自体が違うようで
うまく実装できません。

上記レスポンシブ2点ですでに画像挿入ができる形になったものは配布されておりませんでしょうか?

よろしくお願い致します。
投稿日時: 2014-12-02 10:51

回答

「すぐ使えるCGI」のご利用ありがとうございます。

■製品について
「スマホ対応 レスポンシブWebデザインの CMS」
http://sugutsukaeru.jp/support/325/

上のURLからダウンロードできる2種類のCMSサンプルは、ベース製品として以下を使っています。

画像付 ウェブページ更新ツール 大容量版(Ver. 4.7)
画像付 ニュース更新ツール 大容量版(Ver. 4.7)


■画像挿入機能付きレスポンシブWebデザインのサンプル
これらの製品についてはまだ、ブログ用のレスポンシブWebデザイン+画像挿入機能付きのサンプルは無いのですが、以下のサンプルは「画像付 ウェブページ更新ツール 大容量版」にレスポンシブWebデザイン+画像挿入機能を付けたものです。

「臨時のお知らせや季節の画像をホームページに表示するCMS」
http://sugutsukaeru.jp/support/172/


■編集方法

ただ、このサンプルはこのサンプルで項目設定などが多少違いますので、こちらはご参考までにご覧いただいて、以下のように編集していただく方がお勧めです。

〇編集フ方法の違い
以下のサポートページでご案内している方法を、既にレスポンシブWebデザインになっているテンプレート一式に適用する時の、違いをご説明します。

「アップロードした画像やファイルを本文内に挿入する方法」
http://sugutsukaeru.jp/support/376/

[1.CSSの編集]
レスポンシブWebデザインの方は、CSS が別ファイルに定義されていますので、「<head> - </head>内にスタイルシート指定」の部分は webdir/parts/css/admin.css を編集して下さい。

[2.JavaScript の編集]
JavaScript はサポートページの記載通り templates/admin/2.html を編集して下さい。既にJavaScript の一部はファイル内に記載があると思いますが、以下の行から </script> の終了までをまとめてコピー&ペーストで上書きして下さい。

---上書きする方の開始行----
<script type="text/javascript" src="http://lcns2.sugutsukaeru.jp/26303ec1ce859dc/4.7/65fcd604a07352712be0267ca2b0277a/rightclick2tag.js" charset="utf-8"></script>
---------------------------

CMSの方のファイル内にやはり src が rightclick2tag.js で終わる <script> タグがありますので、その部分以降が上書き対象です。

---上書きされる方の開始行----
<script type="text/javascript" src="http://javascript-plugin.sugutsukaeru.jp/26303ec1ce859dc/4.4/65fcd604a07352712be0267ca2b0277a/rightclick2tag.js"></script>
---------------------------


[3.JavaScript調整]
2でコピーしたJavaScriptを1か所変更して下さい。以下のコードを検索して、変更して下さい。

変更前)
$('a[id^="current_image_"][class="current_image"]').each(function(){

変更後)
$('a[id^="current_image_"][class~="current_image"]').each(function(){


----
うまく行かない点がありましたら、また編集後のコードなどを合せてご質問下さい。


◆ご連絡いただいた内容からの変更点
タイトルに詳細情報を追記しました。
URLのタイトルを付記しました。
回答日: 2014-12-02