ブログ記事7件
「AutoStyleAttach⭐」の機能各種のアイコン画像を記事上に表示するには、「FontAwesome」絵文字などのWebフォントの利用が有効です。「AutoStyleAttach⭐」は、この「FontAwesome」の表示に必要な「styleタグ」を、自動的に記事本文の末尾に書き込みます。また、「いいね」「コメント」「リブログ」の全てSNSボタン類を記事単位で非表示にする機能があります。これも、専用の「styleタグ」を本文の末尾に書き込む事で実現しています。
「BodyWconOD」は「EditAtOnceAm」に統合しました「BodyWconOD」を単独で利用が可能ですが、更新は「EditAtOnceAm」のみで行います。今後は両ツールの機能を持つ統合版の利用をお勧めします。〔追記2023.12.21〕◎「新タイプスキン」「旧タイプスキン」のブログに対応「EditAtOnceAm」ver.2.0/新・旧タイプスキン共用記事閲覧と編集作業を繋ぐページの閲覧位置（ページ上部からのスクロール位置
「BodyWconOD」の原点「BodyWconOD」を制作したそもそもの目的は、ブログ記事の本文部の幅を一時的に変更する事でした。この幅の変更は「見かけ」だけで、他のユーザーが閲覧しているブログ記事の本文幅が変わるわけではありません。ブログ記事がスマホで閲覧された状態をチェックするには、記事を編集画面に開いて「プレビュー」を開き「スマートフォン」を押す必要があります。スマホでアメーバアプリを起動し、自分の記事を見れば良いのですが、PCをメインにしている私は、ログアウトになっ
「閉じる」ボタンを追加テストをしていると、「BodyWconOD」のパネルを閉じるボタンが便利な気がして来ました。「Ctrl+F7」のショートカットを押すにはマウスから一旦手を離す必要があり、不便を感じる時があるからです。「記事の編集・削除」を開くボタンを追加 「記事の編集・削除」にアクセスできると、現在開いているブログ記事の「複製」「削除」も可能になります。「EditAtOnceAm」でも、この機能は「編集」とペアになっていますが、「BodyWconOD」にも同
チェック中の箇所を編集画面に表示「EditAtOnceAm」は、閲覧中のブログ記事を編集画面に開く事ができます。これで充分な場合が多いのですが、記事の修正箇所を見つけた後、すぐにその箇所を編集画面に開きたいと思う事があります。編集画面に開いて目的の修正箇所に辿り着くまでに、時間は短い方が良いに決まっています。「EditAtOnceAm」の起動は「記事タイトル」の右クリックです。画面全体の右クリックで起動させる様な方法は、ブラウザのコンテキストメニューを全て封じてしまう我
「FontAwesome」が必須アイテム化記事内の「svgタグ禁止指定」により、各種のアイコン画像などをブログ記事内で表示するには、「FontAwesome」が必須のアイテムになって来ました。プログラム関連の記事を書く上では、「FontAwesome絵文字」が使えないととても困ります。そして、PCとスマホの両方の閲覧環境で「FontAwesome」を表示するには、本文記事の適当な場所に「FontAwesome」の呼込み指定の「styleタグ」を書き込む必要があります。「style
Chromeの更新と 「overflow:overlay」今日、このブログのスクロールバーのデザインが失調しているのに気付きました。下がこれまでのスクロールバーのデザインで、スクロールバーのトラックが透明な点が、デザインで工夫をした所です。スクロールバーが表示全体を左へ押しつけるのを嫌い、このデザインにしたのですが、要になっていたのは 「overflow:overlay」のプロパティでした。このプロパティが無効になり、今朝は下の表示に変わっていました。トラッ
Webフォント の使いどころ記事内にリンクマーク「」などを表示するにはWebフォントが近道です。昨今はSVG描画が身近になったものの、Webフォントは記事の文字数が節約でき、記事に書き込むのも簡単です。また、以前のページのWebフォント表示を確保するため、呼込みの設定が外せないという事もあります。私の場合は、スマホ画面でも「FontAwesome」のフォントを表示させたいので、記事の末尾に、呼込み指定の「styleタグ」を書き込んでいます。これは数行のコードですが、記事ごと
「記事タイトル」を1行で表示これまで長い「記事タイトル」を折り返し表示をしていたので、パネルの高さが大きくなり、ブログ画面の表示を狭くしていました。この折り返しを止めて、パネルの高さを一定にする様に改めました。このデザインでは、長い「記事タイトル」は右側の「コントロール部」の下に隠れます。ただし、「記事タイトル」にマウスを乗せると、隠れた部分が全て表示される様にしました。ヘルプボタンを追加 操作はシンプルなツールですが、マニュアルと「ヘルプボタン」を作りました。
「BodyWconOD」は「EditAtOnceAm」に統合しました「BodyWconOD」を単独で利用が可能ですが、更新は「EditAtOnceAm」のみで行います。今後は両ツールの機能を持つ統合版の利用をお勧めします。〔追記2024.01.02〕◎「新タイプスキン」「旧タイプスキン」のブログに対応「EditAtOnceAm」ver.2.0/新・旧タイプスキン共用記事閲覧と編集作業を繋ぐページの閲覧位置（ページ上部からのスクロール位置
この間から、投稿トラブルを解決しようとジタバタしているが‥他の皆さんはどんな状態でアップしているのだろうか…因みに私の着地点は‥Google検索でアメーバを表示して、ログインする!?そして、こんな感じのＰＣ表示にして‥皆さんのブログを視たり、記事をアップする事にしました‥管理トップからの‥入力表示で‥文字入力へ!?まぁ、タブレットなので表示が小さいのが難点かな!?とりあえず、なんとかなりそうなので‥引き続きヨロシクお願いし
チェック中の記事を編集する「編集ボタン」を実装チェック作業は、ページ下方のチェックになる事は普通にありますが、下方へスクロールした状態で「記事タイトル」が見えなくなる事から、前ページではタイトル表示の機能を追加しました。更に、大量の記事のチェック・修正になると、修正要の記事と判断した時にすぐに編集できると便利です。現在開いている記事を編集するには「EditAtOnceAm」というツールを使いますが、その編集ボタンは記事上部のタイトル部に表示されるので、そこに戻るのにひと手間増えま
「BodyWconOD」とはスマホで参照した場合に、ブログの本文幅が狭くなった状態で表示されます。PCで編集して投稿しているブログが、スマホユーザーにはどう見えているかは、ある程度チェックが必要です。「BodyWconOD」はこのチェックを簡単に行うツールです。編集画面の「プレビュー」機能の「スマホ表示」は同等の機能ですが、本文のチェックは投稿後の実際のブログ画面で行う事が多く、このツールの方が便利です。で、「BodyWconOD」は「プレビュー/スマホ表示」に似せ
Webフォント の使いどころ記事内に気の利いたマーク「」などを表示したい時に、Webフォントが必要です。昨今はSVG描画が身近になり少し後景化したものの、記事の文字数が節約できて捨て難いものです。また、新しいページはSVGに置換えても、以前のページのWebフォント表示を確保するため、呼込みの設定が外せないという事も生じて来ます。私の場合は、スマホ画面でも「FontAwesome」のフォントを表示させたいので、記事の末尾に、呼込み指定の「styleタグ」を書き込んでいます。これ
2023年6月Chrome114で、このページで扱う「overflow:overlay」のプロパティは実質的に無効化されました。このページのテスト用の要素のスクロールバーで「overflow:overlay」を設定したものは、通常の「overflow:auto」として機能し、説明文と実際が異なります。廃止の影響などに関しては、以下のページも参考にしてください。Chromeで「overflow:overlay」が無効になった/スクロールバーアレンジChromeの更新と
「BodyWconOD」は「styleタグ」を書き込んでいるだけ 「BodyWconOD」の疑似的なスマホプレビューは、JavaScriptで「styleタグ」を書き込む事で実現しています。この方法を採らないと、ツールをOFFにした後にページに加えた変更が残り、ページをリロードしないとデフォルトの表示に戻りません。同様の「styleタグ」を「Stylus」で適用しても、同じ様なスマホプレビューになります。しかし、その場合は本文幅が固定になり、「BodyWconOD」の様に
「BodyWconOD」の有効な点 「BodyWconOD」はスマホ表示のチェックツールですが、主用途はブログ本文の「行折れの状態」を確認することです。多種の公式スキンがあり、記事タイトルの部分の行折れの再現性は適当ですが、タイトル部は使いどころではないと考え、ブログ記事本文の再現性の精度を良くする努力をしました。しかし、スマホの保持するフォント、スマホのOSやブラウザの特性などが関係するのか、「何故？」と考え込んでしまう様な表示の差異が、ちょこちょこ見受けられます。でも
スマホ表示のチェックについて PC使用がメインだと、ブログ編集画面の「プレビュー」でスマホの表示が確認できます。でも、これは殆ど使いません。というのは、気になる所は既に過去にチェックしているので、後は問題が生じる事はほぼなく、いちいちチェックする気になれないのです。ですが、たまに変な場所で改行を入れていないか、とても気になる事があります。どんな事か判り難いので、例を挙げて説明します。下の様な本文幅の編集枠で文章を書いたとします。行の自動的な折り返しは、システムに任せるべ
前記事の続きとなりますこれはスマホ表示をPC表示に切り替えた画像ですのでPCの方も同じようにできます右上の角に横三本線をタップするとこのような表示になり左から二列目のサイドバー項目にフリースペース編集というのがあるのでタップしますこの緑色の枠の中の文字数列は私のサイドバーに貼っている扉バナーや画像コードなどです何をどういう形で入れるかはブログを書く画面を利用してHTML表示で扉バナーを貼り付け通常表示で画像を挿入しお好みに編
模様替えしてみました。どや！但しPC表示だけな('ω')ノランキング参加してます一応は
みなさん、こんにちは！アメブロを使い始めてまだ日が浅いのですが、このブログはもっぱらスマートフォンを使い書いています。iPhoneではこのように見えているブログですが、はて、PCではどんな風に見えているのかしら？と画面を色々見てみましたが、PC表示の仕方がよくわからない。以前はサイトの一番下にPC表示できるボタンがあったようなのですが、現在はなくなっている模様なんです。ようやく画面の切り替え方がわかりましたので、記録しておきます。Safariの場合ですが、右上の丸い矢印を長押しすると
コード掲載の基準ブログ上にコード掲載するには、独自ドメインを持つ人は高機能なプラグインを使ったり出来ますが、一般のアメブロユーザーはそれなりの工夫をする必要があります。●ビジュアル上で何らかのコードである事を示すため、他の文字列にない背景にするか、コード全体を枠線で区切る。●コードのインデントを表現できること。●スマホからの参照に可能な限り対応する。●コードはコピペによる利用を前提にして、画像化は避ける。●横に長いコードは、一般のCSSで必要程度（URLが入る場合など）は横スクロ
