CSS」タグアーカイブ

iPad手書きアプリ「Noteshelf」向け能率手帳風テンプレートを作ってみました

膨大な数のiPadアプリの中でも、Must-Haveなものの一つとして定評のある手書きアプリ「Noteshelf」。とにかく書き心地がよくて、本当に癖になります。でも、ここ一年程セキュリティーの厳しい職場だったためスマホやタブレットなど録音や録画、撮影が可能なデバイスは休止して所謂システム手帳を使っていました。能率手帳Bindexから出ているDiaryリフィルをひさしぶりに手に入れて使ってみましたがこれが素晴らしい。「Noteshelf」に戻れなくなるんじゃないかと考えた程でした。

そこで「Noteshelf」と「能率手帳」風Diaryの好いとこ取りをしようと、能率手帳風「紙のスタイル」の元データをHTML5+CSSで作成してみました。

標準の「紙のスタイル」の中にも「日程表」が提供されていますが

「日程表」という「紙のスタイル」が元々提供されており、これでも大丈夫そうですが、やはり使い慣れたものがいいですよね。HTML5+CSSで作成してみました。

能率手帳風Diary表示ページはこちら

スリム版はこちら。1ページにメモとスケジュールを収めました

スリム版V2はこちら。複数日のPDF出力のため基準日と日数を指定できるようにしました
スリム版V2の2017年版はこちら。2017年元日から365日分表示します。印刷にPrimoPDF等のPDF出力アプリを使えばNoteshelfで使えます
スリム版V2の当月分はこちら。ただし31日分でるので変更するときはURLのパラメータを変えてください

月間目標版はこちら。2015年と2016年があります

日付部分のみ一週間分表示はこちら

左上にある日付の場所をタッチすると日付選択ができ、右上や左上にある日付に関連する表示を変更してくれます。能率手帳風Diaryの左ページ(メモ用)と右ページ(スケジュールやチェックリスト)を一度に表示します。iPad等で画像を取り込むときは、左右のページをそれぞれ取り込むか、横向き使用を想定して一度に取り込むかします。

iPadでの表示テストは初代iPad-miniを使用しており、新iPad-miniを含み歴代の標準サイズのiPadでは試していません。解像度の関係で表示結果がまちまちになるかも知れません。

iPad手書きアプリ「Noteshelf」への取り込み方法

ステップ1:iPadで上記ページにアクセスしてDiaryページを表示する

ステップ2:電源ボタン+ホームボタンの同時ONでDiaryページの画像を保存する

ステップ3:「Noteshelf」アプリを起動して

ステップ4:「ノートの新規作成」(書棚モードの右隅にある「+」を丸で囲んだアイコンをタッチ)

ステップ5:「ノートをカスタマイズ」の上段を「すべてのスタイル」から「カスタム」に変更

ステップ6:スタイルの新規追加でステップ2で保存した画像を設定する

カスタム「紙のスタイル」にはダイナミック表示の機能がない

カスタムスタイルを作ったのはいいのですが、自分であれこれ使ってみて、カスタム「紙のスタイル」にいちいち登録して使うのは根気が必要だと感じました。もちろん、日付部分を空にして手書きで入れればいいのですが、それだと「日程表」と変わらなくなり、ちょっとつまらない。

ストアで探せばいいのかな?

やはりダイナミックな「紙のスタイル」というのは原理的に難しいのでしょうね。しばらく使ってみていろいろ工夫してみようと思います。

DropboxなどからPDFを読み込む方法もあるようです

