投稿

ラベル(Webサービス)が付いた投稿を表示しています

Bloggerで独自ドメイン/カスタムドメインをhttps接続に設定して使用する方法

イメージ
無料ブログのBloggerは独自ドメインを設定してレンタルサーバーとして無料で使うことができる。独自ドメインで有料ブログを運営する際にはレンタルサーバーの料金もかかるのが一般的だから安くても年間数千円が差し引かれるのは非常に嬉しい。
機能も殆ど変わらない。個人的にGoogleフォトの高画質の写真が載せられるのとBloggerの強制の広告が出ないのが良いと思うBloggerの無料ブログの特徴が独自ドメインで引き継がれるのが嬉しい。ただし一部で新しい機能が追加されるのが遅れる場合があるかも知れないから留意しておきたい。現時点ではSSL暗号化通信(https)が二年くらい無理だったけれども今年の始めから可能になってBloggerの無料ブログと独自ドメインの機能の大きな差はなくなって来た。
性能上、明らかに違うのは国別URL(ccTLD)が独自ドメインで発動しなくなる。Bloggerの無料ブログは訪問者の地域によってトップレベルドメインの「.com」が日本では「.jp」とかリダイレクトされるようになっている(ブログが国別の URL にリダイレクトされる)。独自ドメインを設定すると「.com」ならば「.com」のままで、どこの国からでもアクセスするブログになる。通常の場合と同じに戻るといって良い。

目次
Bloggerでカスタムドメインを設定する独自ドメインのDNS設定の二つのCNAMEネイキッドドメインをリダイレクトするカスタムドメインにhttpsを使用する鍵マークは緑でなくても構わない独自ドメインを導入した後の修正点

Bloggerでカスタムドメインを設定する
無料ブログから独自ドメインへ移行するにはBloggerのウェブの編集の設定の基本の公開の「ブログのアドレス」で設定する。Bloggerでは特にカスタムドメインと呼ばれる。最初は無料ブログで登録したURLが表示されていて隣の編集はそれを変更するので、独自ドメインを導入するためには下の「+ ブログのサードパーティ URL を設定」を使う。もう一つ「ドメインを購入」のボタンはGoogle Domainsでカスタムドメインのためのドメイン名を購入できる。
注意点としてBloggerの独自ドメインにはサブドメインしか使えないみたいだ。かりにメインサイトを想定する場合でもドメイン名の前に「www」を付けたURLのブログになる。何も付かない…

サイトのファビコンとウェブクリップアイコンの汎用的な設定とBloggerでの導入手順

イメージ
サイトでファビコンやウェブクリップアイコンを設定すると訪問者の利便性が上がるから良いと思う。前者はブラウザのタブでサイト名の先頭に付けられる。後者はスマホ/タブレット向けのショートカットアイコンで、ブラウザのブックマークでサイト名の先頭に付けられたり、ホーム画面に追加するとデバイスに貼り付けられたりする。ファビコンとウェブクリップアイコンの何れの画像もサイトの顔みたいに訪問者へどんなサイトなのかを直感的に示すのに役立つ。
ファビコンの汎用的な設定について

サーバーに専用の画像をアップロードサイトのhead内にlinkタグで画像URLを記載
ファビコンのサイズ縦横16~64px程度で、綺麗に表示される画像を専用に作成して使用すると良いと思う。
大きな画像を使用してもブラウザが自動的に縮小して表示するから大丈夫だ。
ファイル形式はpngが小さめの画像の画質には崩れ難くて適しているけれどもWindowsのIEブラウザがicoしか対応してない、またはiOSがpngに対応してない場合があるらしいから合わせるには注意しなくては行けないし、両方とも用意しても良いと思う。
ファイル変換はWebサービスのCloudConvertが高性能で、変換ミスが全くないし、個人的に良く使っている。日本語に対応したWebサービスではファビコン作成が使い易そうだ。
サーバーにアップロードする画像のファイル名は「favicon.png」や 「favicon.ico」などの「favicon」にしなくては動作しない。
そしてサイトのhead内にlinkタグで画像URLを記載してファビコンのファイルを呼び込む。
<link rel="icon" hrel="画像URL">
詳しくはrelの「shortcut icon」で、typeの「image/画像のMINEタイプ」も記載するけど、前者を短縮して後者を省略しても反映する。
サイズを変えてブラウザ、またはデバイス毎に何種類も記載することもできてlinkタグに「size」で「size="16×16"」のように付け加えるんだ。その場合、ファビコンのファイル名も「favicon16.ico」のように「favicon」に番号を付けて区別する。記載した複数のlinkタグの優先順位はブラウザに依存しているらしい。問題が…

