Photosページ02 ・・・tumblr.

tumblr テーマ Cargo Theme グリッド表示

サムネール大きさ

Open時のレイアウトは初期設定のままグリッド表示にするとして、
ダッシュボードのカスタマイズメニューでグリッド表示時のサムネール画像数を1〜16コマまで指定できるのですが、3行くらいに収めるとしてもサムネール画像が大きいので小さくしてみました。

Cargo グリッド表示200px

グリッドサムネール200px

Cargo グリッド表示100px

グリッドサムネール100px

・・・続く

参考→Tumblr カスタムテーマの作り方(日本語訳)

グリッドレイアウトでサムネール画像を表示している変数 {PhotoURL-250} を幅100ピクセルサイズを表示する {PhotoURL-100} に変更します。サムネール間の間隔も30→6ピクセルにしてみました。

Cargoテーマ テンプレートソース360行目あたり
   {block:Photo}
   <div class="post_thumb" id="thumb_{PostID}">
    <div class="image photo rounded">
    <!-- PhotoURL-250 をPhotoURL-100に変更
     <div class="bg rounded" style="background-image:url('{PhotoURL-250}')"></div>
     -->
     <div class="bg rounded" style="background-image:url('{PhotoURL-100}')"></div>
     <div class="icon"></div>
    </div>
   </div>
   {/block:Photo}

CSS
.post_thumb{
	float:left;
/* original
	margin-right:30px;
	margin-bottom:30px;
	width:200px;
	height:200px;
*/ 
/* 幅・高さとサムネール間隔を狭く */
	margin-right:6px;
	margin-bottom:6px;
	width:100px;
	height:100px;
	position:relative;
}

他にも

.post_thumb 内の要素で大きさ指定があったもの

  • .post_thumb .image
  • .post_thumb .regular
  • .post_thumb .link
  • .post_thumb .loading
  • .post_thumb .photoset
  • .post_thumb .photoset .thumbs .thumb
  • .post_thumb .photoset .thumbs .thumb img
  • .post_thumb .info

.grid 内の要素

  • .grid .video .bg
  • .grid .image .bg
  • .grid .image .icon
  • .grid .photoset .icon

これらの中で幅・高さ指定がある箇所を
width:200px;→width:96px;
height:200px;→height:96px;に変更
他にもサムネール内でキャプション等の位置が指定してあったりするので、後で文字が隠れたりする箇所があれば修正が必要になりそうです。

サムネールクリックで拡大

サムネール画像が小さくなったとはいえ、クリックして拡大画像(左右500px)を表示させると、その拡大画像と説明文の高さだけグリッド部分が下がってしまいます。

モニターの大きさにもよりますが、縦長の画像や説明文が長いとサムネールが全部隠れてしまい、スクロールを繰り返さないといけないはめになってしまいます。

グリッド表示-拡大1

拡大するとグリッドサムネール画像が下に移動してしまう

グリッド表示-拡大2

縦長画像だとサムネールが隠れてしまう

tumblr Cargo Theme グリッド部分移動

グリッドサムネールのエリアが拡大表示エリアの下になっているので、これを右側に移動します。
幅100px+アキ6pxに変更したサムネールコマが3列入るように 320pxにしました。

そして#entry(多分500pxの写真を表示させるエリア)と.grid(グリッドエリア)をそれぞれ左右にフロートさせます。

CSS
/*メインコラム */
#main_column{
	margin:0px auto;
	width:900px;
	position:relative;
}
/* グリッドエリア */
#main_column .grid{
/*	width:780px; ---original*/
	width:320px; 
	float:right;	
}
/* グリッド内サムネール */
.post_thumb{
	width:100px;
	height:100px;
	margin-right:6px;
	margin-bottom:6px;
	position:relative;
}
/* 拡大写真エリア */
/* original
#entry,
.list{
	width:660px; 
}
    ↓   */
#entry {
	width:520px;
	float:left;
}
.list{
	width:640px;
}

これで一応、画像ビューア風のレイアウトになりましたが、tumblr.の変数タグがあまりよくわかっていないので何かおかしなところが出てくる可能性はありそうです。

グリッドレイアウトで開いた時の状態

グリッドレイアウトで開いた時の状態

サムネールクリックで拡大画像を表示

サムネールクリックで拡大画像を表示

参考→Tumblr カスタムテーマの作り方(日本語訳)

グリッドレイアウトでサムネール画像を表示している変数 {PhotoURL-250} を幅100ピクセルサイズを表示する {PhotoURL-100} に変更します。サムネール間の間隔も30→6ピクセルにしてみました。

Cargoテーマ テンプレートソース360行目あたり
   {block:Photo}
   <div class="post_thumb" id="thumb_{PostID}">
    <div class="image photo rounded">
    <!-- PhotoURL-250 をPhotoURL-100に変更
     <div class="bg rounded" style="background-image:url('{PhotoURL-250}')"></div>
     -->
     <div class="bg rounded" style="background-image:url('{PhotoURL-100}')"></div>
     <div class="icon"></div>
    </div>
   </div>
   {/block:Photo}

CSS
.post_thumb{
	float:left;
/* original
	margin-right:30px;
	margin-bottom:30px;
	width:200px;
	height:200px;
*/ 
/* 幅・高さとサムネール間隔を狭く */
	margin-right:6px;
	margin-bottom:6px;
	width:100px;
	height:100px;
	position:relative;
}

他にも

.post_thumb 内の要素で大きさ指定があったもの

  • .post_thumb .image
  • .post_thumb .regular
  • .post_thumb .link
  • .post_thumb .loading
  • .post_thumb .photoset
  • .post_thumb .photoset .thumbs .thumb
  • .post_thumb .photoset .thumbs .thumb img
  • .post_thumb .info

.grid 内の要素

  • .grid .video .bg
  • .grid .image .bg
  • .grid .image .icon
  • .grid .photoset .icon

これらの中で幅・高さ指定がある箇所を
width:200px;→width:96px;
height:200px;→height:96px;に変更
他にもサムネール内でキャプション等の位置が指定してあったりするので、後で文字が隠れたりする箇所があれば修正が必要になりそうです。

サムネールクリックで拡大

サムネール画像が小さくなったとはいえ、クリックして拡大画像(左右500px)を表示させると、その拡大画像と説明文の高さだけグリッド部分が下がってしまいます。

モニターの大きさにもよりますが、縦長の画像や説明文が長いとサムネールが全部隠れてしまい、スクロールを繰り返さないといけないはめになってしまいます。

グリッド表示-拡大1

拡大するとグリッドサムネール画像が下に移動してしまう

グリッド表示-拡大2

縦長画像だとサムネールが隠れてしまう

tumblr Cargo Theme グリッド部分移動

グリッドサムネールのエリアが拡大表示エリアの下になっているので、これを右側に移動します。
幅100px+アキ6pxに変更したサムネールコマが3列入るように 320pxにしました。

そして#entry(多分500pxの写真を表示させるエリア)と.grid(グリッドエリア)をそれぞれ左右にフロートさせます。

CSS
/*メインコラム */
#main_column{
	margin:0px auto;
	width:900px;
	position:relative;
}
/* グリッドエリア */
#main_column .grid{
/*	width:780px; ---original*/
	width:320px; 
	float:right;	
}
/* グリッド内サムネール */
.post_thumb{
	width:100px;
	height:100px;
	margin-right:6px;
	margin-bottom:6px;
	position:relative;
}
/* 拡大写真エリア */
/* original
#entry,
.list{
	width:660px; 
}
    ↓   */
#entry {
	width:520px;
	float:left;
}
.list{
	width:640px;
}

これで一応、画像ビューア風のレイアウトになりましたが、tumblr.の変数タグがあまりよくわかっていないので何かおかしなところが出てくる可能性はありそうです。

グリッドレイアウトで開いた時の状態

グリッドレイアウトで開いた時の状態

サムネールクリックで拡大画像を表示

サムネールクリックで拡大画像を表示

追記を閉じる

2013.09.21 | Comments(0)

