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

2023/03/12 17:44

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

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

もくじ
・ぶっちゃけた話どういうものかと言えば
・導入に際しての注意点
・ペルソナ一覧
　・SuperFlat

※元記事のキャッシュ
インターネットアーカイブ
googleキャッシュ

当記事の権利と経緯について

当記事の文章とコードはリラ様の著作物です

リラ様のサイト『まださなぎ』では、StrawMan Templateとlaymicの実践的な解説を公開していましたが、サイトが消えてしまいました。

このままでは、StrawMan Templateとlaymicの普及と利用に支障が出るためキャッシュよりサルベージし再構築したのが当記事になります。

共同開発者のリラさんに連絡がつかず無断で転載している状態ですが、これが許されるとすれば共同開発者の私以外いないと判断しこのような形での公開となりました（詳細な経緯はこちら）。

もくじに本来のサイトの姿を保存していたキャッシュサイトを併記してありますが、キャッシュの性質上完全な再現とはならずいつ消えてもおかしくないのでリンク切れの際はご容赦ください。

最後に、当サイト『ヤマノス』では、他者の引用がなされたもの以外のすべてをフリー素材として公開しています（当サイトの著作物について）。

ですが、当記事はリラ様の著作物ですのでフリー素材ではありません。
ご注意願います。

文責：秋田LV3

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

ペルソナとかイケメンな名前をつけていますが、実際のところは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;
  }
}
/* スーパーフラットペルソナここまで */

関連記事

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

当記事の文章とコードはリラ様の著作物です

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

導入に際しての注意点

ペルソナ一覧

SuperFlat

コメント

コメントの投稿