たまがき歯科クリニック : Manual

使用方法

エントリーログをポストする

管理者ページにアクセスし、アカウントマネージャーで作成した書き込みユーザー名とパスワードでログインします。ログインが成功したら、準備OKです。投稿ページでは、3つのテキスト入力欄が表示されます。これらの入力欄に記述したものは全てMySQLデータベースに格納され、キーワード検索の対象にすることが出来ます。

タイトル欄

ここで書いたものがログのタイトル部分になります。

URI(URL) 欄

ここで書いたリンクが上のタイトル欄を内包するリンクタグになります。ブックマーク的にリンクを張りたい場合に使います。タイトルをリンクさせたくない場合は、そのまま「http://」にしておいて下さい。

カテゴリー欄

P_BLOGはマルチカテゴライズ可能なカテゴリー機能を持っています。複数のカテゴリーに登録する場合はカンマ区切り(スペースなし)で登録します。

書き方の例：

PHP,MySQL,Web Develop,Web開発

このように登録すると、同一記事を、「PHP」「MySQL」「Web Develop」「Web開発」のそれぞれのカテゴリーから呼び出せるようになります。

コメント欄

段落の書き方の例:

コメントは基本的に<p></p>タグで括って書いていきます。<p>は「Paragraph(段落)」の頭文字です。これを使わなくてもポストは可能ですが、論理的にも見た目にも奇麗なXHTMLを出力するために、コメントは<p></p>タグ内に書くのが推奨です。段落の空白を作るために連続した<br />タグを使用するのは避けましょう。

模範的な書き方の例：

<p>コメントをこのように書きます。</p>
<p>パラグラフ(段落)が変わったらこのように追加の<p>タグ内に書いていきます。</p>

推奨されない書き方の例：

コメントをこのように書きます。<br />
<br />
<br />
パラグラフ風な空行を実現するためにこのように<br />を連打するのはあまりお勧めしません。

<p>を使うと、CSSオフでも奇麗で読みやすいXHTMLでレンダリングされます。

パラグラフと改行の自動マークアップ機能

基本的にP_BLOGはXHTMLをハンドコーディング(手打ち)する人、HTMLの基本が分かる人、全く分からないが少なくとも多少のタグなら覚える気がある人をユーザーとして想定して開発していますが、パラグラフや改行タグを使用しない場合のみ自動的にマークアップして補完する機能が実装されています。

自動マークアップ機能では、改行が二回続くとパラグラフと見なし<p>タグを補完し、一回だけの場合は強制改行と見なし<br />タグを補完します。

これらのタグを直接入力して書く場合には自動マークアップ機能は機能しないようになっています。

P_BLOGの自動マークアップ機能では独自拡張／独自言語／独自入力パターンでの入力補完機能はありません。サポートされている入力方法は(X)HTMLタグのみです。

Markdown記述自動変換機能

バージョン1.0.1よりMarkdownプラグインを標準搭載しました。

このMarkdown機能は、デフォルトで有効になっています。マークダウン書式で記述すると自動的にマークアップされます。

Markdown機能を外したい場合は、プラグインフォルダ(/include/user_include/plugins/)からマークダウンプラグインを削除して下さい。

Markdown機能をオフにすると、P_BLOGの自動マークアップ機能が作動するようになっています。

タグボタンのカスタマイズ

タグボタンは「カスタムファイル編集」でカスタマイズ可能ですので、好きなタグ用のボタンを追加したり削除したり、好みのアクセスキーを設定したりしてください。タグの追加は、<input>タグを追加し、value値にタグ名を記述し、onclick属性のJavaScriptのwrap()関数を以下のようにカスタマイズします。クラス、属性はそれぞれ一つずつ追加出来ます。

wrap('タグ名', 'クラス名', '追加したい属性');

例えば、「<a>要素でrefというクラスをつけてhref属性を持ったタグを出力するボタン」を追加したい場合、以下のようにします。

<input onclick="wrap('a', 'ref', 'href');" type="button" value="a" />