Photosページ01 ・・・tumblr.

「Photos」ページにはtumblr(タンブラー)ページから写真一覧を埋込み表示させていたのですが、そのサムネールをクリックすると結局 タンブラーのページに移動してしまうので、タンブラーページをそのまま使うことにしました。

tumblr テーマ Cargo Theme を設定

写真向きのtumblr テーマはたくさんありそうですが、シンプルそうなCargo Themeを選びテーマに設定します。

Cargo テーマ グリッド表示

Cargoテーマ グリッド表示

Cargo テーマ リスト表示

Cargoテーマ リスト表示

とても使いやすいテーマだと思うのですが、他のページとイメージを合わせたいので少しアレンジしてみます。

・・・続く
ヘッダーとナビメニュー

テーマのHTMLと合わせてスタイルシートを編集したいので、元のテーマで読み込まれているスタイルシートを拝借し、適当な名前でサーバーにアップして、cssファイルの読み込み記述を変更します。

<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/xhpdxdi/sr4ljv5mk/style.css" />
                       ↓
<link rel="stylesheet" type="text/css" href="http://skizze.jp/paramy/css/photo.css" />

body タグの直後に他ページで使っているヘッダー/ナビゲーションの記述を挿入し、さっき作ったphoto.cssに背景画像、ヘッダー/ナビのスタイルを追加します。

body{
	background: url(http://skizze.jp/paramy/img/bg16.gif) left top #fffffa;
	margin:0;
	padding:0;
}
/* head-bar */
#head-bar {
	width:100%;
	height:160px;
	background: url(http://skizze.jp/paramy/img/menu-bar.jpg) repeat-x left 84px;
}
/* ヘッダー */
#header {
	width:900px;
	margin: 0 auto 16px auto;
	position:relative;
	height:84px;
}

 略
メインカラム位置

ヘッダー/ナビ部分ととメインカラムが重なり合ってます。
テーマテンプレートhtml と photo.css スタイルシートからそれらしい所を手探りでさがします。

ヘッダーとメインカラムが重なってしまう

<div id="main_column">が絶対位置指定になっている

#main_column 位置指定修正後<br />罫線はカラムの領域を表すために表示

#main_columnの位置を変更

 

#main_column{
/* オリジナル
	position:absolute;
	left:30px;
	top:30px;
	width:800px;
*/ 修正
	width:900px;
	margin:20px auto;
	position:relative;
	border:solid 1px; /*main_column の範囲を見るために罫線指定
}
ヘッダーとナビメニュー

テーマのHTMLと合わせてスタイルシートを編集したいので、元のテーマで読み込まれているスタイルシートを拝借し、適当な名前でサーバーにアップして、cssファイルの読み込み記述を変更します。

<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/xhpdxdi/sr4ljv5mk/style.css" />
                       ↓
<link rel="stylesheet" type="text/css" href="http://skizze.jp/paramy/css/photo.css" />

body タグの直後に他ページで使っているヘッダー/ナビゲーションの記述を挿入し、さっき作ったphoto.cssに背景画像、ヘッダー/ナビのスタイルを追加します。

body{
	background: url(http://skizze.jp/paramy/img/bg16.gif) left top #fffffa;
	margin:0;
	padding:0;
}
/* head-bar */
#head-bar {
	width:100%;
	height:160px;
	background: url(http://skizze.jp/paramy/img/menu-bar.jpg) repeat-x left 84px;
}
/* ヘッダー */
#header {
	width:900px;
	margin: 0 auto 16px auto;
	position:relative;
	height:84px;
}

 略
メインカラム位置

ヘッダー/ナビ部分ととメインカラムが重なり合ってます。
テーマテンプレートhtml と photo.css スタイルシートからそれらしい所を手探りでさがします。

ヘッダーとメインカラムが重なってしまう

<div id="main_column">が絶対位置指定になっている

#main_column 位置指定修正後<br />罫線はカラムの領域を表すために表示

#main_columnの位置を変更

 

#main_column{
/* オリジナル
	position:absolute;
	left:30px;
	top:30px;
	width:800px;
*/ 修正
	width:900px;
	margin:20px auto;
	position:relative;
	border:solid 1px; /*main_column の範囲を見るために罫線指定
}

追記を閉じる

2013.09.21 | Comments(0)

SoyCMSブログアレンジ07 ・・・ReadMore続き

追記文章下「追記を閉じる」の課題点

  1. 「続きを読む」の文字スタイルが開いた時のままになってしまう。
    最初に「続きを読む」クリックした時に付いたdtのクラス名 open がそのままになっているため。
  2. 「追記を閉じる」クリックで閉じると追記文の長さのまま下の位置で閉じられてしまう。

実はもう一つ問題点がありました。

  1. 追記文があってもなくても「続きを読む」が表示されてしまう。

(SoyCMS初期テンプレートで使われている cms:id="more_link" は追記があるときだけ自動的に現れてくれます)

今回はテンプレートに dlタグを直書きしているので、当然ながら自動表示・非表示というわけにいかず、なにか「続きを読む」をON・OFF設定する必要があります。

<!-- 今回のテンプレートhtml -->
<dl class"read_more">
	<dt>続きを読む</dt>
	<dd class="more_content">
		<!-- cms:id="more" -->続きがここに表示されます
		(cms:id="more" はSoyMCSで使用するブロックコード:追記文を出力)
		<!-- /cms:id="more" -->
		<p class="close">追記を閉じる</p> <!--追加部分 -->
	</dd>
</dl>

 

・・・続く
1. 「続きを読む」の文字スタイルを戻す

これは、JavaScript部分に一行追加することで解決しました。

$(function(){ 
//-----dl.read_more の子要素 dt(続きを読む)をクリックすると次の要素 dd が開閉
	$("dl.read_more dt").on("click",function(){ 
		$(this).next().slideToggle(750);
//-----dt にクラス名 openを付与
		$(this).toggleClass("open");
	});
//----------p.close「追記を閉じる」をクリックで、親要素 dd を開閉
	$("dd.more_content p.close").click(function(){
		$(this).parent().slideToggle(750);
//追加部分 -----dt に付けられたクラス名を削除------
		$("dl.read_more dt").toggleClass();
	});
});

これで「追記を閉じる」の方をクリックしても dtのクラス名 open がなくなり、「続きを読む」も元のスタイルに戻ります。

2. 「追記を閉じる」クリック後の戻り位置
3. 「続きを読む」を表示/非表示できるように

スクロール量を計算して巻き戻すようなスクリプトがあるのかもしれませんが、JavaScript は全く詳しくないので、記事の先頭にジャンプする方法で考えてみます。
元の位置といえば、「続きを読む」ですが、ここより記事タイトルにジャンプした方が自然な感じなので 次のような html を想定してみます。

<!-- 記事部分-->
<div class="entry">
	<!-- 記事カテゴリー表示(テンプレートではcms:id="category_link"とcms:id="category_name" を使う)
	<ul class="posted-cat">	
		<li><a href="category_link">category_name</a></li>
	</ul>
	<!-- 記事タイトルにIDを付けて「追記を閉じる」クリックからの戻り先に指定する -->
	<h2 id="post108" class="title">タイトル(テンプレートではcms:id="title" を使う)
		<span>・・・タイトル後にサブタイトル</span></h2>
	<h2 class="subtitle">タイトル下に副題</h2>
	<p>本文(前文)ここに表示</p>
	<dl class="read_more"><!-- 追記が無い場合 class="no_more” とし表示しないようにする -->
		<dt>続きを読む</dt>
		<dd class="more_content">
			<p>追記部分ここに表示</p>
			<p class="close"><a href="#post108">追記を閉じる</a></p>
		</dd>
	</dl><!-- 追記終わり -->
</div><!-- 記事部分終わり -->

上のhtml で斜体字でカラー背景になっている箇所が、記事ごとに違う内容を記述しないといけない部分です。

「アレンジ03・・・記事タイトル」でも使用したカスタムフィールドを作ります。

フィールドID 属性 フィールド記述例 出力 目的
sub-title-span   <span>・・・温故知新</span> <span>・・・温故知新</span> タイトル後ろにサブタイトル
sub-title-under   ─往年の 名機かも─ ─往年の名機 かも─ タイトル下行に副題
title-id id mac8500 id="mac8500" 記事タイトルに id を付ける
read-more class no_more class="no_more" 「続きを読む」の表示・非表示(クラス指定)を ラジオボタンで選択して
close-more-id href #mac8500 href="#mac8500" 「追記を閉じる」クリックで記事タイトルに移動

 

<!-- b_block:id="entry_list" エントリーの記述-->
<div class="entry">
	<!-- 記事カテゴリー表示-->
	<ul class="posted-cat">	
		<!-- cms:id="category_list" -->
		<li><a cms:id="category_link"><!-- cms:id="category_name" --><!-- /cms:id="category_name" --></a></li>
		<!-- /cms:id="category_list" -->
	</ul>
	<h2 cms:id="title-id" class="title">
		<!-- cms:id="title" -->タイトル<!-- /cms:id="title" -->
		<!--  cms:id="sub-title-span" -->タイトル後サブタイトル<!-- /cms:id="sub-title-span" -->
	</h2>
	<h2 class="subtitle"><!-- cms:id="sub-title-under" -->副題<!-- /cms:id="sub-title-under" --></h2>
	<div cms:id="content">本文</div>
	<dl cms:id="read-more"><!-- class="read_more" か class="no_more" をラジオボタンでチェック -->
		<dt>続きを読む</dt>
			<dd class="more_content">
			<!-- cms:id="more" -->追記部分がここに表示<!-- /cms:id="more" -->
			<p class="close"><a cms:id="close-more-id">h2タイトルに移動して追記を閉じる</a></p>
		</dd>
	</dl><!-- 追記終わり -->
</div><!-- エントリー終わり -->
<!-- /b_block:id="entry_list" エントリーの記述終わり -->

/*CSS追加 追記がない時は「続きを読む」は表示しない */
dl.no_more {display:none;}

