ブログ記事35件
この方法の説明「フリースペース」はサイドバーに簡単な文言を表示する場所ですが、そこにページデザインを指定するコード（styleタグ）を書き、「ページ背景色」と「ページャーの枠色」を指定します。◎これは、アメブロ公式スキンを変更せずに、ブログページの「ページ背景色」と「ページャーの枠色」を変更する基本的な方法です。◎CSS編集用デザインのスキンの場合は、スキンを直接編集する事をお勧めします。◎この方法で変更されるのはPCでアクセスした場合のブログページの表示です。◎
この方法の説明「フリースペース」はサイドバーに簡単な文言を表示する場所ですが、そこにページデザインを指定するコード（styleタグ）を書き、ブログページの基本フォントを「メイリオ」優先に指定します。◎これは、アメブロ公式スキンを変更せずに、ブログページの基本フォントを現代的な美しいフォントに変更する方法です。◎CSS編集用デザインのスキンの場合は、スキンを直接編集する事をお勧めします。◎この方法で変更されるのはPCでアクセスした場合のブログページの表示です。スマホの表
ブログの全記事を自動で再編集する ブログ記事の全てにわたって、ある定型の内容を書き換える事は、そんなにないと思います。例えば、ブログを通じたグループの連絡先を、沢山の記事に定型で書き込んでいたとします。その連絡先が変更になり、出来れば昔の記事に遡って修正したい場合、記事数が多いと手作業では大変です。しかし、定型の雛形をコピーして書き込んだものなら、正規表現を使ったスクリプトツールで、書き換えが自動化出来ます。少しでも手を加えたものは、処理からはじかれますが、それでも自動処理は有り難
何かおかしな事はありませんか由来が不明のマイページの背景画像は、毎日の21時前後に表示される様です。アメブロ技術スタッフの中には面白い人が居るのか、編集画面でも変な（実は素晴らしい）事が、ごく一時的に生じました。編集画面の編集枠右側にはスクロールバーがあります。私は「AmebloWriter」を使っているので、背景色などのデザインが違いますが、下のスクロールバーの部分はデフォルトのままです。奇妙な事が起こったのは、おなじみのこのバーです。先刻編集をしていたら、この縦スク
新タグ編集エディタは使い辛い！画像や文字をセンターに貼るのにdivalign="center"って打ち込まないといけない！めんどくさい
カラーバレットの影カラーバレットは、最新版エディタ（標準）、新タグ編集エディタ、の両者で影を付けない様にしていました。これは、カラーパレットが編集枠内に表示されるので、影によってWYSIWYGの配色に影が影響するのは良くないと考えたからです。最近のウェキペディアのページでは、記述内の言葉を簡単に説明するダイアログが表示されますが、コントラストが絶妙で立体感が面白い表示と思います。しかしこれを真似ると、影の及ぼす範囲はかなり広い事が判ります。編集画面のカラーパレットは移動でき
アメーバ専用フォントをアイコンに利用「ameba-symbols」が編集画面で使用可能ですが（前ページ参照）、タグ編集エディタの編集アイコン部が窮屈なので、このフォントで改善する事にしました。対象にしたのは、幅の広い文字のボタン「プレビューを更新」と「改行を<br/>に置換」のボタンです。後者は「?」ボタンとそれを押した場合の大きなバルーンヘルプの機能があり、このバルーンに関しては残す方針にしています。（少し理解に時間のかかる機能と思うので）「プレビューを更新」をアイコン化先
編集画面の専用フォントグラフィックフォントは、フォント描出の機能を利用して、特殊な絵文字を画面上に表示します。例えば編集アイコンのデザインは、グラフィックを背景として描画する方法と、グラフィックフォント（文字）を表示する方法があります。どちらの場合も、素材となる特殊な画像やフォントの用意と呼び込みが必要ですが、グラフィックよりフォントの方がシステムの負担にならない様な気がします。また、グラフィックは一般にスプライトのテクニックが伴い、CSSコード上ではフォントの方がなにかと扱い易いと感じ
バルーンの構造黒背景バルーンは、画像ではなくCSSによって描画されています。下図の様に2つの要素を組み合わせてバルーンに見せていて、最近よく見かける手法です。上図の赤い部分は、三角部分の実体「.p-tooltip__triangle」をグラフィックで示したものです。これは「border」を三角に見せてますが、下図は実際にコード上で着色したハードコピーです。（▼は上書きされ表示がなくなります）「border」を三角形に見せる手法は、以下のページを見ると良く判ります。
編集ヘッダー周辺のデザインを小修正しましたアメブロのデフォルトの編集画面には2段のヘッダーがありますが、下側の方、編集画面とプレビュー画面を切り替える部分を「編集ヘッダー」と私は言ってます。「AmebloWriter」「AmebloWriterCompact」では、編集画面の最上段に「タイトル枠」「編集ヘッダー」「グローバルヘッダー」を纏めて画面高さを節約していますが、中央が「編集ヘッダー」です。この部分は、システム側で若干の修正があったのか、最初のアレンジから少しズレが生じている
新タグ編集エディタのカラーパレット「新タグ編集エディタ」を何度か試用してみましたが、擬似WYSIWYG環境の「最新版エディタ（標準）」に慣れた私には、なかなか慣れる事が出来ません。タグ編集エディタに慣れた方にとっては、逆に擬似WYSIWYGエディタは同様の抵抗感があるのだろうと思っています。ところで、タグ編集エディタの常用ユーザーが、重要に思う扱い勝手、問題点などは、私には確かには判りませんが、文字色を指定するカラーパレットは、小さ過ぎると当初から思っていました。「最新版エディタ」
タグ編集エディタのリニューアル今までの「テスト版」が、1月29日に正式導入になると受け取れますが、同時に何等かのコード修正があるのかは不明です。【PCブログエディタ】タグ編集エディタのリニューアルについて周辺環境、例えばユーザーのエディタ設定のインターフェイスなどは変更になるかも知れませんが、ブログ編集画面の直接の変更は「テスト版の表示」が無くなる程度ではと予想していますが。ユーザースタイルシートによるブログ編集画面のアレンジをして来ましたが、本来の編集画面に変更があった
●新タグ編集エディタで画像にリンクを貼りました！こんにちは。坪田佳子です。アメブロのタグ編集エディタが１月で終了します。私も新タグ編集エディタで書き始めています。新タグ編集エディタでバナー画像にリンクを貼りました。新タグ編集エディタでバナー画像にリンクを貼る方法や新しい記事の書き方は、ブログ講座でお話ししますね。下のバナーをクリックすると、講座の日程が表示されます。
AmebloWriterCompactver.7CSSコード（MozillaFormat）@-moz-documenturl-prefix("https://blog.ameba.jp/ucs/entry/srventry"){/*AmebloWriterCompactver.7基本CSS*//*body幅管理*/.l-body{background:#a2c0ce!important;box-shado
AmebloWriterver.7CSSコード（MozillaFormat）@-moz-documenturl-prefix("https://blog.ameba.jp/ucs/entry/srventry"){/*AmebloWriterver.7基本CSS*//*body幅管理*/.l-body{background:#a2c0ce!important;box-shadow:000100vh#
グローバルヘッダー部の小修正新タグ編集エディタの正式リリースが「2018年1月29日」と決まった様です。β版の最近の修正や改編の有無を確認したところ、私のアレンジに係る問題はなさそうでした。1点、グローバルヘッダーの読込み時の表示乱れが気になり、これを修正しました。これは以前からある乱れで、「新タグ編集エディタ」だけでなく「最新版エディタ」でも生じます。上図の様に、エディタ起動の最初に、メニューの一部が不本意な位置に一時的に表示されます。これは完全に起動して正常位置に納ま
AmebloWriter/AmebloWriterCompactこれは、アメーバブログの「最新版エディタ（標準）」と「新タグ編集エディタ」のデザインをアレンジするスタイルです。アレンジはChrome/Firefoxの「Stylus」という拡張機能にこのスタイルをセットする事で実現します。この拡張機能を簡単に例えると、ブラウザの表示に専用フィルターをかける様なものです。TVを調整して色合いを好みにしたり、縦横のバランスをシアターモードに変更しても、放送内容が変わった
AmebloWriterver.62017.11の最新版エディタのバージョンアップに対応しました。今回のバージョンアップで、不具合の修正が進んだ様です。これによりプレビュー画面修正のセクションが不要になり、あわせて細部のコード改善でセクションを整理できました。今回のバージョンアップによる編集枠幅を拡張する機能は、ver.6にとり入れています。この機能を選択する「デザイン幅で表示」のボタンは、編集枠の下に配置しました。コンパクト版に対して、通常版ver.6は編集画面を
AmebloWriterCompactver.32017.11の最新版エディタのバージョンアップに対応しました。修正アレンジの経過で、従来の幾つかの不具合が修正されている事を確認し、アレンジ上でも即応しました。最新版エディタ（標準）●プレビュー画面の高さがウインドウの半分程に縮まる不具合が解消されました。●ハッシュタグ部のセレクタが修正がありましたが、意図は不明。●SNSボタンのアイコンサイズがエディタ全体の高さを拡げていたのが、修正されました。新タグ編集エディタ
限定絵文字の追加で崩れスマップを持ちだしたキャンペーン、アメブロユーザーの皆さんは嫌でも知っているでしょう。これで限定絵文字の追加は、別に良いけど...絵文字の「限定」カテゴリーが増えたもんだから。アレンジでなんとか収めていたのが溢れて、「なにしてくれとんねん」状態です。カテゴリーの「アイテム」が行送りされて3行になり、下のスクロールボックスを押し下げたんですね。ユーザースタイルシートによるアレンジは、崩れてもアプリ自体は使える場合が殆どで、こういう事には柔軟に対応で
AmebloWriterver.5CSSコード〔セクション1〕「次で始まるURL」=「https://blog.ameba.jp/ucs/entry/srventry」/*AmebloWriterver.5基本CSS*//*body幅管理*/html{height:100%;}.l-body{min-width:1170px;height:100%;background:#a2
Compact版の更新内容を逆輸入AmebloWriterCompactの編纂を通じて、幾つかの新しいデザイン追加や改善更新をしました。◎コンパクト右パレット右パレットの幅を小さくアレンジしたもの。エディタの小幅モード時に「編集枠実効幅720px」の場合には必須で、新タグ編集エディタでも有効です。◎拡大サムネイル画像リストのサムネイルを大きくし、選択窓を1列縦スクロールにします。◎絵文字リストの「みんなの絵文字」のサイズ拡大「みんなの絵文字」だけ表示が小さいので
余白が無いと落ち着かない最新版エディタ（標準）の編集枠のデザインは、使用しているブログスキンの実効行幅を忠実に表現する事で、WYSIWYGを実現しています。AmebloWriterもこの機能を踏襲しています。さて、最新版エディタの実効的な編集枠は、両側にpaddingの15pxを余白として持ちます。その外側に薄いグレー部分は「エディタとしての余白」です。実効的な編集枠の幅がスキンにより変化する事、エディタ全体の幅がウインドウ幅に応じて2段階に変化する事、縦スクロールバーが表示され
画像サムネイルが沢山あれば便利か？添付画像のリストで、沢山ならんだサムネイルを便利だと思った事がありません。おうよそ添付目的の画像はブログ本文の流れに沿って用意していて、アップロードしてから選ぶというわけではないですから。もちろん、過去にアップロードした画像を、再利用のために探す事はありますが、最大1ヵ月分を遡って探すとしても、1列で並んでいたとしても普通に可能です。むしろ探すにしても、サムネイルは大きな方が何の画像か判断し易いものです。とりわけ似た様な画像が多い場合、その違いを見
最新版エディタ（標準）や新タグ編集エディタの右パレットに内装されている、「YouTube動画」「楽天商品」「Amazon商品」の検索機能ですが、この検索結果のリスト表示で、アイテムの説明文の末尾に時々文字化けが生じる様です。文字化けしているのは「…」の記号常時文字化けが生じるのではないため、最初は状況がつかめないままアレンジしていました。下図の赤枠の表示です。文字化けした状態でDevToolsで調べると、下図の「::before」擬似要素の中身にこの文字があります。