Bloggerの無料のブログサービスとしての特徴:成り立ちと使用感と二つの利点など

イメージ
無料ブログというか、ホームページを含めてもBloggerでのサイト運営が最も気に入っている。

Bloggerの成り立ちはTwitterと結び付く
Bloggerは世界で最も利用者の多いブログサービスの一つだけれども元々はTwitterの創業者の一人のエヴァン・ウィリアムズがパイララボで開発したらしい。ブログやブロガーという言葉もBloggerから専ら来ているようで、だからそのままの名前が付いている(Blogger/ブロガー)のもコンセプトがオリジナルのせいだとも過言ではなかったんだ。考えると格好良いし、Bloggerはかつてホームページだけしかなかったインターネットに新たな地平を切り拓いていた。アイデアが画期的で、素晴らしいと感動を覚える。
1999年に始まって人々に大きく広まった2003年にGoogleにパイララボは買収されたんだ。以降、Bloggerはブログサービスとして現在に至るまでGoogleが提供し続けている。
エヴァン・ウィリアムズは2004年にGoogleを退社して2006年にTwitterをオブビアスで立ち上げた。Bloggerに続いて人々に又大きく広まったからビックリするし、さらに盛り上がってもいると思う。しかし何れにせよ、並外れた才気を示している結果だったのは間違いないだろう。
Bloggerは使用感がパソコン向けで辛い
僕は何も知らずにBloggerをやって日本ではさほど広まってなくて直ぐに気付かなかったせいかも知れない。やってみるとスマホでブログを作成するのが大変なので――公式アプリを使っても只単に投稿するのが精一杯みたいな現今――日本の他のブログやホームページのモバイル端末に対応した無料サービスに使用感は完全に劣っている。パソコンか、せめてタブレットでなくては厳しい状況で、たとえ色んなデザインが作り出せるとしてもウェブの編集画面が縮んだままだから面倒臭いのは事実だ。
スマホで気持ち良くブログを作成できないかぎり、もはや率先してオススメするわけには行かないと思う。
日本は海外と比べて特別かも知れないけど、ガラケーの頃からモバイル向けのホームページやブログの無料サービスが発展して来ているし、またはパソコンでやっても愉快なので、とにかく全てのデバイスに的確に対応した使用感こそ世界最高の水準とするとBloggerは追い付いてないといわざるを得ない。
一つだけ凄いの…

フリー素材のぱくたそは専属モデルの河村友歌が相当に可愛いと好印象を与えた

イメージ
サイトで無料で使える写真などのフリー素材のWebサービスは海外に多いけれども日本にもぱくたそ(PAKUTASO)を見付けて良いと思った。
ダイヤル式電話機の使い方がわからずスマホから電話する平成生まれ by すしぱく via ぱくたそ
ユニークな写真が貰えるというか、外国人からは得難いはずの日本人ならではの小綺麗に纏まったようなセンスと数多く出会えるのが日本のWebサービスとして流石に有り難い。
ぱくたそは画質も優れていて高品位な写真を提供していて素晴らしいと心から拍手を送る
ダウンロードはSのサムネサイズとMのブログサイズとLの高解像度版の三つ――ウェブで切り出ってトリミングの機能も付いている――から選べる。最高のLの高解像度版だと1MBを越えるような非常に大きなサイズになる。サイトで使うには一般的にMのブログサイズがスマホからパソコンまでの閲覧に適していて容量も軽くて必要十分だと思うけれども写真の画質に拘泥るとすると非常に大きくて重くてもオリジナルに近い状態で手に入るのが嬉しい。

