自己紹介

自分の写真

田舎でまったり暮らす主婦「さっこ」です。6人家族の紅一点。更新はマイペースです。ちょっとしたつぶやきはSakko Memoで毎日更新してますのでそちらもご覧ください。

新着記事

カテゴリ

複合検索

  • カテゴリ
  • #タグ
  • 投稿年月

Sakko Blog

まとまった文章を書きたくなったときに書いてます。感想はプロフィールページにある一言メッセージフォームからお願いします。

タグ「てがろぐ」を含む投稿7件]

スマホでてがろぐ更新してます

最近、すっかりパソコンとはご無沙汰です。ネットを利用するのはほぼスマホで、動画を見るときだけタブレットとテレビの出番って感じです。てがろぐ利用も当然スマホからで、本体のアップデートすらスマホでやってます。さすがにスキンを作成するときは重い腰を上げてパソコンを起動させますが、今のスキンで満足してるので当分パソコンを立ち上げる機会はなさそうです。そんな私がてがろぐを利用するにあたって使ってるアプリを書き出して見ます。なお、現時点での私のスマホはGalaxy S20(Android12)です。

画像関連
Picsart
画像の加工で使ってるアプリです。主にエフェクトをかけたりコラージュ作成用。特にエフェクトにはお世話になってます。自動で背景を透過してくれる機能も便利。ファイルの拡張子やファイルサイズを変更して保存することも可能なので重宝してます。
Squoosh
画像を縮小拡大したり圧縮したりできるGoogle御用達Webサービス。ファイルサイズを圧縮するときに主に使ってます。

更新関連
QuickEditプロ
テキストエディタです。視覚スタイル(テーマ)を変更したり構文(PerlとかHTMLとか)によって文字の色分けができる、ツールバーによく使われる記号の挿入ボタンがあるなど、簡単なテキストエディタの機能は揃ってます。そしてサーバー上のファイルも弄れるのが超便利。ちょっと修正するぐらいなら一々ファイルを編集してアップロードする手間が省けます。
Admin Hands
FTPクライアントアプリ。本当はSSHやSFTPなどにも対応してるけど、私は使わないのでFTPクライアントってことで。パソコンのFTPクライアントソフトと同等のことができるので、サーバーへのアップロードもパーミッションの変更も楽々です。アプリにパスワード機能があるので、セキュリティ面でも安心できるかな。
7Zipper
ファイルエクスプローラーですが、ファイルの圧縮・解凍ができます。てがろぐの更新ファイルを解凍するのに必要なアプリですね。完全無料でこれはすごい。

パソコンは要らない…?
よくよく考えたらスキン作成もタブレットに物理キーボード繋いだら楽にできちゃうんじゃない?と思ったりしてます。となると滅多に使わないパソコンを購入するより安い中華タブレットを買ったほうが私の使い方には合いそう。ちなみに現在タブレットは動画を見たりマンガを読むために存在してます。
ただ、パソコンでの見え方を確認するにはパソコンがあったほうが確実だからなくて大丈夫と断言できないのよね…。当分はほとんど使わなくてもパソコンをキープすることになりそうです。

#てがろぐ #スマホ

てがろぐでpreっぽい自由装飾記法

このブログで使っているてがろぐは投稿にHTMLタグが使えません。その代わり、文字修飾に使える独自の記法があります。例えば[B:太字]と書けば太字と表示されます。この記法の中に自由装飾記法というのがあります。自由に記法を追加できるもので、追加した記法の見た目はCSSを追加することで行います。例えば、以下のⒶように記述すると、Ⓑのように出力されます。

    Ⓐ自由装飾記法: [F:sakura:あいうえお]
    Ⓑ出力されるHTML: <span class="deco-sakura">あいうえお</span>
てがろぐ 使い方・設定方法 - にししふぁくとりー
これを使って、てがろぐで整形済みテキストとして表示するタグ<pre>と同じような自由装飾記法を作ってみたいと思います。私がこのブログで使ってるCSSは下記の通り。これが表示サンプルでもあります。参考にした記事はPre CodeブロックにCSS擬似要素で行番号をつける方法 – Sakurai Rono PENです。/*pre*/
.deco-pre{
   display:block;
   position:relative;
   width:100%;
   line-height:1.4;
   white-space:pre;
   font-family: 'Inconsolata', monospace;
   background-color:#f0f8ff;
   border-left: .3rem solid #93b6b8;
   padding:1rem 0 1rem 4.2rem;
   margin:1.6rem 0;
   overflow-x:auto;
   overflow-y:hidden;
}
.deco-pre:before {
   position:absolute;
   top:1rem;
   left:0;
   bottom:1rem;
   overflow:hidden;
   color:#93b6b8;
   content:"1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A";
   border-right:.1rem solid #93b6b8;
   padding-right:1rem;
   width:2.6rem;
   text-align:right;
}
ざっくり解説すると、タグをブロックレベル要素にした上でbefore擬似要素を使って行番号を追加してます。まずは.deco-pre{〜}の詳細から。

