整備記録

2024-09-30

個人サイト覚書

個人サイトを立ち上げてから半年ほど経過しましたが、まだまだサイトいじりが楽しくてしかたない！
HTMLすらよくわかっていない素人のサイトがこの状態になるまでに、役立ったツールやお世話になったサイトをまとめました。
おまけとして、色々改造して出来上がったCSSスニペットを載せておきます。

2024/12/25追記：サイトテーマを水前源様のsimple kojinsiteに変更したので、以下の内容は過去のものになります。

目録非表示

2.4 いいねボタン for WordPress

2.5 EWWW Image Optimizer

5.1 「ポートフォリイオサイトSANKOU！」

5.2 「Web Design Garden」

5.3 「CSS Stock」

5.4 「Web Design Pallet」

WordPressテーマ

サイト立ち上げから現在までEASEL及び子テーマのcanvasを使用しています。

EASEL

Cocoon等に比べるとお手軽なカスタム機能が少ないので自分好みに育てるのが難しいですが、それでも作品ログの管理が圧倒的に楽！

とくにイラスト周りの管理がすごく良いです。描いた絵のあとがきみたいなのを書きたい人間なので…。

ショートコードで作品のジャンル別一覧を簡単に作成できるのもいいですよね。

使用プラグイン

SimpLy Gallery

画像展示用のプラグインは山ほどあるのですが、タブ切り替えができるのが魅力です。
オタク二次創作サイト的には作品傾向別に絞り込みしたいじゃないですか…！
スライダー機能もあるので、固定ページにも設置しています。

Smart Slider3

スライドショー機能を使いたくてトップページに設置しています。
ググるとこのプラグインは結構重いという噂なのですが、EASELや他のプラグインとの相性なのかこれしか上手く動作しなかったんですよね。

意外な使い道で、画像の全幅表示ができるのでジャンルごとの固定ページのアイキャッチとしても使っています。

一応EASELの標準機能でもアイキャッチ画像は全幅表示されるのですが、デバイスによってトリミングのされ方をコントロールできず。こちらの方が使い勝手が良いです。

Smart Slider3

dream.php

夢小説の名前変換機能に使っています。

やっぱり夢小説コンテンツを置くなら名前変換を使いたくて！

とは言っても私のサイトには名前変換夢小説まだ1作品しかないんですよね。

もっと書きたいなあ。

「ナマエちゃん！」

こんな感じ。

dream.php

いいねボタン for WordPress

個人サイトは数字に囚われずにやりたい方もいると思うので不要かもしれませんが、私は評価はあればあるだけ嬉しい方なので設置しています。

このプラグインは今年の7月に出たばかりなのですが本当に良くて！

拍手機能だけでも使えるし、お礼絵を設置したりコメントフォームも付けられるのでこれ1つで何役もこなしてくれます。

しかも製作者はWordpressテーマのEASELと同じくガタガタ様なので、EASELとの相性は抜群。

私は作品ごと、投稿ごとに設置していますが、固定ページごとなども設定できます。

[iine_for_wp]と表示した箇所にも設置できるのでかなり自由度も高く、CSSでのデザイン変更も簡単なのでおすすめです。

送信中です

※コメントは最大500文字、5回まで送信できます

送信中です送信しました！

こんな感じ。動作確認にどうぞ。

いいねボタン

EWWW Image Optimizer

絵描きあるあるだと思うのですが、描きやすさ重視でクソデカキャンバスサイズで描いた絵でも描き終わったらその勢いで投稿しちゃうじゃないですか。

そのままだとクソデカデータになるのですが、これがあると毎回サイズ変更しなくても勝手にやってくれます。しかもWebP化もできる。

ただしサイトをデータバックアップとして使っている方はサイズ縮小されるのが嫌だと思いますのでそこはご注意です。

EWWW Image Optimizer

アンインストールしたプラグイン

最初は使っていたけど後々「無くてもいいな」となったものです。

Fonts Plugin

フォントの変更は子テーマ少し弄るだけで簡単にできます。

プラグインをアンインストールしただけでかなりサイトが軽くなったので、テーマファイルを弄った方が断然良いと思います。

