ブログタイトルをテキストから画像に変えてみました誰かの役に立つかもしれない情報を細々とご紹介しています。WordPressTweet先日ハンドル名とサイト名を変更した旨の記事を書きましたが、それに併せてブログに親しみを持ってもらえるよう、タイトルをテキストから画像に変えてみました。ブログタイトルをテキストから画像に変えるこちらの記事を参考にさせて頂きました。【Stinger3】ブログタイトルを画像に変更する方法。加えてスマホに最適化させるこれまではタイトルはテキスト表記でした。◆PC◆スマホいまいちパッとしないので、TwitterやFacebookのヘッダー画像のデザインを流用して作ってみようと思います。タイトル画像のサイズとアップロードSTINGER3の公式サイトでは、タイトルロゴのサイズは横320pxになっています。WordPressテーマのSTINGER3公式サイトなので私も320pxの画像を作成しました。これだと、スマホで見た時に画像がはみ出してしまうようです。280pxならはみ出すことはないようですが、そうなるとPCから見た時に小さくなってしまうので別途調整が必要です。画像の名前は分かりやすく「rogo.png」にしました。(※実際の「ロゴ」の綴りは「LOGO」だけども)スマホで縮小表示されても劣化が少ないpngにしています。今回作成したタイトル画像はこちらです。この画像をアップロードします。WordPress管理画面の「メディア」→「新規追加」をクリックファイルを選択してアップロードアップロードしたらライブラリから編集を開き、代替テキスト(alt)としてブログ名を入力します。SEOでかなり重要なので必ず入れておいてください。画像ファイルのURLもコピーしておきます。次にWordPress管理画面の「外観」→「テーマの編集」へと進み、テーマヘッダーを開きます。ヘッダー内に下記のコードがあるので探してください。Ctrl+Fでページ内検索ができます。/></a>に書き換えます。「サイトタイトル」には文字通りブログのタイトルを記入します。先程「メディア」の編集画面で「代替テキスト」の所に記入したものと同じです。「画像のURL」には同様に先程コピーした画像のURLを記入します。幅と高さは画像の実サイズを記入してください。以上でPC用の設定は完了です。このように表示されました。画像をスマホサイズに合わせる表示するスマホの端末によっては、ヘッダー画像の幅が320pxだとはみ出してしまうことがあるようです。そこでスマホ用のスタイルシート「smart.css」を編集しました。WordPress管理画面の「外観」→「テーマの編集」へと進み、今度は「smart.css」を開きます。そこに下記のコードを追記するだけです。100%;}ついでに背景色にグレーがかかっていたのを白に変更し、このように変わりました。◆PC◆スマホ実際に画面を見てみると、高さが100pxあるのでちょっと高く見えますね。したら「サイト名を変更しました」の表記を取って高さを調整しようと思います。原作より先にアニメでネタバレした回3つ初心者がTOEIC600点を取るための効率的な英語の勉強方法とおすすめ参考書・アプリ最後までお読みいただきありがとうございます。お手数でなければ記事のご紹介をしていただけると嬉しいです。撮影した写真を公開しています。旅行先や街中で気になったものを撮影・公開しています。ダウンロード無料、商用利用OKです。HTMLでテーブルがきれいに表示されるようcssを編集してみた先日下記の記事をリライトしました。バックアップ用プラグイン「WP-DBManager」使用方法WordPressで使用するデータベースを簡単にバックアップしてくれるプラグイン「WP-DBMana記事を読む【WordPress】.htaccessを使ってURLをwwwありに統一する方法と注意点WordPressで構築したサイトのURLを「wwwあり」に統一する方法と注意点についてまとめました記事を読むWordPressのfunctions.phpがある場所についてWordPressをカスタマイズする際『functions.phpに追記』することがよくあるかと思い記事を読むWordPressテーマ「Stinger3」の構造化データエラーを解消(マークアップ)する方法ENJILOGさんの記事で知り自身のウェブマスターツールでも確認したところ、同様のエラーが表示されて記事を読むWordPressを最新のバージョンに更新(アップグレード)する方法WordPressはセキュリティの改善などの理由から、高頻度でバージョンアップが行われていま記事を読む今更だけどWordPress4.0にfeedlyのRSS登録用ボタンを設置してみた基本めんどくさいことは後回しの男、transamです。ブログリニューアルから1年で月6000PV・ユーザー数4000に到達。個人のブログとしては良い方じゃないでしょうかおかげさまで本ブログ『役立つ情報.com』がリニューアル(※後述)して1年が経ちました。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。働き方改革関連法案をふまえて労使が取り組むべき5つのポイント2019年4月1日から働き方が変わります。仕事:WEB関連の仕事を10年ほど。デザインからコーディング、SEOなど幅広く手掛けている為、社内では「何やってる人?」と思われている。ブログタイトルをテキストから画像に変えてみました誰かの役に立つかもしれない情報を細々とご紹介しています。