カスタムフィールドを設定した記事編集画面

mac8500

カスタムフィールド:title-id は記事タイトルのID名を(xxxxxの部分)を出力

<h2 id="xxxxx" class="title">タイトル</h2>

カスタムフィールド:close-more-id は「追記を閉じる」クリック時の移動先(#xxxxxの部分)を出力します。

<p class="close"><a href="#xxxxx">追記を閉じる</a></p>

カスタムフィールド:read-more はラジオボタンチェックで dl(「続きを読む」以下追記部分を包含)にクラス名を出力します。

<dl class="read_more"> または <dl class="no_more">
1. 「続きを読む」の文字スタイルを戻す

これは、JavaScript部分に一行追加することで解決しました。

$(function(){ 
//-----dl.read_more の子要素 dt(続きを読む)をクリックすると次の要素 dd が開閉
	$("dl.read_more dt").on("click",function(){ 
		$(this).next().slideToggle(750);
//-----dt にクラス名 openを付与
		$(this).toggleClass("open");
	});
//----------p.close「追記を閉じる」をクリックで、親要素 dd を開閉
	$("dd.more_content p.close").click(function(){
		$(this).parent().slideToggle(750);
//追加部分 -----dt に付けられたクラス名を削除------
		$("dl.read_more dt").toggleClass();
	});
});

これで「追記を閉じる」の方をクリックしても dtのクラス名 open がなくなり、「続きを読む」も元のスタイルに戻ります。

2. 「追記を閉じる」クリック後の戻り位置
3. 「続きを読む」を表示/非表示できるように

スクロール量を計算して巻き戻すようなスクリプトがあるのかもしれませんが、JavaScript は全く詳しくないので、記事の先頭にジャンプする方法で考えてみます。
元の位置といえば、「続きを読む」ですが、ここより記事タイトルにジャンプした方が自然な感じなので 次のような html を想定してみます。

<!-- 記事部分-->
<div class="entry">
	<!-- 記事カテゴリー表示(テンプレートではcms:id="category_link"とcms:id="category_name" を使う)
	<ul class="posted-cat">	
		<li><a href="category_link">category_name</a></li>
	</ul>
	<!-- 記事タイトルにIDを付けて「追記を閉じる」クリックからの戻り先に指定する -->
	<h2 id="post108" class="title">タイトル(テンプレートではcms:id="title" を使う)
		<span>・・・タイトル後にサブタイトル</span></h2>
	<h2 class="subtitle">タイトル下に副題</h2>
	<p>本文(前文)ここに表示</p>
	<dl class="read_more"><!-- 追記が無い場合 class="no_more” とし表示しないようにする -->
		<dt>続きを読む</dt>
		<dd class="more_content">
			<p>追記部分ここに表示</p>
			<p class="close"><a href="#post108">追記を閉じる</a></p>
		</dd>
	</dl><!-- 追記終わり -->
</div><!-- 記事部分終わり -->

上のhtml で斜体字でカラー背景になっている箇所が、記事ごとに違う内容を記述しないといけない部分です。

「アレンジ03・・・記事タイトル」でも使用したカスタムフィールドを作ります。

フィールドID 属性 フィールド記述例 出力 目的
sub-title-span   <span>・・・温故知新</span> <span>・・・温故知新</span> タイトル後ろにサブタイトル
sub-title-under   ─往年の 名機かも─ ─往年の名機 かも─ タイトル下行に副題
title-id id mac8500 id="mac8500" 記事タイトルに id を付ける
read-more class no_more class="no_more" 「続きを読む」の表示・非表示(クラス指定)を ラジオボタンで選択して
close-more-id href #mac8500 href="#mac8500" 「追記を閉じる」クリックで記事タイトルに移動

 

<!-- b_block:id="entry_list" エントリーの記述-->
<div class="entry">
	<!-- 記事カテゴリー表示-->
	<ul class="posted-cat">	
		<!-- cms:id="category_list" -->
		<li><a cms:id="category_link"><!-- cms:id="category_name" --><!-- /cms:id="category_name" --></a></li>
		<!-- /cms:id="category_list" -->
	</ul>
	<h2 cms:id="title-id" class="title">
		<!-- cms:id="title" -->タイトル<!-- /cms:id="title" -->
		<!--  cms:id="sub-title-span" -->タイトル後サブタイトル<!-- /cms:id="sub-title-span" -->
	</h2>
	<h2 class="subtitle"><!-- cms:id="sub-title-under" -->副題<!-- /cms:id="sub-title-under" --></h2>
	<div cms:id="content">本文</div>
	<dl cms:id="read-more"><!-- class="read_more" か class="no_more" をラジオボタンでチェック -->
		<dt>続きを読む</dt>
			<dd class="more_content">
			<!-- cms:id="more" -->追記部分がここに表示<!-- /cms:id="more" -->
			<p class="close"><a cms:id="close-more-id">h2タイトルに移動して追記を閉じる</a></p>
		</dd>
	</dl><!-- 追記終わり -->
</div><!-- エントリー終わり -->
<!-- /b_block:id="entry_list" エントリーの記述終わり -->

/*CSS追加 追記がない時は「続きを読む」は表示しない */
dl.no_more {display:none;}

カスタムフィールドを設定した記事編集画面

mac8500

カスタムフィールド:title-id は記事タイトルのID名を(xxxxxの部分)を出力

<h2 id="xxxxx" class="title">タイトル</h2>

カスタムフィールド:close-more-id は「追記を閉じる」クリック時の移動先(#xxxxxの部分)を出力します。

<p class="close"><a href="#xxxxx">追記を閉じる</a></p>

カスタムフィールド:read-more はラジオボタンチェックで dl(「続きを読む」以下追記部分を包含)にクラス名を出力します。

<dl class="read_more"> または <dl class="no_more">

追記を閉じる

2013.09.17 | Comments(0)

SoyCMSブログアレンジ06 ・・・Read More

─「続きを読む」をアコーディオン化─

ブログでよくある「もっと読む」とか「続きを読む」「Read More」。
本文と追記を分けて表示する機能。

「追記」だから文字通り、手紙の PS.(Post Script)のように本文が終わったあとに追加文を添える使い方が本来かもしれませんが、編集用語でいう「リード文」を記事編集画面の「本文」に、続きを「追記」に記述することで、ブログトップの初期表示が<タイトル><リード文>だけになり見渡しがよくなります。

多くのブログシステムがこの「続きを読む」をクリックするとブログの個別記事に移動して全文を表示します。SoyCMSブログページの初期テンプレートでも

<a href="entry.html#more" cms:id="more_link">続きを読む</a>
more_link:対象記事(エントリー)の追記の表示された記事毎(エントリー)ページへのリンクを生成します。

SoyCMSマニュアル「トップページで利用可能なブロック」
となっており、「続きを読む」をクリックすると記事毎ページに移動します。

好みにもよりますが、ページ移動はなるべくしたくないので、「続きを読む」からの追記部分を同じページで開けるようにjQueryでアコーディオンメニューにしてみました。
クリックすると隠されていた部分が開き、もう一度クリックで閉じるという動きです。

・・・続く

jQueryに限ってもアコーディオンメニューの記述の仕方はたくさんあるのですが、LIGブログさんの記事を参考にさせていただいて

<!-- テンプレートhtml -->
<dl class="read_more">
	<dt>続きを読む</dt>
	<dd class="more_content">
		<!-- cms:id="more" -->
			追記部分がここに表示されます(cms:id="more" はSoyMCSで使用するブロックコード)
		<!-- /cms:id="more" -->
	</dd>
</dl>
/* CSS */
/* dl.read_more 子要素 dt 「続きを読む」のアイコンと文字色初期状態 */
dl.read_more dt { cursor:pointer; background:url(../img/mark-more.gif) left top no-repeat; padding: 1px 0 1px 16px; } /* dd以下の追記部分は非表示にしておく */ dl.read_more dd.more_content { display:none; } /* dtにクラスopenが付いた時(dd開き時)「続きを読む」のアイコンと文字色切り替え */
dl.read_more dt.open { background-image:url(../img/mark-more-act.gif) ; color:#aaa; }
//JavaScript部
<script src="/paramy/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){ 
	$("dl.read_more dt").on("click",function(){ 
//dl.read_more の子要素 dt(続きを読む)をクリックすると次の要素 dd が開閉
//閉じていれば開き、開いていれば閉じる(開閉スピード750のゆっくり目)
		$(this).next().slideToggle(750);
//同時にこの dt にクラス名 openを付与
		$(this).toggleClass("open");
	});
});
</script>

これで「続きを読む」クリックで、追記部分が開閉するようになりました。
しかし、追記部分が長いとまた「続きを読む」まで戻るのも面倒です。
そこで追記の終わりに「追記を閉じる」を追加します。

<!-- テンプレートhtml -->
<dl class="read_more">
	<dt>続きを読む</dt>
	<dd class="more_content">
		<!-- cms:id="more" -->続きがここに表示されます<!-- /cms:id="more" -->
		<p class="close">追記を閉じる</p> <!--追加部分 -->
	</dd>
</dl>
//JavaScript
$(function(){ 
	$("dl.read_more dt").on("click",function(){ 
		$(this).next().slideToggle(750);
		$(this).toggleClass("open");
	});
//追加部分
//----------p.close「追記を閉じる」をクリックで、親要素 dd をスピード750で開閉-------
	$("dd.more_content p.close").click(function(){
		$(this).parent().slideToggle(750);
	});
//追加部分ここまで	
});

これで、追記部分の下にある「追記を閉じる」クリックで閉じてくれるようになったのですが、問題点が二つ程発生してしまいました。

  • 「続きを読む」の文字スタイルが開いた時のままになってしまう。
    これは「続きを読む」クリックした時に付いたdtのクラス名 open がそのままになっているからか。開閉時にアイコンや文字色を切り替えないようにするか、クラス名を変更する必要がある。
  • 「追記を閉じる」クリックで閉じると追記の長さ分スクロールした位置で閉じられてしまう。
    追記文の長さが1000ピクセルあったとすると本来戻りたい「続きを読む」の位置から 1000ピクセル下あたりを表示してしまいます。

追記を閉じる(閉じ位置調整なし)

jQueryに限ってもアコーディオンメニューの記述の仕方はたくさんあるのですが、LIGブログさんの記事を参考にさせていただいて

<!-- テンプレートhtml -->
<dl class="read_more">
	<dt>続きを読む</dt>
	<dd class="more_content">
		<!-- cms:id="more" -->
			追記部分がここに表示されます(cms:id="more" はSoyMCSで使用するブロックコード)
		<!-- /cms:id="more" -->
	</dd>
</dl>
/* CSS */
/* dl.read_more 子要素 dt 「続きを読む」のアイコンと文字色初期状態 */
dl.read_more dt { cursor:pointer; background:url(../img/mark-more.gif) left top no-repeat; padding: 1px 0 1px 16px; } /* dd以下の追記部分は非表示にしておく */ dl.read_more dd.more_content { display:none; } /* dtにクラスopenが付いた時(dd開き時)「続きを読む」のアイコンと文字色切り替え */
dl.read_more dt.open { background-image:url(../img/mark-more-act.gif) ; color:#aaa; }
//JavaScript部
<script src="/paramy/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){ 
	$("dl.read_more dt").on("click",function(){ 
//dl.read_more の子要素 dt(続きを読む)をクリックすると次の要素 dd が開閉
//閉じていれば開き、開いていれば閉じる(開閉スピード750のゆっくり目)
		$(this).next().slideToggle(750);
//同時にこの dt にクラス名 openを付与
		$(this).toggleClass("open");
	});
});
</script>

