2018.09.17このブログではWordPressのテーマに「Simplicity」を利用しています。カスタマイズできる項目も多く、構造化マークアップやOGPにも対応していたりと、無料とは思えないほど便利なテーマです。利用者が多くどこも似たようなデザインのサイトになりがちです。そこで、Simplicityっぽさを少しずつ消して個性的なサイトに悪あがきをするため、カスタマイズすることにしました。今回は、検索ボックスのデザイン(主に虫眼鏡アイコン)を変える回です。変更前の検索ボックス下の画像は、Simplicityのデフォルトの検索ボックスのデザインです。訪問したサイトでこの虫眼鏡アイコンを見ると「あ〜このサイトもSimplicity使ってるんだな〜仲間だ〜」と親近感が湧きます。変更後の検索ボックス以下の画像のように変えます。「Stinger」の様なデザインにしてみました。(背景色と検索ボックス内の文言変わっていますが、これは本番環境と開発環境の差分です。変更内容は以下の3点です。検索ボックスの角丸を消す。虫眼鏡アイコンを変更する。検索ボックスフォーカス時に青やピンク色の線を非表示にする。今回は、CSSファイルのみを編集すれば実現可能でした。検索ボックスの角丸を消す虫眼鏡アイコンを変更する。検索ボックスフォーカス時に青やピンク色の線を非表示にするソースコードスポンサーリンク検索ボックスの角丸を消すSimplicityではinput要素のtextareaに角丸を指定してるようでした。指定してあげて、角丸をとります。虫眼鏡アイコンを変更する。虫眼鏡アイコンを単純にFontAwesomeに差し替えたところ、ぼやけが出ていることに気づきました。これは解決に時間がかかると思い、心が折れそうになりましたが、ググったところ先人がいらっしゃいました。上記の記事のおかげで心が救われました。ありがとうございます助かりました。要素って、要素の前に挿入してくれるものだと思っていたのですが、どうしてこのコードでうまく虫眼鏡アイコンが配置されるのかわからず気になりました。検索ボックスフォーカス時に青やピンク色の線を非表示にする私はSafariを使っているのですが、検索ボックスをクリックすると、青枠が表示されます。これが嫌だったので、表示されないようにします。以下のブログが参考になりました。指定してあげると良いみたいです。5px;WordPressシェアするTwitterはてブ0Pocket0なっかあとしつーる関連記事LinuxWordPressのZipファイルをサーバー上で解凍するWordPressのZipファイルをダウンロードし、それを解凍してからFTPクライアントでアップロードしてたけど時間はかかるし転送エラーは出るしでなかなかインストールまでたどり着かない。サーバー上でZipを解凍できればいいけど、無料サーバ...WordPressSimplicity(WordPress)のサイドバーに中央揃えのプロフィール欄を追加するSimplicity(WordPress)のサイドバーに中央揃えのプロフィール欄を追加します。完成イメージは以下の画像の通り。実施手順は次の通りです。「ウィジェット」を選択する...WordPressWordPressでリンクと一緒にスクリーンショットを載せる方法リンクと一緒にスクリーンショット(とはてブ数)を載せているブログを最近よく見かけ、見やすくていいなと思ったので僕もやってみました。PHPさくらのレンタルサーバ上のWordPressの画像アップロード上限量を変更するさくらのレンタルサーバで動かしているWordPressの画像アップロードの上限値は2MBです。画像をアップロードすると結構な頻度でこの上限値に引っかかるため、phpの設定を変更し上限値を10MBにすることにしました。コメントをキャンセルメールアドレスが公開されることはありません。*サイトホームコンピュータWordPressなっかあ見習いプログラマです。