web制作の隙間問題

ウェブ制作で気づいたこととかを殴り書き。中の人は、デザイン、コーディング、ちょっとプログラミング、企画・設計・運用・SEO屋さん。

CSSでfigcaptionを画像の幅に揃える方法

f:id:bissybissy:20171102174501p:plain

ブログやニュースサイトの記事などで、figureを使って画像をマークアップする時、キャプションのfigcaptionを画像の幅からはみ出させないようにする方法です。

ごにょごにょやってたら出来たのでシェアシェア〜

スッキリしたhtmlとcssで簡単に実装できます!

実装のポイント

ポイントは、
figure{display:table;}と、
figcaption{display:table-caption; caption-side:bottom;}caption-sideはキャプションの位置を調整します。デフォは画像の上につきます。

Chrome / Safari / Firefox / IE11 / Edge / iOS Safari で動作確認。Androidエミュレータが調子悪かったので確認してませんw

【functions.php】カスタム投稿タイプで投稿する時に、自動でタグがセットされるようにする

カスタム投稿タイプで投稿する時に、自動でタグ(カスタムタクソノミー)がセットされるようにする、functions.php

add_action( 'save_post_カスタム投稿タイプ名', 'set_taxonomy_on_publish' );
function set_taxonomy_on_publish($post_id) {
	$自動でセットしたいターム = array( 'イェー','ウォー', );
	wp_set_object_terms( $post_id, $自動でセットしたいターム, 'カスタムタクソノミー名' , true );
}

なお、動作としては、編集画面を開くと最初からタグがセットされている感じ。

ただ、このスニペットの欠陥としては、タグの編集ができない。
(編集時にタグを「イェー」だけ減らしても保存時に「イェー」と「ウォー」に戻っている)(その代わりタグを追加する分にはOK)
というわけでとても使いづらいw

実際使わなかったし。

 

save_post_カスタム投稿タイプ名

を知ったので、あくまでもメモですねー。
参考:Plugin API/Action Reference/save post « WordPress Codex

…誰も使わないだろうなー。
デフォ値として読み込んでくれるだけで良かったの…だから wp_set_post_termsは向いてないよね…

参考:関数リファレンス/wp set post terms - WordPress Codex 日本語版

なお相談に乗ってくだすった @yahsan2 さん、感謝!

 

追記
通常の投稿の場合、このプラグインが良さそう!(ver2.0当時、カスタム投稿タイプは非対応でした)

wordpress.org

Android標準ブラウザをUAで条件分岐

Android標準ブラウザ(名前はわからない)、最近ではChromeにバトンタッチしつつあるということですがまだまだ使ってる人もいるんですね〜

文章多め記事サイトをコーディングしていたんですが、Android標準ブラウザでの text-align:justify の解釈がどうも変。

行末揃ってないし、その割に揃えるつもりはあるらしく、単語の途中の半角スペースを思いっきり広げて調整するという謎の挙動。

というわけで対策として、Android標準ブラウザだけその要素に text-align:left を上書きしてあげます。

こちらからそのまま拝借しました。感謝。

qiita.com


tureだった時の処理は、htmlタグに専用のclassをつけるだけにしました。
あとはcssでホイホイ。

useragentを使ってAndroid標準ブラウザ判定

早くなくならないかなぁ〜

 

Google Analyticsでショートカットが無くなっててびびった

ショートカット便利っすよね。

「ショートカット」は「保存済みレポート」へ名称変更

名前が変わっただけだったー。

登録したものは残ってたから一安心。

f:id:bissybissy:20170817181424p:plain

GAはUIの変更がビシバシある点にちょっとつらみがあると思う。

というささやかな愚痴でした〜

 

ではね。

【モバイルアンカー広告】上から降りてくる広告・ふわっと出現する広告だけをブロック【iOS】

まずはじめにインターネッツでコンテンツを作っておまんまを食べているという意味での同業のみなさまへ、誤解ないように申し上げます…

私は広告大好きだ!

テレビCMも雑誌の広告もインターネッツの広告もアドバルーンも劇団が舞台の前に入れるタイアップコントみたいなのも。。

ただし良い広告・良い場所・良いタイミングのものに限る。

空気読めない接客のような広告は嫌われます。
少なくとも私は嫌いです。というかたくさんの人が嫌っています。

f:id:bissybissy:20170815070601p:plain

超嫌われてますね〜 わかるわかる〜

死ね とか広告は生命体じゃないのに入力して検索しちゃうあたり本物の憎悪を感じます。