参照URI

テキストの装飾の例：

フォントを大きくしたり強調したい場合には、

<em>
<strong>
<strong class="stronger">
<strong class="very-strong">

などの4段階のクラスがデフォルトで用意されています。

<em>強調</em>
<strong>普通の強調</strong>
<strong class="stronger">ちょっと強調</strong>
<strong class="very-strong">かなり強調</strong>

実際の表示はこのようになります。↓

強調 普通の強調 ちょっと強調 かなり強調

参照URI

ハイパーリンクの書き方の例：

(Level-1) リンクを張る場合は、以下のように　<a>　要素を使ってマークアップします。 href 属性でリソースのURIを示します。

<a href="http://pbx.homeunix.org/p_blog/">P_BLOG Project</a>

(Level-2) 必要に応じて　title　属性を使ってサイトの簡単な説明をポップアップさせる事も出来ます。

<a href="http://pbx.homeunix.org/p_blog/" 

title="P_BLOG Project Official Site">

P_BLOG Project</a>

(Level-3) 外部サイトへの参照リンクの場合は　ex-ref　クラスを使ってスタイルシートでアイコンをつけ、外部リンクである事を明確に表現する事も出来ます。

<a href="http://pbx.homeunix.org/p_blog/" 

title="P_BLOG Project Official Site"

class="ex-ref">

P_BLOG Project</a>

以上を全て適用すると、以下のようなハイパーリンクになります。↓

P_BLOG Project

参照URI

引用文の書き方の例：

他のサイトの記事を引用する場合は<blockquote>タグを使います。<blockquote>タグ内のcite属性で元記事のURIを下のように指定します。

<blockquote cite="http://pbx.homeunix.org/p_blog/">
<p>P_BLOG Projectからの引用文</p>
</blockquote>

すると、以下のようになります。↓

P_BLOG Projectからの引用文

cite 属性で示したURIは、引用元へのリンクが自動的に生成されるようになっています。

参照URI

コンピューターの用例の書き方の例：

キーボードショートカットなど、コンピューターキー入力文字列を表現したい場合は、<kbd>タグを使います。特定のキーを強調したい場合は、<kbd>タグ内のclass属性で「important」と指定します。

<kbd>shift</kbd>
<kbd>option</kbd>
<kbd>command</kbd>
+
<kbd class="important">S</kbd>

すると、以下のようになります。↓

shiftoptioncommand+S

参照URI

mozilla.org Markup Reference : Computers

プリント対応CSSクラスの書き方の例：

P_BLOGはプリンターでの印刷に対応したCSSをデフォルトで備えています。ブラウザから印刷を行うと、通常のスタイルシートではなく印刷用のスタイルシートが適用されます。

このP_BLOGシステムのPrint用CSS

ブラウザでのページ閲覧とプリントしてのページ閲覧での一番の違いはページ分割の問題です。ブラウザで表示されたページをそのまま印刷すると意図しないところでページが分割されてしまう場合が殆どです。それを避け、作者(あなた)の意図したところでページ分割させるためのクラスをデフォルトで二つ用意してありますので活用ください。

ページをある特定の場所の前でカットしたい場合は、「.page-break-before」というクラスを指定します。例えばある見出し<h3>foo</h3>の前でページを切りたい場合、以下のように書きます。

<h3 class="page-break-before">foo</h3>

すると、このクラスで指定された場所の前でページが分割され、このクラス以降のコンテンツは次のページとして印刷されます。

ページをある特定の場所の後ろでカットしたい場合は、「.page-break-after」というクラスを指定します。例えばある見出し<h3>foo</h3>の後ろでページを切りたい場合、以下のように書きます。

<h3 class="page-break-after">foo</h3>

すると、このクラスで指定された場所の後ろでページが分割され、このクラスから後のコンテンツは次のページとして印刷されます。

添付画像をアップロード

