カテゴリー: 03 カスタマイズ

 

標準のブログカードは、サイズが大きすぎていくつも並べられない。そこで、いくつも並べても見やすいサイズのブログカードを自作することにした。

自作するにあたっては、ブログのメンテナンス性を考慮し、URLを直接記述する方式ではなく、『ショートコード』で実装することにした。

"twenty seventeen 内部リンクをショートコードでブログカード化" の続きを読む

 

任意のページの、任意の場所に、任意のカテゴリーの『記事一覧』を、任意の数だけ、サムネイル付きで表示する『関連記事一覧を表示するショートコード』を作成した。 記事一覧は、『ブログカード』風のデザインにした。

 

ショートコードで、ブログカード風『関連記事一覧』を表示した例。

 

"WordPress ショートコードで『ブログカード風』『関連記事一覧』を表示" の続きを読む

 

WordPressでは「続きを読む」をクリックした場合、まさにその続きの場所から表示される。これを『利便性』の観点から、ページの先頭から表示されるように変更する。

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

 

style.css を編集するだけで、「続きを読む」をボタンにすることが出来る。

 

 

以下に、「続きを読む」ボタンのCSSを記録。

 

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

 

ページ内リンクで、リンク先の先頭位置が隠れてしまい、最適な位置で表示されない。この解決方法を以下に記す。

"Twenty Seventeen ページ内リンクのリンク先位置調整" の続きを読む

 

ページをスクロールすると、画面右下に「トップへ戻る」ボタンが浮かび上がってきて、これを押すとページの先頭に戻るボタンを設置した。

以下に、この方法を記述。

"Twenty Seventeen ページトップへ戻るボタンの設置" の続きを読む

 

サイドバーにも「カスタム HTML」というウィジェットで【 SNSボタン 】を表示。 

 

以下に、この表示要領を記録。

"WordPress SNSボタンをサイドバーにウィジェットで表示" の続きを読む

 

①．「PageSpeed Insights」で測定すると、【 Poor 】と遅い。
②．「WP Social Bookmarking Light」プラグインを使用しているが、表示位置が自由にならない。

 

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

 

以下、ソーシャルボタンをPHPで作成し、そのPHPファイルをショートコードにする方法を纏めた。

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

WordPress Twenty Seventeen
画面デザインに関するカスタマイズ
メニューバーの高さと背景色を変更する 

 

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

"Twenty Seventeen メニューバー高さと背景色を変更する" の続きを読む

 

「Twenty Seventeen」のリンク文字は黒で、そこに黒い下線が引かれてリンクの目印となっている。また、リンクにマウスを合わせると、下線がひとまわり太く表示されるように設定されており、さらに、背景色を変更してみると白の下線も引かれている。

以下に、これらのカスタマイズ要領を記す。

"Twenty Seventeen リンクの 文字・色・下線 のカスタマイズ" の続きを読む