WordPress自己紹介コンテンツの改良

    漢鷹です。

    以前の記事:WordPressでサイドバーに自己紹介コンテンツを作る

    で、「About Me 3000」という自己紹介プラグインのコードカスタマイズを紹介しました。

    あれから、各種端末で表示テストをしていたのですが、どうやっても、PC向け画面の時に画像右端に文字がきて気持ち悪いので、またカスタマイズしてやることにしました。

    いまのPC向け表示が以下の画像です。違和感を感じます。

    サイドバー改良前

    以下の画像はレスポンシブモードで表示した場合です。こちらはきれいです。

    サイドバーレスポンシブバージョン

    カスタマイズの方針

    • HTMLタグ構造を改善
    • メディアクエリを利用してCSSプロパティを変更して表示調整を試みる。

    実際にHTML構造を見てみると

    インライン構造になってました・・・。

    これではWordPressでレスポンシブWebデザインのテーマを採用していて、PC向け表示とした場合、漢鷹が経験したようなデザイン崩れが発生してしまいます。

    そこで、以下のようにHTMLタグの構造を改善することにしました。

    そして、これをCSSのメディアクエリで制御します。

    ※今回の記事ではどこをどう触るかといったことは省略させていただきます。また、プラグインをカスタマイズすると動かなくなるリスクが発生しますのでカスタマイズは非推奨です。

    カスタマイズ結果

    CSSのみ紹介します。

    CSS(style.css)

    PC向け表示のメディアクエリCSS定義の中に、今回カスタマイズして挿入したspanタグのクラス属性のCSS定義を記述します。そして、以下のようなプロパティを記述します。

    カスタマイズ後、以下のようになりました。きれいですね。

    以上でカスタマイズは終了です。意外と簡単に終わりました。

    次回があるかわかりませんが、お楽しみに!(*^_^*)

    似たカテゴリーの投稿