ファイル選択フォームでは、ログと一緒に画像などのバイナリファイルをアップロード出来ます。アップロードされたファイルは全て「resources」フォルダに格納されます。(このフォームでアップロードするファイルはMySQLには格納されません)
ファイルへのパスを書く場合のためにアップロードディレクトリのパスを覚えておいて下さい。

画像パスの書き方の例：


<img src="./resources/my_image.png" width="100" height="20" alt="Image" />

アップロード可能な画像数は管理モードの「環境設定」でいくつまでも自由に増減出来ます。(デフォルトは3です)

参照URI

ハイパーリンク -- ごく簡単なHTMLの説明 : 画像の表示

ポッドキャストの配信

ポッドキャストするMP3、AAC、MOVデータを送るには、添付画像と同じファイル選択フォームを使用します。ファイルを選択すると、タグボタンが「img」から「Podcast」に変わりますので、そのボタンをクリックするとポッドキャスト用のタグがコメント欄に書き出されます。

ポッドキャストコードの例：


<!-- PODCAST=foo.mp3 -->

これはresourcesディレクトリに置かれたポッドキャスト用の音声／ムービーファイル「resources/foo.mp3」を意味します。ポッドキャスト対応のファイルは「.mp3」「.m4a」「.mov」です。ポッドキャストはRSS2.0によって配信されます。

トップページに「もっと読む...」リンクを表示する

本文に「」というコメントを入れることによって、トップページには概要、文の出だし、あるいは見出しのみを表示し、残りの部分は「もっと読む....」リンクを使ってPermallinkページで読ませるように出来ます。

「もっと読む...」用コメントの書き方の例：

<p>ここはトップページに表示される段落です。</p>

<p>この部分は「もっと読む...」になり、トップページには表示されない段落となります。</p>

すると、このように表示されます。

ここはトップページに表示される段落です。

上のサンプルリンクにはこのサイトの「もっと読む...」用のCSSが適用されています。

参照URI

P_BLOGのデフォルトでついているテキスト装飾まわりのCSSクラスは「text_decorations.css」に定義されていますので参考にして下さい。また、マークアップやクラスの一部はMozilla.orgのマークアップリファレンスに準拠していますのでこちらも参考にして下さい。

日々の更新でよく使われる要素についての解説は「The Web KANZAKI」の「ごく簡単なHTMLの説明」という名ページの中に最適なソースがありますので、ご参照下さい。

ダウンローダーにファイルをアップロード

「FILES」はファイルダウンローダーです。この機能を使って、イメージファイル、テキスト、html、PDF、フォトショップのPSDフォーマット、 .movなどのムービーファイル、100MB以上の比較的大きなファイル(PHP側での設定が必要)、などなど、とにかく(MySQLが扱える)バイナリファイルならなんでも、MySQLに放り込むことが出来ます。アップロードしたファイルは自動的にリンクが張られますので、全てクリックでダウンロード可能になります。ファイルのダウンロード数は管理画面のダウンロードカウンターでもチェック可能です。

ファイルダウンローダーとしての使い道以外に、バイナリデータにリンクを張ってメインのBlogのページから参照することが出来ます。ファイルは全てidで管理していますので、リンクタグでデータを呼び出すには bin.php?id=FILE IDというコードを使用します。例えば、ファイルのidが123でfoo.pdfというファイルへのアンカータグを書きたい場合はこのようになります:

<a href="./bin.php?id=123">foo.pdf<a>

クリックした結果はヘッダがブラウザに送られますので、ブラウザが扱えるメディアタイプ、例えHTMLファイルなどのようなテキストファイルや画像などはそのままブラウザに出力されます。ブラウザが表示出来ないメディアタイプ(例えば圧縮ファイルなど)は自動的にダウンロードファイルとなります。

アクセス解析で来訪者をチェック

アクセス解析機能を使って、簡単なアクセス解析が出来ます。アクセス解析機能の使用には別途設定をする必要はありません。通常のインストールとセットアップを済ませてあれば、何もすることなく使える状態になっているはずです。　「サイト管理」トップの「アクセス解析」ボタンをクリックすると表示されます。