気がつけばもう今年も半分を過ぎようとしてますが、皆さんいかがお過ごしでしょうか？なんか今年は昨年の夏より暑くなるそうです。毎年言われてるような気がするよ。

ところでついにBlueskyが招待制を廃止しましたね。そのちょっと前に登録したのですが、フィードを作成できるのが目新しい。X(旧Twitter)のリストと違って検索結果も取得できるようになってるのが特徴。ただ、日本語で検索すると精度がイマイチなんですよね。これさえなんとかなればもっとユーザーが増えそうです。

そのBlueskyを利用するにあたってサードパーティクライアントのTOKIMEKI、ぞーぺん、ソラタマを試しました。TOKIMEKIはAndroidアプリとブラウザ版、両方利用しましたが、その他はAndroidアプリです。
上記の画像はメディアありの投稿を抽出したものですが、ご覧のとおりTOKIMEKIでは画像のみを並べて表示することができます。画像のある投稿だけを表示するときは本文はさほど重要でないしむしろ邪魔なので、これは大変ありがたい機能。さらにタイムライン上に翻訳済のポストを表示できます。これが非常に便利。
さらにカスタムリンク(文字にリンクを貼る機能)が利用可能。TOKIMEKIのブラウザ版はDM利用も可能なので、公式アプリの機能はほぼ使える感じです。

そんなTOKIMEKIですが既読位置を記憶できないので、タイムラインの流れが早いユーザーだと不便かも。それと何故かリンクカードの画像が非表示になってしまう。残りのクライアントは表示されるので、何故なのか不明。
ソラタマは以前配信されてたTwitterクライアント、ツイタマとほぼ使い勝手が同じ。ぞーぺんも同じくついぱねに準じているので、使ったことのある人には馴染みやすいかも。ただ、どちらもTOKIMEKIと違って広告が表示されます。ソラタマはそこまで気にならないのですが、ぞーぺんは投稿時にも広告が表示されるのが煩わしいかも。月300円の定期購入で広告非表示にはできるので、気に入ったのなら課金したほうがいいと思います。なお、ソラタマは今のところ広告非表示にはできません。

表示のカスタマイズについてはぞーぺんが一番細かくできるかも。TOKIMEKIは細かい調整はできませんがテーマがいくつかあるので見た目の問題だけならカスタマイズが簡単です。ソラタマはカラーの調整は細かくできてもそれ以外はぞーぺんより劣るかなという感じ。表示と言えば投稿元アプリ(via〜)についてはソラタマだけ表示されません。他のクライアントからソラタマからの投稿を見ても非表示。まだβ版なので、このあたりはそのうち修正されるかもしれません。

なお、この3つのうちぞーぺんだけはMastodon、Misskeyも利用可能です。というより元々Mastodon用のクライアントだったのがBlueskyも利用可能になったので、他のクライアントとはそのあたりが異なります。他のSNSも利用してるけどそれぞれのアプリをインストールすると容量圧迫するなあというならぞーぺん一択になります。

そしてそれぞれのクライアントを触った結果、TOKIMEKIをメインにしつつソラタマを使うことで落ち着きそうです。公式アプリはアプリパスワードを発行するときぐらいしか使わなくなりそう。元々SNSはタイッツーメインなので、Blueskyはちょこちょこ覗きながら細く長く利用することになりそうです。

#スマホ #アプリ

いつの間にかTwitterの名前もアイコンもXになって仕様もすっかり変わってしまい、全然慣れない今日この頃、皆さん如何お過ごしでしょうか？元々ここ1年ほどあまり使ってなかった旧Twitterですが、それでも公式の情報を得るために利用してたので残念でなりません。最近は代替SNSが雨後の筍のように登場してますが、その中から私が登録したのがタイッツーです。そこそこ公式サイトや有名人も登録しているのがありがたい。

そのタイッツー、サービス開始当時から比べると機能が充実したとは言え旧Twitterと比較するとまだまだだし、公式アプリもないので物足りなく感じる人が多いかもしれません。しかしポツポツと有志が公開してるツールが登場しはじめてるのは心強い。ここらへんは初期の旧Twitterと似てますね。そのうち非公式アプリも登場するかもと期待してます。