ただ私は「ヘッダーってどこにあるんだ」ということを理解するまでに大分時間がかかったので、簡単に手順をまとめておきます。

①Google fontでいい感じのフォントを探す

②「フォントを取得」⇒「埋め込みコードを取得」

こんな画面になると思うので、「HTMLの<head>にコードを埋め込む」の「コードをコピー」をクリックします。

③<head>内に追記する

ダッシュボードの「外観」⇒「テーマファイルエディター」⇒「テーマヘッダー」の一番最後に記述されている</head>の直前に、先ほどコピーしたコードを貼り付けます。

④CSSでフォントを指定する

同じく「テーマファイルエディター」⇒「スタイルシート」または「カスタマイズ」⇒「追加CSS」に以下のような記述をします。

body {
font-family: "Zen Maru Gothic", serif;
}

先ほどのGoogle fontのCSSクラスを参考に記述します。

ちなみに私は縦書きCSSクラスでは明朝体にしています。

Font Awesome

EASEL内のFont Awesomeのバージョンが少し古かったので入れていたのですが、これも先ほどと同様<head>内記述で十分です。

てがろぐ

「にししふぁくとりー」様で配布されている「てがろぐ」を利用しています。

サイトよりお手軽に呟けるのでTwitter廃人の移籍先として一番使いやすかったです。

スキンは、「何らかの配布場」の「tenran3」を使用しています。

2カラムでギャラリーモードもあるのが絵描き的には嬉しいですね。

モバイルメニューがレスポンシブデザインなのもポイント高いです。

<!-- wp:html --><!-- /wp:html -->

で<style>タグを囲うことで実装できます。

反省点

現状はロリポップのライトプランを契約中ですが、もしサーバーを選び直すなら、シンレンタルサーバーを選ぶと思います。

理由は成人指定作品の掲載ができることと、HPを読む限り速度も速そうだったので。

まあロリポップで3年契約してしまっていますから、しばらく成人指定作品は掲載できませんのでね…。現状はpixivに掲載しています。

スニペット配布

よろしければご利用ください。

埋め込みの横幅調整CSS

/* YouTubeサイズ調整
-------------------------------- */
.youtube__aspect-ratio {
    width: 100%;
    aspect-ratio: 16 / 9;
}
.youtube__aspect-ratio iframe {
    width: 100%;
    height: 100%;
}


/* アイフレーム調整（てがろぐ用）
-------------------------------- */
iframe {
  background-color:#FFF;
  border: none;
  border-radius: 10px;
	  overflow-y: scroll;
  /*スクロールバー非表示（IE・Edge）*/
  -ms-overflow-style: none;
  /*スクロールバー非表示（Firefox）*/
  scrollbar-width: none;
}
/*スクロールバー非表示（Chrome・Safari）*/
iframe::-webkit-scrollbar{
  display:none;
}

 /* ブログの横幅調整 */
.wp-embedded-content {
max-width: 100%;
}

縦書きCSS

/* 縦書き
-------------------------------- */
.tategaki {
 font-family:  'Zen Old Mincho', serif;
 writing-mode: vertical-rl;
 -ms-writing-mode: tb-rl;
 width: 100%;
    height: 100%;
 overflow-x: auto;
 border: none;
 padding: 1px;
 /*スクロールバー非表示（Firefox）*/
  scrollbar-width: none;
}
/*スクロールバー非表示（Chrome・Safari）*/
.tategaki::-webkit-scrollbar{
  display:none;align-content
}

/*スマホでは横スクロールにする*/
@media only screen and (min-width: 768px) {
.tategaki {
 font-family:  'Zen Old Mincho', serif;
 writing-mode: vertical-rl;
 -ms-writing-mode: tb-rl;
 width: 100%;
    height: 100%;
 border: none;
 padding: 1px;
 columns: 35em;
 column-gap: 20px;
 column-rule: 1px dashed #434343;
}

/* 短歌
-------------------------------- */
.tanka {
  text-align: center;
}
.tanka2 {
  writing-mode: vertical-rl;
  display: inline-block;
  text-align: initial;
}

送信中です

※コメントは最大500文字、5回まで送信できます

送信中です送信しました！