Surfaramaってカッコイイよね！でも、使ってみたらこんなことに気が付いたよ。

今更ではあるが、猫と歩けば壁にあたる。は「Surfarama（サーファラーマ）」という無料テーマをお借りしてカスタマイズしています。

テーマをこれに決めたのは、完全に見た目の好みなんですが、このテーマ。結構カスタマイズの情報が探ししにくいんですよね。

なので、自分がカスタマイズしたときに気付いた情報を書き留めておこうと思います。

Surfarama – WordPress theme | WordPress.org

Surfarama is a bold and fun theme which uses the popular mason style layout on the home page and category pages to highlight imagery and make for a very visual presentation. It’s perfect for travel and magazine style blogs heavy on the imagery. The theme is highly customizable with the ability to upload your own…

wordpress.org

以下、カスタマイズ時の防備録。

2019年4月現在は、現在のテーマはphunkというテーマに変更しています。なお、Surfaramaは2018年9月13日にテーマの更新がされているようです。

ファビコンの設定はカスタマイザーから出来なかったよ。→カスタマイザーから設定出来る様に修正されています。

WordPress4.5からカスタムロゴの設定が追加されているっぽいんですが、使用テーマをSurfaramaに設定していると、サイトの基本情報が表示されず、カスタマイザーからのファビコン及びアプリアイコンの設定は出来ませんでした。

ファビコンはヘッダーをいじって追加し、ブログカードの部分はディレクトリの中のファイルを上書きする力業で解決するしか今のところ対象法を見つけられていません。

ファビコンの設定ってカスタマイザーから出来るはずだよね？確か。

WordPressでは、サイトタブやブックマークバーに表示されるサイトタイトルの横に、ファビコンという小さなアイコンを表示させる設定が簡単にできます。と言う記事を読んでこれだ！と思い設定したんだけれども……何故か上手く設定出来ません。でした。チーン。

※2018年9月の更新後から、カスタマイザーにサイトアイコンの設定が追加されています。現在は、ヘッダーに修正をしなくても、他のテーマと同じようにファビコンの設定をすることが可能になりました。

ブログカードはプラグインで使うしかない？

ブログカードをプラグインを使用して使わず、PHPを直接修正する方法で使用したくて修正してみたのですが、どうも直接PHPに追加する方法だと、上手く反応してくれません。

ブラウザのアドオンを使用する方法で試してみたところ、情報の取得が上手くいかず、レイアウトがぶっ壊れました。

何が原因か分からない間は、素直にブログカードを使う方が無難かもしれません。

ブログカードがあったら関連記事の表示がカッコイイし見やすい！でも、上手く設定出来ないからプラグインでくっつけとく。

個別に設定したくても、意外なところが連動していて、予想外のところのレイアウトが崩れてビックリした。

リストの見せ方や、ナビゲーションの幅、リンクの見せ方など、色んなところが同じスタイルで管理されていて、意外な所のデザイン崩れが後から発覚する場合があります。

例：ナビゲーションの高さと記事の行間が連動してた気がする
例：目次のプラグインと、サイドバーのリストが同じタグ

なので、片方を変えると片方も影響を受けたりします。

とはいえ、コレは他のテーマも同じように連動していたりするので、記事部分とウィジットのCSSクラスを探し出し、個別で指定することで解決するかもしれません。実際テストしてないので憶測ですが。

httpsにするときは、親テーマにも変更箇所があり、そこも変更してあげないとエラーになってしまうかも。

子テーマを使わず、カスタマイザーのカスタマイズだけで使用している場合は関係ありませんが、デザインを細かく変更するために子テーマを使用してカスタマイズしている場合、httpからhttpsに変更するときに、フォントの読み込みエラーが起こってしまいます。

これを解消するためには、親テーマのスタイルシート (style.css)にある

/******************************************************************/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);
/******************************************************************/

この部分を

/******************************************************************/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
/******************************************************************/

に書き換えないとずっとエラーが消えません。

httpからhttpsに。URLの変更でセキュリティの向上を目指す！

URLの最初の文字は、httpですか？httpsですか？最近は、どんどんhttpからhttpsに変更されているサイトさんが増えているようなので、この流れにのって、当サイトもhttpsにURLを変更いたしました。

気付いた部分は随時追加中…