アカウントの登録が不要で、非常に大きなサイズの写真を提供するWebサービスは海外でも珍しいと思うし、好意的に運営されている。難点なのはサイト広告が多過ぎるところで、フリー素材のボタンとも接近しているから押し間違えないようにしないと何も貰えなくなる。
ぱくたその利用規約を確認するとフリー素材のライセンスはパブリックドメインやクリエイティブコモンズのCC0とは一致してないから勝手には使えないと幾分とも注意を要する。
二次利用や商品価値を決める成果物の場合、事前に許諾やクレジット表記が必要な場合があります。(例えば、販売物として、カレンダー、名刺、スマホケース、Tシャツなど、全面にほぼ無加工で使われている場合に該当します。販売しない配布物、掲示物であれば問題ありません。)
ぱくたそのご利用規約・ガイド via ぱくたそ
作者の著作権が消滅したか、または放棄されたパブリックドメインやクリエイティブコモンズのCC0とぱくたそがフリー素材として最も大きく異なるのは商用利用が可能だけれども販売目的では不可能と定められているところだ。簡単にいうと著作権法の引用と同様に作品に取り入れた際の主従関係を守らなくてはならなくてフリー素材をメインに使って「二次利用や商品価値を決める成果物」を作成するのは是認されない。それ以外の…

サイトのヘッダー/背景画像を小さくリサイズするアプリと高く圧縮するWebサービスで最大限に軽量化して作成する

イメージ
サイトの表示速度を考えると画像が最も容量が大きくて支障を来し兼ねない。一枚で他の全てを平気で上回ったりもする。影響が非常に大きいので、載せるならば予め軽量化しておくには越さない。
大きさを小さくリサイズしたり、データを高く圧縮したりする方法があってそうしたアプリやWebサービスを使うと良いと思う。
ただし難しいのは画質だ。写真でも何でも画像は小さくリサイズしたり、高く圧縮したりすればするほどに画質を落とし易くてサイトのデザインが崩れて来てしまう。嘆かざるを得なくなるんだ。

目次
画像を最大限に軽量化するためにリサイズと圧縮の二つの方法の組み合わせる一回目の編集:アプリのPhotoshop Expressでリサイズする二回目の編集:WebサービスのTinyJPGで圧縮する

ホームページやブログで画像を載せる際には画質と容量の鬩ぎ合いが避けられなくて絶えず、最高のバランスを模索するように画像を望み通りに作成しなくてはならないと考える。
コンテンツの中心の画像は画質を優先して幾らか重くしても喜ばしいのではないか。
いつも横幅1600~2048pxで作成してcssで画面幅に合わせて表示している。パソコンならば二倍、スマホならば四倍くらいの大きさなので、それだけ容量は膨らんでいるし、リサイズして削る余地は十分に残されているけど、しかし画質を優先して載せたいわけなんだ。
一般的には横幅1024pxくらいが良いかも知れない。ソーシャルメディアなどで多く見かける画像のサイズだ。画質と容量のバランスが適度に取れているように感じる。
容量を優先すれば横幅480pxくらいまで小さくすると画質の低下は目立ち始めるにしても相当に速くてサイトを閲覧するのは快適そのものだ。
メインの画像は画質を優先するけれども気がかりなのはヘッダー/背景画像をどうするべきか。
訪問者が必ずしも注目するわけではないから反対に容量を減らして表示速度を上げておくのが適切だろう。
ただし色々と試した結果としてコンテンツの中心の高画質の画像から余りかけ離れた劣化を認めるわけには行かなかった。サイト全体のバランスが崩れてしまうのは頂けないので、小さくリサイズするにしても結局は普段の画質優先の下限の横幅1600pxは欲しくなってしまった。
画像を最大限に軽量化するためにリサイズと圧縮の二つの方法の組み合わせる
画像の容量を減らすためには小さくリサイズ…

