tDiaryのテーマをカスタマイズ
yasuhiro
「tDiary テーマ・サンプル」のページを見ながら，テーマ選び。シンプルでカスタマイズしやすそうだったので，今回は「White」を選択。プラグインのappend-css.rbを使ってCSSを追加。好みのレイアウト・デザインにして，スマートフォンにも対応させました。
→ ふり～さいど日記帳（tDiary)
(設定) - ヘッダ
<div class="container">
<div class="header-area">
<h1><a href="https://freeside.skr.jp/tdiary/">ふり～さいど日記帳（tDiary）</a></h1>
</div>
<div class="content-wrapper">
<div class="main">
<%= navi %>(設定) - フッタ
</div>
<div class="sidebar">
<div class="section">
<h3>カレンダー</h3>
<%= calendar %>
</div>
<div class="section">
<h3>最近の記事</h3>
<%= recent_list 5 %>
</div>
<div class="section">
<h3>最近のコメント</h3>
<%= recent_comment3 %>
</div>
</div>
</div>
</div>(設定) - CSSの追加
/* --- 基本設定 --- */
/* フォント */
body {
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
}
/* リンク・訪問済みリンク */
a, a:visited {
color: #993333 !important;
text-decoration: none !important;
}
/* リンクホバー時 */
a:hover {
color: #cc3333 !important;
text-decoration: underline !important;
}
/* リスト記号 */
li::marker { color: #ccc; }
/* --- レイアウト設定 --- */
/* コンテナ最大幅 */
.container {
max-width: 1000px;
margin: 0 auto;
}
/* メイン・サイドバーの横並び */
.content-wrapper {
display: flex;
gap: 20px;
}
/* メインコンテンツエリア */
.main {
flex: 1;
min-width: 0;
}
/* サイドバー */
.sidebar {
width: 250px;
margin: 2em 0;
padding: 0 10px;
/* border-radius: 10px;
background-color: #f7f7f7; */
}
/* 日付セクション */
div.day {
margin-bottom: 2em;
background-color: #f7f7f7;
padding: 10px;
border-radius: 10px;
}
/* 日付タイトル部分の余白調整 */
div.day h2 {
margin-top: 0em;
}
/* アクセス数：リストの点を消して左に寄せる */
.counter-list {
list-style: none;
padding-left: 0;
}
/* --- コンポーネント設定 --- */
/* カレンダー */
div.calendar {
float: left;
text-align: left;
font-size: 85%;
padding-bottom: 10px;
letter-spacing: 0.2em;
}
/* 記事内写真 */
img.photo {
float: left;
margin-right: 15px;
margin-bottom: 10px;
}
/* --- モバイル最適化（768px以下） --- */
@media (max-width: 768px) {
/* レイアウト縦並び */
.content-wrapper {
flex-direction: column;
}
/* メインエリア余白 */
.main {
margin-bottom: 20px;
}
/* サイドバー全幅化 */
.sidebar {
width: 100%;
margin: 20px 0;
}
/* 大見出しの調整 */
h1 {
color: #000;
text-align: left;
font-size: 140%;
font-style: normal;
margin-bottom: 1em;
margin-left: 1em;
}
/* 日付セクション */
div.day { margin: 0 0 1em 0 ; }
/* 記事本文 */
div.body { padding: 0 10px; margin: 0; }
/* 段落テキスト */
div.section p { padding: 0; line-height: 140%; }
/* コメント欄 */
div.comment { font-size: 90%; padding: 10px; margin: 0.5em; }
/* フッタ中央寄せ */
div.footer {
text-align: center;
padding: 20px;
}
/* 画像リサイズ */
img {
max-width: 95% !important;
height: auto !important;
}
/* テーブル横スクロール */
.main table {
max-width: 100%;
display: block;
overflow-x: auto;
}
/* 入力フォーム全幅化 */
#comment-form-section .field input,
#comment-form-section .textarea textarea {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
}