そんなツールのひとつにタイッツーPlusがあります。便利機能が追加されたユーザースクリプトで、公式ではパソコンとiOSでのインストール方法が書かれてますが、AndroidについてはAndroidのFirefoxは拡張機能が使えるらしいのでそこからTampermonkeyなどを選べば導入できるかも？
タイッツーPlusとしか書かれてません。というわけで導入できるかどうか試してみたら大丈夫だったので、丸っきりの初心者でも導入できるように記事にしてみました。わかりにくかったらすみません…。

Tampermonkeyをインストール
大前提としてFirefoxでしか動作しないので、インストールしてない場合はFirefoxをインストールしてください。インストールしたらアドオンを開きます。アドオンを開くとTampermonkeyがあるのでインストールします。下記の画像の画面が出ますが、プライベートモードで使うかどうかはお好みでどうぞ。これでTampermonkeyのインストールは完了です。

タイッツーPlusをインストール
タイッツーPlusをインストールするためにTampermonkeyの設定画面を開きます。設定画面を開いたらタイッツーPlusをインストールします。公式のパソコンでのインストール方法ではユーティリティタブからインストールするようにと書かれてますが、何故かスマホだとユーティリティタブがありませんのでユーザースクリプトをコピーペーストして保存する方法を使います。公式のhttps://ikasoba.codesk.dev/taittsuu-plus/index.jsをタップするとユーザースクリプトの内容が表示されるので、それをコピーしてください。下記の画面が出てくるので、エディターの内容を消して先ほどコピーした内容をペーストし、保存します。これでタイッツーPlusのインストールは完了です。この状態でタイッツーを開くと右上に新たなメニューが登場し、ライトモード、ダークモードを手動で選べるようになります。
テーマを利用する
タイッツーPlusではテーマを利用できます。見た目のカスタマイズですね。簡単に利用できるのは背景色の変更です。何故か二重にテーマ一覧が表示されますが、下のほうの一覧を利用してみました。これで背景色を変更できます。この状態で別のプライマリーカラーを選択すると、別の背景色に変更できます。なお、モードは必ずライトモードを選択してください。

さらに自作テーマも追加できます。初心者向けでないので詳しい説明は省きますが、私は自作テーマを利用してます。なお、背景画像はweb*citronで配布してる壁紙素材を加工したものです。
まとめ
タイッツーPlusの機能について、詳しい説明はテーマしかしてませんので(公式に説明がなかったので)その他の機能については公式をご覧ください。皆で楽しくタイツをかぶりましょう！

#タイッツー #カスタマイズ

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

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

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

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

#てがろぐ #スマホ

このブログで使っているてがろぐは投稿に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 #てがろぐ

予定を書き込むのはカレンダーアプリでもいいんですが、そういうのも含めて書ける日記アプリを探してました。そして見つけたのがデコ日記です。2週間ほど使って便利なところ、不便なところがわかってきたので書き出してみようと思います。

概要
「個人の日常を時間とともに記録することができる日記帳です。」と書かれている通り、一日にいくつも投稿できる日記アプリです。主な機能として

・画像、動画ファイルをアップロードできる
・音声録音対応
・投稿の背景色とパターンを自由に変えられる
・ロック機能(パスワードor指紋認証)がある
・Googleドライブに自動バックアップできる

などがあります。ひとつの投稿に画像は15枚、動画は5分以内のものを5つまでアップロード可能で、私が使ったことのあるアプリの中では一番多いです。

便利な点
カテゴリを作って整理できるところでしょうか。カテゴリに絞ったタイムライン表示もできます。レシピの記録や子供別に予定を書き込むのに適してそうです。

また、チェックボックスを作成できるのが嬉しい。チェックした項目を下に移動するかどうかは設定で選択可能です。今までに投稿したチェックボックスだけを表示する機能もあります。1週間分、1ヶ月分、1年分、全ての4種類の表示方法があり、それぞれ何％チェック済かがわかるようになってます。これが意外と便利。チェック漏れがないかどうかが一目瞭然です。