Noteshelfではテンプレートを使ってノートを作成する方法のほかに、DropboxなどからPDFを読み込む方法があるようです。これだと複数ページにわたるテンプレートのように使うことができますね。
スリム版をH29年分でまとめたPDFはこちら
スリム版をH29年12月分でまとめたPDFはこちら
スリム版をH29年11月分でまとめたPDFはこちら
スリム版をH29年10月分でまとめたPDFはこちら
スリム版をH29年9月分でまとめたPDFはこちら
スリム版をH29年8月分でまとめたPDFはこちら
スリム版をH29年7月分でまとめたPDFはこちら
スリム版をH29年6月分でまとめたPDFはこちら
スリム版をH29年5月分でまとめたPDFはこちら
スリム版をH29年4月分でまとめたPDFはこちら
スリム版をH29年3月分でまとめたPDFはこちら
スリム版をH29年2月分でまとめたPDFはこちら
スリム版をH29年1月分でまとめたPDFはこちら
スリム版をH28年12月分でまとめたPDFはこちら
スリム版をH28年11月分でまとめたPDFはこちら
スリム版をH28年10月分でまとめたPDFはこちら
スリム版をH28年9月分でまとめたPDFはこちら
スリム版をH28年8月分でまとめたPDFはこちら
スリム版をH28年7月分でまとめたPDFはこちら
スリム版をH28年6月分でまとめたPDFはこちら
スリム版をH28年5月分でまとめたPDFはこちら
スリム版をH28年4月分でまとめたPDFはこちら
スリム版をH28年3月分でまとめたPDFはこちら
スリム版をH28年2月分でまとめたPDFはこちら
スリム版をH28年1月分でまとめたPDFはこちら
スリム版を12月分でまとめたPDFはこちら
スリム版を11月分でまとめたPDFはこちら
スリム版を10月分でまとめたPDFはこちら
スリム版を9月分でまとめたPDFはこちら
スリム版を8月分でまとめたPDFはこちら
スリム版を7月分でまとめたPDFはこちら
スリム版を6月分でまとめたPDFはこちら
スリム版を5月分でまとめたPDFはこちら

関連する記事・ページ

お世話になったリンク

以上です。

WordPress:ブログのURLを変更したい

ブログのURLを変更したい

WordPressの設置方法について、インストールしたURLと設置したい(訪問者に見せたい)URLを別にしたい場合があると思います。このトピックを扱った記事は結構多いのですが、ほとんどがルートURLへの設置場所変更の方法についてのもので、ルートURL以外への設置場所変更の方法がなかったので、ここに記します。ここでは「インストールしたURLと同レベルのURLに設置する」場合を説明します。

このブログ自体、最近jblogからblogに設置場所を変更しました(インストールURLは変更せずに)。マニュアルで設定したリンクなど、もしかするとjblogのままのものもあるかも知れませんがそれはそれできちんと表示できるようです。ここでは、

http://krasavkana.com/jblog:インストールURL
http://krasavkana.com/blog:設置URL

のように、設置URLをインストールURLと同レベルのところにおきたい場合の方法です。

手順は、

  1. WordPressに管理者でLOGINして、「設定」にある「サイトのアドレス (URL)」を変更する
  2. 自宅サーバやレンタルサーバにて、(ファイルマネージャなどで)設置URLのフォルダを新規作成する
  3. index.phpおよび.htaccessをインストールURLから設置URLのフォルダにコピーする
  4. 設置URLにコピーしたindex.phpを編集する
  5. パーマリンクをデフォルトから変更している場合は再設定する

以上でOKのようです。設置URLにコピーした.htaccessを変更する必要もありませんでした

WordPressに管理者でLOGINして、「設定」にある「サイトのアドレス (URL)」を変更する

(変更前)

サイトのアドレス(URL):http://krasavkana.com/jblog

(変更後)

サイトのアドレス(URL):http://krasavkana.com/blog

自宅サーバやレンタルサーバにて、設置URLのフォルダを新規作成する

ファイルマネージャなどのマニュアルを参照してください

index.phpおよび.htaccessをインストールURLから設置URLの(ファイルマネージャなどで)フォルダにコピーする

ファイルマネージャなどのマニュアルを参照してください

設置URLにコピーしたindex.phpを編集する