てがろぐの自由装飾記法の元になるタグは<span>ですが、このタグはインライン要素なのでdisplay:block;でブロックレベル要素と同じ挙動にします。position:relative;はbefore擬似要素で行番号を表示する際に必要になりますので後述。width:100%;はボックスの幅が親要素と同じなのを表し、line-height:1.4;は行の高さを指定してます。行の高さを指定したのは、<body>に指定している値が1.7とやや高いからで、特に指定の必要はないです。white-space:pre;はソースの中の半角スペースや改行などを<pre>と同じように扱う指定です。つまり改行しなければボックスをはみだし、折り返しはしません。はみ出してしまうと困るので、ボックスに横スクロールバーを必要時のみ表示させるようにするのがoverflow-x:auto;です。

なお、font-familyはmonospaceを指定しますが、私はGoogle Fontsから引っ張ってきてます。preとcodeのfont-familyとカラーバリエーションという記事が背景色や文字色を含め一般的な指定の参考になると思います。

次にbefore擬似要素。position:absolute;を指定しますが親要素にposition:relative;を指定してるため、親要素の左上が起点になります。親要素に何も指定してないとウインドウ全体の左上が起点になってしまうので、このふたつは必ず書く必要があります。top:1rem;left:0;はその起点からどれだけ動かすかという指定ですね。

そしてcontentの中身が行番号です。そのまま数字を羅列しても横方向にずらっと表示されるだけなので、\Aで改行表示されるようにしてます。この改行は親要素、もしくはbefore擬似要素のwhite-spaceがソース内の改行に対応してないと反映されないので注意してください。

このやり方は書いた数字分だけ行番号が表示されるわけですが、書いた行番号以上の行数になっても数字が表示されないだけです。しかし書いた最大の行番号より行数が少なかった場合、ボックスから残りの行番号がはみ出して表示されることになってしまいます。それを防ぐためにoverflow:hidden;を指定して、はみ出した部分は非表示にしてます。

後はborderやらpaddingやらを弄れば完成です。このブログでは1rem≒10pxになってるので、ご自分のサイトに合わせて数値を弄ればいいでしょう。

実のところここまでして行番号を表示する必要はないと思うのですが、やれるとなるとやってみたくなる質なもので。興味ある方は参考にしてください。

#CSS #てがろぐ

てがろぐ設置一周年

昨年の12月25日に初めててがろぐを設置しました。てがろぐを知ったのは某掲示板だったのですが、調べてみたらスキンで見た目をカスタマイズできる、投稿をSSIを利用して埋め込める、RSSを配信してると欲しかった機能が一通り揃ってたので使い始めました。今日は1年間使ってみての感想を書こうと思います。

メンテナンスが楽
てがろぐのアップデートはふたつのファイルを上書きするだけで終了です。別サーバに移転する場合もファイルをそっくりそのままアップロードするだけで完了です。メンテナンスが楽なのは、書くことだけに集中できるのでありがたいです。

スキン作成が楽
WordPressのテーマを作ったことがありますが、とにかく難しい。レンタルブログのはてなブログやBloggerもイチから自分で作成するのは無理でした。初心者でもわかる解説プリーズ。

しかしてがろぐは公式のリファレンスが詳細で、読めば大体のことは解決できます。一度作ってしまえばそれを雛形にして作成すればいいので、その後のスキン作成は簡単です。そんなこんなでSakko Memoのほうではスキンの切り替えができるようにしてみました。メモスキン付箋スキンバーコードスキンスキン作成楽しい。

書きやすい
ブログの場合、投稿欄の編集モードが複数あったりしますが(HTMLモード、見たままモード等)てがろぐはひとつだけです。最初はタグが使えないなんて…と思いましたが、文字修飾記法・色指定記法があるしツイートやYouTubeの動画も埋め込めるので、それほど不便とは思わないです。もっと埋め込めるサービスが増えたらありがたいですが。SpotifyとかInstagramとか。

