stinger3 備忘録 2
タイトルを画像に変更・スマホでどう見えているか確認。
以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ したやり方等を忘れないために書き留めた備忘録です。
記事内にソースコードを表記してる箇所は、ダブルクリックするとソースコードが全選択されるので、コピーして使えます。
タイトルをテキストから画像に変更
「テーマ編集」内のヘッダー(header.php)ファイルの120行目付 近にあるタイトルを表示させる下記のタグを探します。
[php]<br /><a href="<?php echo home_url(); ?>/"><?php bloginfo(‘name’); ?></a><br />[/php]
これを次のように変更した。
[php]<br /><a href="<?php echo home_url(); ?>/"><img alt="サイトタイトル" src="画像のURL" width="幅" height="高さ" /></a><br />[/php]
上記ラグ内にある src=”画像のURL”箇所に、貼り付ける画像のアップロードしてある画像のURLを入力する。
幅は900、高さを70に指定した。
次に
280pxよりも横幅のあるタイトル画像を使っても、スマホでは画面内に収まるように、スマホ用のスタイルシート(smart.css)に追記した。
スマホの画面幅に合わせて、はみ出さないよう縮小表示されます。
[css]<br />.sitename img {<br /><%%KEEPWHITESPACE%%> height: auto;<br /><%%KEEPWHITESPACE%%> max-width: 100% !important;<br /><%%KEEPWHITESPACE%%> width: 100%;<br /><%%KEEPWHITESPACE%%> }<br />[/css]
自分のブログサイトがスマホでどう見えているのかを確認する方法
① Google Chromeで、見たいページを開く
② 右上の設定ボタンから、ツール→デベロッパーツールを開く または、マウスを右クリックして「要素を検証」を押す または、キーボードの「F12」ボタンを押す
③ 画面右下の歯車アイコンを押して、Settings画面を開く
④ Overrides→User Agentにチェックを入れ、表示確認する。
UA(User Agent)の切り替え時には、画面のリロードが必要です。
参考文献は 「えけこのくるる」様のHP
「タイトル丸ごと画像にしよう」 から参考にしました。
ありがとうございます。
コメント