メディアとして嫌われることをやっていては先が見え云々(キリがないのでこの辺で

で、嫌われているアンカー広告って?

スクロールするとスマホの画面下についてくるアレです。

と言っても、下にべたっとくっついて、はっきり広告とわかり、高さをそんなに取らなければ良いと思うんですよ。

私が嫌いなアンカー広告は、スクロールするにつれて透明な状態からふわ〜っと出現するアレです。めっちゃスケスケの状態だと気づかずにクリックしてしまう。

まさにだまし討ちです。卑劣です。

ちなみにそのふわーっと出てくるだまし討ちアンカー広告、名前は知りません。ほんとすんません。

降りてくる広告・ふわっと出現する広告だけを非表示にしたい!

夏休みでいろんなブログやメディアを見る機会が増え、イライラが頂点に達したので(見るのをやめれば良いんだけどそれじゃ根本的な解決にならないし)、とうとうアドブロッカー(iOSのコンテンツブロッカーアプリ)を導入しました。。

で、コンテンツブロッカーアプリの使い方を紹介する記事はたくさんあるんですが、そこで紹介されているのは「広告を全消しする方法」がほとんど。または「アドネットワークのURLを指定する」など。これでは「ふわっと出現する広告」だけを狙い撃ちにできませんし、広告を全消しにすると良い広告まで消えてしまう。。

そこで思案した結果、割と簡単な方法で解決しそうだったので紹介しますー

コンテンツブロッカーを使って、アンカー広告をcssセレクタで指定して非表示に!

今回使ったコンテンツブロッカーアプリは1Blocker。有名なアプリです。

1Blocker

1Blocker

  • Salavat Khanov
  • 仕事効率化
  • 無料

1Blockerの導入については以下のサイトがわかりやすいのでご参考に。。 

無料で使えるコンテンツブロッカー『1Blocker』の使い方 | AppBank – iPhone, スマホのたのしみを見つけよう

結論から書きますね。。

アプリの Hide Page Elements から、cssセレクタを非表示にするルールを追加します。

追加するルールは以下の画像の通り。

f:id:bissybissy:20170815074030p:plain

① 名前をつけます。自分がわかればテキトーでいいです。

CSS SELECTOR のところに以下のセレクタを書きます。

[style*=opacity]

SAVEすれば完了です!

 

理屈としては難しいことはひとつもございません。

ふわっと出てくるってことは最初は透明なわけなんで、透明度を表すopacityという値をもつstyle属性を非表示にしちゃえば言い訳です。それが [style*=opacity] な訳ですね。

非表示(display:none)の方はコンテンツブロッカーアプリがやってくれます。

 

以下、 2ちゃんねるまとめのまとめ  さんから被験体になっていただいたみなさん(嫌いな広告を出しているみなさん)。他にも色々あると思いますが。。

これらのサイトでふわっと広告が狙い通りにブロックされているのを確認しました。もちろん通常の適切な広告は表示されてます。

何か気になった広告があったらちゃんとクリックするつもりですヽ(´ー`)ノ

とりあえずコンテンツブロッカーのおかげで心に平穏が訪れました。心置き無くスクロールできるってことがこんなに快適だったなんて!

コンテンツブロッカーありがたし。

 

※ なおこの記事で紹介した方法は、ふつーに半透過の広告じゃない要素が巻き添えを食らって見えなくなる可能性があります。が、その数よりもこの広告の方が出現頻度が高いと思うので紹介しましたー。設定する際はあらかじめご了承くださいませ。

 

ではね。

 

【Mac】キーボードに猫が載ってくる対策🐈

かまってモードの猫って、お仕事中だろうが遊び中だろうがお構いなくキーボードガンガン載ってきますよねー。それが可愛いとこでもあるんですが、ウェブ屋なんてキーボードがメインな仕事な訳で結構困る。

だからと言って仕事中猫を隔離するのも困る(私情)。

というわけで対策アプリがないかなーと思ってディグってたらこんな記事を見つけたので早速設定!

www.mackungfu.org

アプリは不要!キーボード連打をできなくすればOK!

まずは「システム環境設定」へ。
そして「キーボード」。
で、「キーのリピート」のところをオフにしてしまいましょう。

私の設定画面はこんな感じ。

f:id:bissybissy:20170815024845p:plain

これにより「あ」キーを押し続けると「ああああああああああ」となっていたのが、「あ」で済むようになります。

もちろん「ポポポポポオポポPオポッポ」とMacちゃんが悲鳴をあげることもありません。

参考: キーの連続入力の速さを設定する - Mac ヘルプ

早速うちの猫様で検証

部屋を見回すと手頃な猫が落ちていたのでキーボードの上に載せてみました。実験に協力していただいたのはこちらのネロさん(♂)。

f:id:bissybissy:20170815025117j:plain

動画はこちら。のしのし歩かれたけど「q」一文字しか入ってない!やったー

(あと何度かやってもらったけど4-5文字程度で済んでいる模様)

 

これで「くぁwせdrftgyふじこlp」とか入力されたり、作業中のアプリ閉じられたりしなくて済みますネ!

もちろんこれで全ての問題が解決する分けじゃないですが、困ることは確実に減りますよ〜。

なお、deleteキー長押しで文字消す派の人は、色々スライダを調整してみてくださいね。。(私は control + Shift + ← でざっくり選択してから微調整するか、ダブルクリックで選択して単語のみ選択して消す派です〜)

 

ではね。

本日の謎用語メモ: Amazon Lightsail というサービス

お友達から聞いたのでメモ。

aws.amazon.com

以下引用。

数回クリックしてメニューから設定を選択し、SSDベースのストレージ、DNS管理、固定IPが事前設定された仮想マシンを起動することができます。好きなオペレーティングシステム(Amazon Linux AMI,Ubuntu)、開発環境(LAMP, LEMP, MEAN,Node.js)やアプリケーション(Drupal,Joomla,Redmine,GitLabなど)を立ち上げることができます。そして、それはデータ転送量の大きな容量を含む月額$5から始まる定額料金です。

ほう?

この記事からもうしばらく経っているので公式サイトは日本語対応したみたいだしTokyoリージョンもできたみたい。

amazonlightsail.com

ふつーのウェブサイト制作やってるとあんまり気にしない系サービスだけど、Webアプリ作るならこっちのがいいのかな?

安いしふつーのレンタルサーバー的なノリで使ってもいいのかもしれない。

あ、でも普通のレンタルサーバーでプリインストールされてるモジュールとかのインストールとかしなきゃいけないのかな?よくわかりまちぇん\(^o^)/

今プライベートでは Xserver を使っていて、それよりは Amazon Lightsail の方が安いわけ何だけど、 Xserver はモリサワのフォントの一部をwebフォントでつかえるし、あ、でも私そんなにモリサワ派じゃないし、とか何とか。

気が向いたら触ってみまーす!
(オススメの使い方とか、理解が浅いよとかいうツッコミをお待ちしておりますー)