引き出し整理術、ラウンドケース

あるはずなのにいざ必要な時に見つからない。引き出しのペントレイやペンケースの中を探してとりあえず１コ見つけてその場をなんとかやり過ごす。そんな経験は誰にでもあるはず。

そんな文具小物の収納に悩んでいる皆さんに便利な収納グッズとしてラウンドケースを紹介したい。ラウンドケースはプラスチック製の円筒状の容器で、上下にねじが切ってあるので必要に応じて縦に繋げることができる。手芸やハンドクラフトを趣味にしている人にはおなじみのアイテムで、ボタンやビーズの収納に使われている。他にも、ピルケースとして使ったり、料理に使うスパイスの保存容器としても利用されることもある。

ネットで購入できるのはＬサイズ（径 70mm）、Ｍサイズ（径 50mm）、そしてＳサイズ（径 40mm）の３種類。ＬサイズはWクリップや安全ピンなど何にでも使え、Ｍサイズはゼムクリップやガチャ玉の収納にちょうどいい。それに対して、Ｓサイズはちょっと小さすぎて収納力に劣る。クリップや押しピンなどを少しだけ入れて、カバンの隅にでも放り込んでおくにはいいのかもしれない。

また、Ｌサイズのケースは100均のカトラリートレーにピッタリで、３個並べてトレーに入れて、そのままデスクの引き出しに入れておけば、引き出しの中の小物類が驚くほど片付くこと請け合いだ。引き出しの中がカオスで片付けに困っている御仁にはぜひ試して欲しい。

そもそもクリップや押しピンといった文具小物がそれぞれ違ったケースに入れて売られているのが片付かない原因の一つなのだ。文具メーカーが初めからラウンドケースのような互換性があり、再利用可能なケースに入れて販売してくれれば収納に悩むこともない。そうすればケース目当てのリピーターも増えるのではないか、メーカーの方もぜひそのへんを考えてはもらえないだろうか。

今回、紹介したアイテム

トラスコ ラウンドケース L TRC04 5 個 価格：259円（税込、送料別) (2019/10/8時点) 楽天で購入

可愛いペンシルキャップ見つけた！

最近、若い女性の間でケーブルバイトが流行っているらしい。スマートフォンの充電ケーブルやイヤホンコードの断線を防ぐためのもので、以前から同様のものはあったが、それを可愛いキャラクターにしたのがヒットのきっかけだとか。

「へぇ?、そんなものが流行っているのか」くらいの認識だったのが、偶然、快獣ブースカのケーブルバイトがあるのを見てモーレツに欲しくなってしまった。

ネットで検索するとバルタン星人やエレキングといったウルトラ怪獣のケーブルバイトもあることがわかった。これはもうおじさんホイホイではないか。若い女性がブースカやウルトラ怪獣を知っているのか、いったいどの層をターゲットにしたアイテムなのか、疑問を持ちながらも、とりあえず快獣ブースカを購入した。やっぱり可愛いぞ。

ふと思いついてこれを鉛筆に刺してみた。

鉛筆キャップとして使うのなら沢山あった方がいいだろうと、いくつかまとめてヤフオクで大人買いしてみた。

早速手持ちの鉛筆やボールペンに刺してみた。しかし、残念なことに標準サイズの鉛筆では少々太すぎてケーブルバイトが切腹してしまうのだ。そこで、大人の塗り絵用に購入した少し細い100円ショップで買った色鉛筆に刺してみた。

可愛いっちゃ可愛いが、串焼き盛り合わせのように見えなくもない。

ただ、市販のペンシルキャップは実用本位の、遊び心のないものばかりで、それに比べれば100倍まし。ペンシルバイトとしてガチャガチャのカプセルトイにすれば人気出ると思うんだけどな。

また買っちゃったよ。どーすんのこれ。

今回、紹介したアイテム

ケーブルバイト CABLEBITE うる星やつら/ラム & テン【2種セット】 価格：1468円（税込、送料別) (2019/8/14時点) 楽天で購入

馬子にも衣装のノートカバー

アピカの「紳士なノート」にそっくりと話題になったダイソーのプレミアムノート（画像一番右）を本家アピカのA6サイズノートカバーに入れて使うという大胆不敵な企み。これを羊質虎皮と言わずに何と言うのか。

真ん中の白表紙の方眼ノートはノートカバーに付属のもの。使用説明書通りにノートをセッティング。せっかくのクラシカルなデザインの表紙が見えなくなってしまったけどまあいいか。と、思ったけれど…