Google FontsのEarly accessはcssのfont-faceで軽量化して使える

ホームページGoogle FontsEarly accessから日本語フォントのNoto Sans Japaneseを無料で使っている。とても気に入っていてAndroidのスマホでマシュマロから搭載されているのも嬉しいかぎりだ。
しかしWebフォントとしてホームページにcssへlinkのstylesheetや@importで取り込んで表示するのは非常に厳しくて表示速度を著しく低下させる。日本語は漢字が多くて英語などと比べるとデータサイズを大幅に増やしてしまうせいだ。3MBくらいだからちょっとした画像を300KBとして換算しても、百枚、載せているのと変わらない。
デザインを優先して表示速度を削るしかなかったホームページに朗報が飛び込んで来みたいに軽量化する方法をついに発見した。
Google FontsのEarly accessは普通だと一つのフォントを使っても様々な太さが含まれているためにデータサイズが膨らんでいる。実際に使いたいのは一つだけだとしても全てを読み込むからサイトの表示速度が必要以上に遅くなってしまうわけだった。
本来はダウンロードしてデバイスから自分でバージョンを選んだり、または必要な文字だけをサイトにアップロードして使うから表示速度への影響は少なかったので、それと同じようにできればむろんGoogle FontsのEarly accessはさらにもっと素晴らしかった。
望ましくもcssのfont-faceから読む込むと太さを絞り込みながらデータサイズを減らして使えると分かって来た。
Noto Sans Japaneseのフォントウェイト400
@font-face {   font-family: 'Noto Sans Japanese';   font-style: normal;   font-weight: 400;   src: local('Noto Sans Japanese'),     url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),     url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regula…

Imgurで画像URLと埋め込みコードを取得する方法

イメージ
Imgurは自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにhtmlのimgタグで表示させられる。
そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのhtmlに、そのまま、記載して表示させられもする。
Imgurの画像URLを取得する
ウェブとアプリで方法が微妙に違う。
ウェブでの方法:Direct Link
アカウントにログインして「Image」から画像を一枚だけ開くと左上にプルダウンのメニューがあるので、そこから「Direct Link」を選択すれば画像URLが右横に表示されて使うことができる。
注意点としては画像URLがjpg(jpeg)のタイプしか出ないみたいだ。なのでpngファイルで画像をアップロードしてもそのままの画像URLは取得できなくてjpgのタイプに変換されてしまっている。
アプリだとpngファイルの画像URLが出て来るので、どうしても必要な場合はウェブではなくてアプリからImgurに入るしかないだろう。
アプリでの方法:Share Direct Link
アカウントにログインしてプロフィールの「Posts」から画像を一枚だけ開いてロングタップするとメニューが下の方に表示されるので、そこから「Share Direct Link」を選択してクリップボードなどに画像URLを取得することができる。
ウェブと違って画像URLのファイルはアップロードしたものと同じになっていてjpgファイルはどちらでも変わらないけど、pngファイルもjpgの画像URLに変換されずに出て来る。
Imgurの埋め込みコードを取得する
アカウントからログインしてもしなくても大丈夫なので、Imgurの画像から誰でも他のサイトに使えるようになっている。
ログインの管理画面から:HTML Image
ウェブでしか取得できなくて「Image」から画像を一つだけ開くと左上にプルダウンのメニューがあるので、そこから「HTML Image」を選択すれば埋め込みコードが右横に表示されて使うことができる。
画像ページのボタンから:Embed Post
ウェブのパソコン版だけで出て来て画像ページの共有ボタンの下の点線のメニューから「Embed Post」を選択してクリップボードなどに埋め込みコードを取得することができる。
Imgurの場合はアカウントを取らなくても画像をアップロード…

