ブログヘッダを作ろうとしてできなかったというお話
ブログヘッダを作りたかったんじゃーーーー（ノД`)、
扉絵はこんな感じのヘッダにしようとしていたの図。
そして以下が途中まで作ったの図。
……なんかアメーバ上で表示するとでっかいな；´Д｀)
携帯からの表示は未確認なので、もしかするとちゃんと表示できないかもしれません。
(ちょっと携帯から確認しました。iOS10 Safariはそれなりに動いているもよう。携帯電話を横にして表示したほうが見やすいかもしれません。アメーバアプリから参照するとスライドアニメーションがなぜか繰り返されない。しばらくしてから画面タップするとまたスライドが始まるが、アプリ固有の不具合なのでこれは修正は無理っぽい)
いやいや、そもそもブログヘッダに使えないと分かった時点で気分はショボショボなので……。
ヘッダ部分のHTMLを書き換えられるわけじゃないから、背景画像や文字を差し替えることくらいしかできないのに、ワイは何を気合入れて作ろうとしていたんだ……。
ちなみにこれ、本当はもう少し作っていたのだ。
マウスカーソルが当たるとスクロールが止まったり、もう少し繰り返しの途切れがましになるようにしていたのだが、なぜかスクロールを止めるようにすると Microsoft Edgeブラウザでマウスホバー動作がおかしくなる。ホバー判定領域が Transformされていないような感じ。IE11に至ってはマウスホバーしてもいうこと聞いてくれない感じ；´Д｀) Chrome以外は全滅か……。
っていうのがこちら。
CSSの勉強になったからよしとしておくか……；´Д｀)
↓は扉絵
アメーバのサイトは道に迷いやすいと思っていたけど
アメーバのサイトって色々種類があるし、あれこれ見にいっては思うところに戻れずに「あれ？」と思うことが多々ある。
慣れていないせいもあるし、元々道に迷いやすいので；´Д｀)頑張って元いた場所に戻ったりしていた。
しかしさっき気付いたんだけど。
携帯からアメーバのトップページに入って、どこかのブログページに入ったとする。
↓
記事を選択して内容を表示する。
↓
どういう種類のブログか気になったのでブログ情報を選択する。
↓
ブログ説明を確認して「なるほどなるほど」と思う。
↓
「じゃあ別の記事も見てみるか」と記事一覧を――……。
ない。ないのだ。記事一覧へ移動するためのメニュー項目が。
あれだけ大量のメニューをそこかしこに用意しておきながら、必要な場所に必要なメニューがない。
これはさすがに信じられないんだけど、アメーバのサイトを作っている人 (仕様作成担当)はどうやってページ内に表示する要素なんかを決定しているんだろう。ユースケースとか考えないのか？考えているならあって当然の項目がないって、そんなことありえないんだけど。
こんなことばっかりやってるから、ユーザーが見たいコンテンツを見ることができずにサイト内で道に迷ってしまうんじゃないか。あれだけメニューばっかり表示してるんだから、せめて行きたい場所にくらい行かせてくれ、と思う。
うーん、こういうのが見つかってくると場当たり的に作ってるんじゃないかとか思ってしまう；´Д｀)しっかりしてくれーー
´Д｀)< 短い夢だった……
_(:3 」∠)_
今朝のPV数を確認すると、昨日の半分になっていた；´Д｀)ｲｯﾀｲﾅｾﾞ
何か問題発言でもあっただろうか。二人に一人を興味対象から外させるような何か。
まあいいか、いつも通りに戻りつつある感じで。またのんびりやっていくかな。
しかしあの動画ヘッダ、それなりに参照してもらっているみたいで需要はあるのかなと思う。
個人的にももう少し使いやすい形にしたいとは思うものの、ブログの制限がひどくていかんともしがたい；´Д｀)
おわびのしるしというわけではないですが、ブログで使えるかもしれない小ネタでも。
小ネタのコーナー
今回で終わりになるかもしれないこのコーナー。本日ご紹介するのはこちら！
- 文字の縁取り表示と
- 文字の形に切り抜いて表示
です。ついさっきネットで拾ってきた；´Д｀)
ふちどり
- HTMLタグはspanでもpでもaでもdivでも何でもこいです
- 黄色のマーカー部分が装飾を定義しています
- アンダーライン部分がフォントの大きさと色を指定しています。いい感じに変更してください。
<span style="font-size:1.5em;color:#fff;text-shadow:-1px 0px 0px #000,0px -1px 0px #000,1px 0px 0px #000,0px 1px 0px #000;">ふちどり</span>
- HTMLタグはspanでもpでもaでもdivでも何でもこいです
- 黄色のマーカー部分が装飾を定義しています
- アンダーライン部分がフォントの大きさと色と切り抜く画像のURLを指定しています。いい感じに変更してください。
<span style="font-size:1.5em;color:#fff;background:url(https://exsample.com/folder/picture.jpg);background-size:contain;-webkit-text-fill-color:transparent;-webkit-background-clip:text;">文字の形に切り抜いて表示</span>
それではまた～
自分のCSSや画像ファイル配置について
備忘録として自分の今の設定ファイル，画像ファイルの配置について書いておこうかなと思います。もし、もっと良いやり方とかあれば教えてもらえると嬉しいです *´Д｀)
あ、あと書いてて気が付いたんだけど、自分はわざわざDropboxのPublicフォルダを使ったりしているけれどもそんな大げさなものを使う必要はなくて、OneDriveやDropbox，GoogleDriveでも代用可能です。iCloudDriveは知らん；´Д｀)
と、ここまで書いていてさらに気付いたのだが、先日のMovie Header。あれもわざわざ動画を置くサーバーを用意する必要はなくて、単純に下記のような感じ。
Amebaブログで使う動画ファイルの準備方法
- OneDriveかDropboxかGoogleDriveのアカウントを取得する(無料プランで充分)
- ヘッダとして再生させたい動画を準備する(サイズは3メガバイトくらいに抑える)
- 1のネットワークドライブに動画をアップする
- アップした動画をネットワークドライブ上で選択し、共有リンクを取得する
- 先日のMovie Headerのmovieタグ部分に共有リンクを貼りつける
- 完成
個人的にはDropboxがお勧めかも。老舗なので急にサービス終了する危険性が低いこと、Dropboxに対応しているアプリケーションの数が多いこと、そして規約の中に「保存されたファイルの内容を確認する」というような記載がなかった気がする；´Д｀)ﾀﾌﾞﾝﾈ
OneDriveは確かその記載があったはず。
Googleは積極的に顧客の画像ファイルをチェックしている。以前アメリカで、Google社がGoogleDriveに保存した画像が猥褻なものにあたるとして男性を訴えていた。その時のインタビューでも、我々は保存されたファイルの中を確認すると言っていた……。自分の記憶ではその問題でGoogleに基礎された男性が二人いたはず；´Д｀)ｵｵｺﾜ
Amebaブログで使えるCSSや画像ファイルの置き方
こんなにババーンとタイトルを書いてしまっているけど、さっきの動画ファイルの置き方といっしょだから；´Д｀)
アメーバの機能を使えばいいのでは？
そんな声も聞こえてきそうですが、自分用のネットワークドライブに置くことによるメリットもあるのです。例えば
- ブログの背景画像としてアメーバでは厳しいサイズ制限があるが、自前の場合はサイズを気にせずに画像を使える。写真綺麗。ウチのブログで使っている背景もそうやってます。
- 複数の情報サイトを使っているとき、自分が使うデータの取得元を統一できる。Facebookでも同じ画像を使いたい時とか。アメブロだとわざわざアップして…みたいな手順が必要。
- CSSファイルの場合、アメブロ，Facebook, 自分用HPでそのCSS fileを使っていれば、CSS file1ヵ所修正するだけで読み込んでいるすべてのサイトに変更が反映される。
- 自分で管理していれば運営側の都合に左右されにくい。ファイルを壊してしまった場合も自分が悪いと諦めがつく；´Д｀)
とまあホラ、良いことづくしじゃないですか ´Д｀)＜ ワイは疑り深いのです。
なんか関係ないことばかり書いていたらそれなりにブログを書いたという達成感が出てきたので今回はこの辺で。
ちなみに、上の内容でもそれ以外のことでも、自分に分かる内容であればコメント頂ければ回答できるかもしれないです。私の前世は火星人ですか？とか聞かれても´Д｀)< そういう内容はムーに投稿してください。としか答えられません。
｀Д´)＜ CSSを初めから作るのは面倒じゃい
という方があれば、参考になるかはわかりませんがワイがDropboxに置いているCSSファイルをダウンロードしていってもらえれば。
；´Д｀)< ワイのCSSをDownload
下はブログの扉絵
