サイトで見つけた「自作のScroll-Top」が当ブログのアクセント!

検索で透明色関係のサイトを調べてる時に、何気なく見つけたサイトだけど「初心者」でこれまでできるのか?と思って「妻と僕」 のWordPressメニューから「自分で作成できるScroll-top」の記事を見つけた。丁寧で誰にでも分かり易く説明された記事を手元に置いて丸写しで試したところ「凄い!」の一言。当分このまま利用させていただくことにしました。

又、ほかにも貴重な記事が沢山あって、事あるごとに勉強させてもらっている。感謝の意をコメントするより当サイトで、この「妻と僕」サイトの素晴らしさを紹介できればと思う。


ログイン画面のロゴを変更

CODEXの「ログイン画面のロゴを変更」方法を参考にして試したが、何故か上手くいかなかったので少し手を加えて試した。親テーマだと更新の際に消えてしまうので、子テーマのfanctions.phpに書き加える。

function login_logo_image() {
echo ‘<style type=”text/css”>
#login h1 a {
background: url(‘ . get_bloginfo(‘template_directory’) . ‘/login_logo.png) no-repeat !important;
}
</style>’;
}
add_action(‘login_head’, ‘login_logo_image’);

元のロゴと同じサイズ(幅85px、高さ85px)の画像を準備して、親テーマのディレクトリに保存(「login_logo.png」)すれば、ログイン画面のロゴが切り替わる。又、ロゴのリンク先をウェブサイトにしたい場合は下記も書き加える。

add_action(‘login_head’, ‘login_logo_image’);
function login_logo_url() {
return get_bloginfo(‘url’); ➡ブログのURLを設定
}
add_filter(‘login_headerurl’, ‘login_logo_url’);

上記の画像変更だけで良いが、少しアクセントを付けて見たい場合は、width,height,border,border-radius,box-shadow等を加えてから必ず「background-repeat: no-repeat !important」を書き加える。

function login_logo_image() {
echo ‘<style type=”text/css”>
#login h1 a {
background: url(‘ . get_bloginfo(‘template_directory’) . ‘/login_logo.png); ➡ 必ず(;)
width: 85px;
height: 85px;
border: solid 1px #d0d0d0;
border-radius:50px; ➡ 角丸(5px)
box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.4);
bakground-repeat: no-repeat !important;
}
</style>’;
}
add_action(‘login_head’, ‘login_logo_image’);

function login_logo_url() {
return get_bloginfo(‘url’);
}
add_filter(‘login_headerurl’, ‘login_logo_url’);

円形にしたり角丸にして影を付けたりと独自のログイン画面ができるので楽しみが増えたね。


秘密にしたいフォルダーにBasic認証

WordPressのディレクトリ に「秘密の部屋」的なフォルダーを作成してBasic認証を掛け、見られたくないファイルなどを入れて置く。

【.htpasswdの作成】

コマンドプロンプト(管理者権限)を立ち上げて、C:\> x:\xampp\apache\bin\htpasswd -c x:\xampp\apache\.htpasswd user名を入力してEnterキーを押す。
*mcオプション(MD5)、オプションはどちらも可
New password: →入力
Re-type new password: →入力
次のように表示されればOK。
Adding password for user名 →追加できる。
x:\xampp\apacheに.htpasswd(ユーザ名:xxxxxxxxxxxxxxx)ができてるのでFTPでBasic認証を施したいディレクトリーのフォルダー内に「htpasswd.txt」に変更してからアップロード。

【サーバ上の絶対パス】

<!–?php
echo dirname(__FILE__);
「path.php」と名前をつけて保存、FTPでWebのルートディレクトリにアップロードして、ブラウザでアクセスすると、「サーバー上の絶対パス」が表示されるのでコピーしてhtaccessの「AuthUserFile」に張り付ける。

【htaccessのフォームを作成】

AuthUserFile サーバー上の絶対パス/フォルダー名/.htpasswd
AuthName “Enter your ID and password.”
AuthType Basic
require valid-user
エディターで作成して「htaccess.txt」で保存、htpasswd.txtがあるフォルダーにFTPでアップロード。

最後にアップロードした.txtの拡張子を「.htpasswd」と「.htaccess」にそれぞれ変更して終了。
以上でBasic認証を施したディレクトリ(フォルダー)が完成した。


サイドバーの文字や色、フッターのLink線の変更

Google Cromeの画面で右クリックして「検証」欄からサイドバーの文字や色、フッターのリンク線等の変更をTwentySeventeen-childのstyle.cssに追加した。
Wordpressの仕業も、ポイントしたところを「検証」で調べるとそれなりに分かってくるもので、今回はサイドバーの文字や色、固定ページ用ウイジェットのLink線を消すことを試みた。

