Skip to content

Commit 2767eab

Browse files
BreadMotionBreadMotion
committed
Merge branch 'develop'
2 parents 0f85074 + 94a01f4 commit 2767eab

38 files changed

Lines changed: 1330 additions & 448 deletions

‎WebSite/assets/css/blog.css‎

Lines changed: 54 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -387,7 +387,7 @@
387387
color: var(--color-text-muted);
388388
}
389389
/* スマホなどで崩れる場合は縦並びに */
390-
@media (max-width: 768px) {
390+
@media (max-width: 968px) {
391391
.markdown-body dl {
392392
display: block;
393393
}
@@ -494,7 +494,7 @@
494494
/* ==========================================================================
495495
5. レスポンシブデザイン
496496
========================================================================== */
497-
@media (max-width: 768px) {
497+
@media (max-width: 968px) {
498498
.blog-filters {
499499
flex-direction: column;
500500
align-items: stretch;
@@ -664,7 +664,7 @@
664664
}
665665

666666
/* モバイル: ボタンを縦積み（タップしやすく、順序が明確） */
667-
@media (max-width: 768px) {
667+
@media (max-width: 968px) {
668668
.post-detail__nav--bottom {
669669
flex-direction: column;
670670
gap: 0.6rem;
@@ -758,7 +758,7 @@
758758
display: none;
759759
}
760760

761-
@media (min-width: 768px) {
761+
@media (min-width: 968px) {
762762
.post-layout {
763763
grid-template-columns: minmax(0, 1fr) 250px;
764764
gap: 1rem;
@@ -901,7 +901,7 @@
901901
visibility 0s 0.3s;
902902
}
903903

904-
@media (max-width: 768px) {
904+
@media (max-width: 968px) {
905905
.toc-toggle {
906906
display: flex; /* SP/Tabletで表示 */
907907
}
@@ -1007,6 +1007,54 @@
10071007
border-color: #00c300;
10081008
}
10091009

1010+
/* ==========================================================================
1011+
Post header: align share buttons center and place Like/Bookmark at the right end
1012+
- On wide screens: share buttons centered, like/bookmark pinned to right edge of the same line
1013+
- On small screens: left-aligned and stacked (share buttons first, actions below)
1014+
========================================================================== */
1015+
.post-header-actions {
1016+
position: relative;
1017+
width: 100%;
1018+
margin: 0.6rem 0 1rem 0;
1019+
box-sizing: border-box;
1020+
}
1021+
1022+
/* Left area contains the existing share-buttons markup and remains centered by default */
1023+
.post-header-actions__left {
1024+
display: flex;
1025+
justify-content: center;
1026+
align-items: center;
1027+
}
1028+
1029+
/* Right area holds the .post-actions (いいね / ブックマーク) and is pinned to the right */
1030+
.post-header-actions__right {
1031+
position: absolute;
1032+
right: 0;
1033+
top: 65%;
1034+
transform: translateY(-50%);
1035+
display: flex;
1036+
align-items: center;
1037+
gap: 0.6rem;
1038+
}
1039+
1040+
/* Keep internal .post-actions spacing consistent with post-interactions.css */
1041+
.post-header-actions .post-actions {
1042+
margin: 0;
1043+
}
1044+
1045+
/* Responsive behavior: on narrow viewports switch to left alignment and flow stacking */
1046+
@media (max-width: 968px) {
1047+
.post-header-actions__left {
1048+
justify-content: flex-start;
1049+
}
1050+
1051+
/* Ensure share buttons in this header follow the same left alignment tweak */
1052+
.post-header-actions .share-buttons {
1053+
text-align: left;
1054+
margin: 0.5rem 0;
1055+
}
1056+
}
1057+
10101058
.section--related {
10111059
margin-top: 4rem;
10121060
}
@@ -1072,7 +1120,7 @@
10721120
}
10731121

10741122
/* 小さい画面での調整 */
1075-
@media (max-width: 768px) {
1123+
@media (max-width: 968px) {
10761124
.section--comments {
10771125
margin-top: 2rem;
10781126
}

‎WebSite/blog/blog_00001.html‎

Lines changed: 35 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -79,17 +79,9 @@ <h1 class="post-detail__title">ブログはじめました</h1>
7979
<p class="post-detail__description">筆者の自己紹介</p>
8080
<p class="post-detail__tags"><a class="tag" href="../blog.html?tag=diary">diary</a></p>
8181

82-
<div class="post-actions" aria-hidden="false">
83-
<button type="button" class="btn btn--icon btn-like" data-post-id="blog_00001" aria-pressed="false" aria-label="いいね">
84-
<span class="icon-like" aria-hidden="true">❤</span>
85-
<span class="like-count">0</span>
86-
</button>
87-
<button type="button" class="btn btn--icon btn-bookmark" data-post-id="blog_00001" aria-pressed="false" aria-label="ブックマーク">
88-
<span class="icon-bookmark" aria-hidden="true">🔖</span>
89-
</button>
90-
</div>
91-
92-
<div class="share-buttons">
82+
<div class="post-header-actions" aria-hidden="false">
83+
<div class="post-header-actions__left">
84+
<div class="share-buttons">
9385
<p class="share-buttons__title">SHARE</p>
9486
<ul class="share-buttons__list">
9587

@@ -113,6 +105,20 @@ <h1 class="post-detail__title">ブログはじめました</h1>
113105

114106
</ul>
115107
</div>
108+
</div>
109+
<div class="post-header-actions__right">
110+
<div class="post-actions">
111+
<button type="button" class="btn btn--icon btn-like" data-post-id="blog_00001" aria-pressed="false" aria-label="いいね">
112+
<span class="icon-like" aria-hidden="true">❤</span>
113+
<span class="like-count">0</span>
114+
</button>
115+
<button type="button" class="btn btn--icon btn-bookmark" data-post-id="blog_00001" aria-pressed="false" aria-label="ブックマーク">
116+
<span class="icon-bookmark" aria-hidden="true">🔖</span>
117+
</button>
118+
</div>
119+
</div>
120+
</div>
121+
116122
</header>
117123
<section class="post-detail__body markdown-body reveal-on-scroll"><h2 id="自己紹介">自己紹介</h2><p>こんにちは!パン君です。</p>
118124
<p>私はとあるゲーム会社で働きながら、インディーズや個人制作でも活動しているゲームエンジニアです。</p>
@@ -150,7 +156,10 @@ <h2 id="最後に">最後に</h2><p>最後まで読んでくださり、あり
150156
<p>まだ立ち上げたばかりのサイトですが、<br>今後も技術記事や制作物の紹介などを更新していくつもりです。</p>
151157
<p>たまに覗いてもらえたら、とても嬉しいです。<br>これからもよろしくお願いします。</p>
152158
</section>
153-
<div class="share-buttons">
159+
160+
<div class="post-header-actions" aria-hidden="false">
161+
<div class="post-header-actions__left">
162+
<div class="share-buttons">
154163
<p class="share-buttons__title">SHARE</p>
155164
<ul class="share-buttons__list">
156165

@@ -174,6 +183,20 @@ <h2 id="最後に">最後に</h2><p>最後まで読んでくださり、あり
174183

175184
</ul>
176185
</div>
186+
</div>
187+
<div class="post-header-actions__right">
188+
<div class="post-actions">
189+
<button type="button" class="btn btn--icon btn-like" data-post-id="blog_00001" aria-pressed="false" aria-label="いいね">
190+
<span class="icon-like" aria-hidden="true">❤</span>
191+
<span class="like-count">0</span>
192+
</button>
193+
<button type="button" class="btn btn--icon btn-bookmark" data-post-id="blog_00001" aria-pressed="false" aria-label="ブックマーク">
194+
<span class="icon-bookmark" aria-hidden="true">🔖</span>
195+
</button>
196+
</div>
197+
</div>
198+
</div>
199+
177200
<div class="post-detail__nav post-detail__nav--bottom"><a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a><a href="blog_00002.html" class="btn btn--next">Odin を導入してみた →</a></div>
178201
</article>
179202
</div>

‎WebSite/blog/blog_00002.html‎

Lines changed: 35 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -79,17 +79,9 @@ <h1 class="post-detail__title">Odin を導入してみた</h1>
7979
<p class="post-detail__description">チームで Odin 導入時にハマったポイントと対処方法</p>
8080
<p class="post-detail__tags"><a class="tag" href="../blog.html?tag=unity">unity</a> <a class="tag" href="../blog.html?tag=plugin">plugin</a> <a class="tag" href="../blog.html?tag=tool">tool</a></p>
8181

82-
<div class="post-actions" aria-hidden="false">
83-
<button type="button" class="btn btn--icon btn-like" data-post-id="blog_00002" aria-pressed="false" aria-label="いいね">
84-
<span class="icon-like" aria-hidden="true">❤</span>
85-
<span class="like-count">0</span>
86-
</button>
87-
<button type="button" class="btn btn--icon btn-bookmark" data-post-id="blog_00002" aria-pressed="false" aria-label="ブックマーク">
88-
<span class="icon-bookmark" aria-hidden="true">🔖</span>
89-
</button>
90-
</div>
91-
92-
<div class="share-buttons">
82+
<div class="post-header-actions" aria-hidden="false">
83+
<div class="post-header-actions__left">
84+
<div class="share-buttons">
9385
<p class="share-buttons__title">SHARE</p>
9486
<ul class="share-buttons__list">
9587

@@ -113,6 +105,20 @@ <h1 class="post-detail__title">Odin を導入してみた</h1>
113105

114106
</ul>
115107
</div>
108+
</div>
109+
<div class="post-header-actions__right">
110+
<div class="post-actions">
111+
<button type="button" class="btn btn--icon btn-like" data-post-id="blog_00002" aria-pressed="false" aria-label="いいね">
112+
<span class="icon-like" aria-hidden="true">❤</span>
113+
<span class="like-count">0</span>
114+
</button>
115+
<button type="button" class="btn btn--icon btn-bookmark" data-post-id="blog_00002" aria-pressed="false" aria-label="ブックマーク">
116+
<span class="icon-bookmark" aria-hidden="true">🔖</span>
117+
</button>
118+
</div>
119+
</div>
120+
</div>
121+
116122
</header>
117123
<section class="post-detail__body markdown-body reveal-on-scroll"><p>こんにちは！パン君です。</p>
118124
<p>今回はインディーズのプロジェクトで <strong>Odin Inspector</strong> を導入した際に起きたトラブルと、そのときに行った対処についてまとめます。</p>
@@ -280,7 +286,10 @@ <h2 id="まとめ">まとめ</h2><p>今回の Odin 導入で学んだことを
280286
<p>Odin はカスタムインスペクターやエディタ拡張まわりでかなり強力なツールなので、<br>一度チームで安定して導入できる形が作れると、 <strong>次以降のプロジェクトがかなり楽</strong> になります。</p>
281287
<p>今後は実際にどんな機能を Odin で作っているか（属性ベースの Editor 拡張や、Data 管理の工夫など）も、<br>別の記事で書いていければと思います。</p>
282288
</section>
283-
<div class="share-buttons">
289+
290+
<div class="post-header-actions" aria-hidden="false">
291+
<div class="post-header-actions__left">
292+
<div class="share-buttons">
284293
<p class="share-buttons__title">SHARE</p>
285294
<ul class="share-buttons__list">
286295

@@ -304,6 +313,20 @@ <h2 id="まとめ">まとめ</h2><p>今回の Odin 導入で学んだことを
304313

305314
</ul>
306315
</div>
316+
</div>
317+
<div class="post-header-actions__right">
318+
<div class="post-actions">
319+
<button type="button" class="btn btn--icon btn-like" data-post-id="blog_00002" aria-pressed="false" aria-label="いいね">
320+
<span class="icon-like" aria-hidden="true">❤</span>
321+
<span class="like-count">0</span>
322+
</button>
323+
<button type="button" class="btn btn--icon btn-bookmark" data-post-id="blog_00002" aria-pressed="false" aria-label="ブックマーク">
324+
<span class="icon-bookmark" aria-hidden="true">🔖</span>
325+
</button>
326+
</div>
327+
</div>
328+
</div>
329+
307330
<div class="post-detail__nav post-detail__nav--bottom"><a href="blog_00001.html" class="btn btn--prev">← ブログはじめました</a><a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a><a href="blog_00003.html" class="btn btn--next">Odin でコンテキストエ… →</a></div>
308331
</article>
309332
</div>

‎WebSite/blog/blog_00003.html‎

Lines changed: 35 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -79,17 +79,9 @@ <h1 class="post-detail__title">Odin でコンテキストエディター作っ
7979
<p class="post-detail__description">Odin でプランナー向けのコンテキストエディターを作った話</p>
8080
<p class="post-detail__tags"><a class="tag" href="../blog.html?tag=unity">unity</a> <a class="tag" href="../blog.html?tag=plugin">plugin</a> <a class="tag" href="../blog.html?tag=tool">tool</a></p>
8181

82-
<div class="post-actions" aria-hidden="false">
83-
<button type="button" class="btn btn--icon btn-like" data-post-id="blog_00003" aria-pressed="false" aria-label="いいね">
84-
<span class="icon-like" aria-hidden="true">❤</span>
85-
<span class="like-count">0</span>
86-
</button>
87-
<button type="button" class="btn btn--icon btn-bookmark" data-post-id="blog_00003" aria-pressed="false" aria-label="ブックマーク">
88-
<span class="icon-bookmark" aria-hidden="true">🔖</span>
89-
</button>
90-
</div>
91-
92-
<div class="share-buttons">
82+
<div class="post-header-actions" aria-hidden="false">
83+
<div class="post-header-actions__left">
84+
<div class="share-buttons">
9385
<p class="share-buttons__title">SHARE</p>
9486
<ul class="share-buttons__list">
9587

@@ -113,6 +105,20 @@ <h1 class="post-detail__title">Odin でコンテキストエディター作っ
113105

114106
</ul>
115107
</div>
108+
</div>
109+
<div class="post-header-actions__right">
110+
<div class="post-actions">
111+
<button type="button" class="btn btn--icon btn-like" data-post-id="blog_00003" aria-pressed="false" aria-label="いいね">
112+
<span class="icon-like" aria-hidden="true">❤</span>
113+
<span class="like-count">0</span>
114+
</button>
115+
<button type="button" class="btn btn--icon btn-bookmark" data-post-id="blog_00003" aria-pressed="false" aria-label="ブックマーク">
116+
<span class="icon-bookmark" aria-hidden="true">🔖</span>
117+
</button>
118+
</div>
119+
</div>
120+
</div>
121+
116122
</header>
117123
<section class="post-detail__body markdown-body reveal-on-scroll"><p>こんにちは！パン君です。</p>
118124
<p>インディーズのプロジェクトで <strong>Odin Inspector</strong> を使用して、<br>プランナーが Unity の知見をあまり持っていなくても触れるような <strong>プロジェクト専用の「コンテキストエディター」</strong> を作成しました。</p>
@@ -292,7 +298,10 @@ <h2 id="最後に">最後に</h2><p>Odin を使ったコンテキストエディ
292298
<p>にもチャレンジしてみたいと思っています。</p>
293299
<p>興味があれば、別の記事で具体的なコードや属性の使い方も掘り下げていくので、また読んでもらえたら嬉しいです。</p>
294300
</section>
295-
<div class="share-buttons">
301+
302+
<div class="post-header-actions" aria-hidden="false">
303+
<div class="post-header-actions__left">
304+
<div class="share-buttons">
296305
<p class="share-buttons__title">SHARE</p>
297306
<ul class="share-buttons__list">
298307

@@ -316,6 +325,20 @@ <h2 id="最後に">最後に</h2><p>Odin を使ったコンテキストエディ
316325

317326
</ul>
318327
</div>
328+
</div>
329+
<div class="post-header-actions__right">
330+
<div class="post-actions">
331+
<button type="button" class="btn btn--icon btn-like" data-post-id="blog_00003" aria-pressed="false" aria-label="いいね">
332+
<span class="icon-like" aria-hidden="true">❤</span>
333+
<span class="like-count">0</span>
334+
</button>
335+
<button type="button" class="btn btn--icon btn-bookmark" data-post-id="blog_00003" aria-pressed="false" aria-label="ブックマーク">
336+
<span class="icon-bookmark" aria-hidden="true">🔖</span>
337+
</button>
338+
</div>
339+
</div>
340+
</div>
341+
319342
<div class="post-detail__nav post-detail__nav--bottom"><a href="blog_00002.html" class="btn btn--prev">← Odin を導入してみた</a><a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a><a href="blog_00008.html" class="btn btn--next">Discord Bot の… →</a></div>
320343
</article>
321344
</div>

0 commit comments

Comments
 (0)