HOME → 

Twenty Seventeen 文字と画像が被る 問題への対処

WordPress Twenty Seventeen
文章の一部に画像が重なる問題への対処
子テーマの style.css を変更
 
記事や固定ページの作成で、文章の下に画像を挿入した場合、画像が文章の下部に重なってしまう。
文字と画像が被る
 
以下に、この現象が発生するケースと、対処方法を記録。
HOME → 

Twenty Seventeen 「続きを読む」をクリックした時、ページの先頭にジャンプ

WordPress Twenty Seventeen
画面制御ボタンのカスタマイズ
「続きを読む」をページのTOPにする
 
WordPressでは「続きを読む」をクリックした場合、まさにその続きの場所から表示される。これを『利便性』の観点から、ページの先頭から表示されるように変更する。
HOME → 

Twenty Seventeen 「続きを読む」をCSSでボタン化する

WordPress Twenty Seventeen
画面制御ボタンのカスタマイズ
「続きを読む」をCSSでボタン化する
 
style.css を編集するだけで、「続きを読む」をボタンにすることが出来る。
 
「続きを読む」をCSSでボタン化する
 
以下に、「続きを読む」ボタンのCSSを記録。
 
HOME → 

Twenty Seventeen ページトップへ戻るボタンの設置

WordPress Twenty Seventeen
画面制御ボタンのカスタマイズ
ページトップへ戻るボタンの設置
 
ページをスクロールすると、画面右下に「トップへ戻る」ボタンが浮かび上がってきて、これを押すとページの先頭に戻るボタンを設置した。
以下に、この方法を記述。
HOME → 

WordPress 軽量のソーシャルボタンを自作し、任意の場所に表示する

WordPress Twenty Sixteen カスタマイズ
SNSボタンをまとめたショートコードを作成し、
任意の場所に表示
 
①.「PageSpeed Insights」で測定すると、【 Poor 】と遅い。
②.「WP Social Bookmarking Light」プラグインを使用しているが、表示位置が自由にならない。
 
軽量のソーシャルボタンを自作

という理由で、最も軽いソーシャルボタンをPHPファイルで作成し、SNSボタンを投稿ページや固定ページの任意の場所に、PHPファイルを動かす 『ショートコード』 で表示できるようにした。
 
以下、ソーシャルボタンをPHPで作成し、そのPHPファイルをショートコードにする方法を纏めた。
HOME → 

Twenty Seventeen メニューバー高さと背景色を変更する

WordPress Twenty Seventeen
画面デザインに関するカスタマイズ
メニューバーの高さと背景色を変更する
 
 
Twenty Seventeen のヘッダー画像の色調に合わせて、メニューバーの背景色を変更するとともに、ナビゲーションメニューの高さがありすぎるので、高さを狭めるカスタマイズを行った。
HOME → 

Twenty Seventeen リンクの 文字・色・下線 のカスタマイズ

WordPress Twenty Seventeen
画面デザインに関するカスタマイズ
リンクの 文字・色・下線 のカスタマイズ
 
「Twenty Seventeen」のリンク文字は黒で、そこに黒い下線が引かれてリンクの目印となっている。また、リンクにマウスを合わせると、下線がひとまわり太く表示されるように設定されており、さらに、背景色を変更してみると白の下線も引かれている。
以下に、これらのカスタマイズ要領を記す。
HOME → 

WordPress 投稿一覧・固定ページ一覧に「最終更新日」を表示する

WordPress Twenty Seventeen
『投稿一覧・固定ページ一覧』のカスタマイズ
「最終更新日」を追加表示
 
フィードの配信やSEO対策を始めると、記事の内容を改善した更新日が気になりだす。そこで、WordPressの管理画面の『投稿一覧』に「最終更新日」の項目を追加表示して、「最終更新日」で記事を並び替えれるようにした。