1. /
  2. 2018年 10月

2018年 10月 の投稿一覧

【css】object-fitをIEに対応させる方法

【まとめ】

・windows7のサポート対応が2020年1月までなので、それまでの辛抱
・それまでは、これでしのぐ



＋
cssへの記述
/*外接リサイズ*/
.of img {
width: 100px;
height: 100px;
object-fit: cover;
font-family: ‘object-fit: cover;’; /*IE対策*/
}

【wordpress】RSSにアイキャッチ画像を出す方法

https://tekuten.com/rss-feed

【まとめ】

・function.phpに下記のコードを記述するだけ！

function rss_post_thumbnail($content) {
global $post;
if(has_post_thumbnail($post->ID)) {
$content = '<p>' . get_the_post_thumbnail($post->ID) . '</p>' . $content;
}
return $content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');
add_filter('the_content_feed', 'rss_post_thumbnail');

【アイコン】スマホのブックマークアイコンの設置について

スマホのブックマークアイコン用画像を指定する方法

アイコンのジェネレーター

https://iconifier.net/

 

【まとめ】

・下記の４種類作ってアップすればOK

<!– スマホ用基本 –>
<link rel=”apple-touch-icon-precomposed” href=”画像のURLをセット”>
<!– iPad用基本 –>
<link rel=”apple-touch-icon-precomposed” sizes=”76×76″ href=”画像のURLをセット”>
<!– スマホのRetina用 –>
<link rel=”apple-touch-icon-precomposed” sizes=”120×120″ href=”画像のURLをセット”>
<!– iPadのRetina用 –>
<link rel=”apple-touch-icon-precomposed” sizes=”152×152″ href=”画像のURLをセット”>

【CSS】文字列の折り返しに使うプロパティは？

【参考】

https://qiita.com/gcyata/items/353658a7bdc1e7395337

 

文字列を強制的に改行させるCSSのプロパティ

【まとめ】

word-break : break-all;が有名だけどoverflow-wrap : break-word;が望ましい

・word-break : break-all;は単語の途中でも強制的に改行

・overflow-wrap : break-word;は単語の途中で改行するかどうかを指定する

overflow-wrapは 単語の途中で改行するかどうかを指定するためのプロパティです。改行方法を指定するword-breakとは用途が異なります。そのため、親要素に対してtable-layout: fixed;を指定する必要があります。

 

【Instagram】ウィジェットを無料でサイトに設置する方法

おすすめを紹介

https://www.go-ride-news.com/technology-instagram-widget/

自作派

 

【まとめ】

  1. SnapWidget(スナップウィジェット)

    お手軽だが、無料だとsnapwidgetの用意したページに飛ばされる

  2. Instagram API　＋　instafeed.js

    無料＆公式。しかし認証制で埋め込むだけの理由だと通らない可能性が高い

  3. Snapppt(スナップト)

    Snappptはウィジェットから商品の購入が可能にさせるECサイト向けのツール

  4. InstaWidgetを使う

    これが一番簡単かも。デメリットとしてはフォローボタンのInstaアイコンが古いバージョンのものになっていることと、写真のリンク先がInstaWidgetに飛んでしまう