Uikitレスポンシブ用カスタムCSS - 極・魔導物語 @ ウィキ

本項では、アットウィキのデザインテンプレート「Uikit レスポンシブ」用のカスタムCSSを紹介します。

目次

概要

「CSS内容」の節にある記述を管理画面の「CSSカスタマイズ」に設定することで、デザインテンプレートに下記の設定を追加します。

• フォントを游ゴシックからメイリオに変更
• 右寄せ・float指定の画像に文章が回り込むように変更（既定ではfloat指定しても回り込まない）（2021/05/20: レスポンシブデザインで右寄せfloat画像に文章が回り込むようにすると、スマホ表示などで文章の表示領域が圧迫されることがあるため、この設定を削除しました。）
• 未作成ページへのリンクを赤色で表示（ウィキペディアの赤リンクと同じ）
  • ※管理画面の「編集設定」→「編集オプション」画面で「未作成ページへのリンクをカスタマイズ」を「する」に設定し、「リンクにclass名をつける」に「new」を設定する必要があります。
• 訪問済みページへのリンクを紫色で表示

使用条件

このカスタムCSSは自由にコピーして別のウィキに使用できます。

ただし別のウィキに使用する場合、このページと同じページをそのウィキに作成し、「管理者のみ編集可」の状態にして、トップページから直接、あるいは何らかのページを介して参照できるようにリンクしてください。
このページと同じページの作成に際しては、 このリンク からソースを参照して使用できます。

つまり、カスタムCSSを公開するだけでなく、このカスタムCSSが自由に使えること、その際にこの条件が伴うことを同じように示してください。
（他のウィキからコピーしたことや、コピーした元を示す必要はありません。）

コピーしたカスタムCSSに変更を加えた場合は、カスタムCSSを公開するページにもその内容を忠実に反映してください。

なお、以上の条件に従うことは任意であり、必ずしも守る必要はありません。

CSS内容

/* フォントをメイリオに変更 */
@font-face {
    font-family: Meiryo;
    src: local("Meiryo");
    font-weight: 400;
}
 
@font-face {
    font-family: Meiryo;
    src: local("Meiryo Bold");
    font-weight: 700;
}
 
body {
    word-wrap: break-word;
    font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Meiryo,Yu Gothic,YuGothic,sans-serif;
}
 
/* 未作成ページへのリンクを赤色に */
div.atwiki-contents a.newlink:not(div.atwiki-contents h2>a.newlink) {
    color: #ba0000;
}
 
a.newlink:visited:not(div.atwiki-contents h2 > a.newlink:visited) {
    color: #a55858;
}
 
/* 訪問済みリンクは紫色 */
div.atwiki-contents
a:visited:not(.plugin_comment_num2_showall):not(div.atwiki-contents h2 > a:visited):not(.newlink)
, div.atwiki-side-contents
a:visited:not(.plugin_comment_num2_showall) {
    color: #5a3696;
}
 
.atwiki-contents a:visited img {
    border: 2px solid #5a3696;
}
 
.atwiki-contents a:visited>.atwiki-link-img-icon  {
    background-color: #5a3696;
}
 
/* 選択している間、リンクの色を変える */
a:active {
  color: #faa700;
}
 
/* 未作成ページへのリンクも選択中は黄色 */
div.atwiki-contents a.newlink:active:not(div.atwiki-contents h2>a.newlink) {
    color: #faa700;
}
 
a.newlink:visited:active:not(div.atwiki-contents h2 > a.newlink:visited) {
    color: #faa700;
}
 
/* 訪問済みリンクも選択中は黄色 */
div.atwiki-contents
a:visited:active:not(.plugin_comment_num2_showall):not(div.atwiki-contents h2 > a:visited):not(.newlink)
, div.atwiki-side-contents
a:visited:active:not(.plugin_comment_num2_showall) {
    color: #faa700;
}
 
.atwiki-contents a:active img {
  border: 2px solid #faa700;
}
 
.atwiki-contents a:active>.atwiki-link-img-icon  {
  background-color: #faa700;
}
 
/* 本文の色をもっと濃くする */
html .uk-flex, html .uk-flex-column, html .atwiki-container {
    color: #444;
}
 

ソースコードのハイライトにはhighlightプラグインを使用しています。
上記のCSSを公開する際は次のように記述してください。→#highlight(linenumber,css){{【ソースコード】}}