読者です 読者をやめる 読者になる 読者になる

tamlog

主にwebのフロント回り たまに登山

ママパパ必見!ゆびえのぐ - 子供が喜ぶこと間違いなし!暑い夏にオススメのおうち遊び。

あそび 子供

外が暑かったので家の中でできる遊びということで床に紙を敷き詰めてえのぐでぺたぺた遊びました。 

f:id:tamushou:20160823001519j:plain

続きを読む

TOTOミュージアムに行ってきました。

お出かけ 北九州市 小倉北区

北九州市小倉北区にあるTOTOミュージアムに行ってきました。

我が家では息子がトイレトレーニング中なので、とてもタイムリーな場所です。

f:id:tamushou:20160817225048j:plain

 

アクセス

TOTOミュージアム | TOTO

最寄りの交通機関は西鉄バス貴船町バス停。

バスを降りるとすぐ見えます。入り口までは徒歩1分ほど

続きを読む

英彦山のスロープカーに乗ってきました。

お出かけ 添田町

 

休日に家族で福岡県添田町にある英彦山のスロープカーに乗ってきました。

f:id:tamushou:20160815093259j:plain

 

子供が皿倉山のケーブルカー・スロープカーを気に入ったようだったので、ほかのスロープカーにも乗ってみよう、と英彦山へ

www.tamshow.com

 

英彦山は標高1200m福岡で2番目に高い山で古くから修験山として有名なようです。

登山客にも人気な山ですね。

 

アクセス

英彦山スロープカー・英彦山花公園

 最寄り駅は日田彦山線の英彦山駅。 

北九州方面から向かうと道の駅「おおとう桜街道」と 「歓遊舎ひこさん」を通ります。

トイレもありますし、小さなお子さんがいる場合はこちらで休憩をとりながら行くのもいいですね。

 

続きを読む

ノマドワーカー必見!どこでも快適なワークスペースを作るアイテム7選!

作業環境 効率化

ちらほら、外で作業する場合があります。

ホテルやコワーキングスペースなど電源、WiFiが整っていればまだ良いのですが、

ファミリーレストラン、カフェなどは電源が無かったりスペースが狭かったりと外では色々と制限があります。

そんな中これさえあればなんとかやっていけるってやつでまとめました。

続きを読む

皿倉山のケーブルカー、スロープカーに乗ってきました。

お出かけ 八幡 北九州市

 

休日に家族で福岡県北九州市の皿倉山のケーブルカー、スロープカーに乗ってきました。

 

f:id:tamushou:20160808020026j:plain

 

 

アクセス

北九州市 八幡東区 皿倉山ケーブルカーのホームページ

 最寄り駅はJR八幡駅です。

八幡駅からは無料送迎バスも出ているようです。

 

我々は車で行きましたので皿倉山ケーブルカー山麓駅の駐車場に止めました。

駐車場は登山をされる方などもいて結構埋まっていましたね。

休日に行く場合は朝から行った方が良いかもです。

続きを読む

テストきじですよー

見出大ですよー

吾輩は猫である。名前はまだ無い。

見出中ですよー

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

見出小ですよー

吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。
第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。
のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。
これが人間の飲む煙草というものである事はようやくこの頃知った。

吾輩は猫である (新潮文庫)

吾輩は猫である (新潮文庫)

 

スタイルガイドとa-blog cmsの連携

a-blogcms

この記事は、 a-blog cms Advent Calendar 2015 の8日目の記事です。 cssスタイルガイドとa-blog cmsの連携について紹介します。

・CSSスタイルガイドとは? ・デモ ・組込み方法 ・書き出し ・a-blog cms設定 ・その他 ・まとめ

CSSスタイルガイドとは?

・サイト内で使用されているスタイルの一覧表・ドキュメントのようなもの ・作成することによりサイト内の一貫性・メンテナンス性などが保たれる

最近は Atomic Designなどよく耳にするようになりました。 このようなスタイルガイドを生成するジェネレーターは複数ありますが、今回はhologramを使用します。 hologramの詳細については割愛します。詳しくはCodeGrid(有料)がおすすめです。

デモ

先に完成はこちら http://www.masizime.com/acms/docs/ 今回はデモなので公開していますが、通常スタイルガイドのカテゴリは非公開です。 こうすることで管理者のみスタイルガイドを見ることができます。

組込み方法

まず、カスタマイズするテーマとスタイルガイドを準備してください。 次に、スタイルガイドのテンプレートをテーマ内に作成していきます。

すでにあるテーマ直下のentry.htmlを使い、スタイルガイドのテンプレートを修正していきます。

【entry.html】 entry.html

【_header.html】 _header.html

【_footer.html】 _footer.html

スタイルガイドのテンプレートにa-blog cmsのインクルード文を書くことで、 スタイルガイドのファイルはa-blog cmsのテンプレートファイルと同じ感覚で扱えるので修正がらくちんです。

書き出し

docsが書き出されるようにconfig.ymlを設定

$ bundle exec hologram _hologram/config.yml


コンパイル後にdocsフォルダが作成され、スタイルガイドとインクルード文の入ったテーマファイルが書き出されます。 a-blog cmsはhtmlファイルのまま動くのであとはそのままテーマファイルとして使用します。

a-blog cms設定

最後に管理画面からdocsカテゴリーを非公開で作成するとokです。

これで、スタイルガイドをa-blog cmsのテンプレートに取り込みおわりました。 非公開で表示可能になります。

その他

もう一つ、スタイルガイドの書き出し時に僕がいつもやっていることを書きます。 使用しているカスタムフィールドの値、モジュールの値、カスタマイズメモなどを残すことです。 後で見返したいときなど一覧で確認できるので便利です。 http://www.masizime.com/acms/docs/acms-customfield.html cms側にはダミーのユニットの記述を入れています。 http://www.masizime.com/acms/docs/sample1.html

やり方は、 sass(css)側の記述にインクルード文を書いてテンプレート側で修正管理しています。 こうすることで追加のたびにスタイルガイドをコンパイルしなくていいのでらくちんです。 お試しあれ。

【part-acms-customfield.scss】

【テーマ内のincludeフォルダ】

まとめ

スタイルガイドは、運用後の追加作業などの更新が面倒になりがちですが テーマに取り込めば他のテンプレートと同じ感覚で対応できます。 また、サイトのパーツを確認したい時やユニットで新規ページを作りたい時に便利です。 使用しているカスタムフィールドの値など残しておけば後で更に使いやすいです。 更新・運用作業が楽になるのではないでしょうか。

今回使用したテーマをGitHubに公開しました。 レイアウトモジュールとユニットで作成しているシンプルなテーマです。 普段僕が使ってるユニット(コンフィグ設定済み)インポートファイルも同封していますので、ベースとして使いやすいと思います。よろしければどうぞ^^ http://www.masizime.com/acms/ https://github.com/tamshow/masizime.themes.site2015