これで「続きを読む」クリックで、追記部分が開閉するようになりました。
しかし、追記部分が長いとまた「続きを読む」まで戻るのも面倒です。
そこで追記の終わりに「追記を閉じる」を追加します。

<!-- テンプレートhtml -->
<dl class="read_more">
	<dt>続きを読む</dt>
	<dd class="more_content">
		<!-- cms:id="more" -->続きがここに表示されます<!-- /cms:id="more" -->
		<p class="close">追記を閉じる</p> <!--追加部分 -->
	</dd>
</dl>
//JavaScript
$(function(){ 
	$("dl.read_more dt").on("click",function(){ 
		$(this).next().slideToggle(750);
		$(this).toggleClass("open");
	});
//追加部分
//----------p.close「追記を閉じる」をクリックで、親要素 dd をスピード750で開閉-------
	$("dd.more_content p.close").click(function(){
		$(this).parent().slideToggle(750);
	});
//追加部分ここまで	
});

これで、追記部分の下にある「追記を閉じる」クリックで閉じてくれるようになったのですが、問題点が二つ程発生してしまいました。

  • 「続きを読む」の文字スタイルが開いた時のままになってしまう。
    これは「続きを読む」クリックした時に付いたdtのクラス名 open がそのままになっているからか。開閉時にアイコンや文字色を切り替えないようにするか、クラス名を変更する必要がある。
  • 「追記を閉じる」クリックで閉じると追記の長さ分スクロールした位置で閉じられてしまう。
    追記文の長さが1000ピクセルあったとすると本来戻りたい「続きを読む」の位置から 1000ピクセル下あたりを表示してしまいます。

追記を閉じる(閉じ位置調整なし)

追記を閉じる

2013.09.17 | Comments(0)

SoyCMSブログのアレンジ05 ・・・ソースのブロック化

使い回しをしたい部分をブロック化していきます。

ヘッダー・ナビゲーションメニュー・フッターの3パーツを部品のようにサイト内ソースとして保存しておき、ページごとに呼び出します。
PHPのinclude文で別に用意したファイルを読み込むのと同じようなものでしょうか。

変更が発生しても読み込み元の記述を書き直せばブロックを設定したページ全てに反映されるようになるので管理が楽になります。

・・・続く

