straw_manテンプレート見た目変更ペルソナ導入解説記事

straw_manテンプレートにおける見た目を変更するcssコードを掲載する記事です。

困ったときのStrawMan Template総合案内板内では「ペルソナ機能」と呼称されてるやつです。

スポンサーリンク

ぶっちゃけた話どういうものかと言えば

ペルソナとかイケメンな名前をつけていますが、実際のところはstraw_manテンプレートの雰囲気を変えるcssコピペコードに過ぎません。

他のカスタマイズと同様、テンプレートcssの自由記述領域にコピペすると良いでしょう。

 

複数ヶ所を一気に変更するコードなので、自由記述領域の一番上に配置すると他カスタマイズを行う際にわかりやすいのではないかと思います。

導入に際しての注意点

ペルソナ個別紹介の前に少しだけ注意点をば。

原則として、複数のペルソナを同時使用することは推奨しておりません

 

同時使用した場合は十中八九表示崩れが起きると思われます。

そうなった場合は古いペルソナ部分コードを削除するか、表示崩れを自前で修正してお使いください。

ペルソナ一覧

更新履歴

  • 2019/11/25: 記事公開

SuperFlat

SuperFlatPC版ライトテーマ時スクショ
  • 影を減らし背景色と記事色を統一
  • フォントサイズを下げて余白をふんだんに使用
  • ライトテーマ時の背景画像指定を想定

影を減らして背景色と記事色を統一したシンプルな見た目のペルソナです。

 

デザインしてくれたLV3さんによると、「中性的で余白を活用した、laymicメイン使いの方のためのデザイン」とのこと。

初期状態ではライトテーマ時にサンプル背景画像を指定していますので、他の画像に差し替えるなり背景画像を無くすなりして使うと良いでしょう。

 

以下、コピペコードです。

/* スーパーフラットペルソナここから */
/*!
  Name: super_flat
  Designed: [LV3](https://twitter.com/osLV3)
  Coding: [dettalant](https://twitter.com/dettalant)
  License: MIT
  License URL: https://opensource.org/licenses/MIT
*/
h1 {
  margin: .1rem 0 0;
  font-size: 1.3rem;
}

h2, h3, .same_category_link_title {
  font-size: 1.2rem;
  font-size: 1.1rem;
}

.main_container, .sidebar, .footer {
  margin-top: 2rem;
}

.main_container {
  padding: 0 1rem;
}

.primary {
  width: 100%;
}

.entry,
.same_category_nav,
.comment_area,
.trackback_area,
.pager {
  border: 2px solid transparent;
}

.entry,
.comment_area,
.trackback_area {
	padding: .5rem 1rem 1rem;
}

.entry_header > .entry_indicator {
	margin-top: 0;
}

.entry_body {
	margin-top: 2rem;
}

.top_entry_body {
  margin: .5rem 0 0;
}

.relate_dl {
  margin: 3rem 0;
}

.relate_dt {
	font-size: 1.1rem;
}

.relate_dd {
  margin-top: .5rem;
}

#fc2_text_ad {
  margin: 3rem 0 !important;
}

.same_category_link,
.comment_area_title,
.comments,
.comment_container:first-of-type,
.trackback_title,
.trackback_link_container {
  margin-top: .5rem;
}

.comment_form_title {
  margin-bottom: -0.5rem;
}

.sidebar {
  padding: 0;
}

.plugin {
  padding: .7rem 1rem 10px;
}

.plugin_body {
  border: 0;
  margin-top: 0;
  padding-top: .5rem;
}

.plugin-myimage {
	margin: 0;
}

input[type="submit"],
blockquote,
table,
.header,
.entry,
.entry_link_container,
.entry_body ul,
.entry_body ol,
.entry_body blockquote header,
.entry_body blockquote footer,
.same_category_nav,
.same_category_link,
.comment_area,
.comment_container,
.comment_header,
.comment_body,
.comment_form,
.comment_form_button,
.comment_form_avatar_button,
.comment_form_avatar_select_container,
.trackback_area,
.trackback_link_container,
.trackback_entry,
.pager,
.sidebar,
.footer,
.scroll_to_top,
.fixed_button,
.category,
.titlelist,
.search_header,
.search_entry,
.search_not_found,
#fc2relate_entry_thumbnail_area,
#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_li,
#fc2_text_ad,
input[type="text"],
input[type="url"],
input[type="password"],
textarea,
.global_nav_clip_wrapper {
  /* 全ての影を無くす */
  box-shadow: none;
}

.theme_light,
.theme_light input[type="text"],
.theme_light input[type="url"],
.theme_light input[type="password"],
.theme_light textarea,
.theme_light .free_wrapper,
.theme_light .header,
.theme_light .global_nav_container,
.theme_light .entry,
.theme_light .same_category_nav,
.theme_light .comment_area,
.theme_light .comment_body,
.theme_light .comment_form_avatar_button,
.theme_light .comment_form_button,
.theme_light .trackback_area,
.theme_light .trackback_input,
.theme_light .pager,
.theme_light .sidebar,
.theme_light .footer,
.theme_light .scroll_to_top,
.theme_light .fixed_button,
.theme_light .category,
.theme_light .titlelist,
.theme_light .search_header,
.theme_light .search_entry,
.theme_light .search_not_found,
.theme_light #fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_li {
  /* ライトテーマベース背景色を変更 */
  background: #fdfdfd;
}

.theme_light .entry,
.theme_light .same_category_nav,
.theme_light .comment_area,
.theme_light .trackback_area,
.theme_light .pager {
  /* ライトテーマborder色 */
  border-color: #e2e2e2;
}

.theme_light {
  /*
      背景画像指定
    初期状態ではbase64エンコードを行った背景画像を埋め込んでいます。
    画像urlでも指定可能なので、お好みの方法で背景画像を指定してください。

    背景画像が必要ない場合は、
    `background-image`項目を削除してください。
  */
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAFVBMVEUAAADp8//q9P/n8//q8//o8//o8/8a3MGOAAAAB3RSTlMA1RgVv8AW0ezHGAAAAChJREFUGNNjEGKAAWYRhgQ4x9CRAUkCqAghoTByJBhEERJsDIEICUMAhHgJGdSxk/QAAAAASUVORK5CYII=");
}

.theme_dark {
  /* ダークテーマベース背景色を変更 */
  background: #373b4a;
}

.theme_dark .entry,
.theme_dark .same_category_nav,
.theme_dark .comment_area,
.theme_dark .trackback_area,
.theme_dark .pager {
  /* ダークテーマborder色 */
  border-color: #737580;
}

@media screen and (min-width: 992px) {

  /* 初期状態ではPC表示でのみサイドバー背景を透明化する */
  .theme_light .sidebar,
  .theme_dark .sidebar {
    background: transparent;
  }

  .sidebar {
    margin: 0 0 0 2rem;
  }

  .plugin:not(:first-of-type) {
    margin-top: 2rem;
  }
}
/* スーパーフラットペルソナここまで */