あれ！？書きにくい。A6ほどの小さなサイズのノートは見開き右ページに書くことが多いが、ノートカバーの右ポケットに挟んだ方眼ノートにそこそこの厚みがあるために重ねると全体の厚みが増して書きにくくなってしまったのだ。

そこで、ダイソーのノートを右側に、方眼ノートは上下を逆にして左側にセット。これでダイソーのノートにもストレスなく書き込めるし、方眼ノートを使う時には180度クルッと回せばOK。さらに、結果的に両方のノートのクラシカルなデザインの表紙も見ることができるようになって転禍為福とはこのことか。

次は、A5サイズのエトランジェディコスタリカ ノートカバーに100均のスケジュール帳と家計簿（お小遣い帳）をセットしたもの。何と言ってもこの組み合わせが輔車相依の最強タッグ。スケジュール帳はたしかセリアで購入したもの。B6サイズでノートカバーに合っていないけど、マンスリーとバーチカルタイプのウィークリーの両方があって使い勝手がいいのでおすすめ。

今回、紹介したアイテム

【送料無料】アピカ ノートカバー CDノートブックウェア A6 CDV170-NV ネイビー 価格：1763円（税込、送料無料) (2019/8/15時点) 楽天で購入

ミニサイズ6穴バインダーと文庫カバーで作るはがきバインダー

捨てるに捨てられないはがき。これまでは特に整理もせず、とりあえずせんべいの入っていた缶カンに放り込んでいた。当然、毎年年賀状を書く頃になるとあたふた。

それではいけないと、はがきバインダーを探してみても、あるのは下のようなクリアポケットタイプのホルダーばかり。これはこれできれいに保存できるのだが、収納できる枚数が限られているし、途中に差し込むことができないので不便だ。

ならばと、ありものを使ってはがきバインダーを作ってみた。ベースになるのはエトランジェディコスタリカ バインダー ミニ 6穴。ただしこれだけだと上下が少しはみ出してしまう。

そこでバインダーごとコンサイス ブックカバー（皮革調）に収めてみるとこれがピッタリ。折り返し部分には粘着テープがついているのだが、これが全く役立たずなのでゴムバンドで止めている。しかし、その点を除けば、価格も安いし、バインダーの背の厚みが2.5cmほどあるが、それでも十分対応できているのでコスパ的にはいいんじゃないかと思う。

ブックバンド代わりのランチベルトで閉じたところ。上下、横ともはみ出しはない。実用的な範囲内では60～70枚、無理をすれば80枚くらいまでは綴ることができる。

はがきにパンチ穴を開けるのに使ったのがこの手帳用 6穴 穴あけパンチ。裏のツメをスライドさせることでA5サイズ、バイブルサイズ、ミニサイズの3種類のバインダー式手帳に対応したパンチ穴を開けることができるすぐれもの。一家に一台の必需品。

今回、紹介したアイテム

エトランジェ・ディ・コスタリカ ミニ6サイズ 6穴バインダー ミニ6バインダー ブラック 価格：432円（税込、送料別) (2019/8/15時点) 楽天で購入

オープン工業/6穴パンチ移動式/PU-462【ココデカウ】 価格：1695円（税込、送料別) (2019/8/15時点) 楽天で購入

Bloggerのテーマのカスタマイズ ＝テキスト設定＝

Bloggerのテーマをロディアのブロックメモ風にカスタマイズするための手順について、今回はテキストの各種指定の方法を紹介します。ただし、htmlやcssについてはほぼ初心者で、内容はWeb上にある指南記事の寄せ集めなので、もっと良いやり方があるだとか、変更すべきコードはそこではないとか色々あるかと思いますが、そのあたりはどうかご容赦ください。

1. 記事テキストのフォントの色・種類・サイズの変更
2. テーマデザイナーにないフォントの使用
3. 記事テキストの行間の指定
4. 見出しのデザイン
5. 変更の確認と保存
6. テーマのバックアップ

1. 記事テキストのフォントの色・種類・サイズの変更

管理画面の左のメニューから、テーマ　⇒　カスタマイズ　⇒　Bloggerテーマデザイナー　⇒　上級者向け　⇒　ページのテキストと選択することでテキストのフォント種類・フォントサイズ・テキストカラーを指定できるようになります。変更の結果は画面下にプレビューされるので、確認しながら選択すると良いでしょう。