ヘッダータイトル部分

  <div id="header-image">
   <img src="/paramy/img/table.png" alt="header-image" width="75" height="96" />
  </div>
  <h1><a href="/paramy/">ぱらむ・すきっちぇ</a></h1>
  <p id="desc">風のたより程の意</p>

のソースを header_inc 等、任意のタイトル名で記事として保存します。

同様に
ナビゲーションlist部分

    <li id="stanza"><a href="/paramy/">Stanza</a></li>
    <li id="photos"><a href="/paramy/photos/">Photos</a></li>
    <li id="skizze"><a href="/paramy/skizze/">Blog</a></li>
    <li id="about"><a href="/paramy/about/">About</a></li>

を gnavi_inc

フッター

 <footer id="footer">
  <p>&copy;&nbsp;dHaus&nbsp;&nbsp; <span>D Happy Agenda Unites Stanzas</span></p>
 </footer>

をfooter_inc として記事に保存。

テンプレートHTML側には替わりに

<!--headerの記述-->
 <!-- block:id="header" -->
  <!-- cms:id="content" --><!-- /cms:id="content" -->
 <!-- /block:id="header" -->

<!-- gnavi liの記述 -->
 <!-- block:id="gnavi" -->
  <!-- cms:id="content" --><!-- /cms:id="content" -->
 <!-- /block:id="gnavi" -->

<!--フッターの記述-->
 <!-- block:id="footer" -->
  <!-- cms:id="content" --><!-- /cms:id="content" -->
 <!-- /block:id="footer" -->

を代入します。

テンプレート編集画面「ブロック」タブをクリックするとブロックを設定する画面が表示されます。

ブロック設定画面01

まず header 「設定する」をクリック

記事表示用ブロックをチェックして「次へ」をクリック

記事を選択する画面が出るので先ほど保存した"header_inc" を追加して設定保存します。

残り二つのブロック設定も同様です。

これで最終的なテンプレートは

<!DOCTYPE   html>
<html>
<head>
<meta  charset="utf-8">
<title>ぱらむ・すきっちぇ |Blog:トップ</title>
<link rel="stylesheet" type="text/css" href="/paramy/css/style.css" />
<link rel="stylesheet" type="text/css" href="/paramy/css/skizze.css" />

 ---略---

</head>
<body>
<div id="head-bar">
<div id="wrapper">
 <header id="header">
 <!--headerの記述-->
  <!-- block:id="header" -->
   <!-- cms:id="content" --><!-- /cms:id="content" -->
  <!-- /block:id="header" -->
 <!--/headerの記述-->
  <nav id="nav">
   <ul id="navi-@@raw_page_title;">
  <!-- gnavi liの記述 -->
   <!-- block:id="gnavi" -->
    <!-- cms:id="content" --><!-- /cms:id="content" -->
   <!-- /block:id="gnavi" -->
  <!-- gnavi liの記述 -->
   </ul>
  </nav>
 </header>
 <!--ページメインの記述-->
 <div id="main-skizze">
  <!--中央コンテンツの記述-->
  <div id="content">
   <div class="post">
   <!-- b_block:id="entry_list" エントリーの記述-->
    <div class="entry">
     <ul class="posted-cat"> 
     <!-- cms:id="category_list" -->
      <li><a cms:id="category_link"><!-- cms:id="category_name" --><!-- /cms:id="category_name" --></a></li>
     <!-- /cms:id="category_list" -->
     </ul>
     <h2 class="title">
     <!-- cms:id="title" -->エントリータイトル01<!-- /cms:id="title" -->
     <!--  cms:id="sub-title-span" -->タイトルspan<!-- /cms:id="sub-title-span" -->
     </h2>
     <!-- cms:id="sub-title-under" -->サブタイトル<!-- /cms:id="sub-title-under" -->
     <div cms:id="content">記事テキスト表示</div>
     <div class="more_link"><a href="entry.html#more" cms:id="more_link">追記を読む</a></div>
     <p class="posted-date"><!-- cms:id="create_date" cms:format="Y.m.d" -->2008.02.00<!-- /cms:id="create_date" -->   |  <a href="#" cms:id="trackback_link">Trackback(<!-- cms:id="trackback_count" -->0<!-- /cms:id="trackback_count" -->)</a></p>
    </div>
    <!-- /b_block:id="entry_list" エントリーの記述-->
    
    <div class="pager">
     <a b_block:id="first_page">&lt;&lt;</a b_block:id="first_page">
     <!-- b_block:id="pager" cms:pager_num="10" -->
     <span class="pager_item" cms:id="pager_item"><a href="#">1</a></span>
     <!-- /b_block:id="pager" -->
     <a b_block:id="last_page">&gt;&gt;</a b_block:id="last_page">
     <!-- b_block:id="pages" /-->ページ中<!-- b_block:id="current_page" /-->ページ目
    </div>
   </div><!-- /post -->
  </div><!-- /contents -->
  <!--/中央コンテンツの記述-->
  <!--左サイドの記述-->
  <div id="sidebar">
   <ul>
    <!--プロフィールの記述-->
    <li>
     <h2 class="blog-title-info">Param Skizze&nbsp;<span>ぱらむ すきっちぇ</span></h2>
     <p class="blog-info" b_block:id="blog_description">ブログの説明がここに記述されます。</p b_block:id="blog_description">
     <p id="feed-link"><a b_block:id="rss_link">[RSS]</a><br /><a b_block:id="atom_link">[Atom]</a></p>
     <img id="feed-icon" src="/paramy/img/feed-icon-28x28.png" alt="FEED" width="28" height="28" />
    </li>
    <!--/プロフィールの記述--> 
    <!--カテゴリーの記述-->
    <li>
     <h2>カテゴリー</h2>
     <ul>
      <!-- b_block:id="category" カテゴリーリスト出力 -->
      <li><a href="#" title="" cms:id="category_link"><!-- cms:id="category_name" -->ダミーカテゴリー<!-- /cms:id="category_name" --></a> (<!-- cms:id="entry_count" -->00<!-- /cms:id="entry_count" -->) </li>
      <!-- /b_block:id="category" カテゴリーリストここまで -->
     </ul>
    </li>
    <!--/カテゴリーの記述--> 
    <!--アーカイブの記述-->
    <li>
     <h2>アーカイブ</h2>
     <ul>
     <!-- b_block:id="archive" 月別アーカイブ出力-->
      <li><a href="#" title="" cms:id="archive_link"><!-- cms:id="archive_month" cms:format="Y.m月" -->February 2008<!-- /cms:id="archive_month" --></a><span> (<!-- cms:id="entry_count" -->00<!-- /cms:id="entry_count" -->)</span></li>
     <!-- /b_block:id="archive" -->
     </ul>
    </li>
    <!--/アーカイブの記述--> 
   </ul>
  </div>
  <!--/左サイドの記述-->
 </div>
 <!--/メインの記述-->
<!-- このページトップへ -->
 <div id="jump-top"><a href="#">このページTOPへ</a></div>
</div>
<!-- end-wrapper -->

<!--フッターの記述-->
 <!-- block:id="footer" -->
  <!-- cms:id="content" --><!-- /cms:id="content" -->
 <!-- /block:id="footer" -->
<!--/フッターの記述-->
</div><!-- end-head-bar -->

</body>
</html>

ヘッダータイトル部分

  <div id="header-image">
   <img src="/paramy/img/table.png" alt="header-image" width="75" height="96" />
  </div>
  <h1><a href="/paramy/">ぱらむ・すきっちぇ</a></h1>
  <p id="desc">風のたより程の意</p>

のソースを header_inc 等、任意のタイトル名で記事として保存します。

同様に
ナビゲーションlist部分

    <li id="stanza"><a href="/paramy/">Stanza</a></li>
    <li id="photos"><a href="/paramy/photos/">Photos</a></li>
    <li id="skizze"><a href="/paramy/skizze/">Blog</a></li>
    <li id="about"><a href="/paramy/about/">About</a></li>

を gnavi_inc

フッター

 <footer id="footer">
  <p>&copy;&nbsp;dHaus&nbsp;&nbsp; <span>D Happy Agenda Unites Stanzas</span></p>
 </footer>