投稿にはリンクも貼れます。URLだけを貼れるだけでなく、文字にリンクさせることもできるので、長いURLもすっきり表示させられるのが良い。リンクの文字色などの装飾は設定で変更できます。

面白い機能としてフォント変更機能があります。これは任意のフォントファイルを追加することでフォントを自由に変えられるもの。ただし、投稿内で使えるフォントは1種類だけです。フォントの追加は指定のフォルダに追加するだけ。また、一度使ったフォントはGoogleドライブにバックアップされるので、機種変したときに再度フォントファイルを追加する必要はありません。すごく親切設計。
不便な点
投稿した文字をコピーしたくても、編集モードにしないとコピーできません。さっとコピーできないのは不便ですね。チェックボックスも編集モードにしないとチェックをつけられないので面倒です。このあたりは改善して欲しいところ。

投稿の背景色やパターンですが、デフォルト値の設定ができません。デフォルトは白なので、投稿のたびに設定しなくてはならないのが面倒。できればカテゴリ毎にデフォルト値を設定できれば楽に投稿できると思います。

また、画像をアップロードする際、なかなか画像のあるフォルダが表示されないんですよね。MicroSDカードに保存してる画像があるからなのか、それとも保存してる画像が多すぎるのか(7000枚くらいあります)。今まで使ったことのあるたアプリではこんなことはなかったので、なんとかして欲しいものです。

終わりに
ちょっと不便かなあと思うところはありますが、それを差し引いても使いやすい日記アプリだと思います。がっつり長文の日記を書く人には不向きかもしれませんが、ちょっと一言書くだけとか、予定とごちゃまぜにして書きたい人にはうってつけです。

ただ、チェックボックスとカレンダー表記を使うには課金が必要なんですよね。と言っても買い切り型でお値段も440円と少額なので、使ってみて合うと思えばそこまで悩まなくても課金できるお値段だと思います。

#スマホ #アプリ

今までパソコンでもスマホでもブラウザはYandex Browserを使ってました。しかしこのところとにかく重い。なかなかページが表示されない。キャッシュをクリアしても再インストールしても改善が見られないので、これはもうブラウザを乗り換えるしかないと乗り換え先を探し始めました。

拡張性の高いブラウザがいいので、Chromeはまず除外。また、ブックマークやCookie、パスワードの同期をしたいのでパソコンでも同じブラウザを使うことが条件。というわけでOpera、Vivaldi、Firefoxを候補に検討した結果、Firefoxが一番しっくり来るかなあと。

しかしここで問題が。Android版Firefoxでは使えるアドオンが思いっきり制限されてます。これでは拡張性が犠牲に。任意のアドオンを追加できるFirefox Nightlyはありますが、なんせ開発バージョンなので不安定でメインで使うのはちょっと危ういです。そこでF-Droidで配信されてるFennec(F-Droid版Firefox)を使うことにしました。Nightlyよりは安定して使えます。アドオンですが、View Source・Format Link・Top and Bottom scroll buttonsを利用してます。View Sourceはそのまんまでソースを表示するアドオンです。パソコンと違ってソースの表示が面倒くさいので。Format LinkはページのタイトルやURL、選択テキストを登録したフォーマットに従って出力してくれるというアドオンです。リンクや引用のタグを生成するぐらい朝飯前。ブログを書くなら滅茶苦茶便利です。アプリで似たようなことをできるものがないか探したけど、見つからなかったのよね…。だからこのアドオンが使えるとわかって大変ありがたかったです。フォーマットの書き方についてはdevBeans Blogさんの記事を参考にしました。

Top and Bottom scroll buttonsはページの最上部と最下部へ一気にスクロールできるボタンを表示するアドオンです。設定画面でわかる通り、ボタンの位置は5つの中から選べますし、ボタンの大きさや透明度を調整できます。ボタンを常に表示するかどうかも選択可能。かなり自由度が高いです。Yandex Browserでは最上部に戻るボタンを表示できる機能があったので、なくなると不便だなあと思ってたのが解決して良かったです。

まだまだ弄りはじめたばかりなのでこれからアドオンを追加するかもしれませんが、あまり追加しすぎて挙動がもっさりしても困るので、とりあえずはここまでにしておきます。それよりもタブの並べ替えができるようにならないかなあ。Nightlyではできるので、そのうち機能が追加されるかもしれません。

