トップページ

Photoshop

Google Cloud Platform

IT

Premiere Pro

Illustrator

Firebase

学問系

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

●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%」で設定

このテキストは最後に消して下さい(50%)
左側

詳しくはコチラ



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

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


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

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

テスト1

テスト2

テスト3

テスト4

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

● プロフィールを作成

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

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

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

 
 

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

 

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

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

② 「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. 

 
 

© 2022 Yosshi Blog Powered by AFFINGER5