1) ウィジェットタイトル部分の変更
.widget-area .widget h2 {
text-align:left;
line-height: 20px; /* 高さ */
font-size: 13px;
color: #00a73e;
}
*必要な変更は、文字の大きさと文字色なので、それに合わせて「高さ」だけ調整。

2)「.widget-area .widget a {}」⇒Link線関係
.widget-area .widget a:link {box-shadow: none;}
/*.widget-area .widget a:visited {color: #xxxxxx;}*/
/*.widget-area .widget a:hover{color: #xxxxxx;}*/
*記事内と統一してる場合は「box-shadow」のみ

3)フッターのLink線
.site-info a {
color: #00a73e;
text-decoration: none;
}
.site-info a:link {
box-shadow: none;
}
.site-info a:hover {
color:#934C7B;
}
*フッター関係は諦める寸前だったけど、「site-info」を見つけて試したところ難無く文字色とLink線を消すことができた。

取り合えず調整・修正を施した。


テーマのベーシック文字・色を少しだけ変更

最初にダッシュボードから外観→カスタマイズ→色から配色を「ライト」に変更(テーマのベーッシク文字・色)してTwentySeventeenの子テーマに書き込むと変更部分が反映する。

今まで使用してたフォントは「MS Pゴシック」が主で少し柔らかいメイリオを指定して見た。又、文字色がタイトル:Bold、テキスト:Normalなのでこれもやや薄目に変更。

文字の大きさや行間隔も変更、記事内の文字はディフォルトのテーマに適した大きさなので、フォントと色合いだけ変更。

*本文中の行間隔は、ベースの26px→24pxに変更。
*記事のタイトルは、一段下げて柔らかい色合いに変更。

/* フォントと文字の大きさ、色 */
body {
font-family: “メイリオ”,Meiryo,”Hiragino Kaku Gothic Pro”,”ヒラギノ角ゴ Pro W3″,”MS Pゴシック”,”Lucida Grande”,”Lucida Sans Unicode”,Arial, Verdana, sans-serif;
text-rendering: optimizeLegibility;
color: #333;   /* 文字色 */
font-size: 12px;
}
body.custom-font-enabled {
font-family:”メイリオ”, Meiryo,”Hiragino Kaku Gothic Pro”,”ヒラギノ角ゴ Pro W3″,”MS Pゴシック”,”Lucida Grande”,”Lucida Sans Unicode”,Arial,Verdana,sans-serif;
}

/* 本文中の行間 */
.entry-content p {line-height: 26px;} ←24px

/* サイドバーの行間と文字の大きさ */
.widget-area .widget li {
line-height: 28px; ←24px
font-size: 14px;
}
.entry-title {
clear: both;
color: #222;
font-size: 26px;  ←22pxに変更
font-weight: bold; →normal又は、#b0b0b0に変更
line-height: 1.5em;
padding-bottom: .3em;
padding-top: 15px;
}

文字色に色を付けようと思ったけど、余り好きな感じにならなかったので、やや薄めで纏めてみた。


突然メモリエラーが発生!

早朝、記事を書く予定でサイトをオープンしようとしたところ、下記のメッセージでログイン画面が現れなかった。
fatal error: allowed memory size of 134217728 bytes exhausted (tried to allocate 1866678795 bytes) in c:\xampp\htdocs\wordpress\wp-includes\functions.php on line 5216
突然にメモリーに異常が発生、初めての経験なので戸惑ったが以前にサイトで同じような出来事があって「wp-config.phpにdefine( ‘WP_MEMORY_LIMIT’, ‘256M’ );を書き加えてからPCを再起動」させたとの記述があったことを思い出し、試したところサイトは無事にオープン。

とにかくこれで一安心だが、確かな原因が分からないのでWordPressのAccess.logを見たところナナナナんとxmlrpc.phpのアクセスが膨大な数でビックリ!
WordPressの.accessを調べると書き加えたものが消えてる!?、なので急いで下記を書き加えた。多分忘れたかも?

1)RewriteRule ^xmlrpc\.php$ “http\:\/\/0\.0\.0\.0\/” [R=301,L]
2)<Files “xmlrpc.php”>
Order allow,deny
Deny from all
</Files>
*2)の場合はメモリーを食うとのこと、0.0.0.0に送るのがベストらしいので1)が良さそう。

まさか「ブルートフォースアタック」のようなアッタックでfatal errorが発生したと思わないが今後は尚一層の注意が必要だ。