Now Loading...

2018年02月09日

空倶楽部 2018/02/09/

空倶楽部です。

DSC08094.JPG

写真 DATE 2018/01/19 11:54 高崎市自宅付近


明日から三連休、忙しいです






空倶楽部、
今後ともよろしくお願いいたします

空倶楽部は毎月、
9の付く日に行います。
詳しくは、
かず某さんchacha○さん
までどうぞ。





29日 () 日直 きらら #

縦書きにちょう戦

黒板風の囲みわくを使って、
縦書たてがきにちょう戦してみました。
縦書きも簡単そうで中々難しく、
フォントも対応たいおうした物を使わないと、
見た目がくずれます。

日本語の『かっこ』は縦向きです。
字下げや数字の向きも変えます。
縦書きになるとリンクの線も
おかしな位置になるので変えます。
ふり仮名がな(ruby)も付けました。

* Font By りいのフォント



*このフォントの漢字は、
小学校で習う漢字(教育漢字)1006文字です。
ひらがなが多いですが、
ご了承くださいませ。
縦書きに対応しており、調整はほとんどいりません。
neco913.kirara.st/


% CSSで縦書きを設定するには、
縦書きにしたい箇所にCSSで writing-mode: vertical-rl; を記述します。
この「vertical」が縦、「rl」が右から左(Right to Left)という意味です。
neco913.kirara.st/


/ 縦書きできればOKというものでもなく、
あれこれ微調整が必要になるのが縦書きの難点で、
文字の表示方向にtext-orientationという
プロパティを使いたいのですが、
IE, Edgeが未対応です。
neco913.kirara.st/


: Chrome、Edgeでよい感じに
見える設定
が上記なのかなと思います。
neco913.kirara.st/


$黒板風の囲み枠と、
チョーク風フォントを使って
! 横文字バージョンこれから作成予定 !
neco913.kirara.st/


Twemoji Awesome、Font Awesome
Font Awesome Animationの
CSS 定義をMIXして使っています。
独自フォントにも使っています。
neco913.kirara.st/




貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました





タグ:空倶楽部
posted by きらら&ジュレ at 15:02| 2018 きらら&ジュレの日記

2018年02月07日

独自 Webフォントの反映

久しぶりの更新ですが、
写真とは関係ないお話をさせて下さい。

少々専門的?なお話なので、
興味のない方はスルーしてください。

DSC08079.JPG