それに前に使ってたBloggerが書きにくすぎたんですよね。ちょっとツイートを埋め込もうと思ったら、HTMLモードにしなくちゃならない。じゃあ最初からHTMLモードで書くかとなると、pだとかbrだとかのタグを全部書かなきゃならない。面倒くさい…。それに比べたらてがろぐは何も考えずに書けるのでいいです。

要望を取り入れてくれる
なんと言っても「こんな機能があったらいいな」という要望をできるだけ取り入れてくれるのが素敵。動作試験版に書くと、可能であれば機能を追加していただけるのでありがたいです。動作試験版ではサポートもできるだけしていただけるし、初心者でも安心して使えます。

スマホでも使える
パソコンとスマホでは設定項目や投稿フォーム等が異なる、なんてのはあるあるなんですが、てがろぐだとパソコンでもスマホでも同じなので戸惑うことがありません。何より設置するだけ、アップデートするだけならスマホからできます。さすがにスキン作成はパソコンを使わないと面倒ですが、同梱されてるスキンをちょっと弄る程度ならスマホがあれば十分です。

その他
機能がどんどん追加されていくうちに、簡易CMSとしても使えるようになってきました。サイトマップを出力できるようになれば完璧かな。マイクロブログツール感覚と謳ってるけど、そんな単純なツールじゃないです。てがろぐの進歩恐るべし。

終わりに
10年ぶりぐらいにCGIを設置してみましたが、思ったよりすぐに慣れてスキン作成も楽しく、投稿もしやすいのですっかり欠かせないツールになってしまいました。ブログはなかなか長続きしなかったのですが、タイトルを書かなくても投稿できるのでちょっとした出来事や作品の感想を書くのにはとても向いてると思います。まあここはブログとして使ってるのであんまり投稿してませんが。

ともあれ、これからどんな進化をするのか楽しみなてがろぐ。設置2年目もお世話になります。てがろぐはいいぞ!

#てがろぐ #カスタマイズ

てがろぐでブログはじめます

#Blogger で開設してたブログのログを移行できたので、今日からてがろぐでブログをはじめます。旧ブログにアクセスするとこのブログのトップページにリダイレクトされるようにしたので、検索でたどり着いた人はちょっと戸惑うかもしれませんが。記事自体はちゃんと移行してますのでハッシュタグ #てがろぐ から探してみてください。

移行しようと思った第一の理由はBloggerだと記事が書きにくいからですが、第二はせっかくレンタルサーバを使ってるんだから自分で設置したほうが管理が楽なのではと思ったからです。特にてがろぐは設置が手軽で仮にサーバを変えるとしても移行が楽なのが大きいです。WordPressだとこうはいかない。以前使ってたBlosxomも移行が楽なのですが、プラグインを使わないとWebで更新できないのがネックで(素のままだと記事を書いたファイルをアップロードすることで更新される)。

ブログっぽくするにあたって「そのとき表示されている状況を示すキーワード」が出力される記法 が役立ちました。ページによって違う #CSS を割り当てられるのは良い。あまりアイデアが思い浮かばないので私は大して活用できなさそうですが、活用すればスキンのバリエーションが大幅に広がりそうです。

すでにSakko Memoというつぶやき系のページをてがろぐで作ってるので、こちらの更新は月に一度あるかないか程度になりそうですがよろしくお願いします。

#ご挨拶 #カスタマイズ

とりあえず始動

現在、Bloggerでブログを開設してるんだけど、とにかく使いづらい。見た目は知識さえあれば細かくカスタマイズできるけど、知識のない私には難易度が高い。しかも告知もなしに仕様を変えることがあってあたふたすることもあるのでつらい。

かと言って他のレンタルブログはカスタマイズ度が下がったり無料で独自ドメインを使えなかったりするので、自分で設置したほうがいいんじゃ…というわけで #てがろぐ を使ってブログっぽい何かを作ることにしました。ブログと違ってコメント欄がないけど、まあこんな場末のサイトにコメントしようとする人もそういないだろうから問題ない。

Bloggerのログは手作業で移行させるつもり。記事数が少ないからそう難しくない…はず。それでも画像も移行させなきゃならないので時間がかかりそうだけど。移行できたらSakko Memoでお知らせするつもりです。

サイト移転とてがろぐの話

※この投稿はBloggerで2021.5.1に投稿したものです。

