PloneはWordpressと同じCMS(Contents Management System)です
CMSはホームページ作るには最適なツールです
PloneかWordpressを使うのは完全に好みの問題ですね
この記事書いといてなんですが
圧倒的にシェアはWordpressですし、利便さでいってもPloneは劣ると思います
Plone使っていたのは2008年ぐらいからでした
当時はこのツールは将来性あるぞって思っていたんですが・・・
ま、まぁ、まだこれからかもしれませんし
Wordpressから乗り換えることもあるかもしれませんね
Ploneの導入
好みの問題もあるし、お作りのサイトの特性とかでも
Ploneはまだまだ使えると思います
インストーラーから完全にインストールできて(バージョンによる)
Webサービスも組み込まれているので、他に何もする必要がなく
Webサーバ&ホームページを立てられるわけです
複数のユーザで管理ができたり書き込みができるので
そのお手軽さ故、即席のナレッジ管理や掲示板などに活用できます
実際に社内で使っている方もチラホラいました
今回は簡単に初期設定を説明します
Ploneのダウンロードサイト
Ploneのダウンロードサイトは以下になります
Ploneってシリーズによって、インストールの手順が違いすぎる・・・
デザイン変更
Ploneのデザインを変更する為には、「public.css」を直接編集する事によって
オブジェクトのカラー、大きさ、位置などキメ細かい設定ができます
public.cssは
Zope管理画面(ZMI) より、「portal_skins/plone_styles/public.css」にあります
下記によく変更するcss-idを記載します
#portal-column-one .visualPadding
左ポートレット
#portal-column-two .visualPadding
右ポートレット
#visual-portal-wrapper
サイト全体
#portal-logo img
サイトロゴ
#portal-top
サイトトップ
#portal-siteactions
サイト右上のメニュー
#portal-searchbox
サイト右上の検索エンジン
#portal-globalnav
ポータルタブ
#portal-personaltools
パーソナルバー
#portal-breadcrumbs
ブレッドコラム
#portal-sitemap
サイトマップのコンテンツ
#portal-footer
フッター
#portal-colophon
コロハン
外部リンクのアイコンの変更
Ploneで外部リンクを挿入するとアイコンも表示されますが、それを変更(削除)する方法を記載します
Zope管理画面(ZMI) より、「portal_skins/plone_styles/public.css」を選択する
■通常(http)の外部リンクアイコンを編集するにはコレ
#content a[href ^=”http:”],
#content a.link-external {
background: transparent url(&dtml-portal_url;/link_icon.gif) 0px 1px no-repeat;
padding: 1px 0px 1px 16px;
}
■アイコン自体を消すには以下の行をすべて消す(またはコメントアウト)
#content a[href ^=”http:”],
#content a.link-external {
background: transparent url(&dtml-portal_url;/link_icon.gif) 0px 1px no-repeat;
padding: 1px 0px 1px 16px;
}
#content a[href ^=”https:”],
#content a.link-https {
background: transparent url(&dtml-portal_url;/lock_icon.gif) 0px 1px no-repeat;
padding: 1px 0px 1px 16px;
ユーザ登録のアナウンスメール
PloneではHP訪問者がアカウントを作成した際、案内メールがその作成者に送信されるが、管理者への通知はないです
新規ユーザが登録されたかどうかはユーザ検索すればわかるが、それだとあまりにも効率が悪いので、アカウント作成時の案内メールが管理者にも同報送信されるようにします
1.サイト設定 > Zope管理画面(ZMI)
> /portal_skins/custom/registered_notify_template
2.”Customize” 押下し、以下の行を追加する
To: <span tal:replace=”python:member.getProperty(‘email’)” />
Cc: <span tal:replace=”python:here.email_from_address” />
メール設定について
Ploneの「連絡フォーム」などを使用する為には、事前に「メール」設定をしておく必要があります
ローカルでSMTPサーバをたてなければいけないと思いきや、Gmailの公開SMTPサーバ が使用できます
事前にGmailアカウントを取得しときましょう
gmail の SMTP情報はこちら
「メール」(サイト設定 > Plone構成設定-メール)より以下の項目を設定
SMTPサーバ (必須)
→ smtp.gmail.com
SMTPポート (必須)
→ 587(“465″ではメール送信できない)
ESMTPユーザ名
→ Gmail 登録したアカウント
ESMTPパスワード
→ Gmail 登録したアカウントのパスワード
サイトからのメールの差出人名 (必須)
→ 任意
サイトからのメールの差出人アドレス (必須)
→ 任意、サイト管理者のアドレス
画像等のアップロード
挿入用のファイルを余分なコンテンツとして表示しない方法を紹介します
Ploneで画像ファイルを「ページ」などに挿入する(貼り付ける)とき、画像をアップロードする必要があります
貼り付け方法は確認できるているもので、以下の2つ
A.画像保管専用のフォルダを作り、一旦そこに画像をアップロードし、そこから「ページ」に挿入し表示する方法 B.ページ編集中にメニューから直接アップロードし、挿入し表示する方法 |
つまり、画像保管専用フォルダに一旦保管(経由)させるかさないかの違いなのですが、Bの方法を行うと、ブレットクラム内にコンテンツとしてアップロードした画像が表示されてしまいます
また、Aの方法だと画像保管専用フォルダを”公開”にしなければ、”非公開”の閲覧権限がない場合は挿入したページを見れません
かといって、”公開”にしたら、このフォルダ名のパーソナルタブができ上がってしまいます
そこで、回避策として、以下の方法で対応
1.このような三階層を作成する
保管用 ・・・フォルダ(パーソナルタブ) | | 画像 ・・・フォルダ | | 画像ファイル ・・・画像 |
2.保管用フォルダは”非公開”、画像フォルダは”公開”
3.画像フォルダのみ、ブレットクラムの「共有」タブにて「上位レベルからパーミッションを引き継ぐ」のチェックを外す
一番上の階層の保管用フォルダを”非公開”にすることによって、パーソナルタブに表示させません
(保管用フォルダは表示もしないしアクセスもできませんが、画像フォルダには URL を直接入力することによりアクセス可能です)
また、下位フォルダにそのパーミッションを引き継がせないようにすることによって、状態を”公開”のまま維持することができます
これにより、余分な画像ファイル単体のコンテンツを増やさず、且つ、どのような閲覧権限でも他コンテンツ内の画像ファイルを閲覧可能となります
ん~
でも、もっと他によい方法があるのかも(笑)
ページ編集時の改行
Ploneでのページ編集モード時にて本文をタイプ、その後「Enter」キーなどで改行をすると
微妙な隙間が空いてしまうことがあります
これはPloneでの「Enter」キーでの改行が2種類あって次のようになります
・「Enter」キーのみ 段落変更 ・「Shift + Enter」キー 改行 |
以下、例
■「Enter」キーのみ
————————-
お前はもうしんでいる!
ヒデブ!!
————————-
■「Shift + Enter」キー
————————-
お前はもうしんでいる!
ヒデブ!!
————————-
つまり、「Enter」キーの時のみ、隙間が空いてしまうことになります
これはWordpressでも同じですね
デザインの効率の良い微調整方法
Ploneで作成したホームページを修正する時、Zope管理画面(ZMI)からhtmlやCSSを編集し、Ploneを再起動してホームページ更新となりますが、レイアウトの微調整で更新画面を何度も確認しなければならない時にこの方法だと結構時間がかかります。
なので、Plone通さず、基になるhtmlやcssを直接編集して微調整できるようにします
その為、ホームページビルダーなども使えますし
何より、時間のかかるPloneの再起動が必要が無くなります。
(動的にレイアウト調整できる、Ploneプロダクトの「CPSSkins」を使う方法もありますが、現状(ver2.1.7)は Plone ver2.x までしか動作しません)
1.ブラウザにて編集対象のホームページを開く
2.ブラウザの機能でソースを開く
→ メニューバー[表示] → ソース(ブラウザによって名称が異なる)
3.表示させたソースをローカルに拡張子htmlで保存する
4.保存したソースの外部CSSとして指定しているアドレスをすべてメモ帳などに書き出す
<style type=”text/css” media=”screen”><!– @import url(http://xxx.xx-xxx.xx.xx/portal_css ~省略~ .css); –></style>
5.”4” で書き出したCSSのアドレスをブラウザのアドレスバーに入力する
6.表示させたCSSをソースと同じフォルダに拡張子cssで保存する
7.CSS の内容に画像ファイルのパスが示されているので、同様の手順でその画像も同じフォルダに保存する
8.保存したソースの外部CSSを指定している箇所をすべてローカルの保存先に変更する
<style type=”text/css” media=”screen”><!– @import url(http://xxx.xx-xxx.xx.xx/portal_css~省略~ .css); –></style>
↓
<link href=”file:<保存先パス>/base.css” rel=”stylesheet” type=”text/css”>
9.保存したソースをhtmlで開き、正常に表示されているか確認する