をfooter_inc として記事に保存。

テンプレートHTML側には替わりに

<!--headerの記述-->
 <!-- block:id="header" -->
  <!-- cms:id="content" --><!-- /cms:id="content" -->
 <!-- /block:id="header" -->

<!-- gnavi liの記述 -->
 <!-- block:id="gnavi" -->
  <!-- cms:id="content" --><!-- /cms:id="content" -->
 <!-- /block:id="gnavi" -->

<!--フッターの記述-->
 <!-- block:id="footer" -->
  <!-- cms:id="content" --><!-- /cms:id="content" -->
 <!-- /block:id="footer" -->

を代入します。

テンプレート編集画面「ブロック」タブをクリックするとブロックを設定する画面が表示されます。

ブロック設定画面01

まず header 「設定する」をクリック

記事表示用ブロックをチェックして「次へ」をクリック

記事を選択する画面が出るので先ほど保存した"header_inc" を追加して設定保存します。

残り二つのブロック設定も同様です。

これで最終的なテンプレートは

<!DOCTYPE   html>
<html>
<head>
<meta  charset="utf-8">
<title>ぱらむ・すきっちぇ |Blog:トップ</title>
<link rel="stylesheet" type="text/css" href="/paramy/css/style.css" />
<link rel="stylesheet" type="text/css" href="/paramy/css/skizze.css" />

 ---略---

</head>
<body>
<div id="head-bar">
<div id="wrapper">
 <header id="header">
 <!--headerの記述-->
  <!-- block:id="header" -->
   <!-- cms:id="content" --><!-- /cms:id="content" -->
  <!-- /block:id="header" -->
 <!--/headerの記述-->
  <nav id="nav">
   <ul id="navi-@@raw_page_title;">
  <!-- gnavi liの記述 -->
   <!-- block:id="gnavi" -->
    <!-- cms:id="content" --><!-- /cms:id="content" -->
   <!-- /block:id="gnavi" -->
  <!-- gnavi liの記述 -->
   </ul>
  </nav>
 </header>
 <!--ページメインの記述-->
 <div id="main-skizze">
  <!--中央コンテンツの記述-->
  <div id="content">
   <div class="post">
   <!-- b_block:id="entry_list" エントリーの記述-->
    <div class="entry">
     <ul class="posted-cat"> 
     <!-- cms:id="category_list" -->
      <li><a cms:id="category_link"><!-- cms:id="category_name" --><!-- /cms:id="category_name" --></a></li>
     <!-- /cms:id="category_list" -->
     </ul>
     <h2 class="title">
     <!-- cms:id="title" -->エントリータイトル01<!-- /cms:id="title" -->
     <!--  cms:id="sub-title-span" -->タイトルspan<!-- /cms:id="sub-title-span" -->
     </h2>
     <!-- cms:id="sub-title-under" -->サブタイトル<!-- /cms:id="sub-title-under" -->
     <div cms:id="content">記事テキスト表示</div>
     <div class="more_link"><a href="entry.html#more" cms:id="more_link">追記を読む</a></div>
     <p class="posted-date"><!-- cms:id="create_date" cms:format="Y.m.d" -->2008.02.00<!-- /cms:id="create_date" -->   |  <a href="#" cms:id="trackback_link">Trackback(<!-- cms:id="trackback_count" -->0<!-- /cms:id="trackback_count" -->)</a></p>
    </div>
    <!-- /b_block:id="entry_list" エントリーの記述-->
    
    <div class="pager">
     <a b_block:id="first_page">&lt;&lt;</a b_block:id="first_page">
     <!-- b_block:id="pager" cms:pager_num="10" -->
     <span class="pager_item" cms:id="pager_item"><a href="#">1</a></span>
     <!-- /b_block:id="pager" -->
     <a b_block:id="last_page">&gt;&gt;</a b_block:id="last_page">
     <!-- b_block:id="pages" /-->ページ中<!-- b_block:id="current_page" /-->ページ目
    </div>
   </div><!-- /post -->
  </div><!-- /contents -->
  <!--/中央コンテンツの記述-->
  <!--左サイドの記述-->
  <div id="sidebar">
   <ul>
    <!--プロフィールの記述-->
    <li>
     <h2 class="blog-title-info">Param Skizze&nbsp;<span>ぱらむ すきっちぇ</span></h2>
     <p class="blog-info" b_block:id="blog_description">ブログの説明がここに記述されます。</p b_block:id="blog_description">
     <p id="feed-link"><a b_block:id="rss_link">[RSS]</a><br /><a b_block:id="atom_link">[Atom]</a></p>
     <img id="feed-icon" src="/paramy/img/feed-icon-28x28.png" alt="FEED" width="28" height="28" />
    </li>
    <!--/プロフィールの記述--> 
    <!--カテゴリーの記述-->
    <li>
     <h2>カテゴリー</h2>
     <ul>
      <!-- b_block:id="category" カテゴリーリスト出力 -->
      <li><a href="#" title="" cms:id="category_link"><!-- cms:id="category_name" -->ダミーカテゴリー<!-- /cms:id="category_name" --></a> (<!-- cms:id="entry_count" -->00<!-- /cms:id="entry_count" -->) </li>
      <!-- /b_block:id="category" カテゴリーリストここまで -->
     </ul>
    </li>
    <!--/カテゴリーの記述--> 
    <!--アーカイブの記述-->
    <li>
     <h2>アーカイブ</h2>
     <ul>
     <!-- b_block:id="archive" 月別アーカイブ出力-->
      <li><a href="#" title="" cms:id="archive_link"><!-- cms:id="archive_month" cms:format="Y.m月" -->February 2008<!-- /cms:id="archive_month" --></a><span> (<!-- cms:id="entry_count" -->00<!-- /cms:id="entry_count" -->)</span></li>
     <!-- /b_block:id="archive" -->
     </ul>
    </li>
    <!--/アーカイブの記述--> 
   </ul>
  </div>
  <!--/左サイドの記述-->
 </div>
 <!--/メインの記述-->
<!-- このページトップへ -->
 <div id="jump-top"><a href="#">このページTOPへ</a></div>
</div>
<!-- end-wrapper -->

<!--フッターの記述-->
 <!-- block:id="footer" -->
  <!-- cms:id="content" --><!-- /cms:id="content" -->
 <!-- /block:id="footer" -->
<!--/フッターの記述-->
</div><!-- end-head-bar -->

</body>
</html>

追記を閉じる

2013.09.11 | Comments(0)

SoyCMSブログのアレンジ04 ・・・記事にカテゴリ名を表示

SoyCMSマニュアル「トップページで利用可能なブロック」

cms:id の category_name が記事に付けられたカテゴリー名を表示するようです。

エントリーの記述の中に category_list とセットで category_name を追加します。

・・・続く
<!-- b_block:id="entry_list" エントリーの記述-->
 <div class="entry">
  <ul class="posted-cat"> 
  <!-- cms:id="category_list" -->
   <li><a cms:id="category_link"><!-- cms:id="category_name" --><!-- /cms:id="category_name" --></a></li>
  <!-- /cms:id="category_list" -->
  </ul>
  <h2 class="title">
  <!-- cms:id="title" -->エントリータイトル01<!-- /cms:id="title" -->
  <!--  cms:id="sub-title-span" -->タイトルspan<!-- /cms:id="sub-title-span" -->
  </h2>
  <!-- cms:id="sub-title-under" -->サブタイトル<!-- /cms:id="sub-title-under" -->
  <div cms:id="content">記事本文</div>
  ---略---
  </div>
<!-- /b_block:id="entry_list" エントリーの記述ここまで-->

---CSS---
.entry ul.posted-cat {
	width:500px;
	position:absolute;
	top:-8px;
	right:20px;
}
.entry ul.posted-cat li {
	width:auto;
	float:right;
	background-color: #888;
	border-radius: 3px;
	padding: 1px 3px;
	margin-left:3px;
	font-size: 0.9em;
}
.entry ul.posted-cat li a {	
	display:block;
	color: #ffffff;
}
.entry ul.posted-cat li a:hover {	
	color: #555;
}