余談ですがAdGuardを利用してる場合、設定→Fennecについて→ロゴを5回タップして設定画面に戻る→Secret Setting→Use third party CA certificatesをオンで幸せになれます。about:configを弄らなくても大丈夫。まあこんなことをしなくちゃならないのはFirefoxぐらいなので、どうにかして欲しいところですが。

#スマホ #ブラウザ

※この投稿は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で埋め込みたいなと思ってたんだけど、現在利用してるロリポップでは上位ディレクトリを参照すると動かない らしい。なんだよそれ利用できないじゃん(泣)

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

#てがろぐ

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

Bloggerでは作成ビューとHTMLビュー、どちらかを選んで記事を書きます。作成ビューは書式を選んで書いていくモードで、HTMLを知らない人でも書けます。HTMLピューはその名の通り、HTMLを使って書くモードです。私はHTMLビューで記事を書いてます。

パソコンで書くときはタグを定型文として登録してるクリップボード履歴ソフトClibor と、Chrome拡張機能のCreate Link を併用してます。

Create Linkは見てるページのタイトル(もしくは選択した文字列)とURLを好きなフォーマットでコピーすることができる拡張機能です。実はAndroid版のYandex Browserでも使えるので、スマホやタブレットで記事を書くときでも簡単にリンクや引用のHTMLをぺったんこできます。マジ有能。

また、スマホやタブレットではCliborの代わりにコピペリストを使ってます。日本語入力に単語登録してもいいんだけど、編集のしやすさでこちらをチョイス。

コピペリスト - クリップボード支援・定型文 / copipe（非常駐） - Google Play のアプリ

しかし、スマホやタブレットでの入力で問題が。文章が長くなると、キーボードに文章が隠れて見えなくなるのです。これでは短文しか打てません。仕方ないのでテキストエディタで書いて投稿フォームにコピペし、画像だけ投稿フォームで挿入するようにしてます。面倒だけど他に方法を思いつかない。Googleさんはこの手の不具合は放置しそうだし。

こう書いてみると投稿フォームに関しては使い勝手が快適とは言えないBloggerですが、無料で広告なし、独自ドメインまで使えるんだから文句は言えないですね…。

#Blogger

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

上の画像にあるようなページトップに戻るボタン。あると便利だけどサイトやブログ側で用意する必要あるの？という話です。

実は私、スマホでのメインブラウザとしてYandex Browser を利用しています。このブラウザはページトップに戻るボタンを実装していて、設定からオンオフができるようになってます。設定画面の日本語がおかしいのはロシア製ブラウザなのでご愛嬌。

このボタン、下にスクロール中は非表示になり、ページ最下部に到達、もしくは上にスクロールしようとすると現れます。そしてスクロールをやめると消える仕様です。だからボタンを実装してるページで上にスクロールしようとするとボタンが重なってしまいます。

ブラウザ側のボタンはきちんと動作しますが、見づらいし気になって仕方ない。正直邪魔でしかないです。でもあれば便利だからブラウザ側でオンにしてるわけで、実装したくなる気持ちはわかります。ただ、ブラウザの機能と違ってオンオフできないのが問題。オンオフ実装が当たり前にならない限り、私のちょっとしたストレスは続きそうです。

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

以前、ブログをカスタマイズしたことを書きましたが、あれからかなり手を入れたのでまとめておこうと思います。

- Googleフォントの導入 -
Googleフォントのさわらびゴシックを導入しました。そのままコードを貼り付けるとエラーが出てしまったのですが、下記の記事を参考にして解決しました。

BloggerでのGoogle Fonts(日本語Webフォント)の使い方

- Font Awesomeの導入 -
アイコンフォントを使いたくて、Font Awesomeを導入しました。アニメーション用のスタイルシートもありますが、多分使わないので導入は見送りました。

- タイトルロゴ作成 -
ロゴメーカー を利用してタイトルロゴを作成しました。最初は自作しようと思ってたんですが、フォントをあれこれインストールするよりもこちらのほうが楽なので。作成したらヘッダーガジェットからロゴをアップロードして終了です。

