2020年、今年の自分のコーディングを振り返ってみた。
今年ももう直ぐ終わり。
第37回 2020年 新語・流行語大賞も発表されましたね。
そんなわけで、流行語ではなく今回は個人的にコーディングでたくさん使った、マイブームだった事を紹介していこうと思います。
目次
PCで電話番号クリックしたくない（CSS）
わああああ、またスカイプのPOPがでてきたあああああ！
aタグのhref=”tel”。電話番号をリンクさせる時に利用しますよね？
ただ、PCだとちょっとお邪魔。
これいままで、jsで制御するのが主流だったのですが、なんとCSSで制御できるようになりました。
（IE11以下のブラウザに対応する場合はjQueryを使う方法になります。）
自分のCSSのベーステンプレに追加するようになった便利CSSです。
pointer-eventsを利用します。（クリック・タッチイベントを無効化）
書き方はこんな感じ。href=”tel”系のリンクPCの時は全部無効化の表記です。
参考コード
|
1 2 3 4 5 6 7 |
a[href*="tel:"] { pointer-events: none; } @media only screen and (max-width: 812px) { a[href*="tel:"] { pointer-events: initial; } |
pointer-eventsなのですが、他にも便利な使い方が色々あるので試してみたいです。
参考記事
権限で分岐(WordPress)
WPでちょっと文言等追加や変更して確認してもらう時に、テストページではなくログインしたら見えるようにして確認してもらうことがあります。
|
1 2 3 |
<?php if (is_user_logged_in()) : ?> WPにログインした人しか見えない内容 <?php endif;?> |
ただし、これは会員登録等でWordpressのユーザー機能使ってる場合、ログインしたユーザー全てにみれてしまうんです。
WPのユーザーが、更新担当者しかいない場合はこれでいいのですが、担当のみに見てほしい時とかにはNGですよね。
そこで、最近はこちらを利用しています。
権限で分岐！
参考コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php if (current_user_can('administrator')) { ?> 管理者のみがアクセスできるよ。 <?php } ?> <?php if ( current_user_can('administrator') || current_user_can('editor')) { ?> 管理者、編集者がアクセスできるよ。 <?php } ?> <?php //管理者ログイン時とログアウト時で表示内容を切り替える。 if (current_user_can('administrator')) { ?> 管理者のみがアクセスできるよ。 <?php }else{ ?> 管理者じゃないときはこちらだよ！ <?php } ?> |
current_user_can(‘ここを書き換えて権限を変えてね’)
管理者(administrator) – サイト内すべての管理機能にアクセスできるユーザー。マスター。
編集者(editor) – 他のユーザーの投稿を含むすべての投稿を発行、管理できるユーザー。
投稿者(author) – 自身の投稿を発行、管理できるユーザー。
購読者(subscriber) -コメントを読んだり書き込んだり。会員系機能はここのユーザーを使ってる。
今後は、会員様限定情報等で見せる場合は、is_user_logged_in。
更新担当にだけ見せる場合は、current_user_canで使い分けていこうと思います。
参考記事
IcoMoon(ツール)
日々のFontAwesomeのダイエット（軽量化）に貢献していただいております。FontAwesomeのライ●ップ
IcoMoonは、Webフォント素材の配布、自作のアイコンや他の素材サイトでダウンロードしたSVGアイコンをWebフォントに変換できるサービスを提供しています。
そのうち、SVGアイコンもぶっこんでみたいので今後その時はまた記事書こうと思います。
これに関しては、前回記事を書いたので、こちらを参考にどうぞ。
underlineを使い分け（CSS）
とりあえず、underline！おまえはくっつき過ぎだ。
この文字に線引くよ、この文字に線引くよ
:hover等でも使うアンダーライン。
文字と、線がベッタリくっ付いてしまうのがちょっと見づらい。
|
1 2 |
a.link {text-decoration:underline;} a.link:hover{ text-decoration:none;} |
そこで、自分は最近はこちらを使っています。
参考コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
a.links{ position: relative; display: inline-block; text-decoration: none; color:#111; } a.links::after{ position: absolute; bottom: -2px; left: 0; content: ''; width: 100%; height: 1px; background: #111; } a.links:hover::after{ content: ''; display: none; } |
実装するとこんな感じです。
この文字に線引くよ、この文字に線引くよ
見やすい！ デザイン上くっ付くのやだな〜って時はこちらを使うと見た目が良いです。
まとめ
ほかにもありそうなのですが、今年の自分のコーディングをちょっと振り返ってみました。
来年はさらに便利な機能等が増えてるんでしょうね。ついていかなければ。
恒例 さいきんのあべさん
・Wordpressのランダム表示、ページングに悪戦苦闘した。（パーミッションで実装）
・日報の一言日記をちゃんと書くようにしてる。
・娘ちゃん、バージョン3へのアプデで、夜泣きアラートがまた実装されてしまった。
・審神者に、マスター、お空に、監督、マネージャー、監督生に、賢者様を最近追加してしまい回せてない。
・平なところで、なぜか穴にはまり車が脱輪した（汗
・本日、2020年12月9日 2020FNS歌謡祭に「刀剣男士 team新撰組 with蜂須賀虎徹 出演」曲目が「ゆめひとつ」で浮かれてる。（リンク）
関連記事
記事を書いた人
コード打って、オタ活して、3人の子育てママして、奥さんしてる書けないくらいclass属性だけは多いコーダーです。
コード打って、オタ活して、3人の子育てママして、奥さんしてる書けないくらいclass属性だけは多いコーダーです。