ブログ記事9件
「絵文字」の前後の空白入力について「FontAwesome」の絵文字を編集画面に入力する際、デフォルトでは絵文字の前後に「半角空白」を追加して記入する様にしています。これは、絵文字の前後に文字を追加する操作は絵文字のコードを壊す事が多く、逆に前後の半角空白を削除する場合は、絵文字のコードを壊すことが比較的少ないからです。ただ、最初から絵文字の前後に空白が要らないと判っている場合は、いちいち半角空白を削除するのは手間ですから、「Shift」キーを押下しながらの入力で絵文字のみの入力ができ
任意の「絵文字コード」の入力機能「FontAwesomePalette」は、「FontAwesome」を記事に使うユーザーには、大変便利なツールだと思います。はたして、どれくらいのユーザーがアメブロに居るかのかは、判らないですが。◎パレットには良く使いそうな絵文字を集めていますが、ソースコードを触れるユーザーは、自分が必要な絵文字を追加したり入れ替えたりできます。下は、「」の絵文字を書き込む様子です。◎また、「FontAwesome」のサイトで絵文字のコ
「FontAwesome」を表示する環境設定ツール各種のアイコン画像をブログ記事内で表示するには「FontAwesome」の絵文字を使用するのが一番便利でしょう。この絵文字を「PC」と「スマホ」の両方で表示するには、本文記事の適当な場所に「FontAwesome」の呼込み指定の「styleタグ」を書き込む必要があります。「styleタグ」は簡単なコードですが、それを記事を書く度に書き込むのは手間なので、自動書込みを行うツール「AutoStyleAttach⭐」を制作して使用してい
「AutoStyleAttach⭐」の機能各種のアイコン画像を記事上に表示するには、「FontAwesome」絵文字などのWebフォントの利用が有効です。「AutoStyleAttach⭐」は、この「FontAwesome」の表示に必要な「styleタグ」を、自動的に記事本文の末尾に書き込みます。また、「いいね」「コメント」「リブログ」の全てSNSボタン類を記事単位で非表示にする機能があります。これも、専用の「styleタグ」を本文の末尾に書き込む事で実現しています。
任意の「絵文字コード」の入力機能「FontAwesomePalette」は、現在76個の「絵文字」をパレットに並べていますが、もっと他の「絵文字」が必要になる事は多いにあります。例えば「矢印」の絵文字の「」など全てを、パレットに載せられません。また、「FontAwesome」は下の様な絵文字のアニメーションが可能です。「」「」「」「」こういったバリエーションは常に使わなくても、使いたい時はありそうです。やはり限られた面積のパ
「FontAwesome」が必須アイテム化記事内の「svgタグ禁止指定」により、各種のアイコン画像などをブログ記事内で表示するには、「FontAwesome」が必須のアイテムになって来ました。プログラム関連の記事を書く上では、「FontAwesome絵文字」が使えないととても困ります。そして、PCとスマホの両方の閲覧環境で「FontAwesome」を表示するには、本文記事の適当な場所に「FontAwesome」の呼込み指定の「styleタグ」を書き込む必要があります。「style
慣れたユーザー向け「絵文字コードのみ」の入力機能「FantAwesome絵文字」の素性 「FantAwesome絵文字」はWebフォントです。ユーザーのPCやスマートフォンのOSにフォントがあるのではなく、ネット上の専用サーバーにフォントが用意されていて、文字が必要な時にブログ記事で画像を表示する時の様に、専用サーバーからフォントデータを呼び出して、絵文字を表示しています。（ブログ記事の画像は、ブログシステムの画像サーバーから呼び出して表示しています）また、絵文字を他のフォント
編集パレットのタブに「専用スイッチ」これまでのバージョンでは、「専用パレット」を表示するスイッチを「アメブロ絵文字」のタブ画面の中に置いていました。このデザインをしばらく使って来て、「パレットを表示する2ステップが面倒」と感じる様になりました。で、「専用パレット」を直接開く「専用タブ」を作ることにしました。JavaScriptはこういう事が比較的簡単にできます。下は、編集パレットに追加した「専用パレット」を開くための「タブ」です。「タブ」の旗のマーク「」は「Fon
「記事タイトル」でEnterを入力するとパレットが表示される コードに大きな不完全を抱えていました。時々、予想外の時に専用パレットが表示されるので「何で？」と思っていたのですが、やっと理由が判りました。先ず最初に判ったのは、「記事タイトル」の入力枠で「Enter」を入力すると、パレットが表示される事でした。更に調べると「テーマ作成」のダイアログで「Enter」を押しても、やはりパレットが表示されます。でコードの何処に問題があるのか判らず、あがいて変な代替コードを書いて
「FontAwesome」の挿入コードを変更 「挿入コード」は、編集画面のキャレット位置に「FontAwesome」のHtmlコードを挿入するコードです。JavaScriptのプログラム作成で、この様な「書き込み」の操作を行う部分は、奥が深く難しい部分です。この様な操作部のコードを上手く書くには、知識と経験が必要だと思います。「ver.0.1」の挿入コードは少しトリッキーなコードでした。キャレット位置に先ず「span」要素を挿入し、それを「outerHTML」のメソッドで「Fon
Webフォントの絵文字フォントの老舗「FontAwesome」は、SVGには無い利点があり、現在でもその有効さは失われていません。「FontAwesomePalette」は、専用パレットによる「FontAwesome」の入力を可能にします。 「FontAwesomePalette」操作マニュアルver.0.7以降に対応2024.11.02更新 「FontAwesome」の環境構築このツールを使う前提として、「編集画面」「ブログページ」で「F
「FontAwesome」を使う利点 技術的な説明記事を書く場合に、アイコンを文章中に表示できると大変判り易くなります。例えば、下の管理メニューに関した説明の①②を比較すると、①管理メニューの「デザインの設定」を開いてください。➁管理メニューの「デザインの設定」をクリックして開いてください。➁の方が判り易く、間違いも少ないでしょう。スイッチの場所を適確にユーザーに知らせるのがアイコンですから、説明画像が無い場合は➁がベストです。私にとってア
Webフォント の使いどころ記事内にリンクマーク「」などを表示するにはWebフォントが近道です。昨今はSVG描画が身近になったものの、Webフォントは記事の文字数が節約でき、記事に書き込むのも簡単です。また、以前のページのWebフォント表示を確保するため、呼込みの設定が外せないという事もあります。私の場合は、スマホ画面でも「FontAwesome」のフォントを表示させたいので、記事の末尾に、呼込み指定の「styleタグ」を書き込んでいます。これは数行のコードですが、記事ごと
Progate：Html&css中級編今回の作成物：トップ部分のレイアウト：背景画像を指定する①background-imageプロパティを使用する。「background-image:url(画像のurl)」と記述するex.background-image:url(top.png)背景画像を指定する②background-sizeプロパティを使用して大きさを指定する「background-size:cover;」と記述すると1枚の画像で
今回はサイトで使用しているFontAwesome5Freeアイコンを使って、どの様なデザインができるか？その１回目として、FontAwesome5アイコンを組合せて、着色、拡大、回転、角度変更、アニメーションなどをご紹介してみます。※．尚、全く同じ定義をしているにも関わらず、多くの事例を、同時に記載すると、FontAwesome5Freeアイコンが正しく表示されない（文字化けや、一瞬だけ表示されたり、部分だけ表示されたり）現象が発生する為、他の事例は、改めて別の機会に２回目とし
必要なフォント（絵文字）を探す 「FontAwesome」は何千種類もの絵文字を提供しているので、かなりの確率で必要なイメージに沿った絵文字を見つける事ができると思います。ここではサンプルとして、「車いす」の絵文字をブログ記事内で利用する方法を書きます。「車いす」の絵文字を探す 先ず、「FontAwasome」のサイトの文字検索画面を開きます。Searchv6Icons|FontAwesomeSearchallthev6icons,including
Webフォント の使いどころ記事内に気の利いたマーク「」などを表示したい時に、Webフォントが必要です。昨今はSVG描画が身近になり少し後景化したものの、記事の文字数が節約できて捨て難いものです。また、新しいページはSVGに置換えても、以前のページのWebフォント表示を確保するため、呼込みの設定が外せないという事も生じて来ます。私の場合は、スマホ画面でも「FontAwesome」のフォントを表示させたいので、記事の末尾に、呼込み指定の「styleタグ」を書き込んでいます。これ
WEBサイトやWEBページの制作の中で今や欠かせなくなってきたアイコンフォントですが、今のような形式で使えるようになってからの歴史は浅いのです。それまではというと主にgif画像を使って代用してきたという歴史があるのです。アイコンフォントもその提供元や使い方にはいろいろ種類があって様々です。この記事ではアイコンフォントのいろいろな種類や使い方について解説していきます。アメブロでは使えないと思ってる方もいるでしょうけどいくつかのアイコンフォントは、使えるようです。この記事の中でもアメブロで
WordPress5.3の正式公開は11月12日を予定されています。しかし、これはアメリカ起点の時間のために日本時間では11月13日にアップデート通知が届く予定です。今回のアップデートでまた多くのバグの修正だけでなくデフォルトテーマが変更になりました。そういった情報含め以下に使った感想などもあわせてリポートします。目次WordPress5.3デフォルトテーマの変更グーテンベルグの修正変更点まとめWordPress5.3WordPress5.0で導入されたブロック
TCDらしいスタイリッシュなデザイン感があり、『お洒落でカッコいいブログを作りたいならBlogPressが最適』です。ちなみに、このスタイリッシュな雰囲気はTCDのテーマ全てに共通する要素でして、他のWordPressテーマブランドには無い、TCDの特徴になっています。カッチリした雰囲気のブログにしたいならTCD一択ですね。逆に言うと、ゆるふわ系ブログには向かないかな。FontAwesomeが４系なので子テーマ使って５系にカスタマイズしたいところですね目次TCDBlogPre
FontAwesomeの<i>タグ特殊性「FontAwesome」のアイコンを表示する<i>タグは、FontAwesomeの仕様に基づいたクラス名を記述したものです。このクラス名が変われば、また違ったアイコンの表示になります。<iclass="fasfa-external-link-altfa-sm"></i>例えば「<iclass="fabfa-amazon"></i>」はのアマゾンマークです。ページに「@import」の設定をすれば、こういった豊
FontAwesomeはデファクトスタンダードになったアイコンリンク表記の前後に「」のアイコンを表示するのは見慣れた作法ですが、この表示はウェブフォント「FontAwesome」を利用するのが一般的です。Win10絵文字にこんなフォントがあれば便利ですが、遠慮でもしたのか絵文字には有りません。「FontAwesome」はこういった状況下で、デファクトスタンダードになったアイコンフォントです。その気で調べると、様々なページでこれが使われています。以下のページは「
昨日はアメブロでFontAwesome（フォントオーサム）を使う実験をして一応、成功に終わりましたこちらが昨日の記事のスクショ最終行に「・・・肉球・・・肉球」となってるのの肉球部分がそれFontAwesomeはフォントってかアイコンとして使用するデータで無料のでも以下のように使えそうなアイコン多数自分は今まで主にブランドアイコンを使ってたが・・・肉球アイコンを見つけてアメブロでも使おうかと・・・そして一応、PCで表示できるようになった
WebFontの技術を使って、ベクター画像によるきれいなアイコンを誰でも表示できるようにするサービスらしい。FontAwesome「文字」で表現するため、CSSでいろいろ加工できるところが素晴らしい。
アイコンに利用できるWebフォントブログの投稿本文の中にリンク（文字のリンク）を置くと、ブログスキンのCSSの設定、或いはブラウザのデフォルトCSSが反映して、リンクらしい着色（紅色やブルー等）の文字になったり、アンダーラインが付く場合が多いですね。しかし、もっと明確にリンクである事を示したい時には、色々と工夫が必要です。●「a」（アンカー要素）に枠線や文字背景色などを付けてボタンに見せる本文のHTMLにインラインで「style=""」などと毎回書き込むのは、ちょっと手間です。本
こんばんは、かめぴよです。今日はもう夕飯作る気が失せてうどん食べてきました。カレー南蛮うどん美味しかったですさてさて本日お仕事していておや？となった瞬間がありました。それはFontAwesomeがリニューアルしていたこと。WEBサイトでファイル容量を軽くするアイコンをサイズに関係なくキレイに見せるために時折使っているアイコンのサイトです。今までのものが使えなくなるというわけではないですが、アイコンの雰囲気が少し変わったものもありました。例えばwindo
昨日はアメブロのフォントを変更してみました。一般的には、「ブログ管理」→「デザイン変更」→「CSSの編集」のところでフォントを変更するのですが、これだと、スマホでみた場合に変更が反映されません。なんでですかね。。残念です。。そこで、記事の中に直接指定することにしました。記事編集の画面をひらき、記事入力エリアの下に表示されている、「HTML表示」に切り替えます。一番下に以下を追加して保存します。<styletype="text/css