記事にカテゴリー表示

<!-- b_block:id="entry_list" エントリーの記述-->
 <div class="entry">
  <ul class="posted-cat"> 
  <!-- cms:id="category_list" -->
   <li><a cms:id="category_link"><!-- cms:id="category_name" --><!-- /cms:id="category_name" --></a></li>
  <!-- /cms:id="category_list" -->
  </ul>
  <h2 class="title">
  <!-- cms:id="title" -->エントリータイトル01<!-- /cms:id="title" -->
  <!--  cms:id="sub-title-span" -->タイトルspan<!-- /cms:id="sub-title-span" -->
  </h2>
  <!-- cms:id="sub-title-under" -->サブタイトル<!-- /cms:id="sub-title-under" -->
  <div cms:id="content">記事本文</div>
  ---略---
  </div>
<!-- /b_block:id="entry_list" エントリーの記述ここまで-->

---CSS---
.entry ul.posted-cat {
	width:500px;
	position:absolute;
	top:-8px;
	right:20px;
}
.entry ul.posted-cat li {
	width:auto;
	float:right;
	background-color: #888;
	border-radius: 3px;
	padding: 1px 3px;
	margin-left:3px;
	font-size: 0.9em;
}
.entry ul.posted-cat li a {	
	display:block;
	color: #ffffff;
}
.entry ul.posted-cat li a:hover {	
	color: #555;
}

記事にカテゴリー表示

追記を閉じる

2013.09.11 | Comments(0)

顎関節症 02

最近、近所にできた歯科医院の看板の診療科目に "口腔外科" と書いてあったので、ひとまず診てもらうことに

さすがに新しい医院らしく、待合室には 液晶テレビでDVD放映中、それに"インターネット常時接続中、ご自由にお使い下さい” とパソコンが置いてある。

治療椅子(というのかどうか知らないけど)に座るとここにも液晶モニターで放映中。映画なぞ観る気分じゃないけどなぁと思いつつ、まずレントゲン室で撮ってもらって、椅子に戻ると即、今のレントゲン写真がモニターに映し出される。すげぇ

もうレントゲン写真もデジタル化されて現像しないんだ。「たしか、フィルムメーカーの最大のドル箱じゃなかったかしら、レントゲンフィルムは」とか「現像があがってくる待ち時間の余韻がよかったのになぁ」とまた、いらんことを考えてしまう。

診察の結果は、関節には異常がないので多分一過性の痛みでしょうとのこと。
じゃ、最近の物忘れのひどさは何だったんだろう?

あごが痛い人のために、その先生のアドバイスを一応紹介しておきます。

  1. 口を安静にする。

    どうやって安静にするのか不思議だが、口を噛み締めない、歯ぎしりしない等。

  2. あごのマッサージを心がける。

    下あごを突き出して上前歯の先と下前歯の先を合わせた位置で口をぱくぱく開け閉めする。これで迫圧された顎関節が広げられ楽になるらしい。あまり人前ではできないかも。 私の場合は、これで2週間ほど様子をみましょうと言われたのだが、
    それでも痛みが引かないようなら、

  3. 一定期間鎮痛消炎剤を服用する。

    痛み止めは気休めにしても、消炎剤が効けば関節の炎症が治まる。それでも駄目なら、

  4. 噛み合わせを調節するプレートを作って口の中にかましておく。

    ボクシングのマウスピースの親戚みたいなもので下あごの位置を矯正。できるだけ一日中、寝る時もはめておくそうな。
    でも食事の時は外さないといけない。入れ歯と間違われそうな気もする。開業医でできるのはここまでで、それでも治らないようなら、

  5. 覚悟を決めて専門の大病院に行く。

    口もろくに開けれない状態にまでなると、外科的治療ということなのでしょう。

・・・続く

追記を閉じる

2013.09.11 | Comments(0)

顎関節症 01

ここ数日、あごが痛い。40肩とか膝が痛むとかと同様、トシ相応にあごの関節がいたんでるのかと思いつつ、食べる時以外は気にならないのでそのうち治るかなとほっといてたが、ことはそう簡単ではないようで・・・

おちょぼ口でしか食べられないから、ちょっとしたランチでも30分以上かかるし、ごはんが口からこぼれたりして情けない状態になってきた。当然、食べるのが億劫になってくる。

(魚の目やおできとか虫歯とか・・・)いじましい病気は別として健康、特に胃腸には変な自信があって、妻によく「歳とって、どこもかしこも衰えて、金も無く、頭もぼけてるのに、メシメシと食欲だけ残ったら、そんな人は面倒みてやらん」と言われていたのに、頭はともかくとして、最後の砦(^_^;)の食欲があやしくなってきた。

仕方なく、ネットで"顎関節症"を検索。いきなり

原因治療を行わない限り 顎関節症は永久に治すことはできません。 今すぐお読み下さい!

ときた。

くわしくは、 バイオプレート治療/顎関節症は・・・ を見ていただくとして、

末期症状になると

  • ◆口が5mm以上開かなくなる(開口障害)
  • ◆情緒不安定になりパニック症・鬱病になる
  • ◆免疫力が低下し、アトピー、喘息、膠原病などの病気になる
  • ◆頚椎・せき髄の変型から腰痛が悪化し、寝込んだままになる
  • ◆自律神経失調症がすすみ、精神的な異常(ノイローゼ)になる
  • ◆脳への血流低下により認知症になる

とまで書かれている。

このままでは妻の言ったとおりになってしまうので、とりあえず、病院をさがそう・・・悲しい

・・・続く

追記を閉じる

2013.09.10 | Comments(0)

ぶーけ

ぶーけ創刊号

『ぶーけ』創刊号(集英社 発刊昭和53年9月)

かなり昔の本です。廃品回収にそなえて新聞なぞをくくっていると、漫画本が何冊か出てきました。その中で捨てられなかった一冊。

別に少女まんが趣味とか創刊号マニアではないのですが、実は陸奥A子や田淵由美子の隠れファンだったというのは内緒です。

・・・続く

諸行無常というか、いつごろからか物を持っておくことにそう執着がなくなってきた気がしますし、現実、住宅事情が許しません。とはいえ、たまにこういう古いものを見つけるとついつい記憶の底が撹拌されてしまうものです!

いわく、月刊『市民』(出版元は忘れた。日高六郎さんとか鶴見俊介さんあたりが主宰だったと思う)創刊号から20号くらいか?卒業した頃に休刊になったような──学生時代を過ごした下宿に寄贈)

月刊『漫画少年』(朝日ソノラマ ガロほど古くないが、手塚治虫「火の鳥」竹宮恵子「地球へ」ますむらひろし「アタゴオル物語」高橋葉介「夢幻紳士」などを連載。やはり卒業頃休刊になったような、出ない月もあったから2〜30冊か──同じく下宿に寄贈)

月刊『日経MAC』創刊号から4年間分ほど(廃刊か?──退職時に会社に寄贈)

寄贈といえばきこえはいいが、もらった方もいい迷惑なのです、多分。

しかし、出版不況といいながら、出版点数は毎年増え続け、当然それ以上のペースで廃刊・絶版も増えています。本屋さんも古本屋さんも段々とスーパーマーケット化してる気がします。
漫画に限らず、ある日突然、読みたくなった時、Amazonに無ければ、二度と手に入らないってことはかなりありそうです。

本ではありませんが、数年前、絶版になったCDアルバムを「在庫僅少」で注文しました。日本の音楽家で版元はオーストラリアでしたが、「今世界中から在庫をさがしてるからもう少し待て」という英文メールが3ヶ月に一度くらい届くだけで、それでも1年近くかかって無事届いたからラッキーだったのでしょう。

電子本もどこまで期待していいものか、紙本の救済よりも新しいマーケットを作る方が先決のようですし。

