自己紹介

自分の写真

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

新着記事

カテゴリ

ハッシュタグ

複合検索

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

Sakko Blog

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

カテゴリ「Web」に属する投稿[8件]

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

※この投稿は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の投稿フォーム

※この投稿は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さんはこの手の不具合は放置しそうだし。
20210521090252-admin.jpg
こう書いてみると投稿フォームに関しては使い勝手が快適とは言えないBloggerですが、無料で広告なし、独自ドメインまで使えるんだから文句は言えないですね…。

#Blogger

ページトップに戻るボタンって必要?

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

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

実は私、スマホでのメインブラウザとしてYandex Browser を利用しています。このブラウザはページトップに戻るボタンを実装していて、設定からオンオフができるようになってます。設定画面の日本語がおかしいのはロシア製ブラウザなのでご愛嬌。
202105210847041-admin.jpg
202105210847042-admin.jpg
このボタン、下にスクロール中は非表示になり、ページ最下部に到達、もしくは上にスクロールしようとすると現れます。そしてスクロールをやめると消える仕様です。だからボタンを実装してるページで上にスクロールしようとするとボタンが重なってしまいます。
202105210847043-admin.jpg
ブラウザ側のボタンはきちんと動作しますが、見づらいし気になって仕方ない。正直邪魔でしかないです。でもあれば便利だからブラウザ側でオンにしてるわけで、実装したくなる気持ちはわかります。ただ、ブラウザの機能と違ってオンオフできないのが問題。オンオフ実装が当たり前にならない限り、私のちょっとしたストレスは続きそうです。

ブログをカスタマイズ その2

※この投稿は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

Calendar Status Pro

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

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

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

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