上の画像で見られるように初期設定では『字が小さすぎて読めない！（渡辺謙）』状態だったのでフォントサイズを16pxと少し大きくしました。

2. テーマデザイナーにないフォントの使用

記事テキストでテーマデザイナーにないフォントを使用したり、フォントサイズを細かく指定するにはhtmlを書き換える必要があります。管理画面左のメニューからテーマ ⇒ HTMLの編集を選ぶとhtml編集画面が表示されるので、最近流行りの游ゴシックやメイリオを使用する場合には、20行目あたりにあるvalue=の後ろにフォント名を書き加えます。同時に同じところでフォントサイズも指定できます。

     <Variable name="body.font" description="Font" type="font"

         default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px '游ゴシック',メイリオ,Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

プレビューで指定通りにフォントが変更されているのを確認した後、更新で保存します。（※注）保存後、'游ゴシック'と入力したものは自動的に&#39;游ゴシック&#39;に書き換えられます。

3. 記事テキストの行間の指定

Bloggerの初期設定の行間は日本語表記には詰まりすぎているように思います。個人的好みで言えば、行間を指定するline-heightの値は1.6から1.8くらいが読みやすいのではないかと思います。400行目前後のline-heightの値を書き換えることで、記事テキストの行間を変更できます。

  font-size: 110%;

  /* 行間変更 */

   line-height: 1.75;

  position: relative;

}

4. 見出しのデザイン

Bloggerの記事作成画面で指定できるのは見出し・小見出し・準見出しの３種類で、それぞれ<h2>、<h3>、<h4>に対応しています。このうち小見出しは記事タイトルにも使われています。

初期設定のままでは、テキストのサイズが大きくなって、太字になるだけなので視認性的にもイマイチなので少しデザインを変えてみましょう。見出しのデザインは「CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選」が参考になると思います。

まず、上のサイトにあるデザインの中の「下線」と「左線」を組み合わせて、下のようなコードを作成します。次に、管理画面左のメニューからテーマ ⇒ HTMLの編集を選ぶとhtml編集画面が表示されるので、240行目あたり、コンテンツの最後の部分に書き加えます。

h3 {

  padding: 0.25em 0.5em;/*上下 左右の余白*/

  color: #494949;/*文字色*/

  background: transparent;/*背景透明に*/

  border-left: solid 15px #7db4e6;/*左線*/

  border-bottom: solid 3px #7db4e6;/*線の種類（実線）*/

}

h4 {

  padding: 0.25em 0.5em;/*上下 左右の余白*/

  color: #494949;/*文字色*/

  background: transparent;/*背景透明に*/

  border-left: solid 10px #7db4e6;/*左線*/

  border-bottom: solid 3px #7db4e6;/*線の種類（実線）*/

}

結果は下のようになります。

5. 変更の確認と保存

「テーマをプレビュー」でテキストが指定したとおりに表示されているのを確認した後、「テーマを保存」する。「戻る」で管理画面に戻り、左のメニュー一番上の「ブログを表示」でもう一度変更を確認する。

6. テーマのバックアップ

ここまでのカスタマイズを保存するためにバックアップを作成します。管理画面の右上の「バックアップ／復元」をクリックすると開くウィンドウから「テーマをダウンロード」でバックアップファイルを任意のフォルダに保存します。

Bloggerのテーマのカスタマイズ ＝コンテンツ編集＝

Bloggerのテーマをロディアのブロックメモ風にカスタマイズするための手順について、今回はコンテンツ領域の背景画像の設定の方法を紹介します。ただし、htmlやcssについてはほぼ初心者で、内容はWeb上にある指南記事の寄せ集めなので、もっと良いやり方があるだとか、変更すべきコードはそこではないとか色々あるかと思いますが、そのあたりはどうかご容赦ください。

1. 背景画像のアップロード
2. htmlの編集
3. 変更の確認と保存
4. テーマのバックアップ

1. 背景画像のアップロード

Bloggerには他のブログにあるような画像アップロードの機能がありません。そのため、背景に使用する画像を記事中にアップロードし、そのURLを取得する必要があります。

まず、管理画面から新しい投稿で記事作成画面に移り、画像の追加 ⇒ アップロードで背景画像をアップロードします。次に、もう一度画像の追加を選び、「このブログから」で表示される画像の中から先程アップロードした背景画像を右クリックするといくつかの選択肢が表示されるので、その中から画像アドレスをコピーを選択します。コピーしたアドレスは一旦メモ帳などに保存しておきます。管理画面に戻り、記事を削除するのですが、記事を削除しても記事中にアップロードした画像までは削除されないので大丈夫です。