Imgurならばアップロードした画像を外部サイトにスムーズに載せられるから好き

ホームページやブログを様々なディレクトリー型の検索エンジンに登録している。するとバナーが使えるサイトもあってしかし画像のアップロードはできなかったりするとどこかのサーバーから画像のURLを持って来なくてはならないんだ。
今までGoogleのPicasaを使っていてバナー画像のURLは取得できたけれどもフォトに統合されるような形で今年の春にサービスが終了してしまった。
外部サイトに既に貼った画像は使えるし、消え去るわけでもない。ただし僕としては気持ち悪いので、他のウェブサービスに変えなくては行けないと考えていた。
Googleのフォトが使えればアップロードした画像のデータは引き継がれているというか、元から中身は同じだから何の迷いもなかった。画像のURLを取得することができるかどうかだけがちょっと曖昧で、公式では全くアナウンスされてないんだ。Picasaは画像を外部サイトで使って構わないみたいにヘルプでやり方も載せていたのにフォトは音沙汰なしでどうにも具合が悪い。
尤もクラウドストレージから画像のURLを取得できれば手っ取り早くて最も簡単ではなかったか。Googleならばドライブだけれどもアルバムで自分が見たり、知り合いに見せたりする画像ではないわけだし、ホームページやブログのバナーで外部サイトに載せることが主眼だからデータだけ置いてあれば十分なんだ。しかしこれも画像のURLが取得できるかどうかについてはやはり公式で全くアナウンスされてなくて具合が悪いことには変わりがなかった。
追記:Googleのドライブは一般公開された画像や動画などのウェブの設定からiframeタグ(画像のURLではない)での埋め込みコードを取得できるように変わった。
画像のURLを出して外部サイトで使って良いとちゃんといってくれるウェブサービスが欲しい。ただし直ぐにサービスを終了されても困るからそれなりに安定したサーバーでなくては使っても仕様がないかも知れない。外部サイトに画像を置いたのにリンク切れでは悲しくて目も当てられなくなる。
インターネットでぐるぐる回りながら気を引かれたサイトがImgurだった
トップページ via Imgur
以前、一回、試してはいた。アカウントを持たなくても画像をアップロードしてそのURLを取得できる。ただし画像の置いてあるページのURLが忘れるや否や取り戻せなかったんだ。サイト内で…

サイトにAddThisの共有ボタンを置いてみた

イメージ
アクセスアップのためにサイトに共有ボタンを置きたいと考えた。人々に手軽に拡散して貰えて良いのではないかしら。
しかしTwitterやTumblrなど、オリジナルを幾つも並べるとサイトの表示速度が遅くなって反対にアクセスダウンになり兼ねない。訪問したのに何秒も開かない、待たされるだけ待たされて挙げ句の果てにはブラウザが固まってしまう、そこまで重くはならないにしてもか、なるべくスピーディーに動いて欲しい気持ちがある。
ウェブサービスで探しみたらAddThisというのが見付かって使い出している。海外のサイトで日本語には全く対応してないけれどもアカウントを登録して無料で簡単に導入できるんだ。オリジナルの共有ボタンを幾つも並べるよりはサイトの表示速度が遅くならないようにも感じられた。
トップページの下段に共有ボタンを置きました via Wind of crystal
アイコンも好きだ。綺麗に纏まっている。可愛らしくも受け取り、ちょっとしたところで、ボタンの余白、それぞれの間隔の取り方だったり、大きさもそうか、僕としては気に入ったふうにできているので、申し分はないだろう。
自分でシェア先を選べるけど、ドラッグ&ドロップなので、スマホのChromeだと不可能だった。しかし数だけを決めて自動的に出すこともできるのが特徴的だ。面白いと思ってそれでやっているよ。世界中のソーシャルメディアが収録されているので、大勢に手広く訴えかけられる。

ブログではBlogger専用のAddToAnyが便利なので、新しく使い出している。