自己紹介

自分の写真

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

新着記事

過去ログ

カテゴリ

ハッシュタグ

複合検索

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

リンク

Sakko Blog

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

タグ「カスタマイズ」を含む投稿［7件］

AndroidでタイッツーPlus

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

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

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

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

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

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

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

てがろぐ設置一周年

昨年の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で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で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

OGP画像を設定してみた

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

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

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

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

そしてTwitterにURLを投稿した結果がこれ。
20210520142255-admin.jpg
無事設定した画像が表示されました。
#カスタマイズ #Blogger

Sakko Blogに戻る

プロフィールページに戻る