↑ 写真もお話とは関係ありません(-"-;A ...アセアセ


当ブログは積極的に
Webフォントを
利用していますが、
Google Fontsのみで
独自のフォントは

利用しなかった・・
と言うか

出来なかったのです(´;ω;`)ウッ…

( 姉妹サイトは問題ありません。)


例えばニクキュウフォントは

Google Fontsですし、
簡単?に利用出来ますが、

独自に用意したフォントは

反映されない。

何故(・・?
いろいろと調べた結果、
クロスドメインが絡んでいるらしく、

クロスドメインリクエストが
制限されている状態らしいのです。


※ クロスドメイン (cross domain)とは、

ホームページを表示したときに、
複数の場所(ドメイン)から
データを持ってくるようになっている状態のこと

です。

さて、困った・・しかし、

どうやら「.htaccess」ファイルで、

クロスドメイン許可の設定ができるようで、

Header set Access-Control-Allow-Origin: "*"

※ 「*」はどんなURLからでもアクセスOKと言う意味。
自身のブログのURLを指定するのをおすすめします。

これを

「.htaccess」ファイルに書いてやると、


! & / * : ~ - _ %


# $ 黒猫です。


# 黒猫にアニメーションを反映させました。

Font by http://pandachan.jp/ Thanks %


↑ リンクをhoverするとアニメーションします。


こんな感じで、

独自で用意したフォントが反映されました(^^♪



※ 注意事項として、
「フォントをアップロードしたフォルダ」に
「.htaccess」を作ってやる必要があります。


://neco913.kirara.st/

↑ このフォント、面白いでしょ(・・?

このブログのURLを書いたのですが、
ラインみたいになりました。

まぁ・・、
読みづらい(-_-;)ってのは
さて置き、
Webフォントを利用してみたい方の
参考になれば幸いです。


# Font Awesome の fa-10x


バレンタイン、

ひな祭りと忙しいな・・。




貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました




タグ:日記
posted by きらら&ジュレ at 05:50| 2018 きらら&ジュレの日記

2018年01月29日

空倶楽部 2018/01/29/

空倶楽部です。

DSC08137.JPG
自宅ベランダより。
雪がまだ残っています

節分が終わるまで忙しいです。






空倶楽部、
今後ともよろしくお願いいたします

空倶楽部は毎月、
9の付く日に行います。
詳しくは、
かず某さんchacha○さん
までどうぞ。



貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました






posted by きらら&ジュレ at 17:58| 2018 きらら&ジュレの日記

2018年01月23日

Twemoji Awesome を使う

Twemoji Awesomeを使ってみましょう。


絵文字スタイルは
twemoji-awesome.cssで定義されています。

fa- fa-*を使うFont Awesomeのように、
Twemoji Awesomeはクラス名に
twa-*を使います。

Font Awesomeのように、
twa-lg、twa-2x、twa-3x、
twa-4x、twa-5x、
で絵文字サイズを変更できます。

Twemoji AwesomeはSVG画像を
background-image画像として使用し、
一部のブラウザはこれをサポートしていません。



 <i class="twa twa-1f340"></i>

 twa-lg <i class="twa twa-lg twa-2728"></i>

 twa-2x <i class="twa twa-2x twa-1f423"></i>

 twa-3x <i class="twa twa-3x twa-1f4f8"></i>

 twa-4x <i class="twa twa-4x twa-1f4a9"></i>

 twa-5x <i class="twa twa-5x twa-2603"></i>




Check demo page

デモページの数字は
Unicodeになります(たぶん)

デモページは表示に時間が掛かったり、
エラーになる事があります。




ここからのお話は全て非公式です。
ご利用になられる場合は全て自己責任でお願いいたします。


CDN コード (わたしが勝手に探したもので公式に発表されていません)

cdn.jsdelivr.net/npm/twemoji-awesome@2.0.0/dist/twemoji-awesome.min.css


Font Awesome と
Font Awesome Animation
css 定義がそのまま使えます



  Font Awesome の90度傾ける<i class="twa twa-1f47a fa-rotate-90"></i>

  Font Awesome のスピン<i class="twa twa-1f4ab fa-spin"></i>

  Font Awesome Animationn の点滅<i class="twa twa-2728 faa-flash animated"></i>

  Font Awesome Animation のバースト<i class="twa twa-1f4a5 faa-burst animated"></i>

  Font Awesome Animation のリバース<i class="twa twa-1f684 faa-passing-reverse animated"></i>

  Font Awesome Animation のパルス<i class="twa twa-1f48b faa-pulse animated"></i>



class名のanimated
animated-hoverに書き換えると、
アイコンにカーソルを
のせたとき(hover時)のみ
アニメーションが有効になります。

←カーソルを当ててね




親要素へのhover時に動かす





国旗などの絵文字も
充実しています。


カラーなのが
うれしいですね

こんな変わった物
もあります。



バレンタインの記事に使えそうですね。







節分の記事にいかがでしょうか。



ほんの一部ですが、
ご紹介いたしました。






タグ:日記
posted by きらら&ジュレ at 14:38| 2018 きらら&ジュレの日記

2018年01月22日

にゃ〜にゃ〜の日 (2018年 1月)

毎月22日は、「にゃ〜にゃ〜の日」です

にゃ〜にゃ〜の日には
猫(にゃん)ちゃんの写真を
ブログにアップしましょう

今年最初の
にゃ〜にゃ〜の日”となりました。


昨年1年間大変お世話になりました。

本年も
“にゃ〜にゃ〜の日”共々
“きららとジュレのブログ”を
どうぞよろしくお願いいたします


今月の“にゃ〜にゃ〜の日”には、
hitsujigumo3942さん」が
参加下さいました

本当に感謝の気持ちでいっぱいです。
ありがとうございます




今年最初の写真は、
ルナから。

DSC08084.JPG

窓の外を見ているルナ、
朝焼けのオレンジに包まれていました。

この子は
本当に甘えん坊、
そこがかわいいのですが・・。


お次はきらら。

DSC08015.JPG

怒ってらっしゃいます

でも、この子が一番しっかりしているね。

わたし、たまに妄想して楽しんでいます。
この子たちが人間だったらどんな子どもたち
に成長していくのかなって

妄想の世界も楽しいですよ


さて・・お次は
お外の猫さん。

DSC08081.JPG

お庭に遊びに来てくれました


続きまして、
散歩途中の猫さん。

DSC01134.JPG

ちょっと警戒しているかな



今月の
にゃ〜にゃ〜の日”

いかがでしたか



************************************

あなたも猫の写真をアップしませんか
興味のある方はぜひコメント下さいませ

きららとジュレのブログでは、
毎月22日、「にゃ〜にゃ〜の日」に
猫(にゃん)ちゃんの写真をアップしています。

にゃ〜にゃ〜の日」の
趣旨に賛同下さった猫好きの参加者さまは、

サプライズ・スポット参加の方も含みます。

笑子さん」、
Futchanさん」、
baraさん」、
まこちゃんさん」、
hirugaoさん(22日はニャンコの日)」、
tanega島さん」、
かず某さん」、
ゆーみんさん」、
ゴッチさん」、
YUKO*さん」、
あこさん」、
mamaさん」、
お〜たむさん」、
てくっぺさん」、
サイモンさん」、
うさくまさん」、
hitsujigumo3942さん
です。

ありがとうございます


*****************************************


貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました





posted by きらら&ジュレ at 02:41| Comment(12) | TrackBack(0) | 2018 きらら&ジュレの日記