ファイルマネージャなどのマニュアルを参照してください。たとえば、

http://krasavkana.com/blog/index.php
<?php
/**
 * Front to the WordPress application. This file doesn't do anything, but loads
 * wp-blog-header.php which does and tells WordPress to load the theme.
 *
 * @package WordPress
 */

/**
 * Tells WordPress to load the WordPress theme and output it.
 *
 * @var bool
 */
define('WP_USE_THEMES', true);

/** Loads the WordPress Environment and Template */
require('../jblog/wp-blog-header.php');
?>

の最後の行を変更。同列のフォルダ(URL)に設置する場合はドット2つを使って相対パスを指定する必要があります

(変更前)

require('./wp-blog-header.php');

(変更後)

require('../jblog/wp-blog-header.php');

パーマリンクをデフォルトから変更している場合は再設定する

「設定」-「パーマリンク設定」

参考にしたもの

WordPress を専用ディレクトリに配置する – WordPress Codex 日本語版

c 2011 KrasavKana

H1,H2のスタイルを変更する!テーマTwentyelevenのカスタマイズ(2)

最近あまり人気がないのか、最新デフォルトテーマであるTwentyelevenに関するカスタマイズ記事が多くないように感じましたので、ここに(自分が試したことだけですが)情報を残します。

  1. ブログ名を画像にする
  2. H1,H2のスタイルを変更する

H1,H2のスタイルを変更する

このブログ自体がその実験場と化していますが、テーマTwentyelevenのH1,H2のスタイルを変えました。

変更したソースは1つ。

  1. style.cssの変更

style.cssの変更

720行目あたりに

.entry-title {
	clear: both;
	color: #222;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.5em;
	padding-bottom: .3em;
	padding-top: 15px;
	padding-left: 20px;
	border-left: 15px solid #556b2f;/* customized at 20111008JST0938 refer to http://www.colordic.org/ */
	border-bottom: 1px solid #808080;/* customized at 20111008JST0938 */
}

の最後の2行を追加。もちろんほかの設定でも面白いと思います。

756行目あたりに

.entry-content h1,
.entry-content h2,
.comment-content h1,
.comment-content h2 {
	color: #000;
	font-weight: bold;
	margin: 0 0 .8125em;
	border-bottom: 3px solid #808080;/* customized at 20111008JST0938 */
}

の最後の1行を追加。実例は本ブログを見てください

お世話になったリンク

デフォルトテーマのカスタマイズ:ブログタイトルを画像にする

デフォルトテーマのカスタマイズ:見出しタグの変更

以上です。

ブログ名を画像にする!テーマTwentyelevenのカスタマイズ(1)

最近あまり人気がないのか、最新デフォルトテーマであるTwentyelevenに関するカスタマイズ記事が多くないように感じましたので、ここに(自分が試したことだけですが)情報を残します。

  1. ブログ名を画像にする
  2. H1,H2のスタイルを変更する

ブログ名を画像にする

このブログ自体がその実験場と化していますが、テーマTwentyelevenのブログ名表示を画像表示に変えました。

変更したソースは3つ。

  1. images/title.jpgの追加
  2. header.phpの変更
  3. style.cssの変更

images/title.jpgの追加

  • PS6で作成
  • サイズは386×128

header.phpの変更

73行目あたりを

<hgroup>
<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img class="entry-img" src="<?php echo get_template_directory_uri(); ?>/images/title.jpg" />
</a></span></h1>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>

に変更する

style.cssの変更

930行目あたりに

.entry-img {/* customized at 20111008JST0938 */
	max-width:  386px;
	max-height: 128px;
}

を入れる。Class指定を用いています。もちろんほかの方法でも可能だと思います。現在使っている画像のサイズを最大値として指定しています。

お世話になったリンク

デフォルトテーマのカスタマイズ:ブログタイトルを画像にする

デフォルトテーマのカスタマイズ:見出しタグの変更

以上です。