- サムネイルのサイズ変更 -
サムネイルが小さすぎると思ったのでサイズを変更しました。

- 文字のデザイン -
見出し、リスト、引用、太字の見た目をCSSで整えました。細かいところはちょこちょこ変えるかも。

- 目次自動生成 -
そんなに見出しつきの文章は書かないと思うので悩んだのですが、この記事のように全く書かないわけでもないので目次を自動生成するスクリプトを導入しました。参考にしたのは下記の記事です。

自動目次とスムーススクロール | ふじろじっく

- SNSシェアボタン -
利用させて頂いてるテーマQooQ では、記事の上下にSNSシェアボタンがあります。そのうち上のシェアボタンを外して下だけにしました。また、シェアボタンのデザインもちょこっといじってます。

- プロフィール -
Bloggerには基本情報というプロフィール的なガジェットがあるのですが、そのままでは情報を追加できないのでHTML/JavaScriptガジェットを追加して、プロフィール用のHTMLを書きました。

- アーカイブ -
アーカイブをプルダウンメニューにしてCSSで見た目を整えました。階層やフラットリストだと、長くブログを続ければ続けるほどだらだら長いリストになってしまうので。

実はラベルもプルダウンにしようかどうか迷ったのですが、こちらはすべてのラベルが見えているほうが視認性が良いと思ったのでクラウド表示のままにしてます。

- ブログ内検索 -
ブログ検索ガジェットを追加すれば簡単にブログ内検索フォームを追加できるのですが、CSSで見た目を整えようとしたら面倒くさかったのでHTML/JavaScriptガジェットに検索フォーム用のHTMLを書いて設置することにしました。一応検索は問題なくできているようなのでこれでいきます。

- その他 -
ソースコードを書くときに見栄えを良くしてくれるhighlight.jsを導入するかどうかで迷ったのですが、書く機会ができたときでいいやということで今回は見送りました。これで大体カスタマイズは終わったかな。年内に終わって良かった…。実は某所で今年中にカスタマイズを終わらせる宣言してたので(汗)

- 追記 -
記事一覧があれば便利かなということで、自動で記事一覧を生成してくれるウィジェットを使ってサイトマップの固定ページを作成しました。下記の記事にあるウィジェットをお借りして、見た目はCSSでちょこっといじってます。(2020.12.7追記)

HTML サイトマップウィジェット (2020/08/07 お知らせを追記しました) | ふじろじっく

#カスタマイズ #Blogger

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

ほぼほほほったらかしだったブログをカスタマイズしました。背景画像をレスポンシブ対応するの、やりたかったんだよなあ。細かいところはまだ弄ってないけど、大体体裁は整えられて満足です。

参考にしたサイトは下記の通りです。

記事中に画像がない場合のサムネイルを設定する【Blogger/QooQカスタマイズ】 - あさいてむ

【QooQ 他】コメント欄のデザインカスタマイズ | ふじろじっく

【QooQ】ナビゲーションバーを上部に固定する方法 | ふじろじっく

#カスタマイズ #Blogger

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

以前から気になってたOGP画像を設定してみました。画像作成に使ったのはCanva というサイトです。

無料でも十分使えるし、スマホからでもアプリでパソコンと同様に使えます。本当に便利な世の中になったものです。

画像はプロフィールページ用に契約してるレンタルサーバーにアップしてますが、クラウドサービスを利用したほうが簡単かもしれませんね。

そしてTwitterにURLを投稿した結果がこれ。

無事設定した画像が表示されました。
#カスタマイズ #Blogger

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

日々の予定はGoogleカレンダーで管理してるんですが、これが予定を確認しそびれて予定をすっぽかしそうになることがあるんです。そこで何か見忘れないいい方法がないかと模索してたんですが、偶然 Calendar Status というアプリを見つけました。

このアプリは通知領域に数件の予定を表示してくれます。メールやLINEの通知は毎日来ますから、通知領域に目を通さない日は絶対にない。これなら予定を確認し忘れることもないというわけです。

日本語化されてないのがちょっと残念ですが、日本語の予定が文字化けするわけではないので無問題。これで予定の管理はバッチリです。