今までレンタルサーバーはロリポップ を使ってたんですが、思い立ってカラフルボックス に乗り換えることにしました。これまでに使った有料のレンタルサーバーはさくらのレンタルサーバコアサーバーバリューサーバー などがあります。でまあ今回乗り換えようと思ったのはカラフルボックスの料金が期間限定で30%OFFになっていたからで…。それに12ヶ月契約が最長のロリポップと異なり、36ヶ月契約まであるのも魅力でした。ついでに独自ドメインも新しく取得してそっちに移行しました。

ところが移転の際、てがろぐの移行に手間取りました。詳細は動作試験版に書いたとおり。
レンタルサーバーの仕様通りパスとパーミッションを変更し、tegalog.cgiにもアクセスできたのですが、設定を変更しても投稿しても「そんなページないよ(意訳)」という英文のページに飛ばされてしまってちょっと頭を抱えました。 よくよくURLを見るとなんかおかしい。○○.com/home/ユーザー名/public_html/○○.com/~となってました。なんでホームディレクトリのパスがくっついてくるの…。そこでCGIの高度な設定にあるmy $howtogetpath = 2;の値を0に変更したらうまく動くようになりました。

No.2116 - てがろぐ - Fumy Otegaru Memo Logger -

今までこんな経験がなかったのでかなり慌てました。でもなんとかなって良かった良かった。そして詳細なマニュアルを書いてくれているにししふぁくとりー のにししさんに感謝です。このマニュアルがなければ詰んでました。

また、昨日初めててがろぐでYouTubeの動画を埋め込んだんですが、動画プレイヤーの幅を90%にして中央へ持っていきたいと思ってCSSだけでどうにかしようと思ったもののうまくいかなくて、tegalog.cgiの2754行目あたりにある動画埋め込みのHTMLにspan要素を入れ子で追加してCSSを当ててみました。# HTML化して返す (LazyLoad標準)
return qq|<span class="embeddedmovie"><span><iframe class="embeddedmovie" width="560" height="315" src="https://www.youtube-nocookie.com/embed/$ytid" loading="lazy" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></span></span>|;
span.embeddedmovie{
   display: block;
   max-width:500px;
   width: 90%;
   margin:1.6rem auto 0;
}
span.embeddedmovie span{
   position: relative;
   display:block;
   padding-bottom: calc(315 / 560 * 100%);
}
iframe.embeddedmovie{
   position: absolute;
   top:0;
   right:0;
   width:100%;
   height:100%;
}
参考にしたのは下記のページです。

【初学者向け】レスポンシブ対応でYouTube動画を埋め込む | Web制作・開発なら株式会社WETCH(ウェッチ)

思ったとおりの挙動になって満足♪

#てがろぐ #カスタマイズ

てがろぐはじめました

※この投稿はBloggerで2021.1.2に投稿したものです。

あけましておめでとうございます。年末は風邪を引いてなかなか治らず、しばらく好きな音楽も聴けない状態でした。今は元気になって新年早々親戚宅での新年会に参加し、久々にお腹がたぷたぷになるぐらい酒を飲みました。もうしばらくお酒は要らないかな…。

さて、そんな年末年始に何を思ったかWebでお手軽に更新できる日記が欲しいと思ってしまい、あれこれ検索した結果気に入ったのがてがろぐ です。

その名の通り更新が楽なこと、簡単に文字修飾ができること、スキンの自作が簡単なことが決め手となりました。Bloggerに比べたらなんて簡単なんだてがろぐのスキン作成。そこで今まで使ったことがなかったドロワーメニューに挑戦することにしました。ちなみにCSSのみでの実装です。参考にしたサイトは下記の通り。

CSSのみで作る追従ドロワーメニュー【jQuery不要】 | キノコログ

なお、このてがろぐではLightboxがデフォルトで実装されてるんですが、以前から気になってたJavaScriptだけで同じような挙動を実装しているfuwaimg というスクリプトを代わりに導入することにしました。こちらのほうがいい感じ。と言ってもあまり画像のアップはしないと思うんですけどね。

そんなこんなでせっせとスキンを作成してたんですが、結局丸2日ぐらいかかりました。忙しい時期になにやってんだ私。でもちゃんと大掃除もお墓参りも初詣もこなしたよ(当たり前)。そして完成したのが下記のサイトです。アイキャッチ画像は例によってCanva で作成してます。

Sakko Memo

大体思い通りの見た目にできて満足。後はこれをプロフィールページ にSSIで埋め込みたいなと思ってたんだけど、現在利用してるロリポップでは上位ディレクトリを参照すると動かない らしい。なんだよそれ利用できないじゃん(泣)

この問題についてはどうするかもうちょっと考えてみます。

#てがろぐ