ブログ記事61件
ブログページの基本フォント主に「body要素」で指定されるフォント指定を、私は「基本フォント」と言っています。HTML基底部で指定した基本フォントは、それより下流枝や末端で「フォントを指定していない」全ての部分に継承されて有効になります。それは、音楽が「演歌」から「ロック」に変わるほどの影響を、ページ表示に与えます。アメブロはブログが登場した頃からの歴史を背負っています。そのため、当時主流の「MSPゴシック」で書かれたブログも少なくはなく、「メイリオ」「游ゴシック」など(但しWi
「ソーシャルボタン」 は何のため「ソーシャルボタン」は、今ではブログの定型飾りの様なもので、使う人が居ようが居まいが、とにかくそこに在る事になってますね。私は今までコイツを押した事がなかったのですが、少し気になる事があり調べました。 気になる事その❶ アメブロを開設するとデフォルトで付いて来る「ソーシャルボタン」は「B!ブックマーク」(はてなブックマーク)「ツイッター」「フェースブック」の3種です。これらのボタン、ホントに役にたつのか?これが最初の疑問でした。日頃
「画像一覧」ページのクラス名変更「画像一覧」ページのクラス名が全面で変更されていました。ページのデザイン構成自体は全く変化がなく、単にクラス名のみを変更した様です。「画像一覧」は比較的最近にいちから制作されたページで、元々クラス名はミーンレスでしたが、CSSコードはHTML構成順にコメント付きで記述していたので、修復が簡単でした。これまでの「AmebloManagement」をご使用の方は「画像一覧」ページのアレンジが無効化され、ページのタイトル文字が読めない状態になります。「画像一
記事リストのサムネイル「ホーム」のフォローフィードは、デフォルトデサインは2列の千鳥配置で、フィードの時系列が判り難いものです。「AmebloManagement」では、1列のリストにしてこの問題を改善していますが、記事のサムネイル(カバー画像)のサイズがリスト1記事分の高さを決定するので、あえて縮小しています。沢山フォローして、どんどん気に入ったユーザーを選ぶ(気に入らなかったら外す)フォローの仕方が、私はお推めです。下はそれを助けるツールです。フォロー管理ツール「Follo
コメント管理画面の「承認」「ブロック」「削除」ボタン今年9月にリリースされた「コメントブロック機能」は、「コメント管理画面」の「ブロック」ボタンによって発動されます。コメントリスト上の「ブロック」ボタンのデザインは、デフォルトは単なる文字の形(実際はリンク)で、「AmebloManagement」のアレンジデザインでもそのままレイアウトを変更しただけでした。これは、周囲の「IP」や「コメントユーザーID」の表示に混ざり締まりがないので、ボタンのデザインに改めました。また、
「管理トップ」「いいね!管理」ページを再アレンジ「管理トップ」は日頃最も良く使う管理画面でしょう。最初は「いいね!」関連の表示を弄り始めたのですが、色々なページを再調整する事になりました。「管理トップ」ページ 「管理トップ」は、各所のデザインを再調整しました。❶「設定」:大きなボタンデザインの表示に変更。❷「過去に投稿したブログ」:左右余白に背景を付けて、カード風デザインに。❸「いいね!リスト表」:記事タイトル・時刻等のフォントサイズを拡大。❹「最近の投稿記事」:
「フォロー管理」ページを再アレンジどうも前ページの結果が気に入らなくて、アレンジを改めました。一番気にいらなかったのは、「フォローしたブログ」のリスト幅が狭く、長いブログタイトルの場合は、タイトルが隠れてしまう部分が多すぎる事です。また、ボタンの窮屈感も。改めたデザインの様子 「フォローしたブログ」のリスト幅を拡げるには、右側のヘルプを無くすしかありません。ヘルプは何処からでもアクセスできるので、ここは非表示にしました。また、アレンジは両方のタブ画面に適用されます。
「フォロー管理」ページの文字が小さいアメーバブログの歴史は古く、2004年9月15日に開始とあり、つい最近もアニバーサリの企画を出してましたね。変化の早いIT/NETの世界で、16年は長い時間です。その中で、特に変わったなと思うのは、スマートフォンユーザーの爆発的な拡大ですが、私はPC派なので、挙げるとすればモニターの大型/高解像化とフォントとデータ通信の速度/量でしょうか。今日もたまたま「フォロー管理」のページを開くと、文字が小さくてフォロー開始日が良く見えないのです。ア
「.json」のファイルについて 拡張子が「.json」のファイルは、JavaScriptプログラムがデータを記述する基本形式です。ブラウザ拡張機能やユーザーが制作したスクリプトツールなどで、ファイル出力・読込みなどを行う場合に、この「JSON形式」を扱う事がとても多くなります。「JSON形式」のファイルは人間が読める文字列(テキスト)としてデータを整形しているので、メモ帳で中身を見る事が出来ます。「.json」ファイルをメモ帳で開くには Win10では、「JSON形式」
「カバー設定パネル」のデザインを変更しました「編集画面」の下部に「カバー画像」の「カバー設定パネル」を配置しています。ver.38は最初のアレンジで、下の様なデザインでしたが少し不満がありました。◎サムネイルのオリジナルサイズ100×100pxを、90×90pxで表示している。◎「選択」ボタン・「選択を取消」ボタンの配置とデザイン。◎サムネイルが無い(未設定)の場合も、大きなパネルサイズが表示される。以上の点を改善しました。下は「カバー設定パネル」の通常の状態で
「コメントブロック設定」ページはブロック管理の中枢「管理ページ」に新しく加えられた「コメントブロック設定」ページは、新しいブロック機能の管理中枢となるページです。「アメーバID」「IPアドレス」の2種の機能に対応する2つの画面があります。各ページの上半分はブロックを設定する入力枠で、決定ボタンを挟んで、その下方はブロックを実行した対象のリストになっています。余りアレンジすべき部分はありませんが、余裕を採り過ぎと思われる部分を少し削り、配色でページを見易くしました。アメー
「カバー画像」設定機能の導入に対応しましたPC版の編集画面にも「カバー画像」の設定機能が導入されました。編集画面の下部に配置されたので、「AmebloWriter」のデザイン修復をして対応しました。「AmebloWriter(Compact)」は、編集画面の縦横の幅をコンパクトに納める事で、編集のし易さを追求しています。「カバー画像」のパネルは、編集画面の左下隅の設定ボタンに縮小しました。通常はパネルタイトルだけが見える状態です。このボタンにマウスを乗せると、下の様に
「コメントブロック」機能がリリースされました既にスタッフブログで報じられ周知の方も多いと思いますが、コメントの「ブロック機能」がいよいよリリースされました。耐性の弱いユーザーを狙った悪意のコメント攻撃を減らす、有効な手段のひとつになると私は思います。アメーバスタッフ『【皆さまへのお知らせ】コメントブロック機能をリリースしました』いつもAmebaをご利用いただきましてありがとうございます。Amebaプロジェクトマネージャーの奥田です。先日告知させていただきました、アメーバIDを指…
「Twitterタブ」の暗背景デザインに対応しました「AmebloWriter(Compact)」は編集画面の暗背景デザインに対応しています。公式スキンにも暗背景のデザインが一定数あり、編集画面で暗背景表示で編集したいユーザーは居られると思います。編集枠内だけが暗背景になるデフォルトのデザインと異なり、「AmebloWriter(Compact)」の暗背景のオプションは、編集画面のウインドウ内全体が暗背景となり、ずっと見易い編集環境になります。下は、通常の明背景の「Twi
ツイッター(ツイート貼付け機能)タブに対応編集画面下部の投稿設定枠から「Twitter連携」のボタンが無くなったのは、Twitter同時投稿機能の終了したからと受け取っていました。しかし、私自身がTwitter連携が未設定で、その理由で私にだけボタンが表示されない状態かも知れず、再アレンジすべきがどうかを迷いました。そこで、Twitterアカウントを取得して「外部サービス連携設定」を行い確認する事にしました。Twitter初心者で全てが見通せないまま、なんとかアカウントを設定。結
右パレットのコード更新に対応多くのユーザーの目に触れないところで、アメブロの各種ページ細部が更新される事は良くある様です。編集画面はツイッター連携の仕様変更で、下部デザインが大幅に変更になり、慣れていたとはいえ「AmebloWriter」での対応は焦りました。今回は、右パレットのCSSコード更新があった様で、「YouTube」のパレットが外に出なくなりました。以前にも同様の問題を経験し、その時は「z-index」の指定が必要でした。今回はもう少し単純な問題で、パレット各タ
SNS同時投稿機能の廃止「ツイッター」「フェイスブック」に記事を同時投稿する機能が廃止になる様ですが、リンクという機能があるのに欲張った機能だなぁと、私は思っていました。これに関わるフェイスブックあたりのいい加減なセキュリティの是正の経過で、結局そんなシステムは止めた方が良いという事になったと、私は見ています。アメーバスタッフ『Twitter・Facebookへの同時投稿機能提供終了について』いつもAmebaをご利用いただきましてありがとうございます。Amebaプロダクトマネージャ
「画像の個別表示」のタイトル部写真やグラフィックに興味がある方は、「画像一覧」ページを開く場合が多いかも知れません。「AmebloManagement」は「画像一覧」ページをフォトライクなデザインにアレンジしています。下はデフォルトの「画像の個別表示」画面ですが、背景が白でページレイアウトには無駄な部分が多過ぎます。ページ上部に「ブログタイトル」「記事日付」「記事タイトル」がありますが、これを下の様に纏めたレイアウトにアレンジしていました。しかし、これは「ブログタイ
フォローフィードのカバー画像「ホーム」の「フォローフィード」には、フォローしたブログの最新記事がリストされますが、各リストの右端には、記事の「カバー画像」(記事サムネイル)が表示されます。記事のカバー画像は、スマホのAmebaアプリでユーザー選択が可能になり、今秋にはPCからも選択可能になる予定です。「フォローフィード」から見に行く記事を選ぶ際に、「記事タイトル」や「カバー画像」がきっかけになる事が多く、「カバー画像」の選択機能は有効でしょう。「AmebloManagement
「:focus」要素の新フォーカスカラーを変更前々ページで採り上げましたが、黒線(+外に白線)の新しいフォーカスカラーは、これまでの「AmebloManagement」のデザイン基調に合いません。キーボードのフォーカス移動操作で表示される「黒枠」は、マウス操作では表示されないものが多く、それはそのままにしています。しかし、その一部がマスウ操作の「:focus」状態で「黒枠」を表示します。そこで、「AmebloManagement」の管理する範囲で、「黒枠」を表示する要素を、出来る
選択範囲の反転色のアレンジを導入しました編集画面で文字列をドラッグして選択すると、選択範囲に反転色が付きます。下の左側はChromeのデフォルトの反転色ですが、この反転色をもう少し濃い色にすると、文字がより鮮明になります。しかし、この反転色は画像等を選択した場合にも付きます。下は、挿入画像をクリックした場合で、反転色が画像の上に被っています。こんな場合にも、ある程度は画像が見える様に、デフォルトの濃さが決められている様です。今回のアレンジは、反転色を濃くして文字はよ
コメントを受けたユーザーのリンク構成が変更されました従来は、コメントをして来た「ユーザー名」をクリックすると、そのユーザーのページに飛ぶ様に、「ユーザー名」自体にリンクが貼られていました。以前この部分のアレンジで、「ユーザーのリンクの有無の区別が付かないので、間違ってリンク先に飛んでしまう」点で、扱い難いと思い、「ユーザー名」をフォバーした時に、リンクが有れば独自に「アイコン」を表示させていました。今日は、「コメント管理」がこれまでと違い、コメントして来たユーザーの「URL」が変な
右パレットのデザイン変更に再対応「AmebaPick」のアイコンが正式に設置されました。以前のテストで利用した非表示のタブ画面は「REQE」用のメニューで、アイコンもタブ画面も別です。また、相変わらず「REQE」用のメニューは非表示で置かれています。上は先日までのタブの構成ですが、元のアフィリエイトのアイコン〈+〉は無くなり、新しい「AmebaPick」のアイコンが出来たので、タブは6個にとどまりました。しかし、「REQE」用のメニューがそのうち出来る可能性があります。
「AmebaPick」ページが追加されました「AmebaPick」の運用が始まり、管理画面に新しい専用ページが追加されました。このページはアレンジする気がしないのですが、上部の管理メニューのセレクターは、メニューが増えて右にはみ出したので対処が必要になりました。このメニュー全体「.l-ucs-sidemenu-areaul」に固定幅を指定すると、もともと「display:flex;」の指定があるので、その子アイテムの「.l-ucs-sidemenu-areali」
「コメント入力枠」のリサイズ方法を少し変更コメント入力枠は使用頻度が多いと思われますが、それだけに扱い易いインターフェイスの配慮が要ります。コメントのサブウインドウが開いた状態は、幅が狭いのでウインドウ幅を拡げる場合が多いと思いますが、入力枠の横幅はウインドウ幅に応じて拡がります。一方、入力枠の高さはサブウインドウの高さを調節しても、それとは無関係で変化しません。これについてはアメーバも考慮したでしょうが、ウインドウ辺縁のドラッグより、編集枠右下隅のリサイザータブをドラッグする方が簡
右パレットのデザイン変更に対応しました新アフィリエイトサービスの「AmebaPick 」の導入準備が進み、編集画面の右パレットのデザインが変更されました。「AmebloWriter(Compact)」を急ぎ更新対応しました。ご利用の方は「Stylus」の管理画面で「スタイルの更新」を行ってください。下は、右パレットの新しいデザインをアレンジした状態です。現在は6個しかアイコンが表示されませんが、既に「Pick」のアイコンが非表示で用意されています。新アイコンが表示さ
「コメント入力ウインドウ」のデザインが更新されましたコメント入力ウインドウのデザインが更新されましたね。以前のデザインと大きく異なる部分は、「顔文字入力パレット」が廃止された事です。(*^^)vなどの顔文字はWin10のIMEで「かお」を変換すると多数の登録が表示されますし、「Windowsログキー」+「.」のショートカットでWin10絵文字パネルを出して入力する事も可能で、実際に困る人は少ないと思います。従来のデザインを復旧しました 「AmebloManagem
タブ数の変更に予備対応しました今年4月、新アフィリエイトサービスの「AmebaPick 」の導入により、編集画面の右パレットのタブ配置が6個から7個に変更される予定です。現在のタブは「YouTube」パレットのシステム不調により5個になっていますが、7個になった場合に合わせて、デザインを修正しました。修正はパレットのタブの間隔を狭くしただけですが、7個でちょうど落ち着きます。新タブ画面が追加されると、そのデザイン修正が必要になります。タブ配置を先に済ませて、今後の対
「アメンバー記事」の表紙は拒絶感が強すぎる個別記事の表示状態でページャー移動をしていると、つい「アメンバー記事」を開いてしまう事があります。もしそのブログのアメンバーなら、真っ白なスキンレスの記事を見る事になりますが、これは先日の記事 の方法で改善が可能です。もっとも、改善はそのブログユーザーの裁量次第ですが。一方、こちらの方が圧倒的に多いと思いますが、見ているブログのアメンバーではない場合は、下の様なやはり真っ白な画面を見る事になります。これを見るたびに、私は少し嫌な気
「プロフィール編集」画面は編集・訂正を前提にしていない?「プロフィール編集」画面は、昔に設定したのがそのままというユーザーも多いでしょう。しかし、先日少し訂正をしようと開いたところ、編集枠のフォントサイズが異常に小さいのです。このフォントサイズでは正確な編集は不可能で、他所で書いてコピペするしかない困った状態です。内容の修正などで「プロフィール編集」を使う事もあり得るので、簡単な修正を加えました。上部の「ユーザー情報の編集枠」、ページ下部の「フリースペースの編集枠」の両