【まとめ】
・windows7のサポート対応が2020年1月までなので、それまでの辛抱
・それまでは、これでしのぐ
＋
cssへの記述
/*外接リサイズ*/
.of img {
width: 100px;
height: 100px;
object-fit: cover;
font-family: ‘object-fit: cover;’; /*IE対策*/
}
WEB制作
【Jquery】jQuery＆CSS3で超簡単！スクロールするとかっこ良く要素を表示する方法7つ
【まとめ】
・要素が表示されるエリアまでスクロールしたら、移動＋フェードイン表示しながら要素を表示します。
【wordpress】RSSにアイキャッチ画像を出す方法
【まとめ】
・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');
【CSS】img画像の縦横比を保ったままボックス内に収める方法
img画像の縦横比を保ったままボックス内に収める方法
【参考】
https://1design.jp/web-development/css/1844
まとめ
・基本は下記のソース
img {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
・今回自分が使用したのは
object-fit:scale-down
モダンブラウザならこれ付けただけでOKでした
【jquery】画像の縦横とってサイズ変更
【アイコン】スマホのブックマークアイコンの設置について
アイコンのジェネレーター
【まとめ】
・下記の４種類作ってアップすれば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/
自作派
【まとめ】
- SnapWidget(スナップウィジェット)
お手軽だが、無料だとsnapwidgetの用意したページに飛ばされる
- Instagram API ＋ instafeed.js
無料＆公式。しかし認証制で埋め込むだけの理由だと通らない可能性が高い
- Snapppt(スナップト)
Snappptはウィジェットから商品の購入が可能にさせるECサイト向けのツール
- InstaWidgetを使う
これが一番簡単かも。デメリットとしてはフォローボタンのInstaアイコンが古いバージョンのものになっていることと、写真のリンク先がInstaWidgetに飛んでしまう
【WordPress】カテゴリページのタイトルから「カテゴリー:」や「タグ:」の文字を削除する方法
https://akamist.com/blog/archives/1658
【まとめ】
・functions.phpに下記の関数を追加するだけで解決
/** カテゴリページのタイトルから “カテゴリ:”の接頭語を削除する */
add_filter( ‘get_the_archive_title’, function ($title) {
if ( is_category() ) {
$title = single_cat_title( ”, false );
} elseif ( is_tag() ) {
$title = single_tag_title( ”, false );
} elseif ( is_author() ) {
$title = ‘<span class=”vcard”>’ . get_the_author() . ‘</span>’ ;
}
return $title;
});
【WordPress】プラグインを使わずにパンくずリストを簡単に自作！
https://original-game.com/wordpress-make-a-breadcrumb/
【まとめ】
・functions.phpに下記を記述でOK
function mytheme_breadcrumb() {
//HOME>と表示
$sep = ‘>’;
echo ‘<li><a href=”‘.get_bloginfo(‘url’).'” >HOME</a></li>’;
echo $sep;
//投稿記事ページとカテゴリーページでの、カテゴリーの階層を表示
$cats = ”;
$cat_id = ”;
if ( is_single() ) {
$cats = get_the_category();
if( isset($cats[0]->term_id) ) $cat_id = $cats[0]->term_id;
}
else if ( is_category() ) {
$cats = get_queried_object();
$cat_id = $cats->parent;
}
$cat_list = array();
while ($cat_id != 0){
$cat = get_category( $cat_id );
$cat_link = get_category_link( $cat_id );
array_unshift( $cat_list, ‘<a href=”‘.$cat_link.'”>’.$cat->name.'</a>’ );
$cat_id = $cat->parent;
}
foreach($cat_list as $value){
echo ‘<li>’.$value.'</li>’;
echo $sep;
}
//現在のページ名を表示
if ( is_singular() ) {
if ( is_attachment() ) {
previous_post_link( ‘<li>%link</li>’ );
echo $sep;
}
the_title( ‘<li>’, ‘</li>’ );
}
else if( is_archive() ) the_archive_title( ‘<li>’, ‘</li>’ );
else if( is_search() ) echo ‘<li>検索 : ‘.get_search_query().'</li>’;
else if( is_404() ) echo ‘<li>ページが見つかりません</li>’;
}
・呼び出す記述
<?php mytheme_breadcrumb(); ?>
出力したいところに上記を貼って、cssでデザインを整える
archive.phpとかsingle.phpあたり