2. htmlの編集

管理画面からブログ画面下の「htmlの編集」を選び、html編集画面に移行する。htmlの170行目あたりにある

/* Content
----------------------------------------------- */

の最後の部分に背景画像の設定コードを下のように書き加えます。

background-color: $(content.background.color); 
/* コンテンツに背景画像を設定 */ 
 background-image: url("ここに背景画像のURL"); 
}

3. 変更の確認と保存

「テーマをプレビュー」でコンテンツ部分に背景画像が表示されているのを確認した後、「テーマを保存」する。「戻る」で管理画面に戻り、左のメニュー一番上の「ブログを表示」でもう一度変更を確認します。

4. テーマのバックアップ

ここまでのカスタマイズを保存するためにバックアップを作成します。管理画面の右上の「バックアップ／復元」をクリックすると開くウィンドウから「テーマをダウンロード」でバックアップファイルを任意のフォルダに保存します。

Bloggerのテーマのカスタマイズ ＝ ヘッダー編集 ＝

このブログの見た目をロディアのブロックメモ風にカスタマイズすることに挑戦してみました。ただし、htmlやcssについての知識はほとんどないので、もっと良いやり方があるだとか、変更すべきコードはそこではないとか色々あると思いますが、そのあたりはどうかご容赦ください。

1. 初期画面
2. ヘッダーの背景色の設定
3. タイトルを画像に変更
4. タイトルと説明の中央揃え
5. 変更の確認と保存
6. テーマのバックアップ

1. 初期画面

テーマは「SIMPLE」を選択します。いくつかのダミー記事とプロフィールを登録しただけの初期画面はこんな感じになります。

2. ヘッダーの背景色の設定

まず、ヘッダー部分の背景色をBloggerテーマデザイナーを使ってロディアカラーであるオレンジに変更します。このBloggerテーマデザイナーというのは基本テーマの背景、レイアウト、色、フォントなどを視覚的にカスタマイズできる便利なツールです。

管理画面の左のメニューから、テーマ　⇒　カスタマイズ　⇒　Bloggerテーマデザイナー　⇒　上級者向け　⇒　背景　⇒　ヘッダーの背景と選択して、背景色を設定します。下の画面で背景色を確認した後、右上の「Bloggerに戻る」で管理画面に戻ります。

3. タイトルを画像に変更

次に、ブログのタイトルを事前にドローイングソフトなどで作成した画像に変更します。管理画面からレイアウトを選択するとブログのガジェットの追加、削除、編集を行うことができる編集画面が表示されるので、ヘッダーの右下の編集をクリックします。

ヘッダーの編集ウィンドウが開くので、イメージの「コンピュータからファイルの選択」で予め作成しておいた画像を指定します。表示される画像を確認した後、「説明を画像の後ろに表示する」を選び、左下の保存で設定終了です。

レイアウト画面右上の「配置を保存」をクリックし、管理画面に戻った後、左のメニューの上にある「ブログを表示」で変更を確認します。

4. タイトルと説明の中央揃え

タイトルの中央揃えはBloggerテーマデザイナーではできません。従って、直接htmlを書き換える必要があります。管理画面のテーマからブログ画面の下の「カスタマイズ」の右にある「htmlの編集」をクリックするとhtml編集画面が表示されるので、htmlに以下の赤色部分のコードを書き加えます。ついでにタイトル画像の上が詰まっていてバランスが良くないのを解消するために上に余白も挿入しました。

350行目あたり

.header-outer { 
 background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none; 
/* Header画像の上に余白を挿入 */
 padding-top: 20px; 
} 
/* Header画像を中央揃え */ 
.Header img{ 
 margin:auto; 
} 　　

370行目あたり

.Header .description {
  font-size: $(description.text.size);
  color: $(description.text.color);
/* Header説明を中央揃え */
  text-align: center;
}

5. 変更の確認と保存

「テーマをプレビュー」でタイトル画像と説明が中央揃えになっているのを確認した後、「テーマを保存」します。「戻る」で管理画面に戻り、左のメニュー一番上の「ブログを表示」でもう一度変更を確認して完了です。

6. テーマのバックアップ

ここまでのカスタマイズを保存するためにバックアップを作成します。管理画面の右上の「バックアップ／復元」をクリックすると開くウィンドウから「テーマをダウンロード」でバックアップファイルを任意のフォルダに保存します。