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

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

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

https://iconifier.net/

 

【まとめ】

・下記の4種類作ってアップすれば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に飛んでしまう

【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あたり

 

【WordPress】html上にmargin-topがついてしまう問題

散々悩んで1日jsなどいじくりまわしても解決しなかった問題がここで解決。。

https://liginc.co.jp/designer/archives/2713

結局Wordpressのバグだったようです。。

【まとめ】

・ログイン状態でページを見るとツールバー分のマージンが自動で入ってしまう仕様とのこと

・ユーザーのプロフィール設定で「サイトを見るときにツールバーを表示する」のチェックをはずす

・もしくはfunctions.phpに下記の1行を追加で解決

add_filter( 'show_admin_bar', '__return_false' );

【WordPress】お手軽にワードプレスでお問い合わせフォーム制作

Contact Form7で簡単フォーム作り

https://techacademy.jp/magazine/1988

ワードプレスのプラグイン検索で「Contact Form7」を検索すると山のようにリストが出てきてしまいます。

プレーンな「Contact Form7」をインストールしないといけないので、探すにはおすすめのタブを選択すると1ページ目に出てくると思います。