WordPressテーマをゼロから作った場合のWordPress特有の画像の回り込みやキャプションに関するCSSを実装する。

Web制作・Webサービス
2014.08.14

こんにちは。コワーキングスペース7Fの星野邦敏です。

このコワーキングスペース7FのWebサイトは、WordPressで作っているのですが、既存のWordPressを使わずにHTML、CSS、JavaScriptなどの静的ファイルをWordPressテーマ化しています。

このWordPressテーマ化の時、注意点としていくつかあると思うのですが、そのうちの一つとして、「WordPressはデフォルトでは独特なidやclassを勝手に付ける」ということです。これは便利な時もある反面、要らないよねという時もあるかもしれません。これらのidやclassを消すにはfunctions.phpに特定のコードを書く等が必要です。しかしながら、多くの場合は、WordPressの仕様に基づき、これらのidやclassに合わせてCSSを書くという流れで、上手く付き合っていく方がスムーズなのではないかなと思います。

その中で、例えば、画像の回り込みをさせる場合や、画像にキャプションを付ける場合も、決まった規則に基いてidやclassが付きます。

WordPressで記事に写真を貼る時には、投稿や固定ページから、「メディアを追加」をクリックして画像をアップロードします。この時に、画像を左回り込み・右回り込みさせる場合もあり、また補足文章を書く形でキャプション文章を付ける場合もあると思います。

例えば、コワーキングスペース7Fには現在11名の運営スタッフがいるのですが（コワーキングスペース7Fスタッフ紹介）、
学生スタッフが大学を卒業して就職したり留学したりして少なくなって、現在はフリーランスや子育て中のお母さんが中心になってきたので、スタッフメンバー構成として、急募ではありませんが、もし良い人がいたら大学生や専門学校生のアルバイトスタッフを入れようと思っています。
そのために、何人かの大学生スタッフに、コワーキングスペース7Fでアルバイトスタッフをして良かったこと等を書いてもらっています。

7F立ち上げ当初からスタッフとして関わってもらっているカナエちゃんのインタビュー記事ができたのですが、この写真の回り込み、キャプションなどは、CSSで実装します。
コワーキングスペース7F 大学生アルバイトスタッフ相澤奏恵さん | コワーキングスペース7F

WordPressでは、画像の左回りの時はalign=”alignleft”、画像の右回りの時はalign=”alignright”というclassが付きますし、
キャプションを付けると、class=”wp-caption”、class=”wp-caption-text”というclassが付きます。
具体的な出力HTMLは、以下のようになります。
従いまして、これらのclassに合わせて、CSSを書くとスムーズかと思います。これらのCSSが無いと、HTMLでは書かれているけどCSSは書かれていないということで、管理画面から画像の左回り・右回り・キャプションを付けても、反応しないという形になると思います。

<div id="attachment_8882" style="width: 310px" class="wp-caption alignleft"><a href="https://office7f.com/wp-content/uploads/2014/08/201311a.jpg" rel="lightbox[8850]"><img src="https://office7f.com/wp-content/uploads/2014/08/201311a-300x225.jpg" alt="イベントPOP。Illustratorでイラストを描いたりWebサイトも作れるようになりました。" width="300" height="225" class="size-medium wp-image-8882" /></a><p class="wp-caption-text">イベントPOP。Illustratorでイラストを描いたりWebサイトも作れるようになりました。</p></div>

ちなみに、このコワーキングスペース7Fで書いたCSSは以下の通りです。
CSSを書くファイルはstyle.cssやheader.phpにCSSファイルを紐付ける形などに書いたら良いかなと思います。

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #eee;
    border: 1px solid #ddd;
    max-width: 96%;
    padding: 10px;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    margin: 0;
    padding: 5px 0;
}

以上となります。

あと数名の学生アルバイトスタッフのインタビューを載せて、コワーキングスペース7Fスタッフ応募のフォームも整えていく予定です。
いわゆる普通のアルバイトとは異なる経験をしたいと考えているような大学生や専門学校生のスタッフをあと1名または2名アルバイトとして増やしたいと思っています。

コワーキングスペース7F 大学生アルバイトスタッフ相澤奏恵さん | コワーキングスペース7F

今は以下の応募フォームしかないのですが、もしご興味がありましたら、お問い合わせください。
採用情報 | 株式会社コミュニティコム