Twenty Fifteenのサイトの題名の移動及びリンクの下線と色の変更/WordPressのテーマのカスタマイズ

このブログは、WordPressと言うブログソフト(正確にはブログソフトではなく、CMSと言う)で運営しているのですが、使用しているテーマ(テンプレート)はTwenty Fifteenと言う公式テーマです。今日、このテーマのカスタマイズを少し行いましたので、ちょっとその内容を記録しておきます。

何を変えたかというと、ぱっと見て分かると思いますが、トップに画像を入れました。ヘッダー画像というものです。とても小さいですが、まあ、この際仕方ありません。本当は巨大な画像を使いたいのですが、印象的であるという以外にあまりメリットもないし・・・。

他には、リンクの色を変えました。今までは黒っぽい字に黒っぽい下線だったのですが、リンクの標準色である青色に変えました。しかも、マウスの矢印(ポインター)を乗せると、赤くなります。

実は、今回のカスタマイズは、リンク色の変更が主で、ついでにヘッダー画像を加えたと言うものなのですが、画像の追加の方が目立ちますね。リンクの色を変えたのは、せっかくリンクを貼ってあっても、青くないとリンクであることがわかりにくいからです。トップ画像を入れたのは、トップ画像がないと殺風景だからです。他にも、このブログを覚えてもらいたいという思いがありました。

それでは何をやったかです。まずchild themeを作りました。これを作らないで直接テーマを編集すると、テーマの更新の際にややこしい話になります。今回は、functions.phpが必要になりました。以前はstyle.cssの中に@importを使うという手があったのですが、今では推奨されておらず、functions.phpを編集する方法が推奨されています。

まず、Twenty Fifteenのリンクの下線なのですが、これは実はリンクの下線ではなく、ボーダーの下部を線にしたものです。従って、これを「0」に設定しないで、text-decorationをunderlineに変えると、二重線になってしまいます。

ヘッダー画像はメニュー画面からアップロード可能なのですが、馬鹿みたいに直接スタイルシートに書き込んで対処しました。別に簡単なことなので、これでいいし、これなら微調整もできます。

最大の問題は、どうやってブログの題名である「日だまり日記」という文字を動かすかです。何しろ、画像の真ん中に来てしまって、読みにくくて仕方ありません。写真の上の部分が青空なので、そこに持ってくれば少しは読みやすくなるし、写真の真ん中にある花がよく見えるようになります。

簡単には動いてくれなかったです。どうやったかというと、「.site-title」に「position:relative」と「top:-55px」を組み合わせたのです。

しかし、それだけではだめでした。なぜかというと文字が読みにくいです。こうなると、文字の背景を白くするか、縁取りをするかという選択肢になります。

文字の背景を白くすると、最高に文字が読みやすいのですが、見栄えが最悪でした。そこで白で縁取りをしました。ちょっとはましになりましたが、あまりやりたくない結果になりました。

そこでどうしたか?水色で縁取りしてみました。背景が青空なので、その色に合わせて文字を縁取りしたのです。文字の縁取りは4方向に影をつける方法を使いました。後はついでにフォントの種類を設定して、完璧にしました。最後にブログの題名の文字色を黒からオレンジに変更しました。

・・・という具合にうまく行ったかと思ったのですが、失敗でした。今、iPhoneで見たら、ブログの題名が完全に消え、Androidでもほぼ消えていました。これは、取りあえず、元に戻すしかなさそうです。

※なお、後で暇なときにでもソースを貼っておきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする