トップページ

 
 
 
 
◆ いろいろなカスタマイズ

●keyframeでアニメーションをつけるには、「AFFINGER5 管理＞その他＞演出」でkeyframeでのアニメーション設定ができる

※ idやclassを指定することでできる。afiingerで使用されているものは以下URLでクラス名などわかるが、開発者ツールでもわかる
https://affinger5.com/manual/post-7210/

●ポイント記事を作るには、投稿修正の「タグ＞ボックスデザイン＞マイボックス＞基本」でよく記事であるポイントの文章

などを追加できる。

※ Fontawesomeでアイコンを変更できる（アイコンはfontawesome4で変更できる）

https://fontawesome.com/v4.7.0/icons/

●ミニ吹き出しは、タグ＞テキストパーツ＞ミニ吹き出し＞基本で吹き出しを作成

●カスタムボタンは、タグ＞カスタムボタン＞ノーマル＞基本でカスタムボタンを設定

ボタン

●カテゴリーのやつは、タグ＞記事一覧＞カテゴリ一覧で設定（catにはカテゴリIDを指定する）

●カテゴリ一覧（スライドショー）は、タグ＞記事一覧＞カテゴリ一覧（スライドショー）をクリック

※ slides_to_showの"3,3,1"は大画面、中画面、小画面の順に指定(小はスマホとか)

●ページ(投稿とか固定ページの箇所。ヘッダーやサイドバーはこのaffingerではページではない。)の分割をするには、「タグ＞レイアウト＞PCとTab左右50%」で設定

※ PC(大画面)とTablet(中画面)の場合は左右で表示されるが、スマホ(小画面)は左と右が縦1列に並び、左が上で右が下に配置される。もしスマホでも左右で表示したい場合は全画面対象を選択

●記事のカード化は、「カード」をクリック。そしてidには記事idをセットする。

※ カードに表示される文章は、投稿で設定したタイトル(記事名)と、本文が表示されるが、本文を表示しない設定をするには、「AFFINGER5管理＞デザイン＞抜粋設定」でできる。

●会話を表示するには、「タグ＞会話吹き出し＞会話1」で表示

※ デフォルトは左側に表示されるが、右に表示したい場合は上のように、st-kaiwa rというようにr(right)をつけることで右側に表示ができる。

● プロフィールを作成

① ユーザーの該当プロフィールでtwitterや画像などを設定。
② 外観＞ウィジェットでサイドバートップに11_自己紹介を設定
③ 外観＞カスタマイズ＞[+]オプションカラーのサイト管理者紹介(プロフィールカード)で設定できる。①で設定した画像も設定する。
で設定できる。

●デフォルトではサイドバーに新着記事が表示される。これを非表示設定したい場合は、

「AFFINGER5管理＞トップページ＞記事一覧」で設定できる。

 
 

● 投稿と固定ページにはデフォルトでSNSボタンが表示されるが、大きさを変更したいなどある場合は、「FFINGER5管理＞SNS＞SNS設定」で設定する。

 

● 記事のカードや記事のトップで表示する画像（アイキャッチ）は以下で設定

①「投稿ページ＞どれかの記事＞右下のアイキャッチ画像」で設定する

② 「AFFINGER5 管理＞投稿・固定記事＞アイキャッチ設定」で設定

 
 

● メニューの作成

① メニューはカテゴリに紐づくので、「投稿＞カテゴリー」でカテゴリを作成
② 「外観＞メニュー」でカテゴリを追加していく。ずらして設定することで子要素のように、メニュー上でドロップダウンで階層を作ることができる。
③ 色は、
 
 

● コードを綺麗に表示する方法

① Highlighting code blockというプラグインをインストールして有効化する。
② 設定＞HCB設定が追加されるので、そこで設定を行う。
 

● 以下のような見出しの設定は、「スタイル＞見出し＞◯風」

h5

h4

h3

h2

h1

 

● syntax hilghterの設定(prism.js)

① 以下のサイトにアクセスして、prism.jsとprism.cssをダウンロードする。この際に、コードのテーマがあり現在のサイト上のコードは「Tomorrow Night」である。
そしてVersionは「Minified version」これを選択してダウンロードする。
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript
② 子テーマに先ほどダウンロードしたファイルをアップする。
③ functions.php内に以下のこーどを記載して、上記のファイルを読み込ませる。

function my_prism() {
    wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/prism.css' );
    wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/prism.js', array('jquery'), '1.9.0', true );
   }
add_action('wp_enqueue_scripts', 'my_prism');

 
 
 

● リストの作成は、「スタイル＞リスト」。まずリストの内容を記載して全てを洗濯してリスト化

 
 
 

● テーブルの作成は、「スタイル＞テーブル」。

 
 

● Latexの導入

 1. MathJax-LaTeX プラグインをインストール

2. をどこかに記載する

https://ramenhuhu.com/wordpress-mathjaxlatex

 3.