とりあえず復刊ドットコムに投票してから考えてみます(^^;

諸行無常というか、いつごろからか物を持っておくことにそう執着がなくなってきた気がしますし、現実、住宅事情が許しません。とはいえ、たまにこういう古いものを見つけるとついつい記憶の底が撹拌されてしまうものです!

いわく、月刊『市民』(出版元は忘れた。日高六郎さんとか鶴見俊介さんあたりが主宰だったと思う)創刊号から20号くらいか?卒業した頃に休刊になったような──学生時代を過ごした下宿に寄贈)

月刊『漫画少年』(朝日ソノラマ ガロほど古くないが、手塚治虫「火の鳥」竹宮恵子「地球へ」ますむらひろし「アタゴオル物語」高橋葉介「夢幻紳士」などを連載。やはり卒業頃休刊になったような、出ない月もあったから2〜30冊か──同じく下宿に寄贈)

月刊『日経MAC』創刊号から4年間分ほど(廃刊か?──退職時に会社に寄贈)

寄贈といえばきこえはいいが、もらった方もいい迷惑なのです、多分。

しかし、出版不況といいながら、出版点数は毎年増え続け、当然それ以上のペースで廃刊・絶版も増えています。本屋さんも古本屋さんも段々とスーパーマーケット化してる気がします。
漫画に限らず、ある日突然、読みたくなった時、Amazonに無ければ、二度と手に入らないってことはかなりありそうです。

本ではありませんが、数年前、絶版になったCDアルバムを「在庫僅少」で注文しました。日本の音楽家で版元はオーストラリアでしたが、「今世界中から在庫をさがしてるからもう少し待て」という英文メールが3ヶ月に一度くらい届くだけで、それでも1年近くかかって無事届いたからラッキーだったのでしょう。

電子本もどこまで期待していいものか、紙本の救済よりも新しいマーケットを作る方が先決のようですし。

とりあえず復刊ドットコムに投票してから考えてみます(^^;

追記を閉じる

2013.09.10 | Comments(0)

SoyCMSブログのアレンジ03 ・・・記事タイトル

─記事タイトルに副題をつけてみる─

テンプレート内の記事出力部分のソースです。

    <!-- b_block:id="entry_list" エントリーの記述-->
    <div class="entry">
     <h2 class="title" cms:id="title">タイトル表示</h2 cms:id="title">
     <div cms:id="content">テキスト表示</div>
     <div class="more_link"><a href="entry.html#more" cms:id="more_link">追記を読む</a></div>
     <p class="posted-date"><!-- cms:id="create_date" cms:format="Y.m.d" -->2008.02.00<!-- /cms:id="create_date" -->   |  <a href="#" cms:id="trackback_link">Trackback(<!-- cms:id="trackback_count" -->0<!-- /cms:id="trackback_count" -->)</a></p>
    </div>
    <!-- /b_block:id="entry_list" エントリーの記述-->

cms:id="title" が記事につけられたタイトルを書き出してくれますが、このままでは<h2>などの見出しタグで囲んでスタイル指定するくらいしかレイアウト方法がなさそうです。
タイトルの後ろにサブタイトルを付けて大きさや色を変えたいのでSoyCMSに同梱されている「カスタムフィールドプラグイン」というのを試してみます。

・・・続く

カスタムフィールド登録画面

使い方の説明(プラグイン説明から引用)

エントリーに対して、任意のフィールドを追加することができます。

例えば、IDに「customer」を設定し、フィールド名に「連絡先」を設定すると、エントリー編集画面にカスタムフィールド:連絡先と書かれた入力項目が追加されます。
ここで入力したデータは cms:id="customer" で表示させることが可能です。

チェックボックスではチェックされたときにフィールド名が値として保持されます(<input type="checkbox" value="[フィールド名]">)。
ただし初期値が設定されている場合は初期値を値として使います(<input type="checkbox" value="[初期値]">)。

要するにブログの記事の中にもテンプレートのようなものが作れる機能のようです。

  • タイトルの後ろサブタイトル用に【"sub-title-span" 】初期値:<span></span>
    (テンプレート中では cms;id="sub-title-span" と記述)
  • タイトル下、副題用に【"sub-title-under" 】初期値:なし
    (テンプレート中では cms;id="sub-title-under" と記述)

と2つのフィールドを作りました。

プラグイン設定後は、記事編集画面にカスタムフィールド入力欄が表示されるようになります。

カスタムフィールド入力欄

ページテンプレートのタイトル表示部分を次のように書き換え

<h2 class="title">
	<!-- cms:id="title" -->エントリータイトル01<!-- /cms:id="title" -->
	<!-- cms:id="sub-title-span" -->サブタイトル<!-- /cms:id="sub-title-span" -->
</h2>
<h2 class="subtitle"><!-- cms:id="sub-title-under" -->副題<!-- /cms:id="sub-title-under" --></h2>

記事編集画面のカスタムフィールド
【sub-title-span】に〔 <span>-・・・記事タイトル</span> 〕
【sub-title-under】に〔 ─記事タイトルに副題をつけてみる─ 〕
をそれぞれ入力するとこのようなタイトルの状態になります。

副題つきタイトル

書き出されたソース

<h2 class="title">
	<a href="/paramy/skizze/post/customize03">ブログアレンジ03</a>
	<span>・・・記事タイトル</span>
</h2>
<h2 class="subtitle">─記事タイトルに副題をつけてみる─</h2>

タイトル2行目(ソース5行目)の副題は、記事本文中に記述してもかまわないのですが、カスタムフィールド化することでテンプレート上で自由に扱えるようになるので、いろいろなタイトルバリエーションができそうです。

カスタムフィールド登録画面

使い方の説明(プラグイン説明から引用)

エントリーに対して、任意のフィールドを追加することができます。

例えば、IDに「customer」を設定し、フィールド名に「連絡先」を設定すると、エントリー編集画面にカスタムフィールド:連絡先と書かれた入力項目が追加されます。
ここで入力したデータは cms:id="customer" で表示させることが可能です。

チェックボックスではチェックされたときにフィールド名が値として保持されます(<input type="checkbox" value="[フィールド名]">)。
ただし初期値が設定されている場合は初期値を値として使います(<input type="checkbox" value="[初期値]">)。

要するにブログの記事の中にもテンプレートのようなものが作れる機能のようです。

  • タイトルの後ろサブタイトル用に【"sub-title-span" 】初期値:<span></span>
    (テンプレート中では cms;id="sub-title-span" と記述)
  • タイトル下、副題用に【"sub-title-under" 】初期値:なし
    (テンプレート中では cms;id="sub-title-under" と記述)

と2つのフィールドを作りました。

プラグイン設定後は、記事編集画面にカスタムフィールド入力欄が表示されるようになります。

カスタムフィールド入力欄

ページテンプレートのタイトル表示部分を次のように書き換え

<h2 class="title">
	<!-- cms:id="title" -->エントリータイトル01<!-- /cms:id="title" -->
	<!-- cms:id="sub-title-span" -->サブタイトル<!-- /cms:id="sub-title-span" -->
</h2>
<h2 class="subtitle"><!-- cms:id="sub-title-under" -->副題<!-- /cms:id="sub-title-under" --></h2>

記事編集画面のカスタムフィールド
【sub-title-span】に〔 <span>-・・・記事タイトル</span> 〕
【sub-title-under】に〔 ─記事タイトルに副題をつけてみる─ 〕
をそれぞれ入力するとこのようなタイトルの状態になります。

副題つきタイトル

書き出されたソース

<h2 class="title">
	<a href="/paramy/skizze/post/customize03">ブログアレンジ03</a>
	<span>・・・記事タイトル</span>
</h2>
<h2 class="subtitle">─記事タイトルに副題をつけてみる─</h2>

タイトル2行目(ソース5行目)の副題は、記事本文中に記述してもかまわないのですが、カスタムフィールド化することでテンプレート上で自由に扱えるようになるので、いろいろなタイトルバリエーションができそうです。

追記を閉じる

2013.09.09 | Comments(0)

<< 1 2 